thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

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

Browse Source 
* fix: delete attachment not working in the peek overview

* fix: sub-issue delete not working

* fix: lint errors
This commit is contained in:
Aaryan Khandelwal 2024-03-22 18:37:11 +05:30 committed by GitHub
parent 5aed04eb41
commit 1caceca1e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 38 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/components/issues/attachment/attachment-detail.tsx
View File

@ -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}
setIsOpen={setAttachmentDeleteModal}
isOpen={isDeleteAttachmentModalOpen}
setIsOpen={() => toggleDeleteAttachmentModal(false)}
handleAttachmentOperations={handleAttachmentOperations}
data={attachment}
/>
@ -81,15 +83,11 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = (props) => {
</Link>
{!disabled && (
<button
onClick={() => {
setAttachmentDeleteModal(true);
}}
>
<button onClick={() => toggleDeleteAttachmentModal(true)}>
<X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
</button>
)}
</div>
</>
);
};
});

4
web/components/issues/peek-overview/header.tsx
View File

@ -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>

16
web/components/issues/peek-overview/view.tsx
View File

@ -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

2
web/components/issues/sub-issues/issue-list-item.tsx
View File

@ -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">

2
web/components/issues/sub-issues/root.tsx
View File

@ -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 () =>

25
web/store/issue/issue-details/root.store.ts
View File

@ -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 (