[WEB-1175] fix: modal context (#4352)

* fix: modal context * chore: code refactor
makeplane · May 3, 2024 · f4cc103 · f4cc103
1 parent 89f2f87
commit f4cc103
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 36 deletions.
diff --git a/web/components/issues/issue-detail/parent-select.tsx b/web/components/issues/issue-detail/parent-select.tsx
@@ -47,7 +47,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
     try {
       await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
       await issueOperations.fetch(workspaceSlug, projectId, issueId);
-      toggleParentIssueModal(false);
+      toggleParentIssueModal(issueId);
     } catch (error) {
       console.error("something went wrong while fetching the issue");
     }
@@ -79,8 +79,8 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
       <ParentIssuesListModal
         projectId={projectId}
         issueId={issueId}
-        isOpen={isParentIssueModalOpen}
-        handleClose={() => toggleParentIssueModal(false)}
+        isOpen={isParentIssueModalOpen === issueId}
+        handleClose={() => toggleParentIssueModal(null)}
         onChange={(issue: any) => handleParentIssue(issue?.id)}
       />
       <button
@@ -94,7 +94,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
           },
           className
         )}
-        onClick={() => toggleParentIssueModal(true)}
+        onClick={() => toggleParentIssueModal(issue.id)}
         disabled={disabled}
       >
         {issue.parent_id && parentIssue ? (

diff --git a/web/components/issues/issue-detail/relation-select.tsx b/web/components/issues/issue-detail/relation-select.tsx
@@ -81,34 +81,38 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
       data.map((i) => i.id)
     );
 
-    toggleRelationModal(null);
+    toggleRelationModal(null, null);
   };
 
   if (!relationIssueIds) return null;
 
+  const isRelationKeyModalActive =
+    isRelationModalOpen?.relationType === relationKey && isRelationModalOpen?.issueId === issueId;
+
   return (
     <>
       <ExistingIssuesListModal
         workspaceSlug={workspaceSlug}
         projectId={projectId}
-        isOpen={isRelationModalOpen === relationKey}
-        handleClose={() => toggleRelationModal(null)}
+        isOpen={isRelationKeyModalActive}
+        handleClose={() => toggleRelationModal(null, null)}
         searchParams={{ issue_relation: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
         workspaceLevelToggle
       />
+
       <button
         type="button"
         className={cn(
           "group flex items-center gap-2 rounded px-2 py-0.5 outline-none",
           {
             "cursor-not-allowed": disabled,
             "hover:bg-custom-background-80": !disabled,
-            "bg-custom-background-80": isRelationModalOpen === relationKey,
+            "bg-custom-background-80": isRelationKeyModalActive,
           },
           className
         )}
-        onClick={() => toggleRelationModal(relationKey)}
+        onClick={() => toggleRelationModal(issueId, relationKey)}
         disabled={disabled}
       >
         <div className="flex w-full items-start justify-between">

diff --git a/web/components/issues/peek-overview/header.tsx b/web/components/issues/peek-overview/header.tsx
@@ -54,7 +54,7 @@ export type PeekOverviewHeaderProps = {
   isArchived: boolean;
   disabled: boolean;
   toggleDeleteIssueModal: (issueId: string | null) => void;
-  toggleArchiveIssueModal: (value: boolean) => void;
+  toggleArchiveIssueModal: (issueId: string | null) => void;
   handleRestoreIssue: () => void;
   isSubmitting: "submitting" | "submitted" | "saved";
 };
@@ -178,7 +178,7 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
                 })}
                 onClick={() => {
                   if (!isInArchivableGroup) return;
-                  toggleArchiveIssueModal(true);
+                  toggleArchiveIssueModal(issueId);
                 }}
               >
                 <ArchiveIcon className="h-4 w-4" />

diff --git a/web/components/issues/peek-overview/view.tsx b/web/components/issues/peek-overview/view.tsx
@@ -87,8 +87,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
     <>
       {issue && !is_archived && (
         <ArchiveIssueModal
-          isOpen={isArchiveIssueModalOpen}
-          handleClose={() => toggleArchiveIssueModal(false)}
+          isOpen={isArchiveIssueModalOpen === issueId}
+          handleClose={() => toggleArchiveIssueModal(null)}
           data={issue}
           onSubmit={async () => {
             if (issueOperations.archive) await issueOperations.archive(workspaceSlug, projectId, issueId);

diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx
@@ -381,7 +381,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                       onClick={() => {
                         setTrackElement("Issue detail nested sub-issue");
                         handleIssueCrudState("existing", parentIssueId, null);
-                        toggleSubIssuesModal(true);
+                        toggleSubIssuesModal(issue.id);
                       }}
                     >
                       <div className="flex items-center gap-2">
@@ -439,7 +439,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                     onClick={() => {
                       setTrackElement("Issue detail nested sub-issue");
                       handleIssueCrudState("existing", parentIssueId, null);
-                      toggleSubIssuesModal(true);
+                      toggleSubIssuesModal(issue.id);
                     }}
                   >
                     <div className="flex items-center gap-2">
@@ -476,7 +476,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
               isOpen={issueCrudState?.existing?.toggle}
               handleClose={() => {
                 handleIssueCrudState("existing", null, null);
-                toggleSubIssuesModal(false);
+                toggleSubIssuesModal(null);
               }}
               searchParams={{ sub_issue: true, issue_id: issueCrudState?.existing?.parentIssueId }}
               handleOnSubmit={(_issue) =>

diff --git a/web/store/issue/issue-details/root.store.ts b/web/store/issue/issue-details/root.store.ts
@@ -31,6 +31,11 @@ export type TPeekIssue = {
   issueId: string;
 };
 
+export type TIssueRelationModal = {
+  issueId: string | null;
+  relationType: TIssueRelationTypes | null;
+};
+
 export interface IIssueDetail
   extends IIssueStoreActions,
     IIssueReactionStoreActions,
@@ -46,11 +51,11 @@ export interface IIssueDetail
   peekIssue: TPeekIssue | undefined;
   isCreateIssueModalOpen: boolean;
   isIssueLinkModalOpen: boolean;
-  isParentIssueModalOpen: boolean;
+  isParentIssueModalOpen: string | null;
   isDeleteIssueModalOpen: string | null;
-  isArchiveIssueModalOpen: boolean;
-  isRelationModalOpen: TIssueRelationTypes | null;
-  isSubIssuesModalOpen: boolean;
+  isArchiveIssueModalOpen: string | null;
+  isRelationModalOpen: TIssueRelationModal | null;
+  isSubIssuesModalOpen: string | null;
   isDeleteAttachmentModalOpen: string | null;
   // computed
   isAnyModalOpen: boolean;
@@ -60,11 +65,11 @@ export interface IIssueDetail
   setPeekIssue: (peekIssue: TPeekIssue | undefined) => void;
   toggleCreateIssueModal: (value: boolean) => void;
   toggleIssueLinkModal: (value: boolean) => void;
-  toggleParentIssueModal: (value: boolean) => void;
+  toggleParentIssueModal: (issueId: string | null) => void;
   toggleDeleteIssueModal: (issueId: string | null) => void;
-  toggleArchiveIssueModal: (value: boolean) => void;
-  toggleRelationModal: (relationType: TIssueRelationTypes | null) => void;
-  toggleSubIssuesModal: (value: boolean) => void;
+  toggleArchiveIssueModal: (value: string | null) => void;
+  toggleRelationModal: (issueId: string | null, relationType: TIssueRelationTypes | null) => void;
+  toggleSubIssuesModal: (value: string | null) => void;
   toggleDeleteAttachmentModal: (attachmentId: string | null) => void;
   // store
   rootIssueStore: IIssueRootStore;
@@ -85,11 +90,11 @@ export class IssueDetail implements IIssueDetail {
   peekIssue: TPeekIssue | undefined = undefined;
   isCreateIssueModalOpen: boolean = false;
   isIssueLinkModalOpen: boolean = false;
-  isParentIssueModalOpen: boolean = false;
+  isParentIssueModalOpen: string | null = null;
   isDeleteIssueModalOpen: string | null = null;
-  isArchiveIssueModalOpen: boolean = false;
-  isRelationModalOpen: TIssueRelationTypes | null = null;
-  isSubIssuesModalOpen: boolean = false;
+  isArchiveIssueModalOpen: string | null = null;
+  isRelationModalOpen: TIssueRelationModal | null = null;
+  isSubIssuesModalOpen: string | null = null;
   isDeleteAttachmentModalOpen: string | null = null;
   // store
   rootIssueStore: IIssueRootStore;
@@ -149,11 +154,11 @@ export class IssueDetail implements IIssueDetail {
     return (
       this.isCreateIssueModalOpen ||
       this.isIssueLinkModalOpen ||
-      this.isParentIssueModalOpen ||
+      !!this.isParentIssueModalOpen ||
       !!this.isDeleteIssueModalOpen ||
-      this.isArchiveIssueModalOpen ||
-      !!this.isRelationModalOpen ||
-      this.isSubIssuesModalOpen ||
+      !!this.isArchiveIssueModalOpen ||
+      !!this.isRelationModalOpen?.issueId ||
+      !!this.isSubIssuesModalOpen ||
       !!this.isDeleteAttachmentModalOpen
     );
   }
@@ -165,11 +170,12 @@ export class IssueDetail implements IIssueDetail {
   setPeekIssue = (peekIssue: TPeekIssue | undefined) => (this.peekIssue = peekIssue);
   toggleCreateIssueModal = (value: boolean) => (this.isCreateIssueModalOpen = value);
   toggleIssueLinkModal = (value: boolean) => (this.isIssueLinkModalOpen = value);
-  toggleParentIssueModal = (value: boolean) => (this.isParentIssueModalOpen = value);
+  toggleParentIssueModal = (issueId: string | null) => (this.isParentIssueModalOpen = issueId);
   toggleDeleteIssueModal = (issueId: string | null) => (this.isDeleteIssueModalOpen = issueId);
-  toggleArchiveIssueModal = (value: boolean) => (this.isArchiveIssueModalOpen = value);
-  toggleRelationModal = (relationType: TIssueRelationTypes | null) => (this.isRelationModalOpen = relationType);
-  toggleSubIssuesModal = (value: boolean) => (this.isSubIssuesModalOpen = value);
+  toggleArchiveIssueModal = (issueId: string | null) => (this.isArchiveIssueModalOpen = issueId);
+  toggleRelationModal = (issueId: string | null, relationType: TIssueRelationTypes | null) =>
+    (this.isRelationModalOpen = { issueId, relationType });
+  toggleSubIssuesModal = (issueId: string | null) => (this.isSubIssuesModalOpen = issueId);
   toggleDeleteAttachmentModal = (attachmentId: string | null) => (this.isDeleteAttachmentModalOpen = attachmentId);
 
   // issue