chore: peek overview outside click improvement

web/components/issues/peek-overview/properties.tsx

@@ -37,13 +37,13 @@ interface IPeekOverviewProperties {
 export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((props) => {
   const { issue, issueUpdate, issueLinkCreate, issueLinkUpdate, issueLinkDelete, disableUserActions } = props;
   // states
-  const [linkModal, setLinkModal] = useState(false);
   const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<ILinkDetails | null>(null);
 
   const {
     user: { currentProjectRole },
     issueDetail: { fetchPeekIssueDetails },
     project: { getProjectById },
+    commandPalette: { isPeekOverviewIssueLinkModalOpen, togglePeekOverviewIssueLinkModal },
   } = useMobxStore();
 
   const router = useRouter();
@@ -82,7 +82,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
   const handleEditLink = (link: ILinkDetails) => {
     setSelectedLinkToUpdate(link);
-    setLinkModal(true);
+    togglePeekOverviewIssueLinkModal(true);
   };
 
   const projectDetails = workspaceSlug ? getProjectById(workspaceSlug.toString(), issue.project) : null;
@@ -97,9 +97,9 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
   return (
     <>
       <LinkModal
-        isOpen={linkModal}
+        isOpen={isPeekOverviewIssueLinkModalOpen}
         handleClose={() => {
-          setLinkModal(false);
+          togglePeekOverviewIssueLinkModal(false);
           setSelectedLinkToUpdate(null);
         }}
         data={selectedLinkToUpdate}
@@ -292,7 +292,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
                     className={`flex ${
                       disableUserActions ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-90"
                     } items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-300 hover:text-custom-text-200`}
-                    onClick={() => setLinkModal(true)}
+                    onClick={() => togglePeekOverviewIssueLinkModal(true)}
                     disabled={false}
                   >
                     <Plus className="h-3 w-3" /> New

web/components/issues/peek-overview/view.tsx

@@ -104,10 +104,10 @@ export const IssueView: FC<IIssueView> = observer((props) => {
   const {
     user: { currentUser },
     issueDetail: { fetchIssueSubscription, getIssueActivity, getIssueReactions, getIssueSubscription, setPeekId },
+    commandPalette: { isAnyModalOpen, isPeekOverviewIssueDeleteModalOpen, togglePeekOverviewIssueDeleteModal },
   } = useMobxStore();
 
   const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   // ref
   const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
@@ -155,14 +155,14 @@ export const IssueView: FC<IIssueView> = observer((props) => {
 
   const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
 
-  useOutsideClickDetector(issuePeekOverviewRef, () => removeRoutePeekId());
+  useOutsideClickDetector(issuePeekOverviewRef, () => !isAnyModalOpen && removeRoutePeekId());
 
   return (
     <>
       {issue && !isArchived && (
         <DeleteIssueModal
-          isOpen={deleteIssueModal}
-          handleClose={() => setDeleteIssueModal(false)}
+          isOpen={isPeekOverviewIssueDeleteModalOpen}
+          handleClose={() => togglePeekOverviewIssueDeleteModal(false)}
           data={issue}
           onSubmit={handleDeleteIssue}
         />
@@ -170,8 +170,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
       {issue && isArchived && (
         <DeleteArchivedIssueModal
           data={issue}
-          isOpen={deleteIssueModal}
-          handleClose={() => setDeleteIssueModal(false)}
+          isOpen={isPeekOverviewIssueDeleteModalOpen}
+          handleClose={() => togglePeekOverviewIssueDeleteModal(false)}
           onSubmit={handleDeleteIssue}
         />
       )}
@@ -262,7 +262,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                     <Link2 className="h-4 w-4 -rotate-45 text-custom-text-300 hover:text-custom-text-200" />
                   </button>
                   {!disableUserActions && (
-                    <button onClick={() => setDeleteIssueModal(true)}>
+                    <button onClick={() => togglePeekOverviewIssueDeleteModal(true)}>
                       <Trash2 className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
                     </button>
                   )}

web/components/issues/sidebar-select/parent.tsx

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 
 import { useRouter } from "next/router";
 
+import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
 // components
 import { ParentIssuesListModal } from "components/issues";
 // icons
@@ -16,18 +18,21 @@ type Props = {
   disabled?: boolean;
 };
 
-export const SidebarParentSelect: React.FC<Props> = ({ onChange, issueDetails, projectId, disabled = false }) => {
-  const [isParentModalOpen, setIsParentModalOpen] = useState(false);
+export const SidebarParentSelect: React.FC<Props> = observer((props) => {
+  const { onChange, issueDetails, projectId, disabled = false } = props;
   const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
 
+  const { commandPalette } = useMobxStore();
+  const { isPeekOverviewParentIssueModalOpen, togglePeekOverviewParentIssueModal } = commandPalette;
+
   const router = useRouter();
   const { issueId } = router.query;
 
   return (
     <>
       <ParentIssuesListModal
-        isOpen={isParentModalOpen}
-        handleClose={() => setIsParentModalOpen(false)}
+        isOpen={isPeekOverviewParentIssueModalOpen}
+        handleClose={() => togglePeekOverviewParentIssueModal(false)}
         onChange={(issue) => {
           onChange(issue.id);
           setSelectedParentIssue(issue);
@@ -46,7 +51,7 @@ export const SidebarParentSelect: React.FC<Props> = ({ onChange, issueDetails, p
             onChange("");
             setSelectedParentIssue(null);
           } else {
-            setIsParentModalOpen(true);
+            togglePeekOverviewParentIssueModal(true);
           }
         }}
         disabled={disabled}
@@ -62,4 +67,4 @@ export const SidebarParentSelect: React.FC<Props> = ({ onChange, issueDetails, p
       </button>
     </>
   );
-};
+});

web/store/command-palette.store.ts

@@ -29,6 +29,9 @@ export interface ICommandPaletteStore {
   isCreateIssueModalOpen: boolean;
   isDeleteIssueModalOpen: boolean;
   isBulkDeleteIssueModalOpen: boolean;
+  isPeekOverviewIssueLinkModalOpen: boolean;
+  isPeekOverviewParentIssueModalOpen: boolean;
+  isPeekOverviewIssueDeleteModalOpen: boolean;
 
   // computed
   isAnyModalOpen: boolean;
@@ -43,6 +46,9 @@ export interface ICommandPaletteStore {
   toggleCreateModuleModal: (value?: boolean) => void;
   toggleDeleteIssueModal: (value?: boolean) => void;
   toggleBulkDeleteIssueModal: (value?: boolean) => void;
+  togglePeekOverviewIssueLinkModal: (value?: boolean) => void;
+  togglePeekOverviewParentIssueModal: (value?: boolean) => void;
+  togglePeekOverviewIssueDeleteModal: (value?: boolean) => void;
 
   createIssueStoreType: EProjectStore;
 }
@@ -58,6 +64,9 @@ class CommandPaletteStore implements ICommandPaletteStore {
   isCreateIssueModalOpen: boolean = false;
   isDeleteIssueModalOpen: boolean = false;
   isBulkDeleteIssueModalOpen: boolean = false;
+  isPeekOverviewIssueLinkModalOpen: boolean = false;
+  isPeekOverviewParentIssueModalOpen: boolean = false;
+  isPeekOverviewIssueDeleteModalOpen: boolean = false;
   // root store
   rootStore;
   // service
@@ -79,6 +88,9 @@ class CommandPaletteStore implements ICommandPaletteStore {
       isCreateIssueModalOpen: observable.ref,
       isDeleteIssueModalOpen: observable.ref,
       isBulkDeleteIssueModalOpen: observable.ref,
+      isPeekOverviewIssueLinkModalOpen: observable.ref,
+      isPeekOverviewParentIssueModalOpen: observable.ref,
+      isPeekOverviewIssueDeleteModalOpen: observable.ref,
       // computed
       isAnyModalOpen: computed,
       // projectPages: computed,
@@ -93,6 +105,9 @@ class CommandPaletteStore implements ICommandPaletteStore {
       toggleCreateModuleModal: action,
       toggleDeleteIssueModal: action,
       toggleBulkDeleteIssueModal: action,
+      togglePeekOverviewIssueLinkModal: action,
+      togglePeekOverviewParentIssueModal: action,
+      togglePeekOverviewIssueDeleteModal: action,
     });
 
     this.rootStore = _rootStore;
@@ -110,7 +125,10 @@ class CommandPaletteStore implements ICommandPaletteStore {
         this.isCreateViewModalOpen ||
         this.isShortcutModalOpen ||
         this.isBulkDeleteIssueModalOpen ||
-        this.isDeleteIssueModalOpen
+        this.isDeleteIssueModalOpen ||
+        this.isPeekOverviewIssueLinkModalOpen ||
+        this.isPeekOverviewParentIssueModalOpen ||
+        this.isPeekOverviewIssueDeleteModalOpen
     );
   }
 
@@ -195,6 +213,28 @@ class CommandPaletteStore implements ICommandPaletteStore {
       this.isBulkDeleteIssueModalOpen = !this.isBulkDeleteIssueModalOpen;
     }
   };
+
+  togglePeekOverviewIssueLinkModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isPeekOverviewIssueLinkModalOpen = value;
+    } else {
+      this.isPeekOverviewIssueLinkModalOpen = !this.isPeekOverviewIssueLinkModalOpen;
+    }
+  };
+  togglePeekOverviewParentIssueModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isPeekOverviewParentIssueModalOpen = value;
+    } else {
+      this.isPeekOverviewParentIssueModalOpen = !this.isPeekOverviewParentIssueModalOpen;
+    }
+  };
+  togglePeekOverviewIssueDeleteModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isPeekOverviewIssueDeleteModalOpen = value;
+    } else {
+      this.isPeekOverviewIssueDeleteModalOpen = !this.isPeekOverviewIssueDeleteModalOpen;
+    }
+  };
 }
 
 export default CommandPaletteStore;