From f4cc103238456786a495daab4d2ad5d5e18dbe22 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 3 May 2024 17:58:15 +0530
Subject: [PATCH] [WEB-1175] fix: modal context (#4352)

* fix: modal context

* chore: code refactor
---
 .../issues/issue-detail/parent-select.tsx     |  8 ++--
 .../issues/issue-detail/relation-select.tsx   | 14 ++++--
 .../issues/peek-overview/header.tsx           |  4 +-
 web/components/issues/peek-overview/view.tsx  |  4 +-
 web/components/issues/sub-issues/root.tsx     |  6 +--
 web/store/issue/issue-details/root.store.ts   | 46 +++++++++++--------
 6 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/web/components/issues/issue-detail/parent-select.tsx b/web/components/issues/issue-detail/parent-select.tsx
index a60131de4b..a51d0c569d 100644
--- 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
index a0e97fbe3f..f6fcd87384 100644
--- a/web/components/issues/issue-detail/relation-select.tsx
+++ b/web/components/issues/issue-detail/relation-select.tsx
@@ -81,22 +81,26 @@ 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(
@@ -104,11 +108,11 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
           {
             "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
index e2ad668ba1..5cbe694146 100644
--- 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
index aaa150674a..3aefa0438f 100644
--- 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
index 25cbc2b176..deff31f1e0 100644
--- 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
index 853cef2389..c2d8908060 100644
--- 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