[WEB-818] fix: sub-issue and attachment delete not working in the peek overview (#4042)

* fix: delete attachment not working in the peek overview

* fix: sub-issue delete not working

* fix: lint errors

web/components/issues/attachment/attachment-detail.tsx

@@ -1,18 +1,19 @@
-import { FC, useState } from "react";
+import { FC } from "react";
+import { observer } from "mobx-react";
 import Link from "next/link";
 import { AlertCircle, X } from "lucide-react";
-// hooks
-// ui
 import { Tooltip } from "@plane/ui";
-// components
-// icons
 import { getFileIcon } from "@/components/icons";
-// helper
 import { convertBytesToSize, getFileExtension, getFileName } from "@/helpers/attachment.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { truncateText } from "@/helpers/string.helper";
 import { useIssueDetail, useMember } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+// hooks
+// ui
+// components
+// icons
+// helper
 import { IssueAttachmentDeleteModal } from "./delete-attachment-confirmation-modal";
 // types
 import { TAttachmentOperations } from "./root";
@@ -25,16 +26,17 @@ type TIssueAttachmentsDetail = {
   disabled?: boolean;
 };
 
-export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = (props) => {
+export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((props) => {
   // props
   const { attachmentId, handleAttachmentOperations, disabled } = props;
   // store hooks
   const { getUserDetails } = useMember();
   const {
     attachment: { getAttachmentById },
+    isDeleteAttachmentModalOpen,
+    toggleDeleteAttachmentModal,
   } = useIssueDetail();
   // states
-  const [attachmentDeleteModal, setAttachmentDeleteModal] = useState<boolean>(false);
   const { isMobile } = usePlatformOS();
   const attachment = attachmentId && getAttachmentById(attachmentId);
 
@@ -42,8 +44,8 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = (props) => {
   return (
     <>
       <IssueAttachmentDeleteModal
-        isOpen={attachmentDeleteModal}
+        isOpen={isDeleteAttachmentModalOpen}
-        setIsOpen={setAttachmentDeleteModal}
+        setIsOpen={() => toggleDeleteAttachmentModal(false)}
         handleAttachmentOperations={handleAttachmentOperations}
         data={attachment}
       />
@@ -81,15 +83,11 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = (props) => {
         </Link>
 
         {!disabled && (
-          <button
+          <button onClick={() => toggleDeleteAttachmentModal(true)}>
-            onClick={() => {
-              setAttachmentDeleteModal(true);
-            }}
-          >
             <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
           </button>
         )}
       </div>
     </>
   );
-};
+});

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

@@ -53,7 +53,7 @@ export type PeekOverviewHeaderProps = {
   issueId: string;
   isArchived: boolean;
   disabled: boolean;
-  toggleDeleteIssueModal: (value: boolean) => void;
+  toggleDeleteIssueModal: (issueId: string | null) => void;
   toggleArchiveIssueModal: (value: boolean) => void;
   handleRestoreIssue: () => void;
   isSubmitting: "submitting" | "submitted" | "saved";
@@ -188,7 +188,7 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
           )}
           {!disabled && (
             <Tooltip tooltipContent="Delete" isMobile={isMobile}>
-              <button type="button" onClick={() => toggleDeleteIssueModal(true)}>
+              <button type="button" onClick={() => toggleDeleteIssueModal(issueId)}>
                 <Trash2 className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
               </button>
             </Tooltip>

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

@@ -91,26 +91,18 @@ export const IssueView: FC<IIssueView> = observer((props) => {
         />
       )}
 
-      {issue && !is_archived && (
+      {issue && isDeleteIssueModalOpen === issue.id && (
         <DeleteIssueModal
-          isOpen={isDeleteIssueModalOpen}
+          isOpen={!!isDeleteIssueModalOpen}
           handleClose={() => {
-            toggleDeleteIssueModal(false);
+            toggleDeleteIssueModal(null);
+            removeRoutePeekId();
           }}
           data={issue}
           onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)}
         />
       )}
 
-      {issue && is_archived && (
-        <DeleteIssueModal
-          data={issue}
-          isOpen={isDeleteIssueModalOpen}
-          handleClose={() => toggleDeleteIssueModal(false)}
-          onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)}
-        />
-      )}
-
       <div className="w-full !text-base">
         {issueId && (
           <div

web/components/issues/sub-issues/issue-list-item.tsx

@@ -158,7 +158,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
                 <CustomMenu.MenuItem
                   onClick={() => {
                     handleIssueCrudState("delete", parentIssueId, issue);
-                    toggleDeleteIssueModal(true);
+                    toggleDeleteIssueModal(issue.id);
                   }}
                 >
                   <div className="flex items-center gap-2">

web/components/issues/sub-issues/root.tsx

@@ -523,7 +523,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                 isOpen={issueCrudState?.delete?.toggle}
                 handleClose={() => {
                   handleIssueCrudState("delete", null, null);
-                  toggleDeleteIssueModal(false);
+                  toggleDeleteIssueModal(null);
                 }}
                 data={issueCrudState?.delete?.issue as TIssue}
                 onSubmit={async () =>

web/store/issue/issue-details/root.store.ts

@@ -47,10 +47,11 @@ export interface IIssueDetail
   isCreateIssueModalOpen: boolean;
   isIssueLinkModalOpen: boolean;
   isParentIssueModalOpen: boolean;
-  isDeleteIssueModalOpen: boolean;
+  isDeleteIssueModalOpen: string | null;
   isArchiveIssueModalOpen: boolean;
   isRelationModalOpen: TIssueRelationTypes | null;
   isSubIssuesModalOpen: boolean;
+  isDeleteAttachmentModalOpen: boolean;
   // computed
   isAnyModalOpen: boolean;
   // actions
@@ -58,10 +59,11 @@ export interface IIssueDetail
   toggleCreateIssueModal: (value: boolean) => void;
   toggleIssueLinkModal: (value: boolean) => void;
   toggleParentIssueModal: (value: boolean) => void;
-  toggleDeleteIssueModal: (value: boolean) => void;
+  toggleDeleteIssueModal: (issueId: string | null) => void;
   toggleArchiveIssueModal: (value: boolean) => void;
-  toggleRelationModal: (value: TIssueRelationTypes | null) => void;
+  toggleRelationModal: (relationType: TIssueRelationTypes | null) => void;
   toggleSubIssuesModal: (value: boolean) => void;
+  toggleDeleteAttachmentModal: (value: boolean) => void;
   // store
   rootIssueStore: IIssueRootStore;
   issue: IIssueStore;
@@ -82,10 +84,11 @@ export class IssueDetail implements IIssueDetail {
   isCreateIssueModalOpen: boolean = false;
   isIssueLinkModalOpen: boolean = false;
   isParentIssueModalOpen: boolean = false;
-  isDeleteIssueModalOpen: boolean = false;
+  isDeleteIssueModalOpen: string | null = null;
   isArchiveIssueModalOpen: boolean = false;
   isRelationModalOpen: TIssueRelationTypes | null = null;
   isSubIssuesModalOpen: boolean = false;
+  isDeleteAttachmentModalOpen: boolean = false;
   // store
   rootIssueStore: IIssueRootStore;
   issue: IIssueStore;
@@ -110,6 +113,7 @@ export class IssueDetail implements IIssueDetail {
       isArchiveIssueModalOpen: observable.ref,
       isRelationModalOpen: observable.ref,
       isSubIssuesModalOpen: observable.ref,
+      isDeleteAttachmentModalOpen: observable.ref,
       // computed
       isAnyModalOpen: computed,
       // action
@@ -121,6 +125,7 @@ export class IssueDetail implements IIssueDetail {
       toggleArchiveIssueModal: action,
       toggleRelationModal: action,
       toggleSubIssuesModal: action,
+      toggleDeleteAttachmentModal: action,
     });
 
     // store
@@ -143,10 +148,11 @@ export class IssueDetail implements IIssueDetail {
       this.isCreateIssueModalOpen ||
       this.isIssueLinkModalOpen ||
       this.isParentIssueModalOpen ||
-      this.isDeleteIssueModalOpen ||
+      !!this.isDeleteIssueModalOpen ||
       this.isArchiveIssueModalOpen ||
-      Boolean(this.isRelationModalOpen) ||
+      !!this.isRelationModalOpen ||
-      this.isSubIssuesModalOpen
+      this.isSubIssuesModalOpen ||
+      this.isDeleteAttachmentModalOpen
     );
   }
 
@@ -155,10 +161,11 @@ export class IssueDetail implements IIssueDetail {
   toggleCreateIssueModal = (value: boolean) => (this.isCreateIssueModalOpen = value);
   toggleIssueLinkModal = (value: boolean) => (this.isIssueLinkModalOpen = value);
   toggleParentIssueModal = (value: boolean) => (this.isParentIssueModalOpen = value);
-  toggleDeleteIssueModal = (value: boolean) => (this.isDeleteIssueModalOpen = value);
+  toggleDeleteIssueModal = (issueId: string | null) => (this.isDeleteIssueModalOpen = issueId);
   toggleArchiveIssueModal = (value: boolean) => (this.isArchiveIssueModalOpen = value);
-  toggleRelationModal = (value: TIssueRelationTypes | null) => (this.isRelationModalOpen = value);
+  toggleRelationModal = (relationType: TIssueRelationTypes | null) => (this.isRelationModalOpen = relationType);
   toggleSubIssuesModal = (value: boolean) => (this.isSubIssuesModalOpen = value);
+  toggleDeleteAttachmentModal = (value: boolean) => (this.isDeleteAttachmentModalOpen = value);
 
   // issue
   fetchIssue = async (