Merge pull request #197 from makeplane/preview

release: 0.19.4
2026-02-24 04:00:14 +01:00 · 2024-05-02 22:03:55 +05:30
parent c2ac2de6fb 2d02ad7269
commit 13dd2f118e
32 changed files with 94 additions and 113 deletions
--- a/apiserver/plane/app/views/workspace/cycle.py
+++ b/apiserver/plane/app/views/workspace/cycle.py
@@ -27,7 +27,7 @@ class WorkspaceCyclesEndpoint(BaseAPIView):
            .select_related("project")
            .select_related("workspace")
            .select_related("owned_by")
-            .filter(archived_at__isnull=False)
+            .filter(archived_at__isnull=True)
            .annotate(
                total_issues=Count(
                    "issue_cycle",
--- a/apiserver/plane/app/views/workspace/module.py
+++ b/apiserver/plane/app/views/workspace/module.py
@@ -30,7 +30,7 @@ class WorkspaceModulesEndpoint(BaseAPIView):
            .select_related("workspace")
            .select_related("lead")
            .prefetch_related("members")
-            .filter(archived_at__isnull=False)
+            .filter(archived_at__isnull=True)
            .prefetch_related(
                Prefetch(
                    "link_module",
--- a/packages/editor/lite-text-editor/src/ui/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/index.tsx
@@ -33,6 +33,7 @@ export interface ILiteTextEditor {
  };
  tabIndex?: number;
  placeholder?: string | ((isFocused: boolean, value: string) => string);
+  id?: string;
 }

 const LiteTextEditor = (props: ILiteTextEditor) => {
@@ -48,12 +49,14 @@ const LiteTextEditor = (props: ILiteTextEditor) => {
    tabIndex,
    mentionHandler,
    placeholder = "Add comment...",
+    id = "",
  } = props;

  const editor = useEditor({
    onChange,
    initialValue,
    value,
+    id,
    editorClassName,
    restoreFile: fileHandler.restore,
    uploadFile: fileHandler.upload,
--- a/packages/types/src/inbox.d.ts
+++ b/packages/types/src/inbox.d.ts
@@ -20,7 +20,7 @@ export type TInboxIssueCurrentTab = EInboxIssueCurrentTab;
 export type TInboxIssueStatus = EInboxIssueStatus;

 // filters
-export type TInboxIssueFilterMemberKeys = "assignee" | "created_by";
+export type TInboxIssueFilterMemberKeys = "assignees" | "created_by";

 export type TInboxIssueFilterDateKeys = "created_at" | "updated_at";

--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -85,7 +85,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
        setIsSearching(false);
        setIsLoading(false);
      });
-  }, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, searchParams, workspaceSlug]);
+  }, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, workspaceSlug]);

  return (
    <>
--- a/web/components/cycles/quick-actions.tsx
+++ b/web/components/cycles/quick-actions.tsx
@@ -180,6 +180,7 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
                },
                item.className
              )}
+              disabled={item.disabled}
            >
              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
              <div>
--- a/web/components/inbox/content/issue-properties.tsx
+++ b/web/components/inbox/content/issue-properties.tsx
@@ -31,6 +31,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
  const minDate = issue.start_date ? getDate(issue.start_date) : null;
  minDate?.setDate(minDate.getDate());
  if (!issue || !issue?.id) return <></>;
+
  return (
    <div className="flex h-min w-full flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
      <div className="h-min w-full overflow-y-auto px-3">
--- a/web/components/inbox/inbox-filter/applied-filters/member.tsx
+++ b/web/components/inbox/inbox-filter/applied-filters/member.tsx
@@ -34,8 +34,8 @@ export const InboxIssueAppliedFiltersMember: FC<InboxIssueAppliedFiltersMember>
        if (!optionDetail) return <></>;
        return (
          <div key={value} className="relative flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
-              <Avatar name={optionDetail.display_name} src={optionDetail.avatar} showTooltip={false} size="md" />
+            <div className="flex-shrink-0 relative flex justify-center items-center overflow-hidden">
+              <Avatar name={optionDetail.display_name} src={optionDetail.avatar} showTooltip={false} size="sm" />
            </div>
            <div className="text-xs truncate">{optionDetail?.display_name}</div>
            <div
--- a/web/components/inbox/inbox-filter/applied-filters/root.tsx
+++ b/web/components/inbox/inbox-filter/applied-filters/root.tsx
@@ -25,7 +25,7 @@ export const InboxIssueAppliedFilters: FC = observer(() => {
      {/* priority */}
      <InboxIssueAppliedFiltersPriority />
      {/* assignees */}
-      <InboxIssueAppliedFiltersMember filterKey="assignee" label="Assignee" />
+      <InboxIssueAppliedFiltersMember filterKey="assignees" label="Assignees" />
      {/* created_by */}
      <InboxIssueAppliedFiltersMember filterKey="created_by" label="Created By" />
      {/* label */}
--- a/web/components/inbox/inbox-filter/filters/filter-selection.tsx
+++ b/web/components/inbox/inbox-filter/filters/filter-selection.tsx
@@ -60,8 +60,8 @@ export const InboxIssueFilterSelection: FC = observer(() => {
        {/* assignees */}
        <div className="py-2">
          <FilterMember
-            filterKey="assignee"
-            label="Assignee"
+            filterKey="assignees"
+            label="Assignees"
            searchQuery={filtersSearchQuery}
            memberIds={projectMemberIds ?? []}
          />
--- a/web/components/issues/attachment/attachment-detail.tsx
+++ b/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>
        )}
--- a/web/components/issues/attachment/attachment-upload.tsx
+++ b/web/components/issues/attachment/attachment-upload.tsx
@@ -1,11 +1,11 @@
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useDropzone } from "react-dropzone";
-// hooks
 // constants
 import { MAX_FILE_SIZE } from "@/constants/common";
 // helpers
 import { generateFileName } from "@/helpers/attachment.helper";
+// hooks
 import { useApplication } from "@/hooks/store";
 // types
 import { TAttachmentOperations } from "./root";
@@ -27,24 +27,28 @@ export const IssueAttachmentUpload: React.FC<Props> = observer((props) => {
  // states
  const [isLoading, setIsLoading] = useState(false);

-  const onDrop = useCallback((acceptedFiles: File[]) => {
-    const currentFile: File = acceptedFiles[0];
-    if (!currentFile || !workspaceSlug) return;
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      const currentFile: File = acceptedFiles[0];
+      if (!currentFile || !workspaceSlug) return;

-    const uploadedFile: File = new File([currentFile], generateFileName(currentFile.name), { type: currentFile.type });
-    const formData = new FormData();
-    formData.append("asset", uploadedFile);
-    formData.append(
-      "attributes",
-      JSON.stringify({
-        name: uploadedFile.name,
-        size: uploadedFile.size,
-      })
-    );
-    setIsLoading(true);
-    handleAttachmentOperations.create(formData).finally(() => setIsLoading(false));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+      const uploadedFile: File = new File([currentFile], generateFileName(currentFile.name), {
+        type: currentFile.type,
+      });
+      const formData = new FormData();
+      formData.append("asset", uploadedFile);
+      formData.append(
+        "attributes",
+        JSON.stringify({
+          name: uploadedFile.name,
+          size: uploadedFile.size,
+        })
+      );
+      setIsLoading(true);
+      handleAttachmentOperations.create(formData).finally(() => setIsLoading(false));
+    },
+    [handleAttachmentOperations, workspaceSlug]
+  );

  const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
    onDrop,
--- a/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-confirmation-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);
  };

--- a/web/components/issues/attachment/index.ts
+++ b/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";
--- a/web/components/issues/attachment/root.tsx
+++ b/web/components/issues/attachment/root.tsx
@@ -95,7 +95,7 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
        }
      },
    }),
-    [workspaceSlug, projectId, issueId, createAttachment, removeAttachment]
+    [captureIssueEvent, workspaceSlug, projectId, issueId, createAttachment, removeAttachment]
  );

  return (
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
@@ -18,10 +18,11 @@ type TIssueCommentCreate = {
  workspaceSlug: string;
  activityOperations: TActivityOperations;
  showAccessSpecifier?: boolean;
+  issueId: string;
 };

 export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
-  const { workspaceSlug, projectId, activityOperations, showAccessSpecifier = false } = props;
+  const { workspaceSlug, projectId, issueId, activityOperations, showAccessSpecifier = false } = props;
  // refs
  const editorRef = useRef<any>(null);
  // store hooks
@@ -72,6 +73,8 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
            render={({ field: { value, onChange } }) => (
              <LiteTextEditor
                workspaceId={workspaceId}
+                id={"add_comment_" + issueId}
+                value={"<p></p>"}
                projectId={projectId}
                workspaceSlug={workspaceSlug}
                onEnterKeyPress={(e) => {
--- a/web/components/issues/issue-detail/issue-activity/root.tsx
+++ b/web/components/issues/issue-detail/issue-activity/root.tsx
@@ -146,6 +146,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
              />
              {!disabled && (
                <IssueCommentCreate
+                  issueId={issueId}
                  projectId={projectId}
                  workspaceSlug={workspaceSlug}
                  activityOperations={activityOperations}
@@ -165,6 +166,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
              />
              {!disabled && (
                <IssueCommentCreate
+                  issueId={issueId}
                  projectId={projectId}
                  workspaceSlug={workspaceSlug}
                  activityOperations={activityOperations}
--- a/web/components/issues/issue-detail/sidebar.tsx
+++ b/web/components/issues/issue-detail/sidebar.tsx
@@ -13,7 +13,6 @@ import {
  CopyPlus,
  CalendarClock,
  CalendarCheck2,
-  UserCircle2,
 } from "lucide-react";
 // hooks
 // components
@@ -37,7 +36,6 @@ import {
 } from "@/components/dropdowns";
 // ui
 // helpers
-import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import {
  DeleteIssueModal,
  IssueLinkRoot,
@@ -56,7 +54,7 @@ import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // types
-import { useEstimate, useIssueDetail, useMember, useProject, useProjectState, useUser } from "@/hooks/store";
+import { useEstimate, useIssueDetail, useProject, useProjectState, useUser } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // components
 import type { TIssueOperations } from "./root";
@@ -90,12 +88,9 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
  } = useIssueDetail();
  const { getStateById } = useProjectState();
  const { isMobile } = usePlatformOS();
-  const { getUserDetails } = useMember();
  const issue = getIssueById(issueId);
  if (!issue) return <></>;

-  const createdByDetails = getUserDetails(issue.created_by);
-
  const handleCopyText = () => {
    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => {
@@ -262,21 +257,6 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
              />
            </div>

-            {createdByDetails && (
-              <div className="flex h-8 items-center gap-2">
-                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                  <UserCircle2 className="h-4 w-4 flex-shrink-0" />
-                  <span>Created by</span>
-                </div>
-                <Tooltip tooltipContent={createdByDetails?.display_name} isMobile={isMobile}>
-                  <div className="h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-default">
-                    <ButtonAvatars showTooltip={false} userIds={createdByDetails.id} />
-                    <span className="flex-grow truncate text-xs leading-5">{createdByDetails?.display_name}</span>
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-
            <div className="flex h-8 items-center gap-2">
              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                <CalendarClock className="h-4 w-4 flex-shrink-0" />
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@@ -181,6 +181,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
                },
                item.className
              )}
+              disabled={item.disabled}
            >
              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
              <div>
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -143,6 +143,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
                },
                item.className
              )}
+              disabled={item.disabled}
            >
              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
              <div>
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -201,6 +201,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
                },
                item.className
              )}
+              disabled={item.disabled}
            >
              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
              <div>
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
@@ -127,6 +127,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
                },
                item.className
              )}
+              disabled={item.disabled}
            >
              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
              <div>
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -198,6 +198,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
                },
                item.className
              )}
+              disabled={item.disabled}
            >
              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
              <div>
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -191,6 +191,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
                },
                item.className
              )}
+              disabled={item.disabled}
            >
              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
              <div>
--- a/web/components/issues/peek-overview/properties.tsx
+++ b/web/components/issues/peek-overview/properties.tsx
@@ -10,11 +10,10 @@ import {
  XCircle,
  CalendarClock,
  CalendarCheck2,
-  UserCircle2,
 } from "lucide-react";
 // hooks
 // ui icons
-import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon, Tooltip } from "@plane/ui";
+import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
 // components
 import {
  DateDropdown,
@@ -23,7 +22,6 @@ import {
  MemberDropdown,
  StateDropdown,
 } from "@/components/dropdowns";
-import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import {
  IssueLinkRoot,
  IssueCycleSelect,
@@ -37,8 +35,7 @@ import {
 import { cn } from "@/helpers/common.helper";
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
-import { useIssueDetail, useMember, useProject, useProjectState } from "@/hooks/store";
-import { usePlatformOS } from "@/hooks/use-platform-os";
+import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";

 interface IPeekOverviewProperties {
  workspaceSlug: string;
@@ -56,12 +53,9 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
    issue: { getIssueById },
  } = useIssueDetail();
  const { getStateById } = useProjectState();
-  const { getUserDetails } = useMember();
-  const { isMobile } = usePlatformOS();
  // derived values
  const issue = getIssueById(issueId);
  if (!issue) return <></>;
-  const createdByDetails = getUserDetails(issue?.created_by);
  const projectDetails = getProjectById(issue.project_id);
  const isEstimateEnabled = projectDetails?.estimate;
  const stateDetails = getStateById(issue.state_id);
@@ -137,22 +131,6 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
          />
        </div>

-        {/* created by */}
-        {createdByDetails && (
-          <div className="flex w-full items-center gap-3 h-8">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-              <UserCircle2 className="h-4 w-4 flex-shrink-0" />
-              <span>Created by</span>
-            </div>
-            <Tooltip tooltipContent={createdByDetails?.display_name} isMobile={isMobile}>
-              <div className="h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-default">
-                <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />
-                <span className="flex-grow truncate text-xs leading-5">{createdByDetails?.display_name}</span>
-              </div>
-            </Tooltip>
-          </div>
-        )}
-
        {/* start date */}
        <div className="flex w-full items-center gap-3 h-8">
          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
--- a/web/components/modules/quick-actions.tsx
+++ b/web/components/modules/quick-actions.tsx
@@ -176,6 +176,7 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
                },
                item.className
              )}
+              disabled={item.disabled}
            >
              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
              <div>
--- a/web/components/pages/dropdowns/quick-actions.tsx
+++ b/web/components/pages/dropdowns/quick-actions.tsx
@@ -104,6 +104,7 @@ export const PageQuickActions: React.FC<Props> = observer((props) => {
                item.action();
              }}
              className="flex items-center gap-2"
+              disabled={item.disabled}
            >
              {item.icon && <item.icon className="h-3 w-3" />}
              {item.title}
--- a/web/components/project/card.tsx
+++ b/web/components/project/card.tsx
@@ -123,14 +123,14 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
      action: handleOpenInNewTab,
      title: "Open in new tab",
      icon: ExternalLink,
-      shouldRender: project.is_member,
+      shouldRender: project.is_member && !isArchived,
    },
    {
      key: "copy-link",
      action: handleCopyText,
      title: "Copy link",
      icon: LinkIcon,
-      shouldRender: true,
+      shouldRender: !isArchived,
    },
    {
      key: "restore",
--- a/web/components/views/quick-actions.tsx
+++ b/web/components/views/quick-actions.tsx
@@ -103,6 +103,7 @@ export const ViewQuickActions: React.FC<Props> = observer((props) => {
                },
                item.className
              )}
+              disabled={item.disabled}
            >
              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
              <div>
--- a/web/components/workspace/views/default-view-quick-action.tsx
+++ b/web/components/workspace/views/default-view-quick-action.tsx
@@ -104,6 +104,7 @@ export const DefaultWorkspaceViewQuickActions: React.FC<Props> = observer((props
                },
                item.className
              )}
+              disabled={item.disabled}
            >
              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
              <div>
--- a/web/components/workspace/views/quick-action.tsx
+++ b/web/components/workspace/views/quick-action.tsx
@@ -132,6 +132,7 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
                },
                item.className
              )}
+              disabled={item.disabled}
            >
              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
              <div>
--- a/web/store/issue/issue-details/root.store.ts
+++ b/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 (