[WEB-1600] chore: issue detail ui enhancement (#4832)

* chore: archived issue header consistency * chore: restor banner removed from issue detail page * chore: issue detail quick action component added * chore: moved sidebar issue quick action to app header
2025-12-25 08:09:33 +01:00 · 2024-06-15 18:12:18 +05:30
parent bba10d7073
commit c99579cddc
8 changed files with 276 additions and 184 deletions
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
@@ -38,7 +38,7 @@ export const ProjectArchivesHeader: FC = observer(() => {
    PROJECT_ARCHIVES_BREADCRUMB_LIST[activeTab as keyof typeof PROJECT_ARCHIVES_BREADCRUMB_LIST];

  return (
-    <div className="relative z-10 flex h-14 w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
        <div className="flex items-center gap-2.5">
          <Breadcrumbs onBack={router.back}>
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
@@ -1,40 +1,28 @@
 "use client";

-import { useState } from "react";
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import useSWR from "swr";
-// icons
-import { ArchiveRestoreIcon } from "lucide-react";
 // ui
-import { ArchiveIcon, Button, Loader, TOAST_TYPE, setToast } from "@plane/ui";
+import { Loader } from "@plane/ui";
 // components
 import { PageHead } from "@/components/core";
 import { IssueDetailRoot } from "@/components/issues";
 // constants
-import { EIssuesStoreType } from "@/constants/issue";
-import { EUserProjectRoles } from "@/constants/project";
 // hooks
-import { useIssueDetail, useIssues, useProject, useUser } from "@/hooks/store";
+import { useIssueDetail, useProject } from "@/hooks/store";

 const ArchivedIssueDetailsPage = observer(() => {
  // router
-  const router = useRouter();
  const { workspaceSlug, projectId, archivedIssueId } = useParams();
  // states
-  const [isRestoring, setIsRestoring] = useState(false);
  // hooks
  const {
    fetchIssue,
    issue: { getIssueById },
  } = useIssueDetail();
-  const {
-    issues: { restoreIssue },
-  } = useIssues(EIssuesStoreType.ARCHIVED);
+
  const { getProjectById } = useProject();
-  const {
-    membership: { currentProjectRole },
-  } = useUser();

  const { isLoading, data: swrArchivedIssueDetails } = useSWR(
    workspaceSlug && projectId && archivedIssueId
@@ -49,35 +37,9 @@ const ArchivedIssueDetailsPage = observer(() => {
  const issue = archivedIssueId ? getIssueById(archivedIssueId.toString()) : undefined;
  const project = issue ? getProjectById(issue?.project_id ?? "") : undefined;
  const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;
-  // auth
-  const canRestoreIssue = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;

  if (!issue) return <></>;

-  const handleRestore = async () => {
-    if (!workspaceSlug || !projectId || !archivedIssueId) return;
-
-    setIsRestoring(true);
-
-    await restoreIssue(workspaceSlug.toString(), projectId.toString(), archivedIssueId.toString())
-      .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Restore success",
-          message: "Your issue can be found in project issues.",
-        });
-        router.push(`/${workspaceSlug}/projects/${projectId}/issues/${archivedIssueId}`);
-      })
-      .catch(() => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Issue could not be restored. Please try again.",
-        });
-      })
-      .finally(() => setIsRestoring(false));
-  };
-
  const issueLoader = !issue || isLoading ? true : false;

  return (
@@ -101,23 +63,6 @@ const ArchivedIssueDetailsPage = observer(() => {
      ) : (
        <div className="flex h-full overflow-hidden">
          <div className="h-full w-full space-y-3 divide-y-2 divide-custom-border-200 overflow-y-auto">
-            {issue?.archived_at && canRestoreIssue && (
-              <div className="flex items-center justify-between gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 px-2.5 py-2 text-sm text-custom-text-200 my-5 mx-3">
-                <div className="flex items-center gap-2">
-                  <ArchiveIcon className="h-4 w-4" />
-                  <p>This issue has been archived.</p>
-                </div>
-                <Button
-                  className="flex items-center gap-1.5 rounded-md border border-custom-border-200 p-1.5 text-sm"
-                  onClick={handleRestore}
-                  disabled={isRestoring}
-                  variant="neutral-primary"
-                >
-                  <ArchiveRestoreIcon className="h-3.5 w-3.5" />
-                  <span>{isRestoring ? "Restoring" : "Restore"}</span>
-                </Button>
-              </div>
-            )}
            {workspaceSlug && projectId && archivedIssueId && (
              <IssueDetailRoot
                swrIssueDetails={swrArchivedIssueDetails}
@@ -134,4 +79,4 @@ const ArchivedIssueDetailsPage = observer(() => {
  );
 });

-export default ArchivedIssueDetailsPage;
+export default ArchivedIssueDetailsPage;
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
@@ -7,6 +7,7 @@ import useSWR from "swr";
 import { ArchiveIcon, Breadcrumbs, LayersIcon } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
+import { IssueDetailQuickActions } from "@/components/issues";
 // constants
 import { ISSUE_DETAILS } from "@/constants/fetch-keys";
 // hooks
@@ -35,7 +36,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
  );

  return (
-    <div className="relative z-10 flex h-14 w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
        <div>
          <Breadcrumbs>
@@ -90,6 +91,11 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
          </Breadcrumbs>
        </div>
      </div>
+      <IssueDetailQuickActions
+        workspaceSlug={workspaceSlug.toString()}
+        projectId={projectId.toString()}
+        issueId={archivedIssueId.toString()}
+      />
    </div>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
@@ -7,6 +7,7 @@ import { PanelRight } from "lucide-react";
 import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
+import { IssueDetailQuickActions } from "@/components/issues";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -74,6 +75,11 @@ export const ProjectIssueDetailsHeader = observer(() => {
          </Breadcrumbs>
        </div>
      </div>
+      <IssueDetailQuickActions
+        workspaceSlug={workspaceSlug.toString()}
+        projectId={projectId.toString()}
+        issueId={issueId.toString()}
+      />
      <button className="block md:hidden" onClick={() => toggleIssueDetailSidebar()}>
        <PanelRight
          className={cn("h-4 w-4 ", !isSidebarCollapsed ? "text-custom-primary-100" : " text-custom-text-200")}
--- a/web/core/components/issues/issue-detail/index.ts
+++ b/web/core/components/issues/issue-detail/index.ts
@@ -11,3 +11,4 @@ export * from "./relation-select";
 export * from "./root";
 export * from "./sidebar";
 export * from "./subscription";
+export * from "./issue-detail-quick-actions";
--- a/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
+++ b/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
@@ -0,0 +1,250 @@
+"use client";
+
+import React, { FC, useState } from "react";
+import { observer } from "mobx-react";
+import { usePathname, useRouter } from "next/navigation";
+import { ArchiveIcon, ArchiveRestoreIcon, LinkIcon, Trash2 } from "lucide-react";
+import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
+// components
+import { ArchiveIssueModal, DeleteIssueModal, IssueSubscription } from "@/components/issues";
+// constants
+import { ISSUE_ARCHIVED, ISSUE_DELETED } from "@/constants/event-tracker";
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { ARCHIVABLE_STATE_GROUPS } from "@/constants/state";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { copyTextToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useEventTracker, useIssueDetail, useIssues, useProjectState, useUser } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+};
+
+export const IssueDetailQuickActions: FC<Props> = observer((props) => {
+  const { workspaceSlug, projectId, issueId } = props;
+
+  // states
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [archiveIssueModal, setArchiveIssueModal] = useState(false);
+  const [isRestoring, setIsRestoring] = useState(false);
+
+  // router
+  const router = useRouter();
+
+  // hooks
+  const {
+    data: currentUser,
+    membership: { currentProjectRole },
+  } = useUser();
+  const { isMobile } = usePlatformOS();
+  const { getStateById } = useProjectState();
+  const {
+    issue: { getIssueById },
+    removeIssue,
+    archiveIssue,
+  } = useIssueDetail();
+  const {
+    issues: { restoreIssue },
+  } = useIssues(EIssuesStoreType.ARCHIVED);
+  const {
+    issues: { removeIssue: removeArchivedIssue },
+  } = useIssues(EIssuesStoreType.ARCHIVED);
+  const { captureIssueEvent } = useEventTracker();
+  const pathname = usePathname();
+
+  // derived values
+  const issue = getIssueById(issueId);
+  if (!issue) return <></>;
+
+  const stateDetails = getStateById(issue.state_id);
+
+  // handlers
+  const handleCopyText = () => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleDeleteIssue = async () => {
+    try {
+      if (issue?.archived_at) await removeArchivedIssue(workspaceSlug, projectId, issueId);
+      else await removeIssue(workspaceSlug, projectId, issueId);
+      setToast({
+        title: "Success!",
+        type: TOAST_TYPE.SUCCESS,
+        message: "Issue deleted successfully",
+      });
+      captureIssueEvent({
+        eventName: ISSUE_DELETED,
+        payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+        path: pathname,
+      });
+    } catch (error) {
+      setToast({
+        title: "Error!",
+        type: TOAST_TYPE.ERROR,
+        message: "Issue delete failed",
+      });
+      captureIssueEvent({
+        eventName: ISSUE_DELETED,
+        payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+        path: pathname,
+      });
+    }
+  };
+
+  const handleArchiveIssue = async () => {
+    try {
+      await archiveIssue(workspaceSlug, projectId, issueId).then(() => {
+        router.push(`/${workspaceSlug}/projects/${projectId}/archives/issues/${issue.id}`);
+      });
+      captureIssueEvent({
+        eventName: ISSUE_ARCHIVED,
+        payload: { id: issueId, state: "SUCCESS", element: "Issue details page" },
+        path: pathname,
+      });
+    } catch (error) {
+      captureIssueEvent({
+        eventName: ISSUE_ARCHIVED,
+        payload: { id: issueId, state: "FAILED", element: "Issue details page" },
+        path: pathname,
+      });
+    }
+  };
+
+  const handleRestore = async () => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+
+    setIsRestoring(true);
+
+    await restoreIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString())
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Restore success",
+          message: "Your issue can be found in project issues.",
+        });
+        router.push(`/${workspaceSlug}/projects/${projectId}/issues/${issueId}`);
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Issue could not be restored. Please try again.",
+        });
+      })
+      .finally(() => setIsRestoring(false));
+  };
+
+  
+  // auth
+  const isEditable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  const canRestoreIssue = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  const isArchivingAllowed = !issue?.archived_at && isEditable;
+  const isInArchivableGroup = !!stateDetails && ARCHIVABLE_STATE_GROUPS.includes(stateDetails?.group);
+
+  return (
+    <>
+      <DeleteIssueModal
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issue}
+        onSubmit={handleDeleteIssue}
+      />
+      <ArchiveIssueModal
+        isOpen={archiveIssueModal}
+        handleClose={() => setArchiveIssueModal(false)}
+        data={issue}
+        onSubmit={handleArchiveIssue}
+      />
+      <div className="flex items-center justify-end flex-shrink-0">
+        <div className="flex flex-wrap items-center gap-4">
+          {currentUser && !issue?.archived_at && (
+            <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
+          )}
+          <div className="flex flex-wrap items-center gap-2.5 text-custom-text-300">
+            <Tooltip tooltipContent="Copy link" isMobile={isMobile}>
+              <button
+                type="button"
+                className="grid h-5 w-5 place-items-center rounded hover:text-custom-text-200 focus:outline-none focus:ring-2 focus:ring-custom-primary"
+                onClick={handleCopyText}
+              >
+                <LinkIcon className="h-4 w-4" />
+              </button>
+            </Tooltip>
+            {issue?.archived_at && canRestoreIssue ? (
+              <>
+                <Tooltip isMobile={isMobile} tooltipContent="Restore">
+                  <button
+                    type="button"
+                    className={cn(
+                      "grid h-5 w-5 place-items-center rounded focus:outline-none focus:ring-2 focus:ring-custom-primary",
+                      {
+                        "hover:text-custom-text-200": isInArchivableGroup,
+                        "cursor-not-allowed text-custom-text-400": !isInArchivableGroup,
+                      }
+                    )}
+                    onClick={handleRestore}
+                    disabled={isRestoring}
+                  >
+                    <ArchiveRestoreIcon className="h-4 w-4" />
+                  </button>
+                </Tooltip>
+              </>
+            ) : (
+              <>
+                {isArchivingAllowed && (
+                  <Tooltip
+                    isMobile={isMobile}
+                    tooltipContent={
+                      isInArchivableGroup ? "Archive" : "Only completed or canceled issues can be archived"
+                    }
+                  >
+                    <button
+                      type="button"
+                      className={cn(
+                        "grid h-5 w-5 place-items-center rounded focus:outline-none focus:ring-2 focus:ring-custom-primary",
+                        {
+                          "hover:text-custom-text-200": isInArchivableGroup,
+                          "cursor-not-allowed text-custom-text-400": !isInArchivableGroup,
+                        }
+                      )}
+                      onClick={() => {
+                        if (!isInArchivableGroup) return;
+                        setArchiveIssueModal(true);
+                      }}
+                    >
+                      <ArchiveIcon className="h-4 w-4" />
+                    </button>
+                  </Tooltip>
+                )}
+              </>
+            )}
+
+            {isEditable && (
+              <Tooltip tooltipContent="Delete" isMobile={isMobile}>
+                <button
+                  type="button"
+                  className="grid h-5 w-5 place-items-center rounded hover:text-custom-text-200 focus:outline-none focus:ring-2 focus:ring-custom-primary"
+                  onClick={() => setDeleteIssueModal(true)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              </Tooltip>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
--- a/web/core/components/issues/issue-detail/root.tsx
+++ b/web/core/components/issues/issue-detail/root.tsx
@@ -391,7 +391,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
            />
          </div>
          <div
-            className="fixed right-0 z-[5] h-full w-full min-w-[300px] overflow-hidden border-l border-custom-border-200 bg-custom-sidebar-background-100 py-5 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
+            className="fixed right-0 z-[5] h-full w-full min-w-[300px] overflow-hidden border-l border-custom-border-200 bg-custom-sidebar-background-100 pb-5 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
            style={issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
          >
            <IssueDetailsSidebar
@@ -399,7 +399,6 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
              projectId={projectId}
              issueId={issueId}
              issueOperations={issueOperations}
-              is_archived={is_archived}
              isEditable={!is_archived && isEditable}
            />
          </div>
--- a/web/core/components/issues/issue-detail/sidebar.tsx
+++ b/web/core/components/issues/issue-detail/sidebar.tsx
@@ -1,34 +1,22 @@
 "use client";

-import React, { useState } from "react";
+import React from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
 import {
  CalendarCheck2,
  CalendarClock,
  CircleDot,
  CopyPlus,
  LayoutPanelTop,
-  LinkIcon,
  Signal,
  Tag,
-  Trash2,
  Triangle,
  Users,
  XCircle,
 } from "lucide-react";
 // hooks
 // components
-import {
-  ArchiveIcon,
-  ContrastIcon,
-  DiceIcon,
-  DoubleCircleIcon,
-  RelatedIcon,
-  TOAST_TYPE,
-  Tooltip,
-  setToast,
-} from "@plane/ui";
+import { ContrastIcon, DiceIcon, DoubleCircleIcon, RelatedIcon } from "@plane/ui";
 import {
  DateDropdown,
  EstimateDropdown,
@@ -39,8 +27,6 @@ import {
 // ui
 // helpers
 import {
-  ArchiveIssueModal,
-  DeleteIssueModal,
  IssueCycleSelect,
  IssueLabel,
  IssueLinkRoot,
@@ -50,17 +36,13 @@ import {
 } from "@/components/issues";
 // helpers
 // types
-import { ARCHIVABLE_STATE_GROUPS } from "@/constants/state";
 import { cn } from "@/helpers/common.helper";
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
-import { copyTextToClipboard } from "@/helpers/string.helper";
 // types
-import { useProjectEstimates, useIssueDetail, useProject, useProjectState, useUser } from "@/hooks/store";
-import { usePlatformOS } from "@/hooks/use-platform-os";
+import { useProjectEstimates, useIssueDetail, useProject, useProjectState } from "@/hooks/store";
 // components
 import type { TIssueOperations } from "./root";
-import { IssueSubscription } from "./subscription";
 // icons
 // helpers
 // types
@@ -70,56 +52,24 @@ type Props = {
  projectId: string;
  issueId: string;
  issueOperations: TIssueOperations;
-  is_archived: boolean;
  isEditable: boolean;
 };

 export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, issueOperations, is_archived, isEditable } = props;
-  // states
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [archiveIssueModal, setArchiveIssueModal] = useState(false);
-  // router
-  const router = useRouter();
+  const { workspaceSlug, projectId, issueId, issueOperations, isEditable } = props;
  // store hooks
  const { getProjectById } = useProject();
-  const { data: currentUser } = useUser();
  const { areEstimateEnabledByProjectId } = useProjectEstimates();
  const {
    issue: { getIssueById },
  } = useIssueDetail();
  const { getStateById } = useProjectState();
-  const { isMobile } = usePlatformOS();
  const issue = getIssueById(issueId);
  if (!issue) return <></>;

-  const handleCopyText = () => {
-    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => {
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
-      });
-    });
-  };
-
-  const handleDeleteIssue = async () => {
-    await issueOperations.remove(workspaceSlug, projectId, issueId);
-    router.push(`/${workspaceSlug}/projects/${projectId}/issues`);
-  };
-
-  const handleArchiveIssue = async () => {
-    if (!issueOperations.archive) return;
-    await issueOperations.archive(workspaceSlug, projectId, issueId);
-    router.push(`/${workspaceSlug}/projects/${projectId}/archives/issues/${issue.id}`);
-  };
  // derived values
  const projectDetails = getProjectById(issue.project_id);
  const stateDetails = getStateById(issue.state_id);
-  // auth
-  const isArchivingAllowed = !is_archived && issueOperations.archive && isEditable;
-  const isInArchivableGroup = !!stateDetails && ARCHIVABLE_STATE_GROUPS.includes(stateDetails?.group);

  const minDate = issue.start_date ? getDate(issue.start_date) : null;
  minDate?.setDate(minDate.getDate());
@@ -129,72 +79,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {

  return (
    <>
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issue}
-        onSubmit={handleDeleteIssue}
-      />
-      <ArchiveIssueModal
-        isOpen={archiveIssueModal}
-        handleClose={() => setArchiveIssueModal(false)}
-        data={issue}
-        onSubmit={handleArchiveIssue}
-      />
-      <div className="flex h-full w-full flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
-        <div className="flex items-center justify-end px-5 pb-3">
-          <div className="flex flex-wrap items-center gap-4">
-            {currentUser && !is_archived && (
-              <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
-            )}
-            <div className="flex flex-wrap items-center gap-2.5 text-custom-text-300">
-              <Tooltip tooltipContent="Copy link" isMobile={isMobile}>
-                <button
-                  type="button"
-                  className="grid h-5 w-5 place-items-center rounded hover:text-custom-text-200 focus:outline-none focus:ring-2 focus:ring-custom-primary"
-                  onClick={handleCopyText}
-                >
-                  <LinkIcon className="h-4 w-4" />
-                </button>
-              </Tooltip>
-              {isArchivingAllowed && (
-                <Tooltip
-                  isMobile={isMobile}
-                  tooltipContent={isInArchivableGroup ? "Archive" : "Only completed or canceled issues can be archived"}
-                >
-                  <button
-                    type="button"
-                    className={cn(
-                      "grid h-5 w-5 place-items-center rounded focus:outline-none focus:ring-2 focus:ring-custom-primary",
-                      {
-                        "hover:text-custom-text-200": isInArchivableGroup,
-                        "cursor-not-allowed text-custom-text-400": !isInArchivableGroup,
-                      }
-                    )}
-                    onClick={() => {
-                      if (!isInArchivableGroup) return;
-                      setArchiveIssueModal(true);
-                    }}
-                  >
-                    <ArchiveIcon className="h-4 w-4" />
-                  </button>
-                </Tooltip>
-              )}
-              {isEditable && (
-                <Tooltip tooltipContent="Delete" isMobile={isMobile}>
-                  <button
-                    type="button"
-                    className="grid h-5 w-5 place-items-center rounded hover:text-custom-text-200 focus:outline-none focus:ring-2 focus:ring-custom-primary"
-                    onClick={() => setDeleteIssueModal(true)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </button>
-                </Tooltip>
-              )}
-            </div>
-          </div>
-        </div>
-
+      <div className="flex items-center h-full w-full flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
        <div className="h-full w-full overflow-y-auto px-6">
          <h5 className="mt-6 text-sm font-medium">Properties</h5>
          {/* TODO: render properties using a common component */}