From 1caceca1e7d146be7134cfd17ede302f58a8e599 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Fri, 22 Mar 2024 18:37:11 +0530 Subject: [PATCH] [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 --- .../issues/attachment/attachment-detail.tsx | 30 +++++++++---------- .../issues/peek-overview/header.tsx | 4 +-- web/components/issues/peek-overview/view.tsx | 16 +++------- .../issues/sub-issues/issue-list-item.tsx | 2 +- web/components/issues/sub-issues/root.tsx | 2 +- web/store/issue/issue-details/root.store.ts | 25 ++++++++++------ 6 files changed, 38 insertions(+), 41 deletions(-) diff --git a/web/components/issues/attachment/attachment-detail.tsx b/web/components/issues/attachment/attachment-detail.tsx index b96ab7b18..8a1ade183 100644 --- a/web/components/issues/attachment/attachment-detail.tsx +++ b/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 = (props) => { +export const IssueAttachmentsDetail: FC = observer((props) => { // props const { attachmentId, handleAttachmentOperations, disabled } = props; // store hooks const { getUserDetails } = useMember(); const { attachment: { getAttachmentById }, + isDeleteAttachmentModalOpen, + toggleDeleteAttachmentModal, } = useIssueDetail(); // states - const [attachmentDeleteModal, setAttachmentDeleteModal] = useState(false); const { isMobile } = usePlatformOS(); const attachment = attachmentId && getAttachmentById(attachmentId); @@ -42,8 +44,8 @@ export const IssueAttachmentsDetail: FC = (props) => { return ( <> toggleDeleteAttachmentModal(false)} handleAttachmentOperations={handleAttachmentOperations} data={attachment} /> @@ -81,15 +83,11 @@ export const IssueAttachmentsDetail: FC = (props) => { {!disabled && ( - )} ); -}; +}); diff --git a/web/components/issues/peek-overview/header.tsx b/web/components/issues/peek-overview/header.tsx index ba1b0f5b6..70c57c3f3 100644 --- a/web/components/issues/peek-overview/header.tsx +++ b/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 = observer((pr )} {!disabled && ( - diff --git a/web/components/issues/peek-overview/view.tsx b/web/components/issues/peek-overview/view.tsx index 493b8bd51..3723627a9 100644 --- a/web/components/issues/peek-overview/view.tsx +++ b/web/components/issues/peek-overview/view.tsx @@ -91,26 +91,18 @@ export const IssueView: FC = observer((props) => { /> )} - {issue && !is_archived && ( + {issue && isDeleteIssueModalOpen === issue.id && ( { - toggleDeleteIssueModal(false); + toggleDeleteIssueModal(null); + removeRoutePeekId(); }} data={issue} onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)} /> )} - {issue && is_archived && ( - toggleDeleteIssueModal(false)} - onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)} - /> - )} -
{issueId && (
= observer((props) => { { handleIssueCrudState("delete", parentIssueId, issue); - toggleDeleteIssueModal(true); + toggleDeleteIssueModal(issue.id); }} >
diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx index b9c40f6e2..25cbc2b17 100644 --- a/web/components/issues/sub-issues/root.tsx +++ b/web/components/issues/sub-issues/root.tsx @@ -523,7 +523,7 @@ export const SubIssuesRoot: FC = observer((props) => { isOpen={issueCrudState?.delete?.toggle} handleClose={() => { handleIssueCrudState("delete", null, null); - toggleDeleteIssueModal(false); + toggleDeleteIssueModal(null); }} data={issueCrudState?.delete?.issue as TIssue} onSubmit={async () => diff --git a/web/store/issue/issue-details/root.store.ts b/web/store/issue/issue-details/root.store.ts index c58e1af42..a9672655b 100644 --- a/web/store/issue/issue-details/root.store.ts +++ b/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.isSubIssuesModalOpen + !!this.isRelationModalOpen || + 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 (