From d7be4788de974b5e55a8e9e0eba51f673f0d1ac9 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 1 Dec 2023 13:27:16 +0530
Subject: [PATCH] fix: view modal overlapping (#2956)

---
 .../command-palette/command-pallette.tsx      | 14 +------------
 web/components/headers/project-views.tsx      | 11 ++++------
 web/store/command-palette.store.ts            | 20 ++++++++++++++++++-
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/web/components/command-palette/command-pallette.tsx b/web/components/command-palette/command-pallette.tsx
index a4f5279a2..6891279b1 100644
--- a/web/components/command-palette/command-pallette.tsx
+++ b/web/components/command-palette/command-pallette.tsx
@@ -55,22 +55,10 @@ export const CommandPalette: FC = observer(() => {
     toggleBulkDeleteIssueModal,
     isDeleteIssueModalOpen,
     toggleDeleteIssueModal,
-
+    isAnyModalOpen,
     createIssueStoreType,
   } = commandPalette;
 
-  const isAnyModalOpen = Boolean(
-    isCreateIssueModalOpen ||
-      isCreateCycleModalOpen ||
-      isCreatePageModalOpen ||
-      isCreateProjectModalOpen ||
-      isCreateModuleModalOpen ||
-      isCreateViewModalOpen ||
-      isShortcutModalOpen ||
-      isBulkDeleteIssueModalOpen ||
-      isDeleteIssueModalOpen
-  );
-
   const { setToastAlert } = useToast();
 
   const { data: issueDetails } = useSWR(
diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
index 66e320872..92e876557 100644
--- a/web/components/headers/project-views.tsx
+++ b/web/components/headers/project-views.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
@@ -15,18 +14,16 @@ export const ProjectViewsHeader: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // states
-  const [createViewModal, setCreateViewModal] = useState(false);
 
-  const { project: projectStore } = useMobxStore();
+  const { project: projectStore, commandPalette } = useMobxStore();
   const { currentProjectDetails } = projectStore;
 
   return (
     <>
       {workspaceSlug && projectId && (
         <CreateUpdateProjectViewModal
-          isOpen={createViewModal}
-          onClose={() => setCreateViewModal(false)}
+          isOpen={commandPalette.isCreateViewModalOpen}
+          onClose={() => commandPalette.toggleCreateViewModal(false)}
           workspaceSlug={workspaceSlug.toString()}
           projectId={projectId.toString()}
         />
@@ -69,7 +66,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
               variant="primary"
               size="sm"
               prependIcon={<Plus className="h-3.5 w-3.5 stroke-2" />}
-              onClick={() => setCreateViewModal(true)}
+              onClick={() => commandPalette.toggleCreateViewModal(true)}
             >
               Create View
             </Button>
diff --git a/web/store/command-palette.store.ts b/web/store/command-palette.store.ts
index 1c9fc785d..b2dac49c5 100644
--- a/web/store/command-palette.store.ts
+++ b/web/store/command-palette.store.ts
@@ -1,4 +1,4 @@
-import { observable, action, makeObservable } from "mobx";
+import { observable, action, makeObservable, computed } from "mobx";
 // types
 import { RootStore } from "./root";
 // services
@@ -30,6 +30,9 @@ export interface ICommandPaletteStore {
   isDeleteIssueModalOpen: boolean;
   isBulkDeleteIssueModalOpen: boolean;
 
+  // computed
+  isAnyModalOpen: boolean;
+
   toggleCommandPaletteModal: (value?: boolean) => void;
   toggleShortcutModal: (value?: boolean) => void;
   toggleCreateProjectModal: (value?: boolean) => void;
@@ -77,6 +80,7 @@ class CommandPaletteStore implements ICommandPaletteStore {
       isDeleteIssueModalOpen: observable.ref,
       isBulkDeleteIssueModalOpen: observable.ref,
       // computed
+      isAnyModalOpen: computed,
       // projectPages: computed,
       // action
       toggleCommandPaletteModal: action,
@@ -96,6 +100,20 @@ class CommandPaletteStore implements ICommandPaletteStore {
     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) {
       this.isCommandPaletteOpen = value;