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

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