refactor: archive issue (#2628)

* dev: archived issue store * dev: archived issue layouts and store binding * dev: archived issue detail store * dev: is read only * fix: archived issue delete * fix: build error
2023-11-03 20:20:05 +05:30 · 2023-11-03 20:20:05 +05:30 · ad558833af
commit ad558833af
parent ff258c60fd
24 changed files with 1274 additions and 328 deletions
--- a/web/components/issues/delete-archived-issue-modal.tsx
+++ b/web/components/issues/delete-archived-issue-modal.tsx
@ -0,0 +1,131 @@
+import { useEffect, useState, Fragment } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+import { AlertTriangle } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "@plane/ui";
+// types
+import type { IIssue } from "types";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data: IIssue;
+  onSubmit?: () => Promise<void>;
+};
+
+export const DeleteArchivedIssueModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, handleClose, onSubmit } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { archivedIssueDetail: archivedIssueDetailStore } = useMobxStore();
+
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  useEffect(() => {
+    setIsDeleteLoading(false);
+  }, [isOpen]);
+
+  const onClose = () => {
+    setIsDeleteLoading(false);
+    handleClose();
+  };
+
+  const handleIssueDelete = async () => {
+    if (!workspaceSlug) return;
+
+    setIsDeleteLoading(true);
+
+    await archivedIssueDetailStore
+      .deleteArchivedIssue(workspaceSlug.toString(), data.project, data.id)
+      .then(() => {
+        if (onSubmit) onSubmit();
+      })
+      .catch((err) => {
+        const error = err?.detail;
+        const errorString = Array.isArray(error) ? error[0] : error;
+
+        setToastAlert({
+          title: "Error",
+          type: "error",
+          message: errorString || "Something went wrong.",
+        });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+        onClose();
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div className="flex flex-col gap-6 p-6">
+                  <div className="flex w-full items-center justify-start gap-6">
+                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+                    </span>
+                    <span className="flex items-center justify-start">
+                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Archived Issue</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="text-sm text-custom-text-200">
+                      Are you sure you want to delete issue{" "}
+                      <span className="break-words font-medium text-custom-text-100">
+                        {data?.project_detail.identifier}-{data?.sequence_id}
+                      </span>
+                      {""}? All of the data related to the archived issue will be permanently removed. This action
+                      cannot be undone.
+                    </p>
+                  </span>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleIssueDelete} loading={isDeleteLoading}>
+                      {isDeleteLoading ? "Deleting..." : "Delete Issue"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
--- a/web/components/issues/index.ts
+++ b/web/components/issues/index.ts
@ -20,3 +20,6 @@ export * from "./confirm-issue-discard";
 export * from "./draft-issue-form";
 export * from "./draft-issue-modal";
 export * from "./delete-draft-issue-modal";
+
+// archived issue
+export * from "./delete-archived-issue-modal";
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
@ -0,0 +1,81 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// types
+import { IIssueFilterOptions } from "types";
+
+export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { archivedIssueFilters: archivedIssueFiltersStore, project: projectStore } = useMobxStore();
+
+  const userFilters = archivedIssueFiltersStore.userFilters;
+
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(userFilters).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!workspaceSlug || !projectId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        filters: {
+          [key]: null,
+        },
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = archivedIssueFiltersStore.userFilters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      filters: {
+        [key]: newValues,
+      },
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      filters: { ...newFilters },
+    });
+  };
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="p-4">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        states={projectStore.states?.[projectId?.toString() ?? ""]}
+      />
+    </div>
+  );
+});
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts
@ -3,3 +3,4 @@ export * from "./global-view-root";
 export * from "./module-root";
 export * from "./project-view-root";
 export * from "./project-root";
+export * from "./archived-issue";
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@ -12,11 +12,12 @@ interface IssueBlockProps {
  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
  display_properties: any;
+  isReadonly?: boolean;
  showEmptyGroup?: boolean;
 }

 export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
-  const { columnId, issue, handleIssues, quickActions, display_properties, showEmptyGroup } = props;
+  const { columnId, issue, handleIssues, quickActions, display_properties, showEmptyGroup, isReadonly } = props;

  const updateIssue = (group_by: string | null, issueToUpdate: IIssue) => {
    handleIssues(group_by, issueToUpdate, "update");
@ -37,6 +38,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
          workspaceSlug={issue?.workspace_detail?.slug}
          projectId={issue?.project_detail?.id}
          issueId={issue?.id}
+          isArchived={issue?.archived_at !== null}
          handleIssue={(issueToUpdate) => {
            handleIssues(!columnId && columnId === "null" ? null : columnId, issueToUpdate as IIssue, "update");
          }}
@ -50,6 +52,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
          <KanBanProperties
            columnId={columnId}
            issue={issue}
+            isReadonly={isReadonly}
            handleIssues={updateIssue}
            display_properties={display_properties}
            showEmptyGroup={showEmptyGroup}
--- a/web/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/list/blocks-list.tsx
@ -7,6 +7,7 @@ import { IIssue } from "types";
 interface Props {
  columnId: string;
  issues: IIssue[];
+  isReadonly?: boolean;
  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
  display_properties: any;
@ -14,7 +15,7 @@ interface Props {
 }

 export const IssueBlocksList: FC<Props> = (props) => {
-  const { columnId, issues, handleIssues, quickActions, display_properties, showEmptyGroup } = props;
+  const { columnId, issues, handleIssues, quickActions, display_properties, showEmptyGroup, isReadonly } = props;

  return (
    <div className="w-full h-full relative divide-y-[0.5px] divide-custom-border-200">
@ -26,6 +27,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
            issue={issue}
            handleIssues={handleIssues}
            quickActions={quickActions}
+            isReadonly={isReadonly}
            display_properties={display_properties}
            showEmptyGroup={showEmptyGroup}
          />
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@ -12,6 +12,7 @@ export interface IGroupByList {
  issues: any;
  group_by: string | null;
  list: any;
+  isReadonly?: boolean;
  listKey: string;
  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
@ -26,6 +27,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
    issues,
    group_by,
    list,
+    isReadonly,
    listKey,
    handleIssues,
    quickActions,
@ -58,6 +60,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
                handleIssues={handleIssues}
                quickActions={quickActions}
                display_properties={display_properties}
+                isReadonly={isReadonly}
                showEmptyGroup={showEmptyGroup}
              />
            )}
@ -79,6 +82,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
 export interface IList {
  issues: any;
  group_by: string | null;
+  isReadonly?: boolean;
  handleDragDrop?: (result: any) => void | undefined;
  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
@ -98,6 +102,7 @@ export const List: React.FC<IList> = observer((props) => {
  const {
    issues,
    group_by,
+    isReadonly,
    handleIssues,
    quickActions,
    display_properties,
@ -124,6 +129,7 @@ export const List: React.FC<IList> = observer((props) => {
          display_properties={display_properties}
          is_list
          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}
@ -138,6 +144,7 @@ export const List: React.FC<IList> = observer((props) => {
          quickActions={quickActions}
          display_properties={display_properties}
          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}
@ -152,6 +159,7 @@ export const List: React.FC<IList> = observer((props) => {
          quickActions={quickActions}
          display_properties={display_properties}
          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}
@ -166,6 +174,7 @@ export const List: React.FC<IList> = observer((props) => {
          quickActions={quickActions}
          display_properties={display_properties}
          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}
@ -180,6 +189,7 @@ export const List: React.FC<IList> = observer((props) => {
          quickActions={quickActions}
          display_properties={display_properties}
          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}
@ -194,6 +204,7 @@ export const List: React.FC<IList> = observer((props) => {
          quickActions={quickActions}
          display_properties={display_properties}
          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}
@ -208,6 +219,7 @@ export const List: React.FC<IList> = observer((props) => {
          quickActions={quickActions}
          display_properties={display_properties}
          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}
@ -222,6 +234,7 @@ export const List: React.FC<IList> = observer((props) => {
          quickActions={quickActions}
          display_properties={display_properties}
          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}
--- a/web/components/issues/issue-layouts/list/properties.tsx
+++ b/web/components/issues/issue-layouts/list/properties.tsx
@ -63,7 +63,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
          value={issue?.state_detail || null}
          hideDropdownArrow
          onChange={handleState}
-          disabled={false}
+          disabled={isReadonly}
        />
      )}

@ -72,7 +72,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
        <IssuePropertyPriority
          value={issue?.priority || null}
          onChange={handlePriority}
-          disabled={false}
+          disabled={isReadonly}
          hideDropdownArrow
        />
      )}
@ -83,7 +83,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
          projectId={issue?.project_detail?.id || null}
          value={issue?.labels || null}
          onChange={handleLabel}
-          disabled={false}
+          disabled={isReadonly}
          hideDropdownArrow
        />
      )}
@ -95,7 +95,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
          value={issue?.assignees || null}
          hideDropdownArrow
          onChange={handleAssignee}
-          disabled={false}
+          disabled={isReadonly}
          multiple
        />
      )}
@ -105,7 +105,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
        <IssuePropertyDate
          value={issue?.start_date || null}
          onChange={(date: string) => handleStartDate(date)}
-          disabled={false}
+          disabled={isReadonly}
          placeHolder="Start date"
        />
      )}
@ -115,7 +115,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
        <IssuePropertyDate
          value={issue?.target_date || null}
          onChange={(date: string) => handleTargetDate(date)}
-          disabled={false}
+          disabled={isReadonly}
          placeHolder="Target date"
        />
      )}
@ -127,7 +127,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
          value={issue?.estimate_point || null}
          hideDropdownArrow
          onChange={handleEstimate}
-          disabled={false}
+          disabled={isReadonly}
        />
      )}

--- a/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
@ -0,0 +1,73 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { List } from "../default";
+import { ArchivedIssueQuickActions } from "components/issues";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export const ArchivedIssueListLayout: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    project: projectStore,
+    archivedIssues: archivedIssueStore,
+    archivedIssueFilters: archivedIssueFiltersStore,
+  } = useMobxStore();
+
+  // derived values
+  const issues = archivedIssueStore.getIssues;
+  const display_properties = archivedIssueFiltersStore?.userDisplayProperties || null;
+  const group_by: string | null = archivedIssueFiltersStore?.userDisplayFilters?.group_by || null;
+
+  const handleIssues = (group_by: string | null, issue: IIssue, action: "delete" | "update") => {
+    if (!workspaceSlug || !projectId) return;
+
+    if (action === "delete") {
+      archivedIssueStore.deleteArchivedIssue(group_by, null, issue);
+    }
+  };
+
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    projectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
+      : null;
+
+  return (
+    <div className="relative w-full h-full bg-custom-background-90">
+      <List
+        issues={issues}
+        group_by={group_by}
+        isReadonly
+        handleIssues={handleIssues}
+        quickActions={(group_by, issue) => (
+          <ArchivedIssueQuickActions issue={issue} handleDelete={async () => handleIssues(group_by, issue, "delete")} />
+        )}
+        display_properties={display_properties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members?.map((m) => m.member) ?? null}
+        projects={projects}
+        estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+      />
+    </div>
+  );
+});
--- a/web/components/issues/issue-layouts/list/roots/index.ts
+++ b/web/components/issues/issue-layouts/list/roots/index.ts
@ -3,3 +3,4 @@ export * from "./module-root";
 export * from "./profile-issues-root";
 export * from "./project-root";
 export * from "./project-view-root";
+export * from "./archived-issue-root";
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@ -0,0 +1,76 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { CustomMenu } from "@plane/ui";
+import { Link, Trash2 } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { DeleteArchivedIssueModal } from "components/issues";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  handleDelete: () => Promise<void>;
+};
+
+export const ArchivedIssueQuickActions: React.FC<Props> = (props) => {
+  const { issue, handleDelete } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // states
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyIssueLink = () => {
+    copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/archived-issues/${issue.id}`).then(() =>
+      setToastAlert({
+        type: "success",
+        title: "Link copied",
+        message: "Issue link copied to clipboard",
+      })
+    );
+  };
+
+  return (
+    <>
+      <DeleteArchivedIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CustomMenu placement="bottom-start" ellipsis>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleCopyIssueLink();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Link className="h-3 w-3" />
+            Copy link
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setDeleteIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Trash2 className="h-3 w-3" />
+            Delete issue
+          </div>
+        </CustomMenu.MenuItem>
+      </CustomMenu>
+    </>
+  );
+};
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/index.ts
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/index.ts
@ -1,3 +1,4 @@
 export * from "./cycle-issue";
 export * from "./module-issue";
 export * from "./project-issue";
+export * from "./archived-issue";
--- a/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
@ -0,0 +1,31 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ArchivedIssueListLayout, ArchivedIssueAppliedFiltersRoot } from "components/issues";
+
+export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { archivedIssueFilters: archivedIssueFiltersStore, archivedIssues: archivedIssueStore } = useMobxStore();
+
+  useSWR(workspaceSlug && projectId ? `ARCHIVED_FILTERS_AND_ISSUES_${projectId.toString()}` : null, async () => {
+    if (workspaceSlug && projectId) {
+      await archivedIssueFiltersStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString());
+      await archivedIssueStore.fetchIssues(workspaceSlug.toString(), projectId.toString());
+    }
+  });
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <ArchivedIssueAppliedFiltersRoot />
+      <div className="w-full h-full overflow-auto">
+        <ArchivedIssueListLayout />
+      </div>
+    </div>
+  );
+});
--- a/web/components/issues/issue-layouts/roots/index.ts
+++ b/web/components/issues/issue-layouts/roots/index.ts
@ -3,3 +3,4 @@ export * from "./global-view-layout-root";
 export * from "./module-layout-root";
 export * from "./project-layout-root";
 export * from "./project-view-layout-root";
+export * from "./archived-issue-layout-root";
--- a/web/components/issues/issue-peek-overview/root.tsx
+++ b/web/components/issues/issue-peek-overview/root.tsx
@ -1,4 +1,6 @@
 import { FC, ReactNode } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 // components
 import { IssueView } from "./view";
@ -6,22 +8,78 @@ import { IssueView } from "./view";
 import { useMobxStore } from "lib/mobx/store-provider";
 // types
 import { IIssue } from "types";
+import { RootStore } from "store/root";
+// hooks
+import useToast from "hooks/use-toast";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";

 interface IIssuePeekOverview {
  workspaceSlug: string;
  projectId: string;
  issueId: string;
  handleIssue: (issue: Partial<IIssue>) => void;
+  isArchived?: boolean;
  children?: ReactNode;
 }

 export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, handleIssue, children } = props;
+  const { workspaceSlug, projectId, issueId, handleIssue, children, isArchived = false } = props;

-  const { issueDetail: issueDetailStore, project: projectStore, user: userStore } = useMobxStore();
+  const router = useRouter();
+  const { peekIssueId } = router.query as { peekIssueId: string };
+
+  const {
+    user: userStore,
+    issue: issueStore,
+    issueDetail: issueDetailStore,
+    archivedIssueDetail: archivedIssueDetailStore,
+    archivedIssues: archivedIssuesStore,
+    project: projectStore,
+  }: RootStore = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  useSWR(
+    workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId
+      ? `ISSUE_PEEK_OVERVIEW_${workspaceSlug}_${projectId}_${peekIssueId}`
+      : null,
+    async () => {
+      if (workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId) {
+        if (isArchived) await archivedIssueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, issueId);
+        else await issueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, issueId);
+      }
+    }
+  );
+
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyUrlToClipboard(
+      `${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${peekIssueId}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const redirectToIssueDetail = () => {
+    router.push({
+      pathname: `/${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${issueId}`,
+    });
+  };
+
+  const issue = isArchived ? archivedIssueDetailStore.getIssue : issueDetailStore.getIssue;
+  const isLoading = isArchived ? archivedIssueDetailStore.loader : issueDetailStore.loader;

  const issueUpdate = (_data: Partial<IIssue>) => {
-    handleIssue(_data);
+    if (handleIssue) {
+      handleIssue(_data);
+      issueDetailStore.updateIssue(workspaceSlug, projectId, issueId, _data);
+    }
  };

  const issueReactionCreate = (reaction: string) =>
@ -49,7 +107,18 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {

  const issueSubscriptionRemove = () => issueDetailStore.removeIssueSubscription(workspaceSlug, projectId, issueId);

-  const handleDeleteIssue = () => issueDetailStore.deleteIssue(workspaceSlug, projectId, issueId);
+  const handleDeleteIssue = async () => {
+    if (isArchived) await archivedIssuesStore.deleteArchivedIssue(workspaceSlug, projectId, issue!);
+    else await issueStore.deleteIssue(workspaceSlug, projectId, issue!);
+    const { query } = router;
+    if (query.peekIssueId) {
+      delete query.peekIssueId;
+      router.push({
+        pathname: router.pathname,
+        query: { ...query },
+      });
+    }
+  };

  const userRole = userStore.currentProjectRole ?? 5;

@ -58,6 +127,11 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
      workspaceSlug={workspaceSlug}
      projectId={projectId}
      issueId={issueId}
+      issue={issue}
+      isLoading={isLoading}
+      isArchived={isArchived}
+      handleCopyText={handleCopyText}
+      redirectToIssueDetail={redirectToIssueDetail}
      issueUpdate={issueUpdate}
      issueReactionCreate={issueReactionCreate}
      issueReactionRemove={issueReactionRemove}
--- a/web/components/issues/issue-peek-overview/view.tsx
+++ b/web/components/issues/issue-peek-overview/view.tsx
@ -3,26 +3,28 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { PeekOverviewIssueDetails } from "./issue-detail";
 import { PeekOverviewProperties } from "./properties";
 import { IssueComment } from "./activity";
 import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon } from "@plane/ui";
 import { DeleteIssueModal } from "../delete-issue-modal";
+import { DeleteArchivedIssueModal } from "../delete-archived-issue-modal";
 // types
 import { IIssue } from "types";
 import { RootStore } from "store/root";
 // hooks
-import useToast from "hooks/use-toast";
-// helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
+import { useMobxStore } from "lib/mobx/store-provider";

 interface IIssueView {
  workspaceSlug: string;
  projectId: string;
  issueId: string;
+  issue: IIssue | null;
+  isLoading?: boolean;
+  isArchived?: boolean;
+  handleCopyText: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  redirectToIssueDetail: () => void;
  issueUpdate: (issue: Partial<IIssue>) => void;
  issueReactionCreate: (reaction: string) => void;
  issueReactionRemove: (reaction: string) => void;
@ -64,6 +66,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
    workspaceSlug,
    projectId,
    issueId,
+    issue,
+    isLoading,
+    isArchived,
+    handleCopyText,
+    redirectToIssueDetail,
    issueUpdate,
    issueReactionCreate,
    issueReactionRemove,
@ -88,20 +95,6 @@ export const IssueView: FC<IIssueView> = observer((props) => {
  const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
  const [deleteIssueModal, setDeleteIssueModal] = useState(false);

-  const { setToastAlert } = useToast();
-
-  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues/${peekIssueId}`).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
-      });
-    });
-  };
-
  const updateRoutePeekId = () => {
    if (issueId != peekIssueId) {
      const { query } = router;
@ -122,23 +115,6 @@ export const IssueView: FC<IIssueView> = observer((props) => {
    }
  };

-  const redirectToIssueDetail = () => {
-    router.push({
-      pathname: `/${workspaceSlug}/projects/${projectId}/issues/${issueId}`,
-    });
-  };
-
-  useSWR(
-    workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId
-      ? `ISSUE_PEEK_OVERVIEW_${workspaceSlug}_${projectId}_${peekIssueId}`
-      : null,
-    async () => {
-      if (workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId) {
-        await issueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, issueId);
-      }
-    }
-  );
-
  useSWR(
    workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId
      ? `ISSUE_PEEK_OVERVIEW_SUBSCRIPTION_${workspaceSlug}_${projectId}_${peekIssueId}`
@ -150,10 +126,9 @@ export const IssueView: FC<IIssueView> = observer((props) => {
    }
  );

-  const issue = issueDetailStore.getIssue;
-  const issueReactions = issueDetailStore.getIssueReactions;
-  const issueComments = issueDetailStore.getIssueComments;
-  const issueSubscription = issueDetailStore.getIssueSubscription;
+  const issueReactions = issueDetailStore.getIssueReactions || [];
+  const issueComments = issueDetailStore.getIssueComments || [];
+  const issueSubscription = issueDetailStore.getIssueSubscription || [];

  const user = userStore?.currentUser;

@ -161,7 +136,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {

  return (
    <>
-      {issue && (
+      {issue && !isArchived && (
        <DeleteIssueModal
          isOpen={deleteIssueModal}
          handleClose={() => setDeleteIssueModal(false)}
@ -169,6 +144,14 @@ export const IssueView: FC<IIssueView> = observer((props) => {
          onSubmit={handleDeleteIssue}
        />
      )}
+      {issue && isArchived && (
+        <DeleteArchivedIssueModal
+          data={issue}
+          isOpen={deleteIssueModal}
+          handleClose={() => setDeleteIssueModal(false)}
+          onSubmit={handleDeleteIssue}
+        />
+      )}
      <div className="w-full !text-base">
        {children && (
          <div onClick={updateRoutePeekId} className="w-full cursor-pointer">
@ -229,18 +212,20 @@ export const IssueView: FC<IIssueView> = observer((props) => {
              </div>

              <div className="flex items-center gap-4">
-                <Button
-                  size="sm"
-                  prependIcon={<Bell className="h-3 w-3" />}
-                  variant="outline-primary"
-                  onClick={() =>
-                    issueSubscription && issueSubscription.subscribed
-                      ? issueSubscriptionRemove
-                      : issueSubscriptionCreate
-                  }
-                >
-                  {issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
-                </Button>
+                {!isArchived && (
+                  <Button
+                    size="sm"
+                    prependIcon={<Bell className="h-3 w-3" />}
+                    variant="outline-primary"
+                    onClick={() =>
+                      issueSubscription && issueSubscription.subscribed
+                        ? issueSubscriptionRemove
+                        : issueSubscriptionCreate
+                    }
+                  >
+                    {issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
+                  </Button>
+                )}
                <button onClick={handleCopyText}>
                  <Link2 className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200 -rotate-45" />
                </button>
@ -253,8 +238,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
            </div>

            {/* content */}
-            <div className="w-full h-full overflow-hidden overflow-y-auto">
-              {issueDetailStore?.loader && !issue ? (
+            <div className="relative w-full h-full overflow-hidden overflow-y-auto">
+              {isArchived && (
+                <div className="absolute top-0 left-0 h-full w-full z-[999] flex items-center justify-center bg-custom-background-100 opacity-60" />
+              )}
+              {isLoading && !issue ? (
                <div className="text-center py-10">Loading...</div>
              ) : (
                issue && (