thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanaban-sorting

Browse Source
This commit is contained in:
gurusainath 2023-09-04 17:14:52 +05:30
commit e9b6f86882
50 changed files with 1281 additions and 704 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.gitpod.yml
View File

@ -1,11 +0,0 @@
# This configuration file was automatically generated by Gitpod.
# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
# and commit this file to your remote git repository to share the goodness with others.
# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
tasks:
- init: yarn install && yarn run build
command: yarn run start

13
apiserver/plane/api/views/cycle.py
View File

@ -333,7 +333,15 @@ class CycleViewSet(BaseViewSet):
workspace__slug=slug, project_id=project_id, pk=pk
)
request_data = request.data
if cycle.end_date is not None and cycle.end_date < timezone.now().date():
if "sort_order" in request_data:
# Can only change sort order
request_data = {
"sort_order": request_data.get("sort_order", cycle.sort_order)
}
else:
return Response(
{
"error": "The Cycle has already been completed so it cannot be edited"
@ -373,7 +381,9 @@ class CycleViewSet(BaseViewSet):
.annotate(assignee_id=F("assignees__id"))
.annotate(avatar=F("assignees__avatar"))
.annotate(display_name=F("assignees__display_name"))
.values("first_name", "last_name", "assignee_id", "avatar", "display_name")
.values(
"first_name", "last_name", "assignee_id", "avatar", "display_name"
)
.annotate(total_issues=Count("assignee_id"))
.annotate(
completed_issues=Count(
@ -709,7 +719,6 @@ class CycleDateCheckEndpoint(BaseAPIView):
class CycleFavoriteViewSet(BaseViewSet):
serializer_class = CycleFavoriteSerializer
model = CycleFavorite

40
apiserver/plane/api/views/issue.py
View File

@ -17,6 +17,7 @@ from django.db.models import (
When,
Exists,
Max,
IntegerField,
)
from django.core.serializers.json import DjangoJSONEncoder
from django.utils.decorators import method_decorator
@ -337,7 +338,11 @@ class UserWorkSpaceIssues(BaseAPIView):
issue_queryset = (
Issue.issue_objects.filter(
(Q(assignees__in=[request.user]) | Q(created_by=request.user) | Q(issue_subscribers__subscriber=request.user)),
(
Q(assignees__in=[request.user])
| Q(created_by=request.user)
| Q(issue_subscribers__subscriber=request.user)
),
workspace__slug=slug,
)
.annotate(
@ -1994,7 +1999,9 @@ class IssueVotePublicViewSet(BaseViewSet):
serializer = IssueVoteSerializer(issue_vote)
return Response(serializer.data, status=status.HTTP_201_CREATED)
except IntegrityError:
return Response({"error": "Reaction already exists"}, status=status.HTTP_400_BAD_REQUEST)
return Response(
{"error": "Reaction already exists"}, status=status.HTTP_400_BAD_REQUEST
)
except Exception as e:
capture_exception(e)
return Response(
@ -2172,9 +2179,32 @@ class ProjectIssuesPublicEndpoint(BaseAPIView):
issues = IssuePublicSerializer(issue_queryset, many=True).data
states = State.objects.filter(
workspace__slug=slug, project_id=project_id
).values("name", "group", "color", "id")
state_group_order = [
"backlog",
"unstarted",
"started",
"completed",
"cancelled",
]
states = (
State.objects.filter(
workspace__slug=slug,
project_id=project_id,
)
.annotate(
custom_order=Case(
*[
When(group=value, then=Value(index))
for index, value in enumerate(state_group_order)
],
default=Value(len(state_group_order)),
output_field=IntegerField(),
),
)
.values("name", "group", "color", "id")
.order_by("custom_order", "sequence")
)
labels = Label.objects.filter(
workspace__slug=slug, project_id=project_id

9
space/.env.example
View File

@ -1 +1,8 @@
NEXT_PUBLIC_API_BASE_URL=''
# Base url for the API requests
NEXT_PUBLIC_API_BASE_URL=""
# Public boards deploy URL
NEXT_PUBLIC_DEPLOY_URL="https://plane-space-dev.vercel.app"
# Google Client ID for Google OAuth
NEXT_PUBLIC_GOOGLE_CLIENTID=232920797020-235n93bn7hh7628vdd69hq873129ng4o.apps.googleusercontent.com
# Flag to toggle OAuth
NEXT_PUBLIC_ENABLE_OAUTH=1

2
space/components/accounts/index.ts
View File

@ -4,3 +4,5 @@ export * from "./email-reset-password-form";
export * from "./github-login-button";
export * from "./google-login";
export * from "./onboarding-form";
export * from "./sign-in";
export * from "./user-logged-in";

156
space/components/accounts/sign-in.tsx Normal file
View File

@ -0,0 +1,156 @@
import React from "react";
import Image from "next/image";
import { useRouter } from "next/router";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// services
import authenticationService from "services/authentication.service";
// hooks
import useToast from "hooks/use-toast";
// components
import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts";
// images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.svg";
export const SignInView = observer(() => {
const { user: userStore } = useMobxStore();
const router = useRouter();
const { next_path } = router.query;
const { setToastAlert } = useToast();
const onSignInError = (error: any) => {
setToastAlert({
title: "Error signing in!",
type: "error",
message: error?.error || "Something went wrong. Please try again later or contact the support team.",
});
};
const onSignInSuccess = (response: any) => {
const isOnboarded = response?.user?.onboarding_step?.profile_complete || false;
userStore.setCurrentUser(response?.user);
if (!isOnboarded) {
router.push(`/onboarding?next_path=${next_path}`);
return;
}
router.push((next_path ?? "/").toString());
};
const handleGoogleSignIn = async ({ clientId, credential }: any) => {
try {
if (clientId && credential) {
const socialAuthPayload = {
medium: "google",
credential,
clientId,
};
const response = await authenticationService.socialAuth(socialAuthPayload);
onSignInSuccess(response);
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
onSignInError(err);
}
};
const handleGitHubSignIn = async (credential: string) => {
try {
if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
const socialAuthPayload = {
medium: "github",
credential,
clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
};
const response = await authenticationService.socialAuth(socialAuthPayload);
onSignInSuccess(response);
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
onSignInError(err);
}
};
const handlePasswordSignIn = async (formData: any) => {
await authenticationService
.emailLogin(formData)
.then((response) => {
try {
if (response) {
onSignInSuccess(response);
}
} catch (err: any) {
onSignInError(err);
}
})
.catch((err) => onSignInError(err));
};
const handleEmailCodeSignIn = async (response: any) => {
try {
if (response) {
onSignInSuccess(response);
}
} catch (err: any) {
onSignInError(err);
}
};
return (
<div className="h-screen w-full overflow-hidden">
<div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
<div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
<div className="grid place-items-center bg-custom-background-100">
<div className="h-[30px] w-[30px]">
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
</div>
</div>
</div>
<div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
<div>
{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
Sign in to Plane
</h1>
<div className="flex flex-col divide-y divide-custom-border-200">
<div className="pb-7">
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
</div>
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
<GoogleLoginButton handleSignIn={handleGoogleSignIn} />
{/* <GithubLoginButton handleSignIn={handleGitHubSignIn} /> */}
</div>
</div>
</>
) : (
<EmailPasswordForm onSubmit={handlePasswordSignIn} />
)}
{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<p className="pt-16 text-custom-text-200 text-sm text-center">
By signing up, you agree to the{" "}
<a
href="https://plane.so/terms-and-conditions"
target="_blank"
rel="noopener noreferrer"
className="font-medium underline"
>
Terms & Conditions
</a>
</p>
) : null}
</div>
</div>
</div>
);
});

51
space/components/accounts/user-logged-in.tsx Normal file
View File

@ -0,0 +1,51 @@
import Image from "next/image";
// mobx
import { useMobxStore } from "lib/mobx/store-provider";
// assets
import UserLoggedInImage from "public/user-logged-in.svg";
import PlaneLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
export const UserLoggedIn = () => {
const { user: userStore } = useMobxStore();
const user = userStore.currentUser;
if (!user) return null;
return (
<div className="h-screen w-screen flex flex-col">
<div className="px-6 py-5 relative w-full flex items-center justify-between gap-4 border-b border-custom-border-200">
<div>
<Image src={PlaneLogo} alt="User already logged in" />
</div>
<div className="border border-custom-border-200 rounded flex items-center gap-2 p-2">
{user.avatar && user.avatar !== "" ? (
<div className="h-5 w-5 rounded-full">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
</div>
) : (
<div className="bg-custom-background-80 h-5 w-5 rounded-full grid place-items-center text-[10px] capitalize">
{(user.display_name ?? "U")[0]}
</div>
)}
<h6 className="text-xs font-medium">{user.display_name}</h6>
</div>
</div>
<div className="h-full w-full grid place-items-center p-6">
<div className="text-center">
<div className="h-52 w-52 bg-custom-background-80 rounded-full grid place-items-center mx-auto">
<div className="h-32 w-32">
<Image src={UserLoggedInImage} alt="User already logged in" />
</div>
</div>
<h1 className="text-3xl font-semibold mt-12">Logged in Successfully!</h1>
<p className="mt-4">
You{"'"}ve successfully logged in. Please enter the appropriate project URL to view the issue board.
</p>
</div>
</div>
</div>
);
};

6
space/components/icons/index.ts
View File

@ -1,5 +1 @@
export * from "./issue-group/backlog-state-icon";
export * from "./issue-group/unstarted-state-icon";
export * from "./issue-group/started-state-icon";
export * from "./issue-group/completed-state-icon";
export * from "./issue-group/cancelled-state-icon";
export * from "./state-group";

0
space/components/icons/issue-group/backlog-state-icon.tsx → space/components/icons/state-group/backlog-state-icon.tsx
View File

0
space/components/icons/issue-group/cancelled-state-icon.tsx → space/components/icons/state-group/cancelled-state-icon.tsx
View File

0
space/components/icons/issue-group/completed-state-icon.tsx → space/components/icons/state-group/completed-state-icon.tsx
View File

6
space/components/icons/state-group/index.ts Normal file
View File

@ -0,0 +1,6 @@
export * from "./backlog-state-icon";
export * from "./cancelled-state-icon";
export * from "./completed-state-icon";
export * from "./started-state-icon";
export * from "./state-group-icon";
export * from "./unstarted-state-icon";

0
space/components/icons/issue-group/started-state-icon.tsx → space/components/icons/state-group/started-state-icon.tsx
View File

29
space/components/icons/state-group/state-group-icon.tsx Normal file
View File

@ -0,0 +1,29 @@
// icons
import {
BacklogStateIcon,
CancelledStateIcon,
CompletedStateIcon,
StartedStateIcon,
UnstartedStateIcon,
} from "components/icons";
import { TIssueGroupKey } from "types/issue";
type Props = {
stateGroup: TIssueGroupKey;
color: string;
className?: string;
height?: string;
width?: string;
};
export const StateGroupIcon: React.FC<Props> = ({ stateGroup, className, color, height = "12px", width = "12px" }) => {
if (stateGroup === "backlog")
return <BacklogStateIcon className={className} color={color} height={height} width={width} />;
else if (stateGroup === "cancelled")
return <CancelledStateIcon className={className} color={color} height={height} width={width} />;
else if (stateGroup === "completed")
return <CompletedStateIcon className={className} color={color} height={height} width={width} />;
else if (stateGroup === "started")
return <StartedStateIcon className={className} color={color} height={height} width={width} />;
else return <UnstartedStateIcon className={className} color={color} height={height} width={width} />;
};

0
space/components/icons/issue-group/unstarted-state-icon.tsx → space/components/icons/state-group/unstarted-state-icon.tsx
View File

6
space/components/issues/board-views/kanban/header.tsx
View File

@ -1,11 +1,11 @@
"use client";
// mobx react lite
import { observer } from "mobx-react-lite";
// interfaces
import { IIssueState } from "types/issue";
// constants
import { issueGroupFilter } from "constants/data";
// icons
import { StateGroupIcon } from "components/icons";
// mobx hook
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
@ -20,7 +20,7 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
return (
<div className="pb-2 px-2 flex items-center">
<div className="w-4 h-4 flex justify-center items-center flex-shrink-0">
<stateGroup.icon />
<StateGroupIcon stateGroup={state.group} color={state.color} />
</div>
<div className="font-semibold text-custom-text-200 capitalize ml-2 mr-3 truncate">{state?.name}</div>
<span className="text-custom-text-300 rounded-full flex-shrink-0">

6
space/components/issues/board-views/list/block.tsx
View File

@ -6,15 +6,12 @@ import { IssueBlockPriority } from "components/issues/board-views/block-priority
import { IssueBlockState } from "components/issues/board-views/block-state";
import { IssueBlockLabels } from "components/issues/board-views/block-labels";
import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
import { IssueBlockUpVotes } from "components/issues/board-views/block-upvotes";
import { IssueBlockDownVotes } from "components/issues/board-views/block-downvotes";
// mobx hook
import { useMobxStore } from "lib/mobx/store-provider";
// interfaces
import { IIssue } from "types/issue";
// store
import { RootStore } from "store/root";
import { IssueVotes } from "components/issues/peek-overview";
export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
const { issue } = props;
@ -40,9 +37,6 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
// router.push(`/${workspace_slug?.toString()}/${project_slug}?board=${board?.toString()}&peekId=${issue.id}`);
};
const totalUpVotes = issue.votes.filter((v) => v.vote === 1);
const totalDownVotes = issue.votes.filter((v) => v.vote === -1);
return (
<div className="flex items-center px-6 py-3.5 relative gap-10 bg-custom-background-100">
<div className="relative flex items-center gap-5 w-full flex-grow overflow-hidden">

6
space/components/issues/board-views/list/header.tsx
View File

@ -1,9 +1,9 @@
"use client";
// mobx react lite
import { observer } from "mobx-react-lite";
// interfaces
import { IIssueState } from "types/issue";
// icons
import { StateGroupIcon } from "components/icons";
// constants
import { issueGroupFilter } from "constants/data";
// mobx hook
@ -20,7 +20,7 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
return (
<div className="px-6 py-2 flex items-center">
<div className="w-4 h-4 flex justify-center items-center">
<stateGroup.icon />
<StateGroupIcon stateGroup={state.group} color={state.color} />
</div>
<div className="font-semibold capitalize ml-2 mr-3">{state?.name}</div>
<div className="text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>

2
space/components/issues/board-views/list/index.tsx
View File

@ -1,4 +1,3 @@
import { useEffect } from "react";
import { observer } from "mobx-react-lite";
// components
import { IssueListHeader } from "components/issues/board-views/list/header";
@ -9,7 +8,6 @@ import { IIssueState, IIssue } from "types/issue";
import { useMobxStore } from "lib/mobx/store-provider";
// store
import { RootStore } from "store/root";
import { useRouter } from "next/router";
export const IssueListView = observer(() => {
const { issue: issueStore }: RootStore = useMobxStore();

9
space/components/issues/peek-overview/header.tsx
View File

@ -1,7 +1,5 @@
import React from "react";
import { useRouter } from "next/router";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// hooks
@ -48,15 +46,12 @@ export const PeekOverviewHeader: React.FC<Props> = (props) => {
const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
const router = useRouter();
const { workspace_slug } = router.query;
const { setToastAlert } = useToast();
const handleCopyLink = () => {
const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
const urlToCopy = window.location.href;
copyTextToClipboard(`${originURL}/${workspace_slug}/projects/${issueDetails?.project}/`).then(() => {
copyTextToClipboard(urlToCopy).then(() => {
setToastAlert({
type: "success",
title: "Link copied!",

23
space/components/issues/peek-overview/issue-properties.tsx
View File

@ -1,21 +1,15 @@
// headless ui
import { Disclosure } from "@headlessui/react";
// import { getStateGroupIcon } from "components/icons";
// hooks
import useToast from "hooks/use-toast";
// icons
import { Icon } from "components/ui";
import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper";
// helpers
import { renderDateFormat } from "constants/helpers";
// types
import { IIssue } from "types/issue";
import { IPeekMode } from "store/issue_details";
// constants
import { issueGroupFilter, issuePriorityFilter } from "constants/data";
import { useEffect } from "react";
import { renderDateFormat } from "constants/helpers";
import { IPeekMode } from "store/issue_details";
import { useRouter } from "next/router";
import { RootStore } from "store/root";
import { useMobxStore } from "lib/mobx/store-provider";
type Props = {
issueDetails: IIssue;
@ -37,11 +31,6 @@ const validDate = (date: any, state: string): string => {
export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mode }) => {
const { setToastAlert } = useToast();
const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
const router = useRouter();
const { workspaceSlug } = router.query;
const startDate = issueDetails.start_date;
const targetDate = issueDetails.target_date;
@ -57,11 +46,9 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
const priority = issueDetails.priority ? issuePriorityFilter(issueDetails.priority) : null;
const handleCopyLink = () => {
const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
const urlToCopy = window.location.href;
copyTextToClipboard(
`${originURL}/${workspaceSlug}/projects/${issueDetails.project}/issues/${issueDetails.id}`
).then(() => {
copyTextToClipboard(urlToCopy).then(() => {
setToastAlert({
type: "success",
title: "Link copied!",

8
space/components/issues/peek-overview/layout.tsx
View File

@ -65,8 +65,7 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
return (
<>
<Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
<Dialog as="div" onClose={handleClose}>
<Transition.Child
as={React.Fragment}
enter="transition-transform duration-300"
@ -80,11 +79,10 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
<SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
</Dialog.Panel>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
<Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Dialog as="div" onClose={handleClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
@ -96,7 +94,6 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
>
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
@ -121,7 +118,6 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
</>

13
space/components/views/home.tsx Normal file
View File

@ -0,0 +1,13 @@
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { SignInView, UserLoggedIn } from "components/accounts";
export const HomeView = observer(() => {
const { user: userStore } = useMobxStore();
if (!userStore.currentUser) return <SignInView />;
return <UserLoggedIn />;
});

1
space/components/views/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./home";

2
space/components/views/project-details.tsx
View File

@ -67,7 +67,7 @@ export const ProjectDetailsView = observer(() => {
</div>
)}
{projectStore?.activeBoard === "kanban" && (
<div className="relative w-full h-full mx-auto px-9 py-5">
<div className="relative w-full h-full mx-auto p-5">
<IssueKanbanView />
</div>
)}

18
space/layouts/project-layout.tsx
View File

@ -13,18 +13,20 @@ const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
<IssueNavbar />
</div>
<div className="w-full h-full relative bg-custom-background-90 overflow-hidden">{children}</div>
<div className="absolute z-[99999] bottom-[10px] right-[10px] bg-custom-background-100 rounded-sm shadow-lg border border-custom-border-300">
<Link href="https://plane.so" as="https://plane.so">
<a className="p-1 px-2 flex items-center gap-1" target="_blank">
<div className="w-[24px] h-[24px] relative flex justify-center items-center">
<Image src={planeLogo} alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
<a
href="https://plane.so"
className="fixed !z-[999999] bottom-2.5 right-5 bg-custom-background-100 rounded shadow-custom-shadow-2xs border border-custom-border-200 py-1 px-2 flex items-center gap-1"
target="_blank"
rel="noreferrer noopener"
>
<div className="w-6 h-6 relative grid place-items-center">
<Image src={planeLogo} alt="Plane logo" className="w-6 h-6" height="24" width="24" />
</div>
<div className="text-xs">
Powered by <b>Plane Deploy</b>
Powered by <span className="font-semibold">Plane Deploy</span>
</div>
</a>
</Link>
</div>
</div>
);

12
space/pages/_app.tsx
View File

@ -12,6 +12,8 @@ import MobxStoreInit from "lib/mobx/store-init";
// constants
import { SITE_NAME, SITE_DESCRIPTION, SITE_URL, TWITTER_USER_NAME, SITE_KEYWORDS, SITE_TITLE } from "constants/seo";
const prefix = parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0") === 0 ? "/" : "/spaces/";
function MyApp({ Component, pageProps }: AppProps) {
return (
<MobxStoreProvider>
@ -25,11 +27,11 @@ function MyApp({ Component, pageProps }: AppProps) {
<meta property="og:description" content={SITE_DESCRIPTION} />
<meta name="keywords" content={SITE_KEYWORDS} />
<meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
<link rel="apple-touch-icon" sizes="180x180" href="/spaces/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/spaces/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/spaces/favicon/favicon-16x16.png" />
<link rel="manifest" href="/spaces/site.webmanifest.json" />
<link rel="shortcut icon" href="/spaces/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href={`${prefix}favicon/apple-touch-icon.png`} />
<link rel="icon" type="image/png" sizes="32x32" href={`${prefix}favicon/favicon-32x32.png`} />
<link rel="icon" type="image/png" sizes="16x16" href={`${prefix}favicon/favicon-16x16.png`} />
<link rel="manifest" href={`${prefix}site.webmanifest.json`} />
<link rel="shortcut icon" href={`${prefix}favicon/favicon.ico`} />
</Head>
<ToastContextProvider>
<ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>

156
space/pages/index.tsx
View File

@ -1,156 +1,8 @@
import React, { useEffect } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
// assets
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.svg";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// services
import authenticationService from "services/authentication.service";
// hooks
import useToast from "hooks/use-toast";
import React from "react";
// components
import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts";
import { HomeView } from "components/views";
const HomePage = () => {
const { user: userStore } = useMobxStore();
const router = useRouter();
const { next_path } = router.query;
const { setToastAlert } = useToast();
const onSignInError = (error: any) => {
setToastAlert({
title: "Error signing in!",
type: "error",
message: error?.error || "Something went wrong. Please try again later or contact the support team.",
});
};
const onSignInSuccess = (response: any) => {
const isOnboarded = response?.user?.onboarding_step?.profile_complete || false;
userStore.setCurrentUser(response?.user);
if (!isOnboarded) {
router.push(`/onboarding?next_path=${next_path}`);
return;
}
router.push((next_path ?? "/").toString());
};
const handleGoogleSignIn = async ({ clientId, credential }: any) => {
try {
if (clientId && credential) {
const socialAuthPayload = {
medium: "google",
credential,
clientId,
};
const response = await authenticationService.socialAuth(socialAuthPayload);
onSignInSuccess(response);
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
onSignInError(err);
}
};
const handleGitHubSignIn = async (credential: string) => {
try {
if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
const socialAuthPayload = {
medium: "github",
credential,
clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
};
const response = await authenticationService.socialAuth(socialAuthPayload);
onSignInSuccess(response);
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
onSignInError(err);
}
};
const handlePasswordSignIn = async (formData: any) => {
await authenticationService
.emailLogin(formData)
.then((response) => {
try {
if (response) {
onSignInSuccess(response);
}
} catch (err: any) {
onSignInError(err);
}
})
.catch((err) => onSignInError(err));
};
const handleEmailCodeSignIn = async (response: any) => {
try {
if (response) {
onSignInSuccess(response);
}
} catch (err: any) {
onSignInError(err);
}
};
return (
<div className="h-screen w-full overflow-hidden">
<div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
<div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
<div className="grid place-items-center bg-custom-background-100">
<div className="h-[30px] w-[30px]">
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
</div>
</div>
</div>
<div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
<div>
{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
Sign in to Plane
</h1>
<div className="flex flex-col divide-y divide-custom-border-200">
<div className="pb-7">
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
</div>
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
<GoogleLoginButton handleSignIn={handleGoogleSignIn} />
{/* <GithubLoginButton handleSignIn={handleGitHubSignIn} /> */}
</div>
</div>
</>
) : (
<EmailPasswordForm onSubmit={handlePasswordSignIn} />
)}
{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<p className="pt-16 text-custom-text-200 text-sm text-center">
By signing up, you agree to the{" "}
<a
href="https://plane.so/terms-and-conditions"
target="_blank"
rel="noopener noreferrer"
className="font-medium underline"
>
Terms & Conditions
</a>
</p>
) : null}
</div>
</div>
</div>
);
};
const HomePage = () => <HomeView />;
export default HomePage;

13
space/public/site.webmanifest.json Normal file
View File

@ -0,0 +1,13 @@
{
"name": "Plane Space",
"short_name": "Plane Space",
"description": "Plane helps you plan your issues, cycles, and product modules.",
"start_url": ".",
"display": "standalone",
"background_color": "#f9fafb",
"theme_color": "#3f76ff",
"icons": [
{ "src": "/favicon/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}

3
space/public/user-logged-in.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="125" height="125" viewBox="0 0 125 125" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5747 100.561C16.241 100.561 15.123 100.11 14.2207 99.2074C13.3184 98.3051 12.8672 97.187 12.8672 95.8533V88.9824C12.8672 86.218 13.5633 83.8025 14.9556 81.7359C16.3478 79.6694 18.1957 78.0518 20.4995 76.8832C24.9266 74.6263 29.6007 72.8 34.5217 71.4044C39.4429 70.0089 45.2455 69.3112 51.9296 69.3112C54.5337 69.3112 56.956 69.4164 59.1962 69.6267C61.4364 69.837 63.528 70.1525 65.4711 70.5732L58.5603 77.484C57.6054 77.3104 56.5721 77.2069 55.4603 77.1736C54.3485 77.1401 53.1716 77.1234 51.9296 77.1234C45.7664 77.1234 40.3661 77.8112 35.7286 79.1867C31.0912 80.5622 27.21 82.1181 24.085 83.8542C22.9032 84.4885 22.0401 85.2297 21.4958 86.0777C20.9517 86.9258 20.6796 87.8941 20.6796 88.9824V92.7484H52.23L60.0423 100.561H17.5747ZM80.3283 102.484C79.7051 102.484 79.1231 102.384 78.5822 102.183C78.0413 101.983 77.5241 101.636 77.0306 101.143L66.9135 91.0257C66.1925 90.3046 65.8235 89.3981 65.8068 88.3064C65.7901 87.2147 66.159 86.2916 66.9135 85.5371C67.6681 84.7825 68.5829 84.4052 69.6579 84.4052C70.7329 84.4052 71.6477 84.7825 72.4022 85.5371L80.335 93.4698L103.893 69.9121C104.614 69.1909 105.52 68.822 106.612 68.8053C107.704 68.7886 108.627 69.1575 109.381 69.9121C110.136 70.6666 110.513 71.5814 110.513 72.6564C110.513 73.7314 110.136 74.6461 109.381 75.4007L83.6302 101.152C83.1428 101.639 82.6264 101.983 82.0811 102.183C81.5358 102.384 80.9515 102.484 80.3283 102.484ZM51.9296 60.8974C46.9166 60.8974 42.6252 59.1125 39.0553 55.5427C35.4855 51.9728 33.7007 47.6814 33.7007 42.6685C33.7007 37.6555 35.4855 33.3641 39.0553 29.7943C42.6252 26.2244 46.9166 24.4395 51.9296 24.4395C56.9425 24.4395 61.2339 26.2244 64.8038 29.7943C68.3737 33.3641 70.1586 37.6555 70.1586 42.6685C70.1586 47.6814 68.3737 51.9728 64.8038 55.5427C61.2339 59.1125 56.9425 60.8974 51.9296 60.8974ZM51.9296 53.0852C54.7941 53.0852 57.2464 52.0652 59.2863 50.0253C61.3263 47.9853 62.3462 45.5331 62.3462 42.6685C62.3462 39.8039 61.3263 37.3517 59.2863 35.3117C57.2464 33.2718 54.7941 32.2518 51.9296 32.2518C49.065 32.2518 46.6127 33.2718 44.5728 35.3117C42.5329 37.3517 41.5129 39.8039 41.5129 42.6685C41.5129 45.5331 42.5329 47.9853 44.5728 50.0253C46.6127 52.0652 49.065 53.0852 51.9296 53.0852Z" fill="#9D9D9D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

26
web/.env.example Normal file
View File

@ -0,0 +1,26 @@
# Base url for the API requests
NEXT_PUBLIC_API_BASE_URL=""
# Extra image domains that need to be added for Next Image
NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS=
# Google Client ID for Google OAuth
NEXT_PUBLIC_GOOGLE_CLIENTID=""
# GitHub App ID for GitHub OAuth
NEXT_PUBLIC_GITHUB_ID=""
# GitHub App Name for GitHub Integration
NEXT_PUBLIC_GITHUB_APP_NAME=""
# Sentry DSN for error monitoring
NEXT_PUBLIC_SENTRY_DSN=""
# Enable/Disable OAUTH - default 0 for selfhosted instance
NEXT_PUBLIC_ENABLE_OAUTH=0
# Enable/Disable Sentry
NEXT_PUBLIC_ENABLE_SENTRY=0
# Enable/Disable session recording
NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
# Enable/Disable event tracking
NEXT_PUBLIC_TRACK_EVENTS=0
# Slack Client ID for Slack Integration
NEXT_PUBLIC_SLACK_CLIENT_ID=""
# For Telemetry, set it to "app.plane.so"
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=""
# Public boards deploy URL
NEXT_PUBLIC_DEPLOY_URL=""

9
web/components/cycles/gantt-chart/cycle-issues-layout.tsx
View File

@ -5,6 +5,7 @@ import useIssuesView from "hooks/use-issues-view";
import useUser from "hooks/use-user";
import useGanttChartCycleIssues from "hooks/gantt-chart/cycle-issues-view";
import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
import useProjectDetails from "hooks/use-project-details";
// components
import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
@ -18,6 +19,7 @@ export const CycleIssuesGanttChartView = () => {
const { orderBy } = useIssuesView();
const { user } = useUser();
const { projectDetails } = useProjectDetails();
const { ganttIssues, mutateGanttIssues } = useGanttChartCycleIssues(
workspaceSlug as string,
@ -25,6 +27,8 @@ export const CycleIssuesGanttChartView = () => {
cycleId as string
);
const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
return (
<div className="w-full h-full">
<GanttChartRoot
@ -37,7 +41,10 @@ export const CycleIssuesGanttChartView = () => {
}
SidebarBlockRender={IssueGanttSidebarBlock}
BlockRender={IssueGanttBlock}
enableReorder={orderBy === "sort_order"}
enableBlockLeftResize={isAllowed}
enableBlockRightResize={isAllowed}
enableBlockMove={isAllowed}
enableReorder={orderBy === "sort_order" && isAllowed}
bottomSpacing
/>
</div>

5
web/components/cycles/gantt-chart/cycles-list-layout.tsx
View File

@ -8,6 +8,7 @@ import { KeyedMutator } from "swr";
import cyclesService from "services/cycles.service";
// hooks
import useUser from "hooks/use-user";
import useProjectDetails from "hooks/use-project-details";
// components
import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
import { CycleGanttBlock, CycleGanttSidebarBlock } from "components/cycles";
@ -24,6 +25,7 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
const { workspaceSlug } = router.query;
const { user } = useUser();
const { projectDetails } = useProjectDetails();
const handleCycleUpdate = (cycle: ICycle, payload: IBlockUpdateData) => {
if (!workspaceSlug || !user) return;
@ -71,6 +73,8 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
}))
: [];
const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
return (
<div className="w-full h-full overflow-y-auto">
<GanttChartRoot
@ -83,6 +87,7 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
enableBlockLeftResize={false}
enableBlockRightResize={false}
enableBlockMove={false}
enableReorder={isAllowed}
/>
</div>
);

9
web/components/issues/gantt-chart/layout.tsx
View File

@ -5,6 +5,7 @@ import useIssuesView from "hooks/use-issues-view";
import useUser from "hooks/use-user";
import useGanttChartIssues from "hooks/gantt-chart/issue-view";
import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
import useProjectDetails from "hooks/use-project-details";
// components
import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
@ -18,12 +19,15 @@ export const IssueGanttChartView = () => {
const { orderBy } = useIssuesView();
const { user } = useUser();
const { projectDetails } = useProjectDetails();
const { ganttIssues, mutateGanttIssues } = useGanttChartIssues(
workspaceSlug as string,
projectId as string
);
const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
return (
<div className="w-full h-full">
<GanttChartRoot
@ -36,7 +40,10 @@ export const IssueGanttChartView = () => {
}
BlockRender={IssueGanttBlock}
SidebarBlockRender={IssueGanttSidebarBlock}
enableReorder={orderBy === "sort_order"}
enableBlockLeftResize={isAllowed}
enableBlockRightResize={isAllowed}
enableBlockMove={isAllowed}
enableReorder={orderBy === "sort_order" && isAllowed}
bottomSpacing
/>
</div>

7
web/components/issues/peek-overview/issue-properties.tsx
View File

@ -50,12 +50,9 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
maxDate?.setDate(maxDate.getDate());
const handleCopyLink = () => {
const originURL =
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
const urlToCopy = window.location.href;
copyTextToClipboard(
`${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`
).then(() => {
copyTextToClipboard(urlToCopy).then(() => {
setToastAlert({
type: "success",
title: "Link copied!",

9
web/components/modules/gantt-chart/module-issues-layout.tsx
View File

@ -7,6 +7,7 @@ import useIssuesView from "hooks/use-issues-view";
import useUser from "hooks/use-user";
import useGanttChartModuleIssues from "hooks/gantt-chart/module-issues-view";
import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
import useProjectDetails from "hooks/use-project-details";
// components
import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
@ -22,6 +23,7 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
const { orderBy } = useIssuesView();
const { user } = useUser();
const { projectDetails } = useProjectDetails();
const { ganttIssues, mutateGanttIssues } = useGanttChartModuleIssues(
workspaceSlug as string,
@ -29,6 +31,8 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
moduleId as string
);
const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
return (
<div className="w-full h-full">
<GanttChartRoot
@ -41,7 +45,10 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
}
SidebarBlockRender={IssueGanttSidebarBlock}
BlockRender={IssueGanttBlock}
enableReorder={orderBy === "sort_order"}
enableBlockLeftResize={isAllowed}
enableBlockRightResize={isAllowed}
enableBlockMove={isAllowed}
enableReorder={orderBy === "sort_order" && isAllowed}
bottomSpacing
/>
</div>

9
web/components/modules/gantt-chart/modules-list-layout.tsx
View File

@ -1,7 +1,6 @@
import { FC } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { KeyedMutator } from "swr";
@ -9,6 +8,7 @@ import { KeyedMutator } from "swr";
import modulesService from "services/modules.service";
// hooks
import useUser from "hooks/use-user";
import useProjectDetails from "hooks/use-project-details";
// components
import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
import { ModuleGanttBlock, ModuleGanttSidebarBlock } from "components/modules";
@ -25,6 +25,7 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
const { workspaceSlug } = router.query;
const { user } = useUser();
const { projectDetails } = useProjectDetails();
const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => {
if (!workspaceSlug || !user) return;
@ -78,6 +79,8 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
}))
: [];
const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
return (
<div className="w-full h-full overflow-y-auto">
<GanttChartRoot
@ -87,6 +90,10 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
SidebarBlockRender={ModuleGanttSidebarBlock}
BlockRender={ModuleGanttBlock}
enableBlockLeftResize={isAllowed}
enableBlockRightResize={isAllowed}
enableBlockMove={isAllowed}
enableReorder={isAllowed}
/>
</div>
);

220
web/components/project/confirm-project-leave-modal.tsx Normal file
View File

@ -0,0 +1,220 @@
import React from "react";
// next imports
import { useRouter } from "next/router";
// swr
import { mutate } from "swr";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// ui
import { DangerButton, Input, SecondaryButton } from "components/ui";
// fetch-keys
import { PROJECTS_LIST } from "constants/fetch-keys";
// mobx react lite
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
// hooks
import useToast from "hooks/use-toast";
import useUser from "hooks/use-user";
// types
import { IProject } from "types";
type FormData = {
projectName: string;
confirmLeave: string;
};
const defaultValues: FormData = {
projectName: "",
confirmLeave: "",
};
export const ConfirmProjectLeaveModal: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query;
const store: RootStore = useMobxStore();
const { project } = store;
const { user } = useUser();
const { setToastAlert } = useToast();
const {
control,
formState: { isSubmitting },
handleSubmit,
reset,
watch,
} = useForm({ defaultValues });
const handleClose = () => {
project.handleProjectLeaveModal(null);
reset({ ...defaultValues });
};
project?.projectLeaveDetails &&
console.log("project leave confirmation modal", project?.projectLeaveDetails);
const onSubmit = async (data: any) => {
if (data) {
if (data.projectName === project?.projectLeaveDetails?.name) {
if (data.confirmLeave === "Leave Project") {
return project
.leaveProject(
project.projectLeaveDetails.workspaceSlug.toString(),
project.projectLeaveDetails.id.toString(),
user
)
.then((res) => {
mutate<IProject[]>(
PROJECTS_LIST(project.projectLeaveDetails.workspaceSlug.toString(), {
is_favorite: "all",
}),
(prevData) => prevData?.filter((project: IProject) => project.id !== data.id),
false
);
handleClose();
router.push(`/${workspaceSlug}/projects`);
})
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: "Something went wrong please try again later.",
});
});
} else {
setToastAlert({
type: "error",
title: "Error!",
message: "Please confirm leaving the project by typing the 'Leave Project'.",
});
}
} else {
setToastAlert({
type: "error",
title: "Error!",
message: "Please enter the project name as shown in the description.",
});
}
} else {
setToastAlert({
type: "error",
title: "Error!",
message: "Please fill all fields.",
});
}
};
return (
<Transition.Root show={project.projectLeaveModal} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-500/20 p-4">
<ExclamationTriangleIcon
className="h-6 w-6 text-red-600"
aria-hidden="true"
/>
</span>
<span className="flex items-center justify-start">
<h3 className="text-xl font-medium 2xl:text-2xl">Leave Project</h3>
</span>
</div>
<span>
<p className="text-sm leading-7 text-custom-text-200">
Are you sure you want to leave the project -
<span className="font-medium text-custom-text-100">{` "${project?.projectLeaveDetails?.name}" `}</span>
? All of the issues associated with you will become inaccessible.
</p>
</span>
<div className="text-custom-text-200">
<p className="break-words text-sm ">
Enter the project name{" "}
<span className="font-medium text-custom-text-100">
{project?.projectLeaveDetails?.name}
</span>{" "}
to continue:
</p>
<Controller
control={control}
name="projectName"
render={({ field: { onChange, value } }) => (
<Input
type="text"
placeholder="Enter project name"
className="mt-2"
value={value}
onChange={onChange}
/>
)}
/>
</div>
<div className="text-custom-text-200">
<p className="text-sm">
To confirm, type{" "}
<span className="font-medium text-custom-text-100">Leave Project</span> below:
</p>
<Controller
control={control}
name="confirmLeave"
render={({ field: { onChange, value } }) => (
<Input
type="text"
placeholder="Enter 'leave project'"
className="mt-2"
onChange={onChange}
value={value}
/>
)}
/>
</div>
<div className="flex justify-end gap-2">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<DangerButton type="submit" loading={isSubmitting}>
{isSubmitting ? "Leaving..." : "Leave Project"}
</DangerButton>
</div>
</form>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
});

1
web/components/project/index.ts
View File

@ -5,3 +5,4 @@ export * from "./settings-header";
export * from "./single-integration-card";
export * from "./single-project-card";
export * from "./single-sidebar-project";
export * from "./confirm-project-leave-modal";

52
web/components/project/publish-project/modal.tsx
View File

@ -6,7 +6,14 @@ import { Controller, useForm } from "react-hook-form";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// ui components
import { ToggleSwitch, PrimaryButton, SecondaryButton, Icon, DangerButton } from "components/ui";
import {
ToggleSwitch,
PrimaryButton,
SecondaryButton,
Icon,
DangerButton,
Loader,
} from "components/ui";
import { CustomPopover } from "./popover";
// mobx react lite
import { observer } from "mobx-react-lite";
@ -146,22 +153,14 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
const projectId = projectPublish.project_id;
return projectPublish
.createProjectSettingsAsync(
workspaceSlug.toString(),
projectId?.toString() ?? "",
payload,
user
)
.then((response) => {
.publishProject(workspaceSlug.toString(), projectId?.toString() ?? "", payload, user)
.then((res) => {
mutateProjectDetails();
handleClose();
if (projectId) window.open(`${plane_deploy_url}/${workspaceSlug}/${projectId}`, "_blank");
return response;
return res;
})
.catch((error) => {
console.error("error", error);
return error;
});
.catch((err) => err);
};
const handleUpdatePublishSettings = async (payload: IProjectPublishSettings) => {
@ -199,7 +198,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
setIsUnpublishing(true);
projectPublish
.deleteProjectSettingsAsync(
.unPublishProject(
workspaceSlug.toString(),
projectPublish.project_id as string,
publishId,
@ -329,7 +328,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
{/* heading */}
<div className="px-6 pt-4 flex items-center justify-between gap-2">
<h5 className="font-semibold text-xl inline-block">Publish</h5>
{watch("id") && (
{projectPublish.projectPublishSettings !== "not-initialized" && (
<DangerButton
onClick={() => handleUnpublishProject(watch("id") ?? "")}
className="!px-2 !py-1.5"
@ -341,7 +340,17 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
</div>
{/* content */}
<div className="space-y-3 px-6">
{projectPublish.fetchSettingsLoader ? (
<Loader className="px-6 space-y-4">
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
</Loader>
) : (
<div className="px-6">
{watch("id") && (
<>
<div className="border border-custom-border-100 bg-custom-background-80 rounded-md px-3 py-2 relative flex gap-2 items-center">
<div className="truncate flex-grow text-sm">
{`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
@ -352,17 +361,16 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
/>
</div>
</div>
{watch("id") && (
<div className="flex items-center gap-1 text-custom-primary-100">
<div className="flex items-center gap-1 text-custom-primary-100 mt-3">
<div className="w-5 h-5 overflow-hidden flex items-center">
<Icon iconName="radio_button_checked" className="!text-lg" />
</div>
<div className="text-sm">This project is live on web</div>
</div>
</>
)}
<div className="space-y-4">
<div className="space-y-4 mt-6">
<div className="relative flex justify-between items-center gap-2">
<div className="text-sm">Views</div>
<Controller
@ -418,7 +426,6 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
)}
/>
</div>
<div className="relative flex justify-between items-center gap-2">
<div className="text-sm">Allow comments</div>
<Controller
@ -483,6 +490,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
</div> */}
</div>
</div>
)}
{/* modal handlers */}
<div className="border-t border-custom-border-200 px-6 py-5 relative flex justify-between items-center">
@ -490,6 +498,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
<Icon iconName="public" className="!text-base" />
<div className="text-sm">Anyone with the link can access</div>
</div>
{!projectPublish.fetchSettingsLoader && (
<div className="relative flex items-center gap-2">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
{watch("id") ? (
@ -506,6 +515,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
</PrimaryButton>
)}
</div>
)}
</div>
</form>
</Dialog.Panel>

5
web/components/project/send-project-invitation-modal.tsx
View File

@ -85,7 +85,8 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
});
const uninvitedPeople = people?.filter((person) => {
const isInvited = members?.find((member) => member.display_name === person.member.display_name);
const isInvited = members?.find((member) => member.memberId === person.member.id);
return !isInvited;
});
@ -143,7 +144,7 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
content: (
<div className="flex items-center gap-2">
<Avatar user={person.member} />
{person.member.display_name}
{person.member.display_name} ({person.member.first_name + " " + person.member.last_name})
</div>
),
}));

3
web/components/project/sidebar-list.tsx
View File

@ -35,6 +35,7 @@ export const ProjectSidebarList: FC = () => {
const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
const [deleteProjectModal, setDeleteProjectModal] = useState(false);
const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
const [projectToLeaveId, setProjectToLeaveId] = useState<string | null>(null);
// router
const [isScrolled, setIsScrolled] = useState(false);
@ -217,6 +218,7 @@ export const ProjectSidebarList: FC = () => {
snapshot={snapshot}
handleDeleteProject={() => handleDeleteProject(project)}
handleCopyText={() => handleCopyText(project.id)}
handleProjectLeave={() => setProjectToLeaveId(project.id)}
shortContextMenu
/>
</div>
@ -285,6 +287,7 @@ export const ProjectSidebarList: FC = () => {
provided={provided}
snapshot={snapshot}
handleDeleteProject={() => handleDeleteProject(project)}
handleProjectLeave={() => setProjectToLeaveId(project.id)}
handleCopyText={() => handleCopyText(project.id)}
/>
</div>

42
web/components/project/single-sidebar-project.tsx
View File

@ -44,6 +44,7 @@ type Props = {
snapshot?: DraggableStateSnapshot;
handleDeleteProject: () => void;
handleCopyText: () => void;
handleProjectLeave: () => void;
shortContextMenu?: boolean;
};
@ -80,18 +81,20 @@ const navigation = (workspaceSlug: string, projectId: string) => [
},
];
export const SingleSidebarProject: React.FC<Props> = observer(
({
export const SingleSidebarProject: React.FC<Props> = observer((props) => {
const {
project,
sidebarCollapse,
provided,
snapshot,
handleDeleteProject,
handleCopyText,
handleProjectLeave,
shortContextMenu = false,
}) => {
} = props;
const store: RootStore = useMobxStore();
const { projectPublish } = store;
const { projectPublish, project: projectStore } = store;
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@ -100,6 +103,8 @@ export const SingleSidebarProject: React.FC<Props> = observer(
const isAdmin = project.member_role === 20;
const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
const handleAddToFavorites = () => {
if (!workspaceSlug) return;
@ -284,15 +289,31 @@ export const SingleSidebarProject: React.FC<Props> = observer(
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem
onClick={() =>
router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)
}
onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}
>
<div className="flex items-center justify-start gap-2">
<Icon iconName="settings" className="!text-base !leading-4" />
<span>Settings</span>
</div>
</CustomMenu.MenuItem>
{/* leave project */}
{isViewerOrGuest && (
<CustomMenu.MenuItem
onClick={() =>
projectStore.handleProjectLeaveModal({
id: project?.id,
name: project?.name,
workspaceSlug: workspaceSlug as string,
})
}
>
<div className="flex items-center justify-start gap-2">
<Icon iconName="logout" className="!text-base !leading-4" />
<span>Leave Project</span>
</div>
</CustomMenu.MenuItem>
)}
</CustomMenu>
)}
</div>
@ -305,9 +326,7 @@ export const SingleSidebarProject: React.FC<Props> = observer(
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Disclosure.Panel
className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}
>
<Disclosure.Panel className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}>
{navigation(workspaceSlug as string, project?.id).map((item) => {
if (
(item.name === "Cycles" && !project.cycle_view) ||
@ -351,5 +370,4 @@ export const SingleSidebarProject: React.FC<Props> = observer(
)}
</Disclosure>
);
}
);
});

8
web/components/views/gantt-chart.tsx
View File

@ -6,6 +6,7 @@ import { useRouter } from "next/router";
import useGanttChartViewIssues from "hooks/gantt-chart/view-issues-view";
import useUser from "hooks/use-user";
import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
import useProjectDetails from "hooks/use-project-details";
// components
import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
@ -19,6 +20,7 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
const { workspaceSlug, projectId, viewId } = router.query;
const { user } = useUser();
const { projectDetails } = useProjectDetails();
const { ganttIssues, mutateGanttIssues } = useGanttChartViewIssues(
workspaceSlug as string,
@ -26,6 +28,8 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
viewId as string
);
const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
return (
<div className="w-full h-full">
<GanttChartRoot
@ -38,6 +42,10 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
}
SidebarBlockRender={IssueGanttSidebarBlock}
BlockRender={IssueGanttBlock}
enableBlockLeftResize={isAllowed}
enableBlockRightResize={isAllowed}
enableBlockMove={isAllowed}
enableReorder={isAllowed}
/>
</div>
);

4
web/layouts/app-layout/app-sidebar.tsx
View File

@ -9,6 +9,7 @@ import {
} from "components/workspace";
import { ProjectSidebarList } from "components/project";
import { PublishProjectModal } from "components/project/publish-project/modal";
import { ConfirmProjectLeaveModal } from "components/project/confirm-project-leave-modal";
// mobx react lite
import { observer } from "mobx-react-lite";
// mobx store
@ -38,7 +39,10 @@ const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSide
<ProjectSidebarList />
<WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
</div>
{/* publish project modal */}
<PublishProjectModal />
{/* project leave modal */}
<ConfirmProjectLeaveModal />
</div>
);
});

26
web/services/project.service.ts
View File

@ -21,7 +21,7 @@ const { NEXT_PUBLIC_API_BASE_URL } = process.env;
const trackEvent =
process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
class ProjectServices extends APIService {
export class ProjectServices extends APIService {
constructor() {
super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
}
@ -142,6 +142,30 @@ class ProjectServices extends APIService {
});
}
async leaveProject(
workspaceSlug: string,
projectId: string,
user: ICurrentUserResponse
): Promise<any> {
return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/leave/`)
.then((response) => {
if (trackEvent)
trackEventServices.trackProjectEvent(
"PROJECT_MEMBER_LEAVE",
{
workspaceSlug,
projectId,
...response?.data,
},
user
);
return response?.data;
})
.catch((error) => {
throw error?.response?.data;
});
}
async joinProjects(data: any): Promise<any> {
return this.post("/api/users/me/invitations/projects/", data)
.then((response) => response?.data)

9
web/services/track-event.service.ts
View File

@ -35,7 +35,8 @@ type ProjectEventType =
| "CREATE_PROJECT"
| "UPDATE_PROJECT"
| "DELETE_PROJECT"
| "PROJECT_MEMBER_INVITE";
| "PROJECT_MEMBER_INVITE"
| "PROJECT_MEMBER_LEAVE";
type IssueEventType = "ISSUE_CREATE" | "ISSUE_UPDATE" | "ISSUE_DELETE";
@ -163,7 +164,11 @@ class TrackEventServices extends APIService {
user: ICurrentUserResponse | undefined
): Promise<any> {
let payload: any;
if (eventName !== "DELETE_PROJECT" && eventName !== "PROJECT_MEMBER_INVITE")
if (
eventName !== "DELETE_PROJECT" &&
eventName !== "PROJECT_MEMBER_INVITE" &&
eventName !== "PROJECT_MEMBER_LEAVE"
)
payload = {
workspaceId: data?.workspace_detail?.id,
workspaceName: data?.workspace_detail?.name,

47
web/store/project-publish.tsx
View File

@ -21,7 +21,8 @@ export interface IProjectPublishSettings {
}
export interface IProjectPublishStore {
loader: boolean;
generalLoader: boolean;
fetchSettingsLoader: boolean;
error: any | null;
projectPublishModal: boolean;
@ -35,7 +36,7 @@ export interface IProjectPublishStore {
project_slug: string,
user: any
) => Promise<void>;
createProjectSettingsAsync: (
publishProject: (
workspace_slug: string,
project_slug: string,
data: IProjectPublishSettings,
@ -48,7 +49,7 @@ export interface IProjectPublishStore {
data: IProjectPublishSettings,
user: any
) => Promise<void>;
deleteProjectSettingsAsync: (
unPublishProject: (
workspace_slug: string,
project_slug: string,
project_publish_id: string,
@ -57,7 +58,8 @@ export interface IProjectPublishStore {
}
class ProjectPublishStore implements IProjectPublishStore {
loader: boolean = false;
generalLoader: boolean = false;
fetchSettingsLoader: boolean = false;
error: any | null = null;
projectPublishModal: boolean = false;
@ -72,7 +74,8 @@ class ProjectPublishStore implements IProjectPublishStore {
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observable
loader: observable,
generalLoader: observable,
fetchSettingsLoader: observable,
error: observable,
projectPublishModal: observable,
@ -80,6 +83,10 @@ class ProjectPublishStore implements IProjectPublishStore {
projectPublishSettings: observable.ref,
// action
handleProjectModal: action,
getProjectSettingsAsync: action,
publishProject: action,
updateProjectSettingsAsync: action,
unPublishProject: action,
// computed
});
@ -100,7 +107,7 @@ class ProjectPublishStore implements IProjectPublishStore {
getProjectSettingsAsync = async (workspace_slug: string, project_slug: string, user: any) => {
try {
this.loader = true;
this.fetchSettingsLoader = true;
this.error = null;
const response = await this.projectPublishService.getProjectSettingsAsync(
@ -128,30 +135,30 @@ class ProjectPublishStore implements IProjectPublishStore {
runInAction(() => {
this.projectPublishSettings = _projectPublishSettings;
this.loader = false;
this.fetchSettingsLoader = false;
this.error = null;
});
} else {
this.projectPublishSettings = "not-initialized";
this.loader = false;
this.fetchSettingsLoader = false;
this.error = null;
}
return response;
} catch (error) {
this.loader = false;
this.fetchSettingsLoader = false;
this.error = error;
return error;
}
};
createProjectSettingsAsync = async (
publishProject = async (
workspace_slug: string,
project_slug: string,
data: IProjectPublishSettings,
user: any
) => {
try {
this.loader = true;
this.generalLoader = true;
this.error = null;
const response = await this.projectPublishService.createProjectSettingsAsync(
@ -174,14 +181,14 @@ class ProjectPublishStore implements IProjectPublishStore {
runInAction(() => {
this.projectPublishSettings = _projectPublishSettings;
this.loader = false;
this.generalLoader = false;
this.error = null;
});
return response;
}
} catch (error) {
this.loader = false;
this.generalLoader = false;
this.error = error;
return error;
}
@ -195,7 +202,7 @@ class ProjectPublishStore implements IProjectPublishStore {
user: any
) => {
try {
this.loader = true;
this.generalLoader = true;
this.error = null;
const response = await this.projectPublishService.updateProjectSettingsAsync(
@ -219,27 +226,27 @@ class ProjectPublishStore implements IProjectPublishStore {
runInAction(() => {
this.projectPublishSettings = _projectPublishSettings;
this.loader = false;
this.generalLoader = false;
this.error = null;
});
return response;
}
} catch (error) {
this.loader = false;
this.generalLoader = false;
this.error = error;
return error;
}
};
deleteProjectSettingsAsync = async (
unPublishProject = async (
workspace_slug: string,
project_slug: string,
project_publish_id: string,
user: any
) => {
try {
this.loader = true;
this.generalLoader = true;
this.error = null;
const response = await this.projectPublishService.deleteProjectSettingsAsync(
@ -251,13 +258,13 @@ class ProjectPublishStore implements IProjectPublishStore {
runInAction(() => {
this.projectPublishSettings = "not-initialized";
this.loader = false;
this.generalLoader = false;
this.error = null;
});
return response;
} catch (error) {
this.loader = false;
this.generalLoader = false;
this.error = error;
return error;
}

86
web/store/project.ts Normal file
View File

@ -0,0 +1,86 @@
import { observable, action, computed, makeObservable, runInAction } from "mobx";
// types
import { RootStore } from "./root";
// services
import { ProjectServices } from "services/project.service";
export interface IProject {
id: string;
name: string;
workspaceSlug: string;
}
export interface IProjectStore {
loader: boolean;
error: any | null;
projectLeaveModal: boolean;
projectLeaveDetails: IProject | any;
handleProjectLeaveModal: (project: IProject | null) => void;
leaveProject: (workspace_slug: string, project_slug: string, user: any) => Promise<void>;
}
class ProjectStore implements IProjectStore {
loader: boolean = false;
error: any | null = null;
projectLeaveModal: boolean = false;
projectLeaveDetails: IProject | null = null;
// root store
rootStore;
// service
projectService;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observable
loader: observable,
error: observable,
projectLeaveModal: observable,
projectLeaveDetails: observable.ref,
// action
handleProjectLeaveModal: action,
leaveProject: action,
// computed
});
this.rootStore = _rootStore;
this.projectService = new ProjectServices();
}
handleProjectLeaveModal = (project: IProject | null = null) => {
if (project && project?.id) {
this.projectLeaveModal = !this.projectLeaveModal;
this.projectLeaveDetails = project;
} else {
this.projectLeaveModal = !this.projectLeaveModal;
this.projectLeaveDetails = null;
}
};
leaveProject = async (workspace_slug: string, project_slug: string, user: any) => {
try {
this.loader = true;
this.error = null;
const response = await this.projectService.leaveProject(workspace_slug, project_slug, user);
runInAction(() => {
this.loader = false;
this.error = null;
});
return response;
} catch (error) {
this.loader = false;
this.error = error;
return error;
}
};
}
export default ProjectStore;

5
web/store/root.ts
View File

@ -3,15 +3,17 @@ import { enableStaticRendering } from "mobx-react-lite";
// store imports
import UserStore from "./user";
import ThemeStore from "./theme";
import IssuesStore from "./issues";
import ProjectStore, { IProjectStore } from "./project";
import ProjectPublishStore, { IProjectPublishStore } from "./project-publish";
import KanbanStore from "./kanban";
import IssuesStore from "./issues";
enableStaticRendering(typeof window === "undefined");
export class RootStore {
user;
theme;
project: IProjectStore;
projectPublish: IProjectPublishStore;
issues: IssuesStore;
kanban: KanbanStore;
@ -19,6 +21,7 @@ export class RootStore {
constructor() {
this.user = new UserStore(this);
this.theme = new ThemeStore(this);
this.project = new ProjectStore(this);
this.projectPublish = new ProjectPublishStore(this);
this.issues = new IssuesStore(this);
this.kanban = new KanbanStore(this);