github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

pull from branch and resolve conflicts

Browse Source
This commit is contained in:
rahulramesha 2023-12-11 20:26:54 +05:30
commit 3269b5a0cf
76 changed files with 1608 additions and 427 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apiserver/plane/app/views/oauth.py
View File

@ -167,12 +167,6 @@ class OauthEndpoint(BaseAPIView):
]
)
if not GOOGLE_CLIENT_ID or not GITHUB_CLIENT_ID:
return Response(
{"error": "Github or Google login is not configured"},
status=status.HTTP_400_BAD_REQUEST,
)
if not medium or not id_token:
return Response(
{

6
space/components/accounts/github-login-button.tsx → space/components/accounts/github-sign-in.tsx
View File

@ -8,12 +8,12 @@ import { useTheme } from "next-themes";
import githubBlackImage from "public/logos/github-black.svg";
import githubWhiteImage from "public/logos/github-white.svg";
export interface GithubLoginButtonProps {
type Props = {
handleSignIn: React.Dispatch<string>;
clientId: string;
}
};
export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
export const GitHubSignInButton: FC<Props> = (props) => {
const { handleSignIn, clientId } = props;
// states
const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);

9
space/components/accounts/google-login.tsx → space/components/accounts/google-sign-in.tsx
View File

@ -1,12 +1,12 @@
import { FC, useEffect, useRef, useCallback, useState } from "react";
import Script from "next/script";
export interface IGoogleLoginButton {
type Props = {
clientId: string;
handleSignIn: React.Dispatch<any>;
}
};
export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
export const GoogleSignInButton: FC<Props> = (props) => {
const { handleSignIn, clientId } = props;
// refs
const googleSignInButton = useRef<HTMLDivElement>(null);
@ -30,6 +30,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
size: "large",
logo_alignment: "center",
text: "signin_with",
width: 384,
} as GsiButtonConfiguration // customization attributes
);
} catch (err) {
@ -53,7 +54,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
return (
<>
<Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
<div className="w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
<div className="!w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
</>
);
};

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

@ -1,5 +1,5 @@
export * from "./github-login-button";
export * from "./google-login";
export * from "./github-sign-in";
export * from "./google-sign-in";
export * from "./onboarding-form";
export * from "./user-logged-in";
export * from "./sign-in-forms";

8
space/components/accounts/sign-in-forms/o-auth-options.tsx
View File

@ -7,7 +7,7 @@ import { AppConfigService } from "services/app-config.service";
// hooks
import useToast from "hooks/use-toast";
// components
import { GithubLoginButton, GoogleLoginButton } from "components/accounts";
import { GitHubSignInButton, GoogleSignInButton } from "components/accounts";
type Props = {
handleSignInRedirection: () => Promise<void>;
@ -73,12 +73,12 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
<p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">Or continue with</p>
<hr className="w-full border-onboarding-border-100" />
</div>
<div className="mx-auto flex flex-col items-center gap-2 overflow-hidden pt-7 sm:w-96 sm:flex-row">
<div className="mx-auto space-y-4 overflow-hidden pt-7 sm:w-96">
{envConfig?.google_client_id && (
<GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
<GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
)}
{envConfig?.github_client_id && (
<GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
<GitHubSignInButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
)}
</div>
</>

6
space/components/common/latest-feature-block.tsx
View File

@ -20,7 +20,11 @@ export const LatestFeatureBlock = () => {
</Link>
</p>
</div>
<div className="mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 bg-onboarding-background-100 object-cover sm:h-52 sm:w-96">
<div
className={`mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 object-cover sm:h-52 sm:w-96 ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
}`}
>
<div className="h-[90%]">
<Image
src={latestFeatures}

6
web/components/account/github-login-button.tsx → web/components/account/github-sign-in.tsx
View File

@ -9,12 +9,12 @@ import { useTheme } from "next-themes";
import githubLightModeImage from "/public/logos/github-black.png";
import githubDarkModeImage from "/public/logos/github-dark.svg";
export interface GithubLoginButtonProps {
type Props = {
handleSignIn: React.Dispatch<string>;
clientId: string;
}
};
export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
export const GitHubSignInButton: FC<Props> = (props) => {
const { handleSignIn, clientId } = props;
// states
const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);

9
web/components/account/google-login.tsx → web/components/account/google-sign-in.tsx
View File

@ -1,12 +1,12 @@
import { FC, useEffect, useRef, useCallback, useState } from "react";
import Script from "next/script";
export interface IGoogleLoginButton {
type Props = {
handleSignIn: React.Dispatch<any>;
clientId: string;
}
};
export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
export const GoogleSignInButton: FC<Props> = (props) => {
const { handleSignIn, clientId } = props;
// refs
const googleSignInButton = useRef<HTMLDivElement>(null);
@ -30,6 +30,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
size: "large",
logo_alignment: "center",
text: "signin_with",
width: 384,
} as GsiButtonConfiguration // customization attributes
);
} catch (err) {
@ -53,7 +54,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
return (
<>
<Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
<div className="w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
<div className="!w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
</>
);
};

4
web/components/account/index.ts
View File

@ -1,5 +1,5 @@
export * from "./sign-in-forms";
export * from "./deactivate-account-modal";
export * from "./github-login-button";
export * from "./google-login";
export * from "./github-sign-in";
export * from "./google-sign-in";
export * from "./email-signup-form";

8
web/components/account/sign-in-forms/o-auth-options.tsx
View File

@ -6,7 +6,7 @@ import { AuthService } from "services/auth.service";
// hooks
import useToast from "hooks/use-toast";
// components
import { GithubLoginButton, GoogleLoginButton } from "components/account";
import { GitHubSignInButton, GoogleSignInButton } from "components/account";
type Props = {
handleSignInRedirection: () => Promise<void>;
@ -73,12 +73,12 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
<p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">Or continue with</p>
<hr className="w-full border-onboarding-border-100" />
</div>
<div className="mx-auto flex flex-col items-center gap-2 overflow-hidden pt-7 sm:w-96 sm:flex-row">
<div className="mx-auto mt-7 space-y-4 overflow-hidden sm:w-96">
{envConfig?.google_client_id && (
<GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
<GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
)}
{envConfig?.github_client_id && (
<GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
<GitHubSignInButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
)}
</div>
</>

8
web/components/common/latest-feature-block.tsx
View File

@ -20,14 +20,18 @@ export const LatestFeatureBlock = () => {
</Link>
</p>
</div>
<div className="mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 bg-onboarding-background-100 object-cover sm:h-52 sm:w-96">
<div
className={`mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 object-cover sm:h-52 sm:w-96 ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
}`}
>
<div className="h-[90%]">
<Image
src={latestFeatures}
alt="Plane Issues"
className={`-mt-2 ml-10 h-full rounded-md ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
} `}
}`}
/>
</div>
</div>

10
web/components/core/modals/gpt-assistant-modal.tsx
View File

@ -9,7 +9,7 @@ import useToast from "hooks/use-toast";
// ui
import { Button, Input } from "@plane/ui";
// components
import { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
import { RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
// types
import { IIssue, IPageBlock } from "types";
@ -42,6 +42,7 @@ export const GptAssistantModal: React.FC<Props> = (props) => {
const { workspaceSlug } = router.query;
const editorRef = useRef<any>(null);
const responseRef = useRef<any>(null);
const { setToastAlert } = useToast();
@ -115,6 +116,10 @@ export const GptAssistantModal: React.FC<Props> = (props) => {
editorRef.current?.setEditorValue(htmlContent ?? `<p>${content}</p>`);
}, [htmlContent, editorRef, content]);
useEffect(() => {
responseRef.current?.setEditorValue(`<p>${response}</p>`);
}, [response, responseRef]);
return (
<div
className={`absolute ${inset} z-20 flex w-full flex-col space-y-4 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${
@ -137,11 +142,12 @@ export const GptAssistantModal: React.FC<Props> = (props) => {
{response !== "" && (
<div className="page-block-section text-sm">
Response:
<RichReadOnlyEditor
<RichReadOnlyEditorWithRef
value={`<p>${response}</p>`}
customClassName="-mx-3 -my-3"
noBorder
borderOnFocus={false}
ref={responseRef}
/>
</div>
)}

30
web/components/cycles/cycles-board-card.tsx
View File

@ -23,6 +23,7 @@ import { ICycle } from "types";
import { useMobxStore } from "lib/mobx/store-provider";
// constants
import { CYCLE_STATUS } from "constants/cycle";
import { EUserWorkspaceRoles } from "constants/workspace";
export interface ICyclesBoardCard {
workspaceSlug: string;
@ -36,6 +37,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
const {
cycle: cycleStore,
trackEvent: { setTrackElement },
user: userStore,
} = useMobxStore();
// toast
const { setToastAlert } = useToast();
@ -49,6 +51,9 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
const startDate = new Date(cycle.start_date ?? "");
const isDateValid = cycle.start_date || cycle.end_date;
const { currentProjectRole } = userStore;
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
const router = useRouter();
const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
@ -68,8 +73,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
? cycleTotalIssues === 0
? "0 Issue"
: cycleTotalIssues === cycle.completed_issues
? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
: `${cycle.completed_issues}/${cycleTotalIssues} Issues`
? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
: `${cycle.completed_issues}/${cycleTotalIssues} Issues`
: "0 Issue";
const handleCopyText = (e: MouseEvent<HTMLButtonElement>) => {
@ -235,17 +240,18 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
<span className="text-xs text-custom-text-400">No due date</span>
)}
<div className="z-10 flex items-center gap-1.5">
{cycle.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}>
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites}>
<Star className="h-3.5 w-3.5 text-custom-text-200" />
</button>
)}
{isEditingAllowed &&
(cycle.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}>
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites}>
<Star className="h-3.5 w-3.5 text-custom-text-200" />
</button>
))}
<CustomMenu width="auto" ellipsis className="z-10">
{!isCompleted && (
{!isCompleted && isEditingAllowed && (
<>
<CustomMenu.MenuItem onClick={handleEditCycle}>
<span className="flex items-center justify-start gap-2">

27
web/components/cycles/cycles-list-item.tsx
View File

@ -24,6 +24,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
import { ICycle } from "types";
// constants
import { CYCLE_STATUS } from "constants/cycle";
import { EUserWorkspaceRoles } from "constants/workspace";
type TCyclesListItem = {
cycle: ICycle;
@ -41,6 +42,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
const {
cycle: cycleStore,
trackEvent: { setTrackElement },
user: userStore,
} = useMobxStore();
// toast
const { setToastAlert } = useToast();
@ -53,6 +55,9 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
const endDate = new Date(cycle.end_date ?? "");
const startDate = new Date(cycle.start_date ?? "");
const { currentProjectRole } = userStore;
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
const router = useRouter();
const cycleTotalIssues =
@ -226,19 +231,19 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
)}
</div>
</Tooltip>
{cycle.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}>
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites}>
<Star className="h-3.5 w-3.5 text-custom-text-200" />
</button>
)}
{isEditingAllowed &&
(cycle.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}>
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites}>
<Star className="h-3.5 w-3.5 text-custom-text-200" />
</button>
))}
<CustomMenu width="auto" ellipsis>
{!isCompleted && (
{!isCompleted && isEditingAllowed && (
<>
<CustomMenu.MenuItem onClick={handleEditCycle}>
<span className="flex items-center justify-start gap-2">

12
web/components/cycles/form.tsx
View File

@ -97,7 +97,7 @@ export const CycleForm: React.FC<Props> = (props) => {
id="cycle_description"
name="description"
placeholder="Description..."
className="h-24 w-full resize-none text-sm"
className="!h-24 w-full resize-none text-sm"
hasError={Boolean(errors?.description)}
value={value}
onChange={onChange}
@ -135,18 +135,12 @@ export const CycleForm: React.FC<Props> = (props) => {
</div>
</div>
</div>
<div className="mt-5 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-100 pt-5 ">
<div className="flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-100 pt-5 ">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
{data
? isSubmitting
? "Updating Cycle..."
: "Update Cycle"
: isSubmitting
? "Creating Cycle..."
: "Create Cycle"}
{data ? (isSubmitting ? "Updating" : "Update cycle") : isSubmitting ? "Creating" : "Create cycle"}
</Button>
</div>
</form>

8
web/components/cycles/modal.tsx
View File

@ -49,11 +49,11 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
state: "SUCCESS",
});
})
.catch(() => {
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: "Error in creating cycle. Please try again.",
message: err.detail ?? "Error in creating cycle. Please try again.",
});
postHogEventTracker("CYCLE_CREATE", {
state: "FAILED",
@ -73,11 +73,11 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
message: "Cycle updated successfully.",
});
})
.catch(() => {
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: "Error in updating cycle. Please try again.",
message: err.detail ?? "Error in updating cycle. Please try again.",
});
});
};

28
web/components/headers/cycle-issues.tsx
View File

@ -19,6 +19,8 @@ import { renderEmoji } from "helpers/emoji.helper";
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
import { EUserWorkspaceRoles } from "constants/workspace";
import { EFilterType } from "store_legacy/issues/types";
import { EProjectStore } from "store_legacy/command-palette.store";
@ -42,6 +44,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
commandPalette: commandPaletteStore,
trackEvent: { setTrackElement },
cycleIssuesFilter: { issueFilters, updateFilters },
user: { currentProjectRole },
} = useMobxStore();
const activeLayout = projectIssueFiltersStore.issueFilters?.displayFilters?.layout;
@ -99,6 +102,9 @@ export const CycleIssuesHeader: React.FC = observer(() => {
const cyclesList = cycleStore.projectCycles;
const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;
const canUserCreateIssue =
currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
return (
<>
<ProjectAnalyticsModal
@ -190,16 +196,18 @@ export const CycleIssuesHeader: React.FC = observer(() => {
<Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
Analytics
</Button>
<Button
onClick={() => {
setTrackElement("CYCLE_PAGE_HEADER");
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.CYCLE);
}}
size="sm"
prependIcon={<Plus />}
>
Add Issue
</Button>
{canUserCreateIssue && (
<Button
onClick={() => {
setTrackElement("CYCLE_PAGE_HEADER");
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.CYCLE);
}}
size="sm"
prependIcon={<Plus />}
>
Add Issue
</Button>
)}
<button
type="button"
className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"

33
web/components/headers/cycles.tsx
View File

@ -8,6 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
// helpers
import { renderEmoji } from "helpers/emoji.helper";
import { EUserWorkspaceRoles } from "constants/workspace";
export const CyclesHeader: FC = observer(() => {
// router
@ -16,11 +17,15 @@ export const CyclesHeader: FC = observer(() => {
// store
const {
project: projectStore,
user: { currentProjectRole },
commandPalette: commandPaletteStore,
trackEvent: { setTrackElement },
} = useMobxStore();
const { currentProjectDetails } = projectStore;
const canUserCreateCycle =
currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
@ -50,19 +55,21 @@ export const CyclesHeader: FC = observer(() => {
</Breadcrumbs>
</div>
</div>
<div className="flex items-center gap-3">
<Button
variant="primary"
size="sm"
prependIcon={<Plus />}
onClick={() => {
setTrackElement("CYCLES_PAGE_HEADER");
commandPaletteStore.toggleCreateCycleModal(true);
}}
>
Add Cycle
</Button>
</div>
{canUserCreateCycle && (
<div className="flex items-center gap-3">
<Button
variant="primary"
size="sm"
prependIcon={<Plus />}
onClick={() => {
setTrackElement("CYCLES_PAGE_HEADER");
commandPaletteStore.toggleCreateCycleModal(true);
}}
>
Add Cycle
</Button>
</div>
)}
</div>
);
});

28
web/components/headers/module-issues.tsx
View File

@ -19,6 +19,8 @@ import { renderEmoji } from "helpers/emoji.helper";
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
import { EUserWorkspaceRoles } from "constants/workspace";
// store
import { EFilterType } from "store_legacy/issues/types";
import { EProjectStore } from "store_legacy/command-palette.store";
@ -41,6 +43,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
trackEvent: { setTrackElement },
projectLabel: { projectLabels },
moduleIssuesFilter: { issueFilters, updateFilters },
user: { currentProjectRole },
} = useMobxStore();
const { currentProjectDetails } = projectStore;
@ -100,6 +103,9 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
const modulesList = projectId ? moduleStore.modules[projectId.toString()] : undefined;
const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;
const canUserCreateIssue =
currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
return (
<>
<ProjectAnalyticsModal
@ -191,16 +197,18 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
<Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
Analytics
</Button>
<Button
onClick={() => {
setTrackElement("MODULE_PAGE_HEADER");
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.MODULE);
}}
size="sm"
prependIcon={<Plus />}
>
Add Issue
</Button>
{canUserCreateIssue && (
<Button
onClick={() => {
setTrackElement("MODULE_PAGE_HEADER");
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.MODULE);
}}
size="sm"
prependIcon={<Plus />}
>
Add Issue
</Button>
)}
<button
type="button"
className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"

28
web/components/headers/modules-list.tsx
View File

@ -11,17 +11,25 @@ import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
import { renderEmoji } from "helpers/emoji.helper";
// constants
import { MODULE_VIEW_LAYOUTS } from "constants/module";
import { EUserWorkspaceRoles } from "constants/workspace";
export const ModulesListHeader: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// store
const { project: projectStore, commandPalette: commandPaletteStore } = useMobxStore();
const {
project: projectStore,
commandPalette: commandPaletteStore,
user: { currentProjectRole },
} = useMobxStore();
const { currentProjectDetails } = projectStore;
const { storedValue: modulesView, setValue: setModulesView } = useLocalStorage("modules_view", "grid");
const canUserCreateModule =
currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
@ -72,14 +80,16 @@ export const ModulesListHeader: React.FC = observer(() => {
</Tooltip>
))}
</div>
<Button
variant="primary"
size="sm"
prependIcon={<Plus />}
onClick={() => commandPaletteStore.toggleCreateModuleModal(true)}
>
Add Module
</Button>
{canUserCreateModule && (
<Button
variant="primary"
size="sm"
prependIcon={<Plus />}
onClick={() => commandPaletteStore.toggleCreateModuleModal(true)}
>
Add Module
</Button>
)}
</div>
</div>
);

27
web/components/headers/project-issues.tsx
View File

@ -14,6 +14,7 @@ import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
import { EUserWorkspaceRoles } from "constants/workspace";
// helper
import { renderEmoji } from "helpers/emoji.helper";
import { EFilterType } from "store_legacy/issues/types";
@ -36,6 +37,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
// issue filters
projectIssuesFilter: { issueFilters, updateFilters },
projectIssues: {},
user: { currentProjectRole },
} = useMobxStore();
const activeLayout = issueFilters?.displayFilters?.layout;
@ -87,6 +89,9 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
const deployUrl = process.env.NEXT_PUBLIC_DEPLOY_URL;
const canUserCreateIssue =
currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
return (
<>
<ProjectAnalyticsModal
@ -200,16 +205,18 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
<Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
Analytics
</Button>
<Button
onClick={() => {
setTrackElement("PROJECT_PAGE_HEADER");
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
}}
size="sm"
prependIcon={<Plus />}
>
Add Issue
</Button>
{canUserCreateIssue && (
<Button
onClick={() => {
setTrackElement("PROJECT_PAGE_HEADER");
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
}}
size="sm"
prependIcon={<Plus />}
>
Add Issue
</Button>
)}
</div>
</div>
</>

30
web/components/headers/project-view-issues.tsx
View File

@ -1,6 +1,7 @@
import { useCallback } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Plus } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
@ -14,9 +15,10 @@ import { renderEmoji } from "helpers/emoji.helper";
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
import { EUserWorkspaceRoles } from "constants/workspace";
import { EFilterType } from "store_legacy/issues/types";
import { EProjectStore } from "store_legacy/command-palette.store";
import { Plus } from "lucide-react";
export const ProjectViewIssuesHeader: React.FC = observer(() => {
const router = useRouter();
@ -35,6 +37,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
viewIssuesFilter: { issueFilters, updateFilters },
commandPalette: commandPaletteStore,
trackEvent: { setTrackElement },
user: { currentProjectRole },
} = useMobxStore();
const activeLayout = issueFilters?.displayFilters?.layout;
@ -85,6 +88,9 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
const viewsList = projectId ? projectViewsStore.viewsList[projectId.toString()] : undefined;
const viewDetails = viewId ? projectViewsStore.viewDetails[viewId.toString()] : undefined;
const canUserCreateIssue =
currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
return (
<div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex items-center gap-2">
@ -170,16 +176,18 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
handleDisplayPropertiesUpdate={handleDisplayProperties}
/>
</FiltersDropdown>
<Button
onClick={() => {
setTrackElement("PROJECT_VIEW_PAGE_HEADER");
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT_VIEW);
}}
size="sm"
prependIcon={<Plus />}
>
Add Issue
</Button>
{
<Button
onClick={() => {
setTrackElement("PROJECT_VIEW_PAGE_HEADER");
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT_VIEW);
}}
size="sm"
prependIcon={<Plus />}
>
Add Issue
</Button>
}
</div>
</div>
);

7
web/components/issues/form.tsx
View File

@ -226,10 +226,9 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
reset({
...defaultValues,
project: projectId,
...initialData,
});
}, [setFocus, initialData, projectId, reset]);
}, [setFocus, initialData, reset]);
// update projectId in form when projectId changes
useEffect(() => {
@ -629,8 +628,8 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
? "Updating Issue..."
: "Update Issue"
: isSubmitting
? "Adding Issue..."
: "Add Issue"}
? "Adding Issue..."
: "Add Issue"}
</Button>
</div>
</div>

19
web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
View File

@ -4,6 +4,8 @@ import { observer } from "mobx-react-lite";
import { DragDropContext, DropResult } from "@hello-pangea/dnd";
// components
import { CalendarChart, IssuePeekOverview } from "components/issues";
// hooks
import useToast from "hooks/use-toast";
// types
import { IIssue } from "types";
import {
@ -34,7 +36,7 @@ interface IBaseCalendarRoot {
[EIssueActions.REMOVE]?: (issue: IIssue) => Promise<void>;
};
viewId?: string;
handleDragDrop: (source: any, destination: any, issues: any, issueWithIds: any) => void;
handleDragDrop: (source: any, destination: any, issues: any, issueWithIds: any) => Promise<void>;
}
export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
@ -44,12 +46,15 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
const router = useRouter();
const { workspaceSlug, peekIssueId, peekProjectId } = router.query;
// hooks
const { setToastAlert } = useToast();
const displayFilters = issuesFilterStore.issueFilters?.displayFilters;
const issues = issueStore.getIssues;
const groupedIssueIds = (issueStore.getIssuesIds ?? {}) as IGroupedIssues;
const onDragEnd = (result: DropResult) => {
const onDragEnd = async (result: DropResult) => {
if (!result) return;
// return if not dropped on the correct place
@ -58,7 +63,15 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
// return if dropped on the same date
if (result.destination.droppableId === result.source.droppableId) return;
if (handleDragDrop) handleDragDrop(result.source, result.destination, issues, groupedIssueIds);
if (handleDragDrop) {
await handleDragDrop(result.source, result.destination, issues, groupedIssueIds).catch((err) => {
setToastAlert({
title: "Error",
type: "error",
message: err.detail ?? "Failed to perform this action",
});
});
}
};
const handleIssues = useCallback(

4
web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
View File

@ -41,9 +41,9 @@ export const CycleCalendarLayout: React.FC = observer(() => {
},
};
const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
const handleDragDrop = async (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
if (workspaceSlug && projectId && cycleId)
handleCalenderDragDrop(
await handleCalenderDragDrop(
source,
destination,
workspaceSlug.toString(),

4
web/components/issues/issue-layouts/calendar/roots/module-root.tsx
View File

@ -38,8 +38,8 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
},
};
const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
handleCalenderDragDrop(
const handleDragDrop = async (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
await handleCalenderDragDrop(
source,
destination,
workspaceSlug,

4
web/components/issues/issue-layouts/calendar/roots/project-root.tsx
View File

@ -31,9 +31,9 @@ export const CalendarLayout: React.FC = observer(() => {
},
};
const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
const handleDragDrop = async (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
if (workspaceSlug && projectId)
handleCalenderDragDrop(
await handleCalenderDragDrop(
source,
destination,
workspaceSlug.toString(),

4
web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
View File

@ -32,9 +32,9 @@ export const ProjectViewCalendarLayout: React.FC = observer(() => {
},
};
const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
const handleDragDrop = async (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
if (workspaceSlug && projectId)
handleCalenderDragDrop(
await handleCalenderDragDrop(
source,
destination,
workspaceSlug.toString(),

5
web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
View File

@ -121,8 +121,9 @@ export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
});
try {
quickAddCallback && quickAddCallback(workspaceSlug, projectId, payload, viewId);
if (quickAddCallback) {
await quickAddCallback(workspaceSlug, projectId, payload, viewId);
}
setToastAlert({
type: "success",
title: "Success!",

12
web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View File

@ -147,7 +147,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
setIsDragStarted(true);
};
const onDragEnd = (result: DropResult) => {
const onDragEnd = async (result: DropResult) => {
setIsDragStarted(false);
if (!result) return;
@ -171,7 +171,15 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
});
setDeleteIssueModal(true);
} else {
handleDragDrop(result.source, result.destination, sub_group_by, group_by, issues, issueIds);
await handleDragDrop(result.source, result.destination, sub_group_by, group_by, issues, issueIds).catch(
(err) => {
setToastAlert({
title: "Error",
type: "error",
message: err.detail ?? "Failed to perform this action",
});
}
);
}
}
};

4
web/components/issues/issue-layouts/kanban/properties.tsx
View File

@ -124,7 +124,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
value={issue?.start_date || null}
onChange={(date: string) => handleStartDate(date)}
disabled={isReadOnly}
placeHolder="Start date"
type="start_date"
/>
)}
@ -134,7 +134,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
value={issue?.target_date || null}
onChange={(date: string) => handleTargetDate(date)}
disabled={isReadOnly}
placeHolder="Target date"
type="target_date"
/>
)}

4
web/components/issues/issue-layouts/list/properties.tsx
View File

@ -108,7 +108,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
value={issue?.start_date || null}
onChange={(date: string) => handleStartDate(date)}
disabled={isReadonly}
placeHolder="Start date"
type="start_date"
/>
)}
@ -118,7 +118,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
value={issue?.target_date || null}
onChange={(date: string) => handleTargetDate(date)}
disabled={isReadonly}
placeHolder="Target date"
type="target_date"
/>
)}

8
web/components/issues/issue-layouts/properties/assignee.tsx
View File

@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
import { usePopper } from "react-popper";
import { Combobox } from "@headlessui/react";
import { Check, ChevronDown, Search, User2 } from "lucide-react";
import { Check, ChevronDown, CircleUser, Search } from "lucide-react";
// ui
import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
// types
@ -110,8 +110,8 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
})}
</AvatarGroup>
) : (
<span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
<User2 className="h-4 w-4 text-custom-text-400" />
<span className="h-5 w-5 grid place-items-center">
<CircleUser className="h-4 w-4" strokeWidth={1.5} />
</span>
)}
</div>
@ -140,7 +140,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
ref={setReferenceElement}
type="button"
className={`flex w-full items-center justify-between gap-1 text-xs ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
} ${buttonClassName}`}
onClick={() => !projectMembers && getWorkspaceMembers()}
>

25
web/components/issues/issue-layouts/properties/date.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
// headless ui
import { Popover } from "@headlessui/react";
// lucide icons
import { Calendar, X } from "lucide-react";
import { CalendarCheck2, CalendarClock, X } from "lucide-react";
// react date picker
import DatePicker from "react-datepicker";
// mobx
@ -18,11 +18,24 @@ export interface IIssuePropertyDate {
value: any;
onChange: (date: any) => void;
disabled?: boolean;
placeHolder?: string;
type: "start_date" | "target_date";
}
const DATE_OPTIONS = {
start_date: {
key: "start_date",
placeholder: "Start date",
icon: CalendarClock,
},
target_date: {
key: "target_date",
placeholder: "Target date",
icon: CalendarCheck2,
},
};
export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props) => {
const { value, onChange, disabled, placeHolder } = props;
const { value, onChange, disabled, type } = props;
const dropdownBtn = React.useRef<any>(null);
const dropdownOptions = React.useRef<any>(null);
@ -31,6 +44,8 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
const dateOptionDetails = DATE_OPTIONS[type];
return (
<Popover as="div" className="relative">
{({ open }) => {
@ -49,10 +64,10 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
}`}
>
<div className="flex items-center justify-center gap-2 overflow-hidden">
<Calendar className="h-3 w-3" strokeWidth={2} />
<dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
{value && (
<>
<Tooltip tooltipHeading={placeHolder} tooltipContent={value ?? "None"}>
<Tooltip tooltipHeading={dateOptionDetails.placeholder} tooltipContent={value ?? "None"}>
<div className="text-xs">{value}</div>
</Tooltip>

13
web/components/issues/issue-layouts/properties/labels.tsx
View File

@ -6,7 +6,7 @@ import { usePopper } from "react-popper";
// components
import { Combobox } from "@headlessui/react";
import { Tooltip } from "@plane/ui";
import { Check, ChevronDown, Search } from "lucide-react";
import { Check, ChevronDown, Search, Tags } from "lucide-react";
// types
import { Placement } from "@popperjs/core";
import { RootStore } from "store_legacy/root";
@ -25,6 +25,7 @@ export interface IIssuePropertyLabels {
placement?: Placement;
maxRender?: number;
noLabelBorder?: boolean;
placeholderText?: string;
}
export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
@ -41,6 +42,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
placement,
maxRender = 2,
noLabelBorder = false,
placeholderText,
} = props;
const {
@ -144,11 +146,12 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
)
) : (
<div
className={`flex h-full items-center justify-center rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
}`}
>
Select labels
<Tags className="h-3.5 w-3.5" strokeWidth={2} />
{placeholderText}
</div>
)}
</div>
@ -171,8 +174,8 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
disabled
? "cursor-not-allowed text-custom-text-200"
: value.length <= maxRender
? "cursor-pointer"
: "cursor-pointer hover:bg-custom-background-80"
? "cursor-pointer"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
onClick={() => !storeLabels && fetchLabels()}
>

2
web/components/issues/issue-layouts/properties/state.tsx
View File

@ -94,7 +94,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
const label = (
<Tooltip tooltipHeading="State" tooltipContent={selectedOption?.name ?? ""} position="top">
<div className="flex w-full cursor-pointer items-center gap-2 text-custom-text-200">
<div className="flex w-full items-center gap-2 text-custom-text-200">
{selectedOption && <StateGroupIcon stateGroup={selectedOption?.group as any} color={selectedOption?.color} />}
<span className="line-clamp-1 inline-block truncate">{selectedOption?.name ?? "State"}</span>
</div>

88
web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
View File

@ -2,6 +2,8 @@ import { useState } from "react";
import { useRouter } from "next/router";
import { CustomMenu } from "@plane/ui";
import { Copy, Link, Pencil, Trash2 } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useToast from "hooks/use-toast";
// components
@ -12,6 +14,8 @@ import { copyUrlToClipboard } from "helpers/string.helper";
import { IIssue } from "types";
import { IQuickActionProps } from "../list/list-view-types";
import { EProjectStore } from "store_legacy/command-palette.store";
// constant
import { EUserWorkspaceRoles } from "constants/workspace";
export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate, customActionButton } = props;
@ -24,6 +28,12 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
const [issueToEdit, setIssueToEdit] = useState<IIssue | null>(null);
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const { user: userStore } = useMobxStore();
const { currentProjectRole } = userStore;
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
const { setToastAlert } = useToast();
const handleCopyIssueLink = () => {
@ -71,43 +81,47 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
Copy link
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setIssueToEdit(issue);
setCreateUpdateIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Pencil className="h-3 w-3" />
Edit issue
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setCreateUpdateIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Copy className="h-3 w-3" />
Make a copy
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setDeleteIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Trash2 className="h-3 w-3" />
Delete issue
</div>
</CustomMenu.MenuItem>
{isEditingAllowed && (
<>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setIssueToEdit(issue);
setCreateUpdateIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Pencil className="h-3 w-3" />
Edit issue
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setCreateUpdateIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Copy className="h-3 w-3" />
Make a copy
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setDeleteIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Trash2 className="h-3 w-3" />
Delete issue
</div>
</CustomMenu.MenuItem>
</>
)}
</CustomMenu>
</>
);

20
web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
View File

@ -27,7 +27,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
value={issue.assignees}
defaultOptions={issue?.assignee_details ? issue.assignee_details : []}
onChange={(data) => onChange({ assignees: data })}
className="h-full w-full"
className="h-11 w-full"
buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
noLabelBorder
hideDropdownArrow
@ -40,14 +40,16 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue) => (
<SpreadsheetAssigneeColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
expandedIssues={expandedIssues}
members={members}
disabled={disabled}
/>
<div className={`h-11`}>
<SpreadsheetAssigneeColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
expandedIssues={expandedIssues}
members={members}
disabled={disabled}
/>
</div>
))}
</>
);

6
web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
View File

@ -18,7 +18,7 @@ export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
return (
<>
<div className="flex h-full w-full items-center px-2.5 py-1 text-xs">
<div className="flex h-11 w-full items-center px-2.5 py-1 text-xs">
{issue.attachment_count} {issue.attachment_count === 1 ? "attachment" : "attachments"}
</div>
@ -27,7 +27,9 @@ export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
<SpreadsheetAttachmentColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
<div className={`h-11`}>
<SpreadsheetAttachmentColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
</div>
))}
</>
);

6
web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
View File

@ -19,7 +19,7 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
return (
<>
<div className="flex h-full w-full items-center justify-center text-xs">
<div className="flex h-11 w-full items-center justify-center text-xs">
{renderLongDetailDateFormat(issue.created_at)}
</div>
@ -28,7 +28,9 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
<SpreadsheetCreatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
<div className="h-11">
<SpreadsheetCreatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
</div>
))}
</>
);

18
web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
View File

@ -24,7 +24,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
<ViewDueDateSelect
issue={issue}
onChange={(val) => onChange({ target_date: val })}
className="flex !h-full !w-full max-w-full items-center px-2.5 py-1"
className="flex !h-11 !w-full max-w-full items-center px-2.5 py-1"
noBorder
disabled={disabled}
/>
@ -34,13 +34,15 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
<SpreadsheetDueDateColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
expandedIssues={expandedIssues}
disabled={disabled}
/>
<div className={`h-11`}>
<SpreadsheetDueDateColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
expandedIssues={expandedIssues}
disabled={disabled}
/>
</div>
))}
</>
);

18
web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
View File

@ -25,7 +25,7 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
projectId={issue.project_detail?.id ?? null}
value={issue.estimate_point}
onChange={(data) => onChange({ estimate_point: data })}
className="h-full w-full"
className="h-11 w-full"
buttonClassName="h-full w-full px-2.5 py-1 !shadow-none !border-0"
hideDropdownArrow
disabled={disabled}
@ -36,13 +36,15 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
<SpreadsheetEstimateColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
expandedIssues={expandedIssues}
disabled={disabled}
/>
<div className={`h-11`}>
<SpreadsheetEstimateColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
expandedIssues={expandedIssues}
disabled={disabled}
/>
</div>
))}
</>
);

22
web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
View File

@ -29,12 +29,12 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
value={issue.labels}
defaultOptions={issue?.label_details ? issue.label_details : []}
onChange={(data) => onChange({ labels: data })}
className="h-full w-full"
className="h-11 w-full"
buttonClassName="px-2.5 h-full"
noLabelBorder
hideDropdownArrow
maxRender={1}
disabled={disabled}
placeholderText="Select labels"
/>
{isExpanded &&
@ -42,14 +42,16 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
<SpreadsheetLabelColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
labels={labels}
expandedIssues={expandedIssues}
disabled={disabled}
/>
<div className={`h-11`}>
<SpreadsheetLabelColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
labels={labels}
expandedIssues={expandedIssues}
disabled={disabled}
/>
</div>
))}
</>
);

6
web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
View File

@ -18,7 +18,7 @@ export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
return (
<>
<div className="flex h-full w-full items-center px-2.5 py-1 text-xs">
<div className="flex h-11 w-full items-center px-2.5 py-1 text-xs">
{issue.link_count} {issue.link_count === 1 ? "link" : "links"}
</div>
@ -27,7 +27,9 @@ export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
<SpreadsheetLinkColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
<div className={`h-11`}>
<SpreadsheetLinkColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
</div>
))}
</>
);

18
web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
View File

@ -24,7 +24,7 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, ex
<PrioritySelect
value={issue.priority}
onChange={(data) => onChange({ priority: data })}
className="h-full w-full"
className="h-11 w-full"
buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
showTitle
highlightUrgentPriority={false}
@ -37,13 +37,15 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, ex
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
<SpreadsheetPriorityColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
expandedIssues={expandedIssues}
disabled={disabled}
/>
<div className={`h-11`}>
<SpreadsheetPriorityColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
expandedIssues={expandedIssues}
disabled={disabled}
/>
</div>
))}
</>
);

18
web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
View File

@ -24,7 +24,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
<ViewStartDateSelect
issue={issue}
onChange={(val) => onChange({ start_date: val })}
className="flex !h-full !w-full max-w-full items-center px-2.5 py-1"
className="flex !h-11 !w-full max-w-full items-center px-2.5 py-1"
noBorder
disabled={disabled}
/>
@ -34,13 +34,15 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
<SpreadsheetStartDateColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
expandedIssues={expandedIssues}
disabled={disabled}
/>
<div className={`h-11`}>
<SpreadsheetStartDateColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
expandedIssues={expandedIssues}
disabled={disabled}
/>
</div>
))}
</>
);

20
web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
View File

@ -29,7 +29,7 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
value={issue.state}
defaultOptions={issue?.state_detail ? [issue.state_detail] : []}
onChange={(data) => onChange({ state: data.id, state_detail: data })}
className="h-full w-full"
className="w-full !h-11"
buttonClassName="!shadow-none !border-0 h-full w-full"
hideDropdownArrow
disabled={disabled}
@ -40,14 +40,16 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue) => (
<SpreadsheetStateColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
states={states}
expandedIssues={expandedIssues}
disabled={disabled}
/>
<div className="h-11">
<SpreadsheetStateColumn
key={subIssue.id}
issue={subIssue}
onChange={onChange}
states={states}
expandedIssues={expandedIssues}
disabled={disabled}
/>
</div>
))}
</>
);

6
web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
View File

@ -18,7 +18,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
return (
<>
<div className="flex h-full w-full items-center px-2.5 py-1 text-xs">
<div className="flex h-11 w-full items-center px-2.5 py-1 text-xs">
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div>
@ -27,7 +27,9 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
<SpreadsheetSubIssueColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
<div className={`h-11`}>
<SpreadsheetSubIssueColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
</div>
))}
</>
);

6
web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
View File

@ -21,7 +21,7 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
return (
<>
<div className="flex h-full w-full items-center justify-center text-xs">
<div className="flex h-11 w-full items-center justify-center text-xs">
{renderLongDetailDateFormat(issue.updated_at)}
</div>
@ -30,7 +30,9 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
<SpreadsheetUpdatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
<div className={`h-11`}>
<SpreadsheetUpdatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
</div>
))}
</>
);

4
web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
View File

@ -159,13 +159,13 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
</CustomMenu>
</div>
<div className="h-full w-full min-w-[8rem]">
<div className="h-full w-full divide-y-[0.5px] border-b-[0.5px] min-w-[8rem]">
{issues?.map((issue) => {
const disableUserActions = !canEditProperties(issue.project);
return (
<div
key={`${property}-${issue.id}`}
className={`h-11 border-b-[0.5px] border-custom-border-200 ${
className={`h-fit divide-y-[0.5px] border-custom-border-200 ${
disableUserActions ? "" : "cursor-pointer hover:bg-custom-background-80"
}`}
>

12
web/components/issues/modal.tsx
View File

@ -266,11 +266,11 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
}
})
.catch(() => {
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be created. Please try again.",
message: err.detail ?? "Issue could not be created. Please try again.",
});
postHogEventTracker(
"ISSUE_CREATED",
@ -312,11 +312,11 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
})
.catch(() => {
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be created. Please try again.",
message: err.detail ?? "Issue could not be created. Please try again.",
});
});
};
@ -347,11 +347,11 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
}
);
})
.catch(() => {
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be updated. Please try again.",
message: err.detail ?? "Issue could not be updated. Please try again.",
});
postHogEventTracker(
"ISSUE_UPDATED",

18
web/components/issues/select/project.tsx
View File

@ -1,5 +1,4 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import type { FieldError } from "react-hook-form";
// mobx store
@ -23,9 +22,6 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
const { value, onChange } = props;
const [query, setQuery] = useState("");
const router = useRouter();
const { workspaceSlug } = router.query;
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@ -33,13 +29,13 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
placement: "bottom-start",
});
const { project: projectStore } = useMobxStore();
const {
project: { joinedProjects },
} = useMobxStore();
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
const selectedProject = joinedProjects?.find((i) => i.id === value);
const selectedProject = projects?.find((i) => i.id === value);
const options = projects?.map((project) => ({
const options = joinedProjects?.map((project) => ({
value: project.id,
query: project.name,
content: (
@ -61,8 +57,8 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
{selectedProject.emoji
? renderEmoji(selectedProject.emoji)
: selectedProject.icon_prop
? renderEmoji(selectedProject.icon_prop)
: null}
? renderEmoji(selectedProject.icon_prop)
: null}
</span>
<div className="truncate">{selectedProject.identifier}</div>
</div>

10
web/components/issues/view-select/due-date.tsx
View File

@ -1,7 +1,7 @@
// ui
import { CustomDatePicker } from "components/ui";
import { Tooltip } from "@plane/ui";
import { CalendarDays } from "lucide-react";
import { CalendarCheck } from "lucide-react";
// helpers
import {
findHowManyDaysLeft,
@ -51,8 +51,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
issue.target_date === null
? ""
: issue.target_date < new Date().toISOString()
? "text-red-600"
: findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
? "text-red-600"
: findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
}`}
>
<CustomDatePicker
@ -67,7 +67,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
>
{issue.target_date ? (
<>
<CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
<CalendarCheck className="h-3.5 w-3.5 flex-shrink-0" />
<span>
{areYearsEqual
? renderShortDate(issue.target_date ?? "", "_ _")
@ -76,7 +76,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
</>
) : (
<>
<CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
<CalendarCheck className="h-3.5 w-3.5 flex-shrink-0" />
<span>Due Date</span>
</>
)}

6
web/components/issues/view-select/start-date.tsx
View File

@ -1,7 +1,7 @@
// ui
import { CustomDatePicker } from "components/ui";
import { Tooltip } from "@plane/ui";
import { CalendarDays } from "lucide-react";
import { CalendarClock } from "lucide-react";
// helpers
import { renderShortDate, renderShortDateWithYearFormat, renderShortMonthDate } from "helpers/date-time.helper";
// types
@ -55,7 +55,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
>
{issue?.start_date ? (
<>
<CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
<CalendarClock className="h-3.5 w-3.5 flex-shrink-0" />
<span>
{areYearsEqual
? renderShortDate(issue?.start_date, "_ _")
@ -64,7 +64,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
</>
) : (
<>
<CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
<CalendarClock className="h-3.5 w-3.5 flex-shrink-0" />
<span>Start Date</span>
</>
)}

1
web/components/labels/project-setting-label-group.tsx
View File

@ -77,7 +77,6 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
<Droppable
key={`label.group.droppable.${label.id}`}
droppableId={`label.group.droppable.${label.id}`}
isCombineEnabled={!groupDragSnapshot.isDragging && !isUpdating}
isDropDisabled={groupDragSnapshot.isDragging || isUpdating || isDropDisabled}
>
{(droppableProvided) => (

15
web/components/labels/project-setting-label-list.tsx
View File

@ -10,11 +10,17 @@ import {
DropResult,
Droppable,
} from "@hello-pangea/dnd";
// store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useDraggableInPortal from "hooks/use-draggable-portal";
// components
import { CreateUpdateLabelInline, DeleteLabelModal, ProjectSettingLabelGroup } from "components/labels";
import {
CreateUpdateLabelInline,
DeleteLabelModal,
ProjectSettingLabelGroup,
ProjectSettingLabelItem,
} from "components/labels";
// ui
import { Button, Loader } from "@plane/ui";
import { EmptyState } from "components/common";
@ -22,9 +28,6 @@ import { EmptyState } from "components/common";
import emptyLabel from "public/empty-state/label.svg";
// types
import { IIssueLabel } from "types";
//component
import { ProjectSettingLabelItem } from "./project-setting-label-item";
import useDraggableInPortal from "hooks/use-draggable-portal";
const LABELS_ROOT = "labels.root";
@ -137,7 +140,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
isDropDisabled={isUpdating}
>
{(droppableProvided, droppableSnapshot) => (
<div className={`mt-3`} ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
<div className="mt-3" ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
{projectLabelsTree.map((label, index) => {
if (label.children && label.children.length) {
return (

8
web/components/modules/modal.tsx
View File

@ -69,11 +69,11 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
state: "SUCCESS",
});
})
.catch(() => {
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: "Module could not be created. Please try again.",
message: err.detail ?? "Module could not be created. Please try again.",
});
postHogEventTracker("MODULE_CREATED", {
state: "FAILED",
@ -99,11 +99,11 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
state: "SUCCESS",
});
})
.catch(() => {
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: "Module could not be updated. Please try again.",
message: err.detail ?? "Module could not be updated. Please try again.",
});
postHogEventTracker("MODULE_UPDATED", {
state: "FAILED",

59
web/components/modules/module-card-item.tsx
View File

@ -19,6 +19,7 @@ import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper"
import { IModule } from "types";
// constants
import { MODULE_STATUS } from "constants/module";
import { EUserWorkspaceRoles } from "constants/workspace";
type Props = {
module: IModule;
@ -35,7 +36,11 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
const { setToastAlert } = useToast();
const { module: moduleStore } = useMobxStore();
const { module: moduleStore, user: userStore } = useMobxStore();
const { currentProjectRole } = userStore;
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
const moduleTotalIssues =
module.backlog_issues +
@ -59,8 +64,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
? !moduleTotalIssues || moduleTotalIssues === 0
? "0 Issue"
: moduleTotalIssues === module.completed_issues
? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
: `${module.completed_issues}/${moduleTotalIssues} Issues`
? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
: `${module.completed_issues}/${moduleTotalIssues} Issues`
: "0 Issue";
const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
@ -217,28 +222,34 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
)}
<div className="z-10 flex items-center gap-1.5">
{module.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}>
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites}>
<Star className="h-3.5 w-3.5 text-custom-text-200" />
</button>
)}
{isEditingAllowed &&
(module.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}>
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites}>
<Star className="h-3.5 w-3.5 text-custom-text-200" />
</button>
))}
<CustomMenu width="auto" ellipsis className="z-10">
<CustomMenu.MenuItem onClick={handleEditModule}>
<span className="flex items-center justify-start gap-2">
<Pencil className="h-3 w-3" />
<span>Edit module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleDeleteModule}>
<span className="flex items-center justify-start gap-2">
<Trash2 className="h-3 w-3" />
<span>Delete module</span>
</span>
</CustomMenu.MenuItem>
{isEditingAllowed && (
<>
<CustomMenu.MenuItem onClick={handleEditModule}>
<span className="flex items-center justify-start gap-2">
<Pencil className="h-3 w-3" />
<span>Edit module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleDeleteModule}>
<span className="flex items-center justify-start gap-2">
<Trash2 className="h-3 w-3" />
<span>Delete module</span>
</span>
</CustomMenu.MenuItem>
</>
)}
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-3 w-3" />

54
web/components/modules/module-list-item.tsx
View File

@ -19,6 +19,7 @@ import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper"
import { IModule } from "types";
// constants
import { MODULE_STATUS } from "constants/module";
import { EUserWorkspaceRoles } from "constants/workspace";
type Props = {
module: IModule;
@ -35,7 +36,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
const { setToastAlert } = useToast();
const { module: moduleStore } = useMobxStore();
const { module: moduleStore, user: userStore } = useMobxStore();
const { currentProjectRole } = userStore;
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100;
@ -194,29 +199,34 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
</div>
</Tooltip>
{module.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites} className="z-[1]">
<Star className="h-3.5 w-3.5 text-custom-text-300" />
</button>
)}
{isEditingAllowed &&
(module.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites} className="z-[1]">
<Star className="h-3.5 w-3.5 text-custom-text-300" />
</button>
))}
<CustomMenu width="auto" verticalEllipsis buttonClassName="z-[1]">
<CustomMenu.MenuItem onClick={handleEditModule}>
<span className="flex items-center justify-start gap-2">
<Pencil className="h-3 w-3" />
<span>Edit module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleDeleteModule}>
<span className="flex items-center justify-start gap-2">
<Trash2 className="h-3 w-3" />
<span>Delete module</span>
</span>
</CustomMenu.MenuItem>
{isEditingAllowed && (
<>
<CustomMenu.MenuItem onClick={handleEditModule}>
<span className="flex items-center justify-start gap-2">
<Pencil className="h-3 w-3" />
<span>Edit module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleDeleteModule}>
<span className="flex items-center justify-start gap-2">
<Trash2 className="h-3 w-3" />
<span>Delete module</span>
</span>
</CustomMenu.MenuItem>
</>
)}
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-3 w-3" />

8
web/components/pages/create-update-page-modal.tsx
View File

@ -60,11 +60,11 @@ export const CreateUpdatePageModal: FC<Props> = (props) => {
}
);
})
.catch(() => {
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: "Page could not be created. Please try again.",
message: err.detail ?? "Page could not be created. Please try again.",
});
postHogEventTracker(
"PAGE_CREATED",
@ -104,11 +104,11 @@ export const CreateUpdatePageModal: FC<Props> = (props) => {
}
);
})
.catch(() => {
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: "Page could not be updated. Please try again.",
message: err.detail ?? "Page could not be updated. Please try again.",
});
postHogEventTracker(
"PAGE_UPDATED",

31
web/components/pages/pages-list/list-item.tsx
View File

@ -154,6 +154,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
const userCanChangeAccess = isCurrentUserOwner;
const userCanArchive = isCurrentUserOwner || currentProjectRole === EUserWorkspaceRoles.ADMIN;
const userCanDelete = isCurrentUserOwner || currentProjectRole === EUserWorkspaceRoles.ADMIN;
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
return (
<>
@ -208,17 +209,19 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
<p className="text-sm text-custom-text-200">{render24HourFormatTime(page.updated_at)}</p>
</Tooltip>
)}
<Tooltip tooltipContent={`${page.is_favorite ? "Remove from favorites" : "Mark as favorite"}`}>
{page.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}>
<Star className="h-3.5 w-3.5 fill-orange-400 text-orange-400" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites}>
<Star className="h-3.5 w-3.5" />
</button>
)}
</Tooltip>
{isEditingAllowed && (
<Tooltip tooltipContent={`${page.is_favorite ? "Remove from favorites" : "Mark as favorite"}`}>
{page.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}>
<Star className="h-3.5 w-3.5 fill-orange-400 text-orange-400" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites}>
<Star className="h-3.5 w-3.5" />
</button>
)}
</Tooltip>
)}
{userCanChangeAccess && (
<Tooltip
tooltipContent={`${
@ -255,7 +258,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
</div>
</CustomMenu.MenuItem>
)}
{userCanDelete && (
{userCanDelete && isEditingAllowed && (
<CustomMenu.MenuItem onClick={handleDeletePage}>
<div className="flex items-center gap-2">
<Trash2 className="h-3 w-3" />
@ -266,7 +269,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
</>
) : (
<>
{userCanEdit && (
{userCanEdit && isEditingAllowed && (
<CustomMenu.MenuItem onClick={handleEditPage}>
<div className="flex items-center gap-2">
<Pencil className="h-3 w-3" />
@ -274,7 +277,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
</div>
</CustomMenu.MenuItem>
)}
{userCanArchive && (
{userCanArchive && isEditingAllowed && (
<CustomMenu.MenuItem onClick={handleArchivePage}>
<div className="flex items-center gap-2">
<Archive className="h-3 w-3" />

8
web/components/workspace/sidebar-quick-action.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from "react";
// ui
import { ChevronDown, PenSquare, Search } from "lucide-react";
import { ChevronUp, PenSquare, Search } from "lucide-react";
// hooks
import useLocalStorage from "hooks/use-local-storage";
// components
@ -37,7 +37,6 @@ export const WorkspaceSidebarQuickAction = observer(() => {
}}
fieldsToShow={["all"]}
/>
<div
className={`mt-4 flex w-full cursor-pointer items-center justify-between px-4 ${
isSidebarCollapsed ? "flex-col gap-1" : "gap-2"
@ -74,10 +73,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
isSidebarCollapsed ? "hidden" : "block"
}`}
>
<ChevronDown
size={16}
className="rotate-0 transform !text-custom-sidebar-text-300 transition-transform duration-300 group-hover:rotate-180"
/>
<ChevronUp className="h-4 w-4 rotate-180 transform !text-custom-sidebar-text-300 transition-transform duration-300 group-hover:rotate-0" />
</button>
<div

6
web/constants/spreadsheet.ts
View File

@ -1,6 +1,6 @@
import { TIssueOrderByOptions } from "types";
import { LayersIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip } from "lucide-react";
import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip, CalendarClock, CalendarCheck } from "lucide-react";
import { FC } from "react";
import { ISvgIcons } from "@plane/ui/src/icons/type";
@ -36,7 +36,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
ascendingOrderTitle: "New",
descendingOrderKey: "target_date",
descendingOrderTitle: "Old",
icon: CalendarDays,
icon: CalendarCheck,
},
estimate: {
title: "Estimate",
@ -68,7 +68,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
ascendingOrderTitle: "New",
descendingOrderKey: "start_date",
descendingOrderTitle: "Old",
icon: CalendarDays,
icon: CalendarClock,
},
state: {
title: "State",

4
web/pages/profile/activity.tsx
View File

@ -156,7 +156,9 @@ const ProfileActivityPage: NextPageWithLayout = () => {
{activityItem.actor_detail.first_name} Bot
</span>
) : (
<Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
<Link
href={`/${activityItem.workspace_detail.slug}/profile/${activityItem.actor_detail.id}`}
>
<span className="text-gray font-medium">
{activityItem.actor_detail.display_name}
</span>

17
web/pages/profile/change-password.tsx
View File

@ -33,7 +33,7 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
const [isPageLoading, setIsPageLoading] = useState(true);
const {
appConfig: { envConfig },
user: { currentUser },
} = useMobxStore();
const router = useRouter();
@ -74,20 +74,11 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
};
useEffect(() => {
if (!envConfig) return;
if (!currentUser) return;
const enableEmailPassword =
envConfig?.email_password_login ||
!(
envConfig?.email_password_login ||
envConfig?.magic_login ||
envConfig?.google_client_id ||
envConfig?.github_client_id
);
if (!enableEmailPassword) router.push("/profile");
if (currentUser.is_password_autoset) router.push("/profile");
else setIsPageLoading(false);
}, [envConfig, router]);
}, [currentUser, router]);
if (isPageLoading)
return (

6
web/store/application/app-config.store.ts
View File

@ -1,6 +1,6 @@
import { observable, action, makeObservable, runInAction } from "mobx";
// types
import { RootStore } from "./root";
import { RootStore } from "../root.store";
import { IAppConfig } from "types/app";
// services
import { AppConfigService } from "services/app_config.service";
@ -11,7 +11,7 @@ export interface IAppConfigStore {
fetchAppConfig: () => Promise<any>;
}
class AppConfigStore implements IAppConfigStore {
export class AppConfigStore implements IAppConfigStore {
// observables
envConfig: IAppConfig | null = null;
@ -43,5 +43,3 @@ class AppConfigStore implements IAppConfigStore {
}
};
}
export default AppConfigStore;

198
web/store/application/command-palette.store.ts
View File

@ -0,0 +1,198 @@
import { observable, action, makeObservable, computed } from "mobx";
// types
import { RootStore } from "../root.store";
// services
import { ProjectService } from "services/project";
import { PageService } from "services/page.service";
export enum EProjectStore {
PROJECT = "ProjectStore",
PROJECT_VIEW = "ProjectViewStore",
PROFILE = "ProfileStore",
MODULE = "ModuleStore",
CYCLE = "CycleStore",
}
export interface ModalData {
store: EProjectStore;
viewId: string;
}
export interface ICommandPaletteStore {
isCommandPaletteOpen: boolean;
isShortcutModalOpen: boolean;
isCreateProjectModalOpen: boolean;
isCreateCycleModalOpen: boolean;
isCreateModuleModalOpen: boolean;
isCreateViewModalOpen: boolean;
isCreatePageModalOpen: boolean;
isCreateIssueModalOpen: boolean;
isDeleteIssueModalOpen: boolean;
isBulkDeleteIssueModalOpen: boolean;
// computed
isAnyModalOpen: boolean;
toggleCommandPaletteModal: (value?: boolean) => void;
toggleShortcutModal: (value?: boolean) => void;
toggleCreateProjectModal: (value?: boolean) => void;
toggleCreateCycleModal: (value?: boolean) => void;
toggleCreateViewModal: (value?: boolean) => void;
toggleCreatePageModal: (value?: boolean) => void;
toggleCreateIssueModal: (value?: boolean, storeType?: EProjectStore) => void;
toggleCreateModuleModal: (value?: boolean) => void;
toggleDeleteIssueModal: (value?: boolean) => void;
toggleBulkDeleteIssueModal: (value?: boolean) => void;
createIssueStoreType: EProjectStore;
}
export class CommandPaletteStore implements ICommandPaletteStore {
isCommandPaletteOpen: boolean = false;
isShortcutModalOpen: boolean = false;
isCreateProjectModalOpen: boolean = false;
isCreateCycleModalOpen: boolean = false;
isCreateModuleModalOpen: boolean = false;
isCreateViewModalOpen: boolean = false;
isCreatePageModalOpen: boolean = false;
isCreateIssueModalOpen: boolean = false;
isDeleteIssueModalOpen: boolean = false;
isBulkDeleteIssueModalOpen: boolean = false;
// root store
rootStore;
// service
projectService;
pageService;
createIssueStoreType: EProjectStore = EProjectStore.PROJECT;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observable
isCommandPaletteOpen: observable.ref,
isShortcutModalOpen: observable.ref,
isCreateProjectModalOpen: observable.ref,
isCreateCycleModalOpen: observable.ref,
isCreateModuleModalOpen: observable.ref,
isCreateViewModalOpen: observable.ref,
isCreatePageModalOpen: observable.ref,
isCreateIssueModalOpen: observable.ref,
isDeleteIssueModalOpen: observable.ref,
isBulkDeleteIssueModalOpen: observable.ref,
// computed
isAnyModalOpen: computed,
// projectPages: computed,
// action
toggleCommandPaletteModal: action,
toggleShortcutModal: action,
toggleCreateProjectModal: action,
toggleCreateCycleModal: action,
toggleCreateViewModal: action,
toggleCreatePageModal: action,
toggleCreateIssueModal: action,
toggleCreateModuleModal: action,
toggleDeleteIssueModal: action,
toggleBulkDeleteIssueModal: action,
});
this.rootStore = _rootStore;
this.projectService = new ProjectService();
this.pageService = new PageService();
}
get isAnyModalOpen() {
return Boolean(
this.isCreateIssueModalOpen ||
this.isCreateCycleModalOpen ||
this.isCreatePageModalOpen ||
this.isCreateProjectModalOpen ||
this.isCreateModuleModalOpen ||
this.isCreateViewModalOpen ||
this.isShortcutModalOpen ||
this.isBulkDeleteIssueModalOpen ||
this.isDeleteIssueModalOpen
);
}
toggleCommandPaletteModal = (value?: boolean) => {
if (value !== undefined) {
this.isCommandPaletteOpen = value;
} else {
this.isCommandPaletteOpen = !this.isCommandPaletteOpen;
}
};
toggleShortcutModal = (value?: boolean) => {
if (value !== undefined) {
this.isShortcutModalOpen = value;
} else {
this.isShortcutModalOpen = !this.isShortcutModalOpen;
}
};
toggleCreateProjectModal = (value?: boolean) => {
if (value !== undefined) {
this.isCreateProjectModalOpen = value;
} else {
this.isCreateProjectModalOpen = !this.isCreateProjectModalOpen;
}
};
toggleCreateCycleModal = (value?: boolean) => {
if (value !== undefined) {
this.isCreateCycleModalOpen = value;
} else {
this.isCreateCycleModalOpen = !this.isCreateCycleModalOpen;
}
};
toggleCreateViewModal = (value?: boolean) => {
if (value !== undefined) {
this.isCreateViewModalOpen = value;
} else {
this.isCreateViewModalOpen = !this.isCreateViewModalOpen;
}
};
toggleCreatePageModal = (value?: boolean) => {
if (value !== undefined) {
this.isCreatePageModalOpen = value;
} else {
this.isCreatePageModalOpen = !this.isCreatePageModalOpen;
}
};
toggleCreateIssueModal = (value?: boolean, storeType?: EProjectStore) => {
if (value !== undefined) {
this.isCreateIssueModalOpen = value;
this.createIssueStoreType = storeType || EProjectStore.PROJECT;
} else {
this.isCreateIssueModalOpen = !this.isCreateIssueModalOpen;
this.createIssueStoreType = EProjectStore.PROJECT;
}
};
toggleDeleteIssueModal = (value?: boolean) => {
if (value !== undefined) {
this.isDeleteIssueModalOpen = value;
} else {
this.isDeleteIssueModalOpen = !this.isDeleteIssueModalOpen;
}
};
toggleCreateModuleModal = (value?: boolean) => {
if (value !== undefined) {
this.isCreateModuleModalOpen = value;
} else {
this.isCreateModuleModalOpen = !this.isCreateModuleModalOpen;
}
};
toggleBulkDeleteIssueModal = (value?: boolean) => {
if (value !== undefined) {
this.isBulkDeleteIssueModalOpen = value;
} else {
this.isBulkDeleteIssueModalOpen = !this.isBulkDeleteIssueModalOpen;
}
};
}

78
web/store/application/event-tracker.store.ts
View File

@ -0,0 +1,78 @@
import { action, makeObservable, observable } from "mobx";
import posthog from "posthog-js";
// stores
import { RootStore } from "../root.store";
export interface IEventTrackerStore {
trackElement: string;
setTrackElement: (element: string) => void;
postHogEventTracker: (
eventName: string,
payload: object | [] | null,
group?: { isGrouping: boolean | null; groupType: string | null; gorupId: string | null } | null
) => void;
}
export class EventTrackerStore implements IEventTrackerStore {
trackElement: string = "";
rootStore;
constructor(_rootStore: RootStore) {
makeObservable(this, {
trackElement: observable,
setTrackElement: action,
postHogEventTracker: action,
});
this.rootStore = _rootStore;
}
setTrackElement = (element: string) => {
this.trackElement = element;
};
postHogEventTracker = (
eventName: string,
payload: object | [] | null,
group?: { isGrouping: boolean | null; groupType: string | null; gorupId: string | null } | null
) => {
try {
let extras: any = {
workspace_name: this.rootStore.workspace.currentWorkspace?.name ?? "",
workspace_id: this.rootStore.workspace.currentWorkspace?.id ?? "",
workspace_slug: this.rootStore.workspace.currentWorkspace?.slug ?? "",
project_name: this.rootStore.project.currentProjectDetails?.name ?? "",
project_id: this.rootStore.project.currentProjectDetails?.id ?? "",
project_identifier: this.rootStore.project.currentProjectDetails?.identifier ?? "",
};
if (["PROJECT_CREATED", "PROJECT_UPDATED"].includes(eventName)) {
const project_details: any = payload as object;
extras = {
...extras,
project_name: project_details?.name ?? "",
project_id: project_details?.id ?? "",
project_identifier: project_details?.identifier ?? "",
};
}
if (group && group!.isGrouping === true) {
posthog?.group(group!.groupType!, group!.gorupId!, {
date: new Date(),
workspace_id: group!.gorupId,
});
posthog?.capture(eventName, {
...payload,
extras: extras,
element: this.trackElement ?? "",
});
} else {
posthog?.capture(eventName, {
...payload,
extras: extras,
element: this.trackElement ?? "",
});
}
} catch (error) {
throw error;
}
this.setTrackElement("");
};
}

34
web/store/application/index.ts
View File

@ -1,15 +1,25 @@
export class AppRootStore {
config;
commandPalette;
eventTracker;
instance;
theme;
import { RootStore } from "../root.store";
import { AppConfigStore } from "./app-config.store";
import { CommandPaletteStore } from "./command-palette.store";
import { EventTrackerStore } from "./event-tracker.store";
import { InstanceStore } from "./instance.store";
import { RouterStore } from "./router.store";
import { ThemeStore } from "./theme.store";
constructor() {
this.config = new ConfigStore();
this.commandPalette = new CommandPaletteStore();
this.eventTracker = new EventTrackerStore();
this.instance = new InstanceStore();
this.theme = new ThemeStore();
export class AppRootStore {
config: AppConfigStore;
commandPalette: CommandPaletteStore;
eventTracker: EventTrackerStore;
instance: InstanceStore;
theme: ThemeStore;
router: RouterStore;
constructor(rootStore: RootStore) {
this.config = new AppConfigStore(rootStore);
this.commandPalette = new CommandPaletteStore(rootStore);
this.eventTracker = new EventTrackerStore(rootStore);
this.instance = new InstanceStore(rootStore);
this.theme = new ThemeStore(rootStore);
this.router = new RouterStore();
}
}

178
web/store/application/instance.store.ts
View File

@ -0,0 +1,178 @@
import { observable, action, computed, makeObservable, runInAction } from "mobx";
// store
import { RootStore } from "../root.store";
// types
import { IInstance, IInstanceConfiguration, IFormattedInstanceConfiguration, IInstanceAdmin } from "types/instance";
// services
import { InstanceService } from "services/instance.service";
export interface IInstanceStore {
loader: boolean;
error: any | null;
// issues
instance: IInstance | null;
instanceAdmins: IInstanceAdmin[] | null;
configurations: IInstanceConfiguration[] | null;
// computed
formattedConfig: IFormattedInstanceConfiguration | null;
// action
fetchInstanceInfo: () => Promise<IInstance>;
fetchInstanceAdmins: () => Promise<IInstanceAdmin[]>;
updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance>;
fetchInstanceConfigurations: () => Promise<any>;
updateInstanceConfigurations: (data: Partial<IFormattedInstanceConfiguration>) => Promise<IInstanceConfiguration[]>;
}
export class InstanceStore implements IInstanceStore {
loader: boolean = false;
error: any | null = null;
instance: IInstance | null = null;
instanceAdmins: IInstanceAdmin[] | null = null;
configurations: IInstanceConfiguration[] | null = null;
// service
instanceService;
rootStore;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observable
loader: observable.ref,
error: observable.ref,
instance: observable,
instanceAdmins: observable,
configurations: observable,
// computed
formattedConfig: computed,
// actions
fetchInstanceInfo: action,
fetchInstanceAdmins: action,
updateInstanceInfo: action,
fetchInstanceConfigurations: action,
updateInstanceConfigurations: action,
});
this.rootStore = _rootStore;
this.instanceService = new InstanceService();
}
/**
* computed value for instance configurations data for forms.
* @returns configurations in the form of {key, value} pair.
*/
get formattedConfig() {
if (!this.configurations) return null;
return this.configurations?.reduce((formData: IFormattedInstanceConfiguration, config) => {
formData[config.key] = config.value;
return formData;
}, {});
}
/**
* fetch instance info from API
*/
fetchInstanceInfo = async () => {
try {
const instance = await this.instanceService.getInstanceInfo();
runInAction(() => {
this.instance = instance;
});
return instance;
} catch (error) {
console.log("Error while fetching the instance info");
throw error;
}
};
/**
* fetch instance admins from API
*/
fetchInstanceAdmins = async () => {
try {
const instanceAdmins = await this.instanceService.getInstanceAdmins();
runInAction(() => {
this.instanceAdmins = instanceAdmins;
});
return instanceAdmins;
} catch (error) {
console.log("Error while fetching the instance admins");
throw error;
}
};
/**
* update instance info
* @param data
*/
updateInstanceInfo = async (data: Partial<IInstance>) => {
try {
runInAction(() => {
this.loader = true;
this.error = null;
});
const response = await this.instanceService.updateInstanceInfo(data);
runInAction(() => {
this.loader = false;
this.error = null;
this.instance = response;
});
return response;
} catch (error) {
runInAction(() => {
this.loader = false;
this.error = error;
});
throw error;
}
};
/**
* fetch instace configurations from API
*/
fetchInstanceConfigurations = async () => {
try {
const configurations = await this.instanceService.getInstanceConfigurations();
runInAction(() => {
this.configurations = configurations;
});
return configurations;
} catch (error) {
console.log("Error while fetching the instance configurations");
throw error;
}
};
/**
* update instance configurations
* @param data
*/
updateInstanceConfigurations = async (data: Partial<IFormattedInstanceConfiguration>) => {
try {
runInAction(() => {
this.loader = true;
this.error = null;
});
const response = await this.instanceService.updateInstanceConfigurations(data);
runInAction(() => {
this.loader = false;
this.error = null;
this.configurations = this.configurations ? [...this.configurations, ...response] : response;
});
return response;
} catch (error) {
runInAction(() => {
this.loader = false;
this.error = error;
});
throw error;
}
};
}

21
web/store/application/router.store.ts Normal file
View File

@ -0,0 +1,21 @@
import { action, makeObservable, observable } from "mobx";
export interface IRouterStore {
query: any;
setQuery: (query: any) => void;
}
export class RouterStore implements IRouterStore {
query = {};
constructor() {
makeObservable(this, {
query: observable,
setQuery: action,
});
}
setQuery(query: any) {
this.query = query;
}
}

65
web/store/application/theme.store.ts
View File

@ -0,0 +1,65 @@
// mobx
import { action, observable, makeObservable } from "mobx";
// helper
import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
export interface IThemeStore {
theme: string | null;
sidebarCollapsed: boolean | undefined;
toggleSidebar: (collapsed?: boolean) => void;
setTheme: (theme: any) => void;
}
export class ThemeStore implements IThemeStore {
sidebarCollapsed: boolean | undefined = undefined;
theme: string | null = null;
// root store
rootStore;
constructor(_rootStore: any | null = null) {
makeObservable(this, {
// observable
sidebarCollapsed: observable.ref,
theme: observable.ref,
// action
toggleSidebar: action,
setTheme: action,
// computed
});
this.rootStore = _rootStore;
}
toggleSidebar = (collapsed?: boolean) => {
if (collapsed === undefined) {
this.sidebarCollapsed = !this.sidebarCollapsed;
} else {
this.sidebarCollapsed = collapsed;
}
localStorage.setItem("app_sidebar_collapsed", this.sidebarCollapsed.toString());
};
setTheme = async (_theme: { theme: any }) => {
try {
const currentTheme: string = _theme?.theme?.theme?.toString();
// updating the local storage theme value
localStorage.setItem("theme", currentTheme);
// updating the mobx theme value
this.theme = currentTheme;
// applying the theme to platform if the selected theme is custom
if (currentTheme === "custom") {
const themeSettings = this.rootStore.user.currentUserSettings || null;
applyTheme(
themeSettings?.theme?.palette !== ",,,,"
? themeSettings?.theme?.palette
: "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
themeSettings?.theme?.darkPalette
);
} else unsetCustomCssVariables();
} catch (error) {
console.error("setting user theme error", error);
}
};
}

7
web/store/root.store.ts
View File

@ -5,11 +5,12 @@ import { ProjectRootStore } from "./project";
import { CycleStore } from "./cycle.store";
import { ProjectViewsStore } from "./project-view.store";
import { ModulesStore } from "./module.store";
import { UserStore } from "./user";
enableStaticRendering(typeof window === "undefined");
export class RootStore {
app;
app: AppRootStore;
user;
workspace;
project;
@ -18,8 +19,8 @@ export class RootStore {
projectView;
constructor() {
this.app = new AppRootStore();
// this.user = new UserRootStore();
this.app = new AppRootStore(this);
this.user = new UserStore(this);
// this.workspace = new WorkspaceRootStore();
this.project = new ProjectRootStore(this);
this.cycle = new CycleStore(this);

252
web/store/user/index.ts Normal file
View File

@ -0,0 +1,252 @@
import { action, observable, runInAction, makeObservable, computed } from "mobx";
// services
import { UserService } from "services/user.service";
import { AuthService } from "services/auth.service";
// interfaces
import { IUser, IUserSettings } from "types/users";
// store
import { RootStore } from "../root.store";
import { UserMembershipStore } from "./user-membership.store";
export interface IUserStore {
loader: boolean;
currentUserError: any;
isUserLoggedIn: boolean | null;
currentUser: IUser | null;
isUserInstanceAdmin: boolean | null;
currentUserSettings: IUserSettings | null;
dashboardInfo: any;
fetchCurrentUser: () => Promise<IUser>;
fetchCurrentUserInstanceAdminStatus: () => Promise<boolean>;
fetchCurrentUserSettings: () => Promise<IUserSettings>;
fetchUserDashboardInfo: (workspaceSlug: string, month: number) => Promise<any>;
updateUserOnBoard: () => Promise<void>;
updateTourCompleted: () => Promise<void>;
updateCurrentUser: (data: Partial<IUser>) => Promise<IUser>;
updateCurrentUserTheme: (theme: string) => Promise<IUser>;
deactivateAccount: () => Promise<void>;
signOut: () => Promise<void>;
membership: UserMembershipStore;
}
export class UserStore implements IUserStore {
loader: boolean = false;
currentUserError: any = null;
isUserLoggedIn: boolean | null = null;
currentUser: IUser | null = null;
isUserInstanceAdmin: boolean | null = null;
currentUserSettings: IUserSettings | null = null;
dashboardInfo: any = null;
membership: UserMembershipStore;
// root store
rootStore;
// services
userService;
authService;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observable
loader: observable.ref,
isUserLoggedIn: observable.ref,
currentUser: observable,
isUserInstanceAdmin: observable.ref,
currentUserSettings: observable,
dashboardInfo: observable,
// action
fetchCurrentUser: action,
fetchCurrentUserInstanceAdminStatus: action,
fetchCurrentUserSettings: action,
fetchUserDashboardInfo: action,
updateUserOnBoard: action,
updateTourCompleted: action,
updateCurrentUser: action,
updateCurrentUserTheme: action,
deactivateAccount: action,
signOut: action,
});
this.rootStore = _rootStore;
this.userService = new UserService();
this.authService = new AuthService();
this.membership = new UserMembershipStore(_rootStore);
}
fetchCurrentUser = async () => {
try {
const response = await this.userService.currentUser();
if (response) {
runInAction(() => {
this.currentUserError = null;
this.currentUser = response;
this.isUserLoggedIn = true;
});
}
return response;
} catch (error) {
runInAction(() => {
this.currentUserError = error;
this.isUserLoggedIn = false;
});
throw error;
}
};
fetchCurrentUserInstanceAdminStatus = async () => {
try {
const response = await this.userService.currentUserInstanceAdminStatus();
if (response) {
runInAction(() => {
this.isUserInstanceAdmin = response.is_instance_admin;
});
}
return response.is_instance_admin;
} catch (error) {
runInAction(() => {
this.isUserInstanceAdmin = false;
});
throw error;
}
};
fetchCurrentUserSettings = async () => {
try {
const response = await this.userService.currentUserSettings();
if (response) {
runInAction(() => {
this.currentUserSettings = response;
});
}
return response;
} catch (error) {
throw error;
}
};
fetchUserDashboardInfo = async (workspaceSlug: string, month: number) => {
try {
const response = await this.userService.userWorkspaceDashboard(workspaceSlug, month);
runInAction(() => {
this.dashboardInfo = response;
});
return response;
} catch (error) {
throw error;
}
};
updateUserOnBoard = async () => {
try {
runInAction(() => {
this.currentUser = {
...this.currentUser,
is_onboarded: true,
} as IUser;
});
const user = this.currentUser ?? undefined;
if (!user) return;
await this.userService.updateUserOnBoard();
} catch (error) {
this.fetchCurrentUser();
throw error;
}
};
updateTourCompleted = async () => {
try {
if (this.currentUser) {
runInAction(() => {
this.currentUser = {
...this.currentUser,
is_tour_completed: true,
} as IUser;
});
const response = await this.userService.updateUserTourCompleted();
return response;
}
} catch (error) {
throw error;
}
};
updateCurrentUser = async (data: Partial<IUser>) => {
try {
runInAction(() => {
this.currentUser = {
...this.currentUser,
...data,
} as IUser;
});
const response = await this.userService.updateUser(data);
runInAction(() => {
this.currentUser = response;
});
return response;
} catch (error) {
this.fetchCurrentUser();
throw error;
}
};
updateCurrentUserTheme = async (theme: string) => {
try {
runInAction(() => {
this.currentUser = {
...this.currentUser,
theme: {
...this.currentUser?.theme,
theme,
},
} as IUser;
});
const response = await this.userService.updateUser({
theme: { ...this.currentUser?.theme, theme },
} as IUser);
return response;
} catch (error) {
throw error;
}
};
deactivateAccount = async () => {
try {
await this.userService.deactivateAccount();
this.currentUserError = null;
this.currentUser = null;
this.isUserLoggedIn = false;
} catch (error) {
throw error;
}
};
signOut = async () => {
try {
await this.authService.signOut();
runInAction(() => {
this.currentUserError = null;
this.currentUser = null;
this.isUserLoggedIn = false;
});
} catch (error) {
throw error;
}
};
}

229
web/store/user/user-membership.store.ts Normal file
View File

@ -0,0 +1,229 @@
// mobx
import { action, observable, runInAction, makeObservable, computed } from "mobx";
// services
import { ProjectMemberService, ProjectService } from "services/project";
import { UserService } from "services/user.service";
import { WorkspaceService } from "services/workspace.service";
import { AuthService } from "services/auth.service";
// interfaces
import { IUser, IUserSettings } from "types/users";
import { IWorkspaceMemberMe, IProjectMember, TUserProjectRole, TUserWorkspaceRole } from "types";
import { RootStore } from "../root.store";
export interface IUserMembershipStore {
workspaceMemberInfo: {
[workspaceSlug: string]: IWorkspaceMemberMe;
};
hasPermissionToWorkspace: {
[workspaceSlug: string]: boolean | null;
};
projectMemberInfo: {
[projectId: string]: IProjectMember;
};
hasPermissionToProject: {
[projectId: string]: boolean | null;
};
currentProjectMemberInfo: IProjectMember | undefined;
currentWorkspaceMemberInfo: IWorkspaceMemberMe | undefined;
currentProjectRole: TUserProjectRole | undefined;
currentWorkspaceRole: TUserWorkspaceRole | undefined;
hasPermissionToCurrentWorkspace: boolean | undefined;
hasPermissionToCurrentProject: boolean | undefined;
fetchUserWorkspaceInfo: (workspaceSlug: string) => Promise<IWorkspaceMemberMe>;
fetchUserProjectInfo: (workspaceSlug: string, projectId: string) => Promise<IProjectMember>;
leaveWorkspace: (workspaceSlug: string) => Promise<void>;
joinProject: (workspaceSlug: string, projectIds: string[]) => Promise<any>;
leaveProject: (workspaceSlug: string, projectId: string) => Promise<void>;
}
export class UserMembershipStore implements IUserMembershipStore {
workspaceMemberInfo: {
[workspaceSlug: string]: IWorkspaceMemberMe;
} = {};
hasPermissionToWorkspace: {
[workspaceSlug: string]: boolean;
} = {};
projectMemberInfo: {
[projectId: string]: IProjectMember;
} = {};
hasPermissionToProject: {
[projectId: string]: boolean;
} = {};
// root store
rootStore;
// services
userService;
workspaceService;
projectService;
projectMemberService;
authService;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observable
workspaceMemberInfo: observable.ref,
hasPermissionToWorkspace: observable.ref,
projectMemberInfo: observable.ref,
hasPermissionToProject: observable.ref,
// action
fetchUserWorkspaceInfo: action,
fetchUserProjectInfo: action,
leaveWorkspace: action,
joinProject: action,
leaveProject: action,
// computed
currentProjectMemberInfo: computed,
currentWorkspaceMemberInfo: computed,
currentProjectRole: computed,
currentWorkspaceRole: computed,
hasPermissionToCurrentWorkspace: computed,
hasPermissionToCurrentProject: computed,
});
this.rootStore = _rootStore;
this.userService = new UserService();
this.workspaceService = new WorkspaceService();
this.projectService = new ProjectService();
this.projectMemberService = new ProjectMemberService();
this.authService = new AuthService();
}
get currentWorkspaceMemberInfo() {
if (!this.rootStore.workspace.workspaceSlug) return;
return this.workspaceMemberInfo[this.rootStore.workspace.workspaceSlug];
}
get currentWorkspaceRole() {
if (!this.rootStore.workspace.workspaceSlug) return;
return this.workspaceMemberInfo[this.rootStore.workspace.workspaceSlug]?.role;
}
get currentProjectMemberInfo() {
if (!this.rootStore.project.projectId) return;
return this.projectMemberInfo[this.rootStore.project.projectId];
}
get currentProjectRole() {
if (!this.rootStore.project.projectId) return;
return this.projectMemberInfo[this.rootStore.project.projectId]?.role;
}
get hasPermissionToCurrentWorkspace() {
if (!this.rootStore.workspace.workspaceSlug) return;
return this.hasPermissionToWorkspace[this.rootStore.workspace.workspaceSlug];
}
get hasPermissionToCurrentProject() {
if (!this.rootStore.project.projectId) return;
return this.hasPermissionToProject[this.rootStore.project.projectId];
}
fetchUserWorkspaceInfo = async (workspaceSlug: string) => {
try {
const response = await this.workspaceService.workspaceMemberMe(workspaceSlug);
runInAction(() => {
this.workspaceMemberInfo = {
...this.workspaceMemberInfo,
[workspaceSlug]: response,
};
this.hasPermissionToWorkspace = {
...this.hasPermissionToWorkspace,
[workspaceSlug]: true,
};
});
return response;
} catch (error) {
runInAction(() => {
this.hasPermissionToWorkspace = {
...this.hasPermissionToWorkspace,
[workspaceSlug]: false,
};
});
throw error;
}
};
fetchUserProjectInfo = async (workspaceSlug: string, projectId: string) => {
try {
const response = await this.projectMemberService.projectMemberMe(workspaceSlug, projectId);
runInAction(() => {
this.projectMemberInfo = {
...this.projectMemberInfo,
[projectId]: response,
};
this.hasPermissionToProject = {
...this.hasPermissionToProject,
[projectId]: true,
};
});
return response;
} catch (error: any) {
runInAction(() => {
this.hasPermissionToProject = {
...this.hasPermissionToProject,
[projectId]: false,
};
});
throw error;
}
};
leaveWorkspace = async (workspaceSlug: string) => {
try {
await this.userService.leaveWorkspace(workspaceSlug);
runInAction(() => {
delete this.workspaceMemberInfo[workspaceSlug];
delete this.hasPermissionToWorkspace[workspaceSlug];
});
} catch (error) {
throw error;
}
};
joinProject = async (workspaceSlug: string, projectIds: string[]) => {
const newPermissions: { [projectId: string]: boolean } = {};
projectIds.forEach((projectId) => {
newPermissions[projectId] = true;
});
try {
const response = await this.userService.joinProject(workspaceSlug, projectIds);
runInAction(() => {
this.hasPermissionToProject = {
...this.hasPermissionToProject,
...newPermissions,
};
});
return response;
} catch (error) {
throw error;
}
};
leaveProject = async (workspaceSlug: string, projectId: string) => {
const newPermissions: { [projectId: string]: boolean } = {};
newPermissions[projectId] = false;
try {
await this.userService.leaveProject(workspaceSlug, projectId);
runInAction(() => {
this.hasPermissionToProject = {
...this.hasPermissionToProject,
...newPermissions,
};
});
} catch (error) {
throw error;
}
};
}

4
web/store_legacy/issues/base-issue-calendar-helper.store.ts
View File

@ -45,8 +45,8 @@ export class CalendarHelpers implements ICalendarHelpers {
target_date: destinationColumnId,
};
if (viewId) store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue, viewId);
else store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue);
if (viewId) return await store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue, viewId);
else return await store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue);
}
}
};