[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

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

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;

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>
   );
 });

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")}