From 212f2b54f807e3b79ccb2170e37b7d0488958880 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Sat, 27 Jan 2024 15:20:36 +0530 Subject: [PATCH] chore: issue relation modal and issue peek overview mutation fix (#3482) * fix: resolve addtocycle and addtomodule mutation in peek overview and issue sidebar * fix: issue relation modal fix for all issues peek overview * fix: cycle and module mutation in issue detail and issue peek overview * fix: updated the issue actions for cycle and module mutation in peek overview * chore: module issue store updated * chore: existing isssue modal improvement and build error fix --------- Co-authored-by: gurusainath --- .../modals/existing-issues-list-modal.tsx | 16 +++++-- .../issues/issue-detail/relation-select.tsx | 2 + web/components/issues/issue-detail/root.tsx | 46 +++++-------------- .../issue-layouts/empty-states/cycle.tsx | 2 + .../issue-layouts/empty-states/module.tsx | 2 + .../kanban/headers/group-by-card.tsx | 2 + .../list/headers/group-by-card.tsx | 2 + web/components/issues/peek-overview/root.tsx | 46 +++++-------------- web/components/issues/sub-issues/root.tsx | 2 + web/store/issue/cycle/issue.store.ts | 11 +++-- web/store/issue/module/issue.store.ts | 9 ++-- 11 files changed, 59 insertions(+), 81 deletions(-) diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx index 058aae38c5..f136b099fa 100644 --- a/web/components/core/modals/existing-issues-list-modal.tsx +++ b/web/components/core/modals/existing-issues-list-modal.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from "react"; -import { useRouter } from "next/router"; import { Combobox, Dialog, Transition } from "@headlessui/react"; import { Rocket, Search, X } from "lucide-react"; // services @@ -13,6 +12,8 @@ import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui"; import { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types"; type Props = { + workspaceSlug: string | undefined; + projectId: string | undefined; isOpen: boolean; handleClose: () => void; searchParams: Partial; @@ -23,7 +24,15 @@ type Props = { const projectService = new ProjectService(); export const ExistingIssuesListModal: React.FC = (props) => { - const { isOpen, handleClose: onClose, searchParams, handleOnSubmit, workspaceLevelToggle = false } = props; + const { + workspaceSlug, + projectId, + isOpen, + handleClose: onClose, + searchParams, + handleOnSubmit, + workspaceLevelToggle = false, + } = props; // states const [searchTerm, setSearchTerm] = useState(""); const [issues, setIssues] = useState([]); @@ -34,9 +43,6 @@ export const ExistingIssuesListModal: React.FC = (props) => { const debouncedSearchTerm: string = useDebounce(searchTerm, 500); - const router = useRouter(); - const { workspaceSlug, projectId } = router.query; - const { setToastAlert } = useToast(); const handleClose = () => { diff --git a/web/components/issues/issue-detail/relation-select.tsx b/web/components/issues/issue-detail/relation-select.tsx index 8ce3912481..405dee3d7d 100644 --- a/web/components/issues/issue-detail/relation-select.tsx +++ b/web/components/issues/issue-detail/relation-select.tsx @@ -90,6 +90,8 @@ export const IssueRelationSelect: React.FC = observer((pro return ( <> toggleRelationModal(null)} searchParams={{ issue_relation: true, issue_id: issueId }} diff --git a/web/components/issues/issue-detail/root.tsx b/web/components/issues/issue-detail/root.tsx index 6434ce2e93..58a52cc977 100644 --- a/web/components/issues/issue-detail/root.tsx +++ b/web/components/issues/issue-detail/root.tsx @@ -120,23 +120,12 @@ export const IssueDetailRoot: FC = (props) => { }, addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => { try { - await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds) - .then((res) => { - updateIssue(workspaceSlug, projectId, res.id, res); - fetchIssue(workspaceSlug, projectId, res.id); - setToastAlert({ - title: "Cycle added to issue successfully", - type: "success", - message: "Issue added to issue successfully", - }); - }) - .catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "Selected issues could not be added to the cycle. Please try again.", - }); - }); + await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds); + setToastAlert({ + title: "Cycle added to issue successfully", + type: "success", + message: "Issue added to issue successfully", + }); } catch (error) { setToastAlert({ title: "Cycle add to issue failed", @@ -163,23 +152,12 @@ export const IssueDetailRoot: FC = (props) => { }, addIssueToModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => { try { - await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds) - .then((res) => { - updateIssue(workspaceSlug, projectId, res.id, res); - fetchIssue(workspaceSlug, projectId, res.id); - setToastAlert({ - title: "Module added to issue successfully", - type: "success", - message: "Module added to issue successfully", - }); - }) - .catch(() => - setToastAlert({ - type: "error", - title: "Error!", - message: "Selected issues could not be added to the module. Please try again.", - }) - ); + await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds); + setToastAlert({ + title: "Module added to issue successfully", + type: "success", + message: "Module added to issue successfully", + }); } catch (error) { setToastAlert({ title: "Module add to issue failed", diff --git a/web/components/issues/issue-layouts/empty-states/cycle.tsx b/web/components/issues/issue-layouts/empty-states/cycle.tsx index a2c17281e6..f0727c50e5 100644 --- a/web/components/issues/issue-layouts/empty-states/cycle.tsx +++ b/web/components/issues/issue-layouts/empty-states/cycle.tsx @@ -65,6 +65,8 @@ export const CycleEmptyState: React.FC = observer((props) => { return ( <> setCycleIssuesListModal(false)} searchParams={{ cycle: true }} diff --git a/web/components/issues/issue-layouts/empty-states/module.tsx b/web/components/issues/issue-layouts/empty-states/module.tsx index 1eb361818d..a5b6d72554 100644 --- a/web/components/issues/issue-layouts/empty-states/module.tsx +++ b/web/components/issues/issue-layouts/empty-states/module.tsx @@ -65,6 +65,8 @@ export const ModuleEmptyState: React.FC = observer((props) => { return ( <> setModuleIssuesListModal(false)} searchParams={{ module: true }} diff --git a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx index 512a071bc3..05c2b5d451 100644 --- a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx +++ b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx @@ -93,6 +93,8 @@ export const HeaderGroupByCard: FC = observer((props) => { )} {renderExistingIssueModal && ( setOpenExistingIssueListModal(false)} searchParams={ExistingIssuesListModalPayload} diff --git a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx index 06ada23ca4..cf56d6b5d5 100644 --- a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx +++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx @@ -110,6 +110,8 @@ export const HeaderGroupByCard = observer( {renderExistingIssueModal && ( setOpenExistingIssueListModal(false)} searchParams={ExistingIssuesListModalPayload} diff --git a/web/components/issues/peek-overview/root.tsx b/web/components/issues/peek-overview/root.tsx index a371ef2de9..89a659fb3b 100644 --- a/web/components/issues/peek-overview/root.tsx +++ b/web/components/issues/peek-overview/root.tsx @@ -113,23 +113,12 @@ export const IssuePeekOverview: FC = observer((props) => { }, addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => { try { - await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds) - .then((res) => { - updateIssue(workspaceSlug, projectId, res.id, res); - fetchIssue(workspaceSlug, projectId, res.id); - setToastAlert({ - title: "Cycle added to issue successfully", - type: "success", - message: "Issue added to issue successfully", - }); - }) - .catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "Selected issues could not be added to the cycle. Please try again.", - }); - }); + await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds); + setToastAlert({ + title: "Cycle added to issue successfully", + type: "success", + message: "Issue added to issue successfully", + }); } catch (error) { setToastAlert({ title: "Cycle add to issue failed", @@ -156,23 +145,12 @@ export const IssuePeekOverview: FC = observer((props) => { }, addIssueToModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => { try { - await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds) - .then((res) => { - updateIssue(workspaceSlug, projectId, res.id, res); - fetchIssue(workspaceSlug, projectId, res.id); - setToastAlert({ - title: "Module added to issue successfully", - type: "success", - message: "Module added to issue successfully", - }); - }) - .catch(() => - setToastAlert({ - type: "error", - title: "Error!", - message: "Selected issues could not be added to the module. Please try again.", - }) - ); + await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds); + setToastAlert({ + title: "Module added to issue successfully", + type: "success", + message: "Module added to issue successfully", + }); } catch (error) { setToastAlert({ title: "Module add to issue failed", diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx index 409865d9a6..7bb1b9a6b6 100644 --- a/web/components/issues/sub-issues/root.tsx +++ b/web/components/issues/sub-issues/root.tsx @@ -369,6 +369,8 @@ export const SubIssuesRoot: FC = observer((props) => { {issueCrudState?.existing?.toggle && issueCrudState?.existing?.parentIssueId && ( handleIssueCrudState("existing", null, null)} searchParams={{ sub_issue: true, issue_id: issueCrudState?.existing?.parentIssueId }} diff --git a/web/store/issue/cycle/issue.store.ts b/web/store/issue/cycle/issue.store.ts index 70be07f245..33cd06d4d6 100644 --- a/web/store/issue/cycle/issue.store.ts +++ b/web/store/issue/cycle/issue.store.ts @@ -3,6 +3,7 @@ import set from "lodash/set"; import update from "lodash/update"; import concat from "lodash/concat"; import pull from "lodash/pull"; +import uniq from "lodash/uniq"; // base class import { IssueHelperStore } from "../helpers/issue-helper.store"; // services @@ -165,7 +166,6 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues { return response; } catch (error) { - console.log(error); this.loader = undefined; throw error; } @@ -267,11 +267,13 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues { }); runInAction(() => { - update(this.issues, cycleId, (cycleIssueIds) => { - if (!cycleIssueIds) return [...issueIds]; - else return concat(cycleIssueIds, [...issueIds]); + update(this.issues, cycleId, (cycleIssueIds = []) => { + uniq(concat(cycleIssueIds, issueIds)); }); }); + issueIds.forEach((issueId) => { + this.rootStore.issues.updateIssue(issueId, { cycle_id: cycleId }); + }); return issueToCycle; } catch (error) { @@ -332,7 +334,6 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues { return response; } catch (error) { - console.log(error); this.loader = undefined; throw error; } diff --git a/web/store/issue/module/issue.store.ts b/web/store/issue/module/issue.store.ts index ce17a54dab..e24f03fb6a 100644 --- a/web/store/issue/module/issue.store.ts +++ b/web/store/issue/module/issue.store.ts @@ -3,6 +3,7 @@ import set from "lodash/set"; import update from "lodash/update"; import concat from "lodash/concat"; import pull from "lodash/pull"; +import uniq from "lodash/uniq"; // base class import { IssueHelperStore } from "../helpers/issue-helper.store"; // services @@ -259,11 +260,13 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues { }); runInAction(() => { - update(this.issues, moduleId, (moduleIssueIds) => { - if (!moduleIssueIds) return [...issueIds]; - else return concat(moduleIssueIds, [...issueIds]); + update(this.issues, moduleId, (moduleIssueIds = []) => { + uniq(concat(moduleIssueIds, issueIds)); }); }); + issueIds.forEach((issueId) => { + this.rootStore.issues.updateIssue(issueId, { module_id: moduleId }); + }); return issueToModule; } catch (error) {