[WEB-1154] fix: delete attachment modal logic (#4338)

* fix: delete attachment modal logic

* chore: remove console log

* chore: update delete attachment button type

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

@@ -2,19 +2,19 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { AlertCircle, X } from "lucide-react";
+// ui
 import { Tooltip } from "@plane/ui";
-import { getFileIcon } from "@/components/icons/attachment";
+// icons
+import { getFileIcon } from "@/components/icons";
+// components
+import { IssueAttachmentDeleteModal } from "@/components/issues";
+// helpers
 import { convertBytesToSize, getFileExtension, getFileName } from "@/helpers/attachment.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { truncateText } from "@/helpers/string.helper";
+// hooks
 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";
 
@@ -36,24 +36,24 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((pro
     isDeleteAttachmentModalOpen,
     toggleDeleteAttachmentModal,
   } = useIssueDetail();
-  // states
+  // derived values
+  const attachment = attachmentId ? getAttachmentById(attachmentId) : undefined;
+  // hooks
   const { isMobile } = usePlatformOS();
-  const attachment = attachmentId && getAttachmentById(attachmentId);
 
   if (!attachment) return <></>;
+
   return (
     <>
-      <IssueAttachmentDeleteModal
-        isOpen={isDeleteAttachmentModalOpen}
-        setIsOpen={() => toggleDeleteAttachmentModal(false)}
-        handleAttachmentOperations={handleAttachmentOperations}
-        data={attachment}
-      />
-
-      <div
-        key={attachmentId}
-        className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-100 px-4 py-2 text-sm"
-      >
+      {isDeleteAttachmentModalOpen === attachment.id && (
+        <IssueAttachmentDeleteModal
+          isOpen={!!isDeleteAttachmentModalOpen}
+          onClose={() => toggleDeleteAttachmentModal(null)}
+          handleAttachmentOperations={handleAttachmentOperations}
+          data={attachment}
+        />
+      )}
+      <div className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-100 px-4 py-2 text-sm">
         <Link href={attachment.asset} target="_blank" rel="noopener noreferrer">
           <div className="flex items-center gap-3">
             <div className="h-7 w-7">{getFileIcon(getFileExtension(attachment.asset))}</div>
@@ -83,7 +83,7 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((pro
         </Link>
 
         {!disabled && (
-          <button onClick={() => toggleDeleteAttachmentModal(true)}>
+          <button type="button" onClick={() => toggleDeleteAttachmentModal(attachment.id)}>
             <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
           </button>
         )}

web/components/issues/attachment/delete-attachment-modal.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment, Dispatch, SetStateAction, useState } from "react";
+import { FC, Fragment, useState } from "react";
 import { AlertTriangle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 import type { TIssueAttachment } from "@plane/types";
@@ -14,18 +14,18 @@ export type TAttachmentOperationsRemoveModal = Exclude<TAttachmentOperations, "c
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  onClose: () => void;
   data: TIssueAttachment;
   handleAttachmentOperations: TAttachmentOperationsRemoveModal;
 };
 
 export const IssueAttachmentDeleteModal: FC<Props> = (props) => {
-  const { isOpen, setIsOpen, data, handleAttachmentOperations } = props;
-  // state
+  const { isOpen, onClose, data, handleAttachmentOperations } = props;
+  // states
   const [loader, setLoader] = useState(false);
 
   const handleClose = () => {
-    setIsOpen(false);
+    onClose();
     setLoader(false);
   };
 

web/components/issues/attachment/index.ts

@@ -1,7 +1,5 @@
-export * from "./root";
-
-export * from "./attachment-upload";
-export * from "./delete-attachment-confirmation-modal";
-
-export * from "./attachments-list";
 export * from "./attachment-detail";
+export * from "./attachment-upload";
+export * from "./attachments-list";
+export * from "./delete-attachment-modal";
+export * from "./root";

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

@@ -51,7 +51,7 @@ export interface IIssueDetail
   isArchiveIssueModalOpen: boolean;
   isRelationModalOpen: TIssueRelationTypes | null;
   isSubIssuesModalOpen: boolean;
-  isDeleteAttachmentModalOpen: boolean;
+  isDeleteAttachmentModalOpen: string | null;
   // computed
   isAnyModalOpen: boolean;
   // helper actions
@@ -65,7 +65,7 @@ export interface IIssueDetail
   toggleArchiveIssueModal: (value: boolean) => void;
   toggleRelationModal: (relationType: TIssueRelationTypes | null) => void;
   toggleSubIssuesModal: (value: boolean) => void;
-  toggleDeleteAttachmentModal: (value: boolean) => void;
+  toggleDeleteAttachmentModal: (attachmentId: string | null) => void;
   // store
   rootIssueStore: IIssueRootStore;
   issue: IIssueStore;
@@ -90,7 +90,7 @@ export class IssueDetail implements IIssueDetail {
   isArchiveIssueModalOpen: boolean = false;
   isRelationModalOpen: TIssueRelationTypes | null = null;
   isSubIssuesModalOpen: boolean = false;
-  isDeleteAttachmentModalOpen: boolean = false;
+  isDeleteAttachmentModalOpen: string | null = null;
   // store
   rootIssueStore: IIssueRootStore;
   issue: IIssueStore;
@@ -154,7 +154,7 @@ export class IssueDetail implements IIssueDetail {
       this.isArchiveIssueModalOpen ||
       !!this.isRelationModalOpen ||
       this.isSubIssuesModalOpen ||
-      this.isDeleteAttachmentModalOpen
+      !!this.isDeleteAttachmentModalOpen
     );
   }
 
@@ -170,7 +170,7 @@ export class IssueDetail implements IIssueDetail {
   toggleArchiveIssueModal = (value: boolean) => (this.isArchiveIssueModalOpen = value);
   toggleRelationModal = (relationType: TIssueRelationTypes | null) => (this.isRelationModalOpen = relationType);
   toggleSubIssuesModal = (value: boolean) => (this.isSubIssuesModalOpen = value);
-  toggleDeleteAttachmentModal = (value: boolean) => (this.isDeleteAttachmentModalOpen = value);
+  toggleDeleteAttachmentModal = (attachmentId: string | null) => (this.isDeleteAttachmentModalOpen = attachmentId);
 
   // issue
   fetchIssue = async (