fix: existing issues modal for cycle and module (#2664)

* fix: existing issues modal for cycle and module

* refactor: existing issues modal code

* fix: build errors
This commit is contained in:
Aaryan Khandelwal 2023-11-06 16:30:09 +05:30 committed by GitHub
parent 1ed72c51df
commit 742143766f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 173 additions and 171 deletions

View File

@ -1,38 +1,85 @@
import { useState } from "react";
import { observer } from "mobx-react-lite";
import { PlusIcon } from "lucide-react"; import { PlusIcon } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useToast from "hooks/use-toast";
// components // components
import { EmptyState } from "components/common"; import { EmptyState } from "components/common";
import { ExistingIssuesListModal } from "components/core";
// ui
import { Button } from "@plane/ui";
// assets // assets
import emptyIssue from "public/empty-state/issue.svg"; import emptyIssue from "public/empty-state/issue.svg";
import { Button } from "@plane/ui"; // types
import { ISearchIssueResponse } from "types";
type Props = { type Props = {
openIssuesListModal: () => void; workspaceSlug: string | undefined;
projectId: string | undefined;
cycleId: string | undefined;
}; };
export const CycleEmptyState: React.FC<Props> = ({ openIssuesListModal }) => ( export const CycleEmptyState: React.FC<Props> = observer((props) => {
<div className="h-full w-full grid place-items-center"> const { workspaceSlug, projectId, cycleId } = props;
<EmptyState // states
title="Cycle issues will appear here" const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
image={emptyIssue} const { cycleIssue: cycleIssueStore } = useMobxStore();
primaryButton={{
text: "New issue", const { setToastAlert } = useToast();
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
onClick: () => { const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
const e = new KeyboardEvent("keydown", { if (!workspaceSlug || !projectId || !cycleId) return;
key: "c",
}); const issueIds = data.map((i) => i.id);
document.dispatchEvent(e);
}, await cycleIssueStore
}} .addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds)
secondaryButton={ .catch(() => {
<Button setToastAlert({
variant="neutral-primary" type: "error",
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} onClick={openIssuesListModal} />} title: "Error!",
> message: "Selected issues could not be added to the cycle. Please try again.",
Add an existing issue });
</Button> });
} };
/>
</div> return (
); <>
<ExistingIssuesListModal
isOpen={cycleIssuesListModal}
handleClose={() => setCycleIssuesListModal(false)}
searchParams={{ cycle: true }}
handleOnSubmit={handleAddIssuesToCycle}
/>
<div className="h-full w-full grid place-items-center">
<EmptyState
title="Cycle issues will appear here"
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
image={emptyIssue}
primaryButton={{
text: "New issue",
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
onClick: () => {
const e = new KeyboardEvent("keydown", {
key: "c",
});
document.dispatchEvent(e);
},
}}
secondaryButton={
<Button
variant="neutral-primary"
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
onClick={() => setCycleIssuesListModal(true)}
>
Add an existing issue
</Button>
}
/>
</div>
</>
);
});

View File

@ -4,36 +4,78 @@ import { EmptyState } from "components/common";
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
// assets // assets
import emptyIssue from "public/empty-state/issue.svg"; import emptyIssue from "public/empty-state/issue.svg";
import { ExistingIssuesListModal } from "components/core";
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
import { ISearchIssueResponse } from "types";
import useToast from "hooks/use-toast";
import { useState } from "react";
type Props = { type Props = {
openIssuesListModal: () => void; workspaceSlug: string | undefined;
projectId: string | undefined;
moduleId: string | undefined;
}; };
export const ModuleEmptyState: React.FC<Props> = ({ openIssuesListModal }) => ( export const ModuleEmptyState: React.FC<Props> = observer((props) => {
<div className="h-full w-full grid place-items-center"> const { workspaceSlug, projectId, moduleId } = props;
<EmptyState // states
title="Module issues will appear here" const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
image={emptyIssue} const { moduleIssue: moduleIssueStore } = useMobxStore();
primaryButton={{
text: "New issue", const { setToastAlert } = useToast();
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
onClick: () => { const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
const e = new KeyboardEvent("keydown", { if (!workspaceSlug || !projectId || !moduleId) return;
key: "c",
}); const issueIds = data.map((i) => i.id);
document.dispatchEvent(e);
}, await moduleIssueStore
}} .addIssueToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds)
secondaryButton={ .catch(() =>
<Button setToastAlert({
variant="neutral-primary" type: "error",
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />} title: "Error!",
onClick={openIssuesListModal} message: "Selected issues could not be added to the module. Please try again.",
> })
Add an existing issue );
</Button> };
}
/> return (
</div> <>
); <ExistingIssuesListModal
isOpen={moduleIssuesListModal}
handleClose={() => setModuleIssuesListModal(false)}
searchParams={{ module: true }}
handleOnSubmit={handleAddIssuesToModule}
/>
<div className="h-full w-full grid place-items-center">
<EmptyState
title="Module issues will appear here"
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
image={emptyIssue}
primaryButton={{
text: "New issue",
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
onClick: () => {
const e = new KeyboardEvent("keydown", {
key: "c",
});
document.dispatchEvent(e);
},
}}
secondaryButton={
<Button
variant="neutral-primary"
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
onClick={() => setModuleIssuesListModal(true)}
>
Add an existing issue
</Button>
}
/>
</div>
</>
);
});

View File

@ -20,11 +20,7 @@ import { Spinner } from "@plane/ui";
// helpers // helpers
import { getDateRangeStatus } from "helpers/date-time.helper"; import { getDateRangeStatus } from "helpers/date-time.helper";
type Props = { export const CycleLayoutRoot: React.FC = observer(() => {
openIssuesListModal: () => void;
};
export const CycleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal }) => {
const [transferIssuesModal, setTransferIssuesModal] = useState(false); const [transferIssuesModal, setTransferIssuesModal] = useState(false);
const router = useRouter(); const router = useRouter();
@ -73,7 +69,11 @@ export const CycleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal
{cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />} {cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
<CycleAppliedFiltersRoot /> <CycleAppliedFiltersRoot />
{(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? ( {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
<CycleEmptyState openIssuesListModal={openIssuesListModal} /> <CycleEmptyState
workspaceSlug={workspaceSlug?.toString()}
projectId={projectId?.toString()}
cycleId={cycleId?.toString()}
/>
) : ( ) : (
<div className="w-full h-full overflow-auto"> <div className="w-full h-full overflow-auto">
{activeLayout === "list" ? ( {activeLayout === "list" ? (

View File

@ -18,11 +18,7 @@ import {
// ui // ui
import { Spinner } from "@plane/ui"; import { Spinner } from "@plane/ui";
type Props = { export const ModuleLayoutRoot: React.FC = observer(() => {
openIssuesListModal: () => void;
};
export const ModuleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query as { const { workspaceSlug, projectId, moduleId } = router.query as {
workspaceSlug: string; workspaceSlug: string;
@ -66,7 +62,11 @@ export const ModuleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal
<div className="relative w-full h-full flex flex-col overflow-hidden"> <div className="relative w-full h-full flex flex-col overflow-hidden">
<ModuleAppliedFiltersRoot /> <ModuleAppliedFiltersRoot />
{(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? ( {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
<ModuleEmptyState openIssuesListModal={openIssuesListModal} /> <ModuleEmptyState
workspaceSlug={workspaceSlug?.toString()}
projectId={projectId?.toString()}
moduleId={moduleId?.toString()}
/>
) : ( ) : (
<div className="h-full w-full overflow-auto"> <div className="h-full w-full overflow-auto">
{activeLayout === "list" ? ( {activeLayout === "list" ? (

View File

@ -74,13 +74,13 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
}; };
const addIssueToCycle = async (cycleId: string) => { const addIssueToCycle = async (cycleId: string) => {
if (!workspaceSlug || !issue || !cycleId) return; if (!workspaceSlug || !issue || !cycleId) return;
cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), issue.project_detail.id, cycleId, issue.id); cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), issue.project_detail.id, cycleId, [issue.id]);
}; };
const addIssueToModule = async (moduleId: string) => { const addIssueToModule = async (moduleId: string) => {
if (!workspaceSlug || !issue || !moduleId) return; if (!workspaceSlug || !issue || !moduleId) return;
moduleIssueStore.addIssueToModule(workspaceSlug.toString(), issue.project_detail.id, moduleId, issue.id); moduleIssueStore.addIssueToModule(workspaceSlug.toString(), issue.project_detail.id, moduleId, [issue.id]);
}; };
const handleLabels = (formData: Partial<IIssue>) => { const handleLabels = (formData: Partial<IIssue>) => {
issueUpdate({ ...issue, ...formData }); issueUpdate({ ...issue, ...formData });

View File

@ -171,13 +171,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
const addIssueToCycle = async (issueId: string, cycleId: string) => { const addIssueToCycle = async (issueId: string, cycleId: string) => {
if (!workspaceSlug || !activeProject) return; if (!workspaceSlug || !activeProject) return;
cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), activeProject, cycleId, issueId); cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), activeProject, cycleId, [issueId]);
}; };
const addIssueToModule = async (issueId: string, moduleId: string) => { const addIssueToModule = async (issueId: string, moduleId: string) => {
if (!workspaceSlug || !activeProject) return; if (!workspaceSlug || !activeProject) return;
moduleIssueStore.addIssueToModule(workspaceSlug.toString(), activeProject, moduleId, issueId); moduleIssueStore.addIssueToModule(workspaceSlug.toString(), activeProject, moduleId, [issueId]);
}; };
const createIssue = async (payload: Partial<IIssue>) => { const createIssue = async (payload: Partial<IIssue>) => {

View File

@ -1,19 +1,14 @@
import { useState, ReactElement } from "react"; import { ReactElement } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// services
import { IssueService } from "services/issue";
// hooks // hooks
import useLocalStorage from "hooks/use-local-storage"; import useLocalStorage from "hooks/use-local-storage";
import useUser from "hooks/use-user";
import useToast from "hooks/use-toast";
// layouts // layouts
import { AppLayout } from "layouts/app-layout"; import { AppLayout } from "layouts/app-layout";
// components // components
import { CycleIssuesHeader } from "components/headers"; import { CycleIssuesHeader } from "components/headers";
import { ExistingIssuesListModal } from "components/core";
import { CycleDetailsSidebar } from "components/cycles"; import { CycleDetailsSidebar } from "components/cycles";
import { CycleLayoutRoot } from "components/issues/issue-layouts"; import { CycleLayoutRoot } from "components/issues/issue-layouts";
// ui // ui
@ -21,23 +16,14 @@ import { EmptyState } from "components/common";
// assets // assets
import emptyCycle from "public/empty-state/cycle.svg"; import emptyCycle from "public/empty-state/cycle.svg";
// types // types
import { ISearchIssueResponse } from "types";
import { NextPageWithLayout } from "types/app"; import { NextPageWithLayout } from "types/app";
const issueService = new IssueService();
const CycleDetailPage: NextPageWithLayout = () => { const CycleDetailPage: NextPageWithLayout = () => {
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, cycleId } = router.query; const { workspaceSlug, projectId, cycleId } = router.query;
const { cycle: cycleStore } = useMobxStore(); const { cycle: cycleStore } = useMobxStore();
const { user } = useUser();
const { setToastAlert } = useToast();
const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false"); const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false; const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
@ -52,38 +38,8 @@ const CycleDetailPage: NextPageWithLayout = () => {
setValue(`${!isSidebarCollapsed}`); setValue(`${!isSidebarCollapsed}`);
}; };
// TODO: add this function to bulk add issues to cycle
const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
if (!workspaceSlug || !projectId) return;
const payload = {
issues: data.map((i) => i.id),
};
await issueService
.addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Selected issues could not be added to the cycle. Please try again.",
});
});
};
const openIssuesListModal = () => {
setCycleIssuesListModal(true);
};
return ( return (
<> <>
{/* TODO: Update logic to bulk add issues to a cycle */}
<ExistingIssuesListModal
isOpen={cycleIssuesListModal}
handleClose={() => setCycleIssuesListModal(false)}
searchParams={{ cycle: true }}
handleOnSubmit={handleAddIssuesToCycle}
/>
{error ? ( {error ? (
<EmptyState <EmptyState
image={emptyCycle} image={emptyCycle}
@ -98,7 +54,7 @@ const CycleDetailPage: NextPageWithLayout = () => {
<> <>
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div className="h-full w-full overflow-hidden"> <div className="h-full w-full overflow-hidden">
<CycleLayoutRoot openIssuesListModal={openIssuesListModal} /> <CycleLayoutRoot />
</div> </div>
{cycleId && !isSidebarCollapsed && ( {cycleId && !isSidebarCollapsed && (
<div <div

View File

@ -1,18 +1,13 @@
import { useState, ReactElement } from "react"; import { ReactElement } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// services
import { ModuleService } from "services/module.service";
// hooks // hooks
import useLocalStorage from "hooks/use-local-storage"; import useLocalStorage from "hooks/use-local-storage";
import useToast from "hooks/use-toast";
import useUser from "hooks/use-user";
// layouts // layouts
import { AppLayout } from "layouts/app-layout"; import { AppLayout } from "layouts/app-layout";
// components // components
import { ExistingIssuesListModal } from "components/core";
import { ModuleDetailsSidebar } from "components/modules"; import { ModuleDetailsSidebar } from "components/modules";
import { ModuleLayoutRoot } from "components/issues"; import { ModuleLayoutRoot } from "components/issues";
import { ModuleIssuesHeader } from "components/headers"; import { ModuleIssuesHeader } from "components/headers";
@ -22,21 +17,13 @@ import { EmptyState } from "components/common";
import emptyModule from "public/empty-state/module.svg"; import emptyModule from "public/empty-state/module.svg";
// types // types
import { NextPageWithLayout } from "types/app"; import { NextPageWithLayout } from "types/app";
import { ISearchIssueResponse } from "types";
const moduleService = new ModuleService();
const ModuleIssuesPage: NextPageWithLayout = () => { const ModuleIssuesPage: NextPageWithLayout = () => {
// states
const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
// router // router
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query; const { workspaceSlug, projectId, moduleId } = router.query;
// store // store
const { module: moduleStore } = useMobxStore(); const { module: moduleStore } = useMobxStore();
// hooks
const { user } = useUser();
const { setToastAlert } = useToast();
// local storage // local storage
const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false"); const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false; const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
@ -48,42 +35,12 @@ const ModuleIssuesPage: NextPageWithLayout = () => {
: null : null
); );
// TODO: add this function to bulk add issues to cycle
const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
if (!workspaceSlug || !projectId) return;
const payload = {
issues: data.map((i) => i.id),
};
await moduleService
.addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Selected issues could not be added to the module. Please try again.",
})
);
};
const openIssuesListModal = () => {
setModuleIssuesListModal(true);
};
const toggleSidebar = () => { const toggleSidebar = () => {
setValue(`${!isSidebarCollapsed}`); setValue(`${!isSidebarCollapsed}`);
}; };
return ( return (
<> <>
{/* TODO: Update logic to bulk add issues to a cycle */}
<ExistingIssuesListModal
isOpen={moduleIssuesListModal}
handleClose={() => setModuleIssuesListModal(false)}
searchParams={{ module: true }}
handleOnSubmit={handleAddIssuesToModule}
/>
{error ? ( {error ? (
<EmptyState <EmptyState
image={emptyModule} image={emptyModule}
@ -97,7 +54,7 @@ const ModuleIssuesPage: NextPageWithLayout = () => {
) : ( ) : (
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div className="h-full w-full overflow-hidden"> <div className="h-full w-full overflow-hidden">
<ModuleLayoutRoot openIssuesListModal={openIssuesListModal} /> <ModuleLayoutRoot />
</div> </div>
{moduleId && !isSidebarCollapsed && ( {moduleId && !isSidebarCollapsed && (
<div <div

View File

@ -36,7 +36,7 @@ export interface ICycleIssueStore {
updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void; updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
updateGanttIssueStructure: (workspaceSlug: string, cycleId: string, issue: IIssue, payload: IBlockUpdateData) => void; updateGanttIssueStructure: (workspaceSlug: string, cycleId: string, issue: IIssue, payload: IBlockUpdateData) => void;
deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void; deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => void; addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, bridgeId: string) => void; removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, bridgeId: string) => void;
} }
@ -322,7 +322,7 @@ export class CycleIssueStore implements ICycleIssueStore {
} }
}; };
addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => { addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
try { try {
const user = this.rootStore.user.currentUser ?? undefined; const user = this.rootStore.user.currentUser ?? undefined;
@ -331,7 +331,7 @@ export class CycleIssueStore implements ICycleIssueStore {
projectId, projectId,
cycleId, cycleId,
{ {
issues: [issueId], issues: issueIds,
}, },
user user
); );

View File

@ -40,7 +40,7 @@ export interface IModuleIssueStore {
payload: IBlockUpdateData payload: IBlockUpdateData
) => void; ) => void;
deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void; deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => Promise<any>; addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => Promise<void>;
removeIssueFromModule: (workspaceSlug: string, projectId: string, moduleId: string, bridgeId: string) => Promise<any>; removeIssueFromModule: (workspaceSlug: string, projectId: string, moduleId: string, bridgeId: string) => Promise<any>;
} }
@ -337,7 +337,7 @@ export class ModuleIssueStore implements IModuleIssueStore {
} }
}; };
addIssueToModule = async (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => { addIssueToModule = async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => {
try { try {
const user = this.rootStore.user.currentUser ?? undefined; const user = this.rootStore.user.currentUser ?? undefined;
@ -346,7 +346,7 @@ export class ModuleIssueStore implements IModuleIssueStore {
projectId, projectId,
moduleId, moduleId,
{ {
issues: [issueId], issues: issueIds,
}, },
user user
); );