[WEB-447] feat: projects archive. (#4014)

* dev: project archive response

* feat: projects archive.

* dev: response changes for cycle and module

* chore: status message changed

* chore: update clear all applied display filters logic.

* style: archived project card UI update.

* chore: archive/ restore taost message update.

* fix: clear all applied display filter logic.

* chore: project empty state update to handle archived projects.

* chore: minor typo fix in cycles and modules archive.

* chore: close cycle/ module overview sidebar if it's already open when clicked on overview button.

* chore: optimize current workspace applied display filter logic.

* chore: update all `archived_at` type from `Date` to `string`.

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx

@@ -2,26 +2,29 @@ import { useState, ReactElement } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-// hooks
+// components
 import { PageHead } from "@/components/core";
 import { ProjectSettingHeader } from "@/components/headers";
 import {
+  ArchiveRestoreProjectModal,
+  ArchiveProjectSelection,
   DeleteProjectModal,
   DeleteProjectSection,
   ProjectDetailsForm,
   ProjectDetailsFormLoader,
 } from "@/components/project";
+// hooks
 import { useProject } from "@/hooks/store";
 // layouts
 import { AppLayout } from "@/layouts/app-layout";
 import { ProjectSettingLayout } from "@/layouts/settings-layout";
-// components
 // types
 import { NextPageWithLayout } from "@/lib/types";
 
 const GeneralSettingsPage: NextPageWithLayout = observer(() => {
   // states
   const [selectProject, setSelectedProject] = useState<string | null>(null);
+  const [archiveProject, setArchiveProject] = useState<boolean>(false);
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -42,12 +45,21 @@ const GeneralSettingsPage: NextPageWithLayout = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      {currentProjectDetails && (
-        <DeleteProjectModal
-          project={currentProjectDetails}
-          isOpen={Boolean(selectProject)}
-          onClose={() => setSelectedProject(null)}
-        />
+      {currentProjectDetails && workspaceSlug && projectId && (
+        <>
+          <ArchiveRestoreProjectModal
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            isOpen={archiveProject}
+            onClose={() => setArchiveProject(false)}
+            archive
+          />
+          <DeleteProjectModal
+            project={currentProjectDetails}
+            isOpen={Boolean(selectProject)}
+            onClose={() => setSelectedProject(null)}
+          />
+        </>
       )}
 
       <div className={`w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
@@ -63,10 +75,16 @@ const GeneralSettingsPage: NextPageWithLayout = observer(() => {
         )}
 
         {isAdmin && (
-          <DeleteProjectSection
-            projectDetails={currentProjectDetails}
-            handleDelete={() => setSelectedProject(currentProjectDetails.id ?? null)}
-          />
+          <>
+            <ArchiveProjectSelection
+              projectDetails={currentProjectDetails}
+              handleArchive={() => setArchiveProject(true)}
+            />
+            <DeleteProjectSection
+              projectDetails={currentProjectDetails}
+              handleDelete={() => setSelectedProject(currentProjectDetails.id ?? null)}
+            />
+          </>
         )}
       </div>
     </>

web/pages/[workspaceSlug]/projects/index.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, useCallback } from "react";
 import { observer } from "mobx-react";
-import { TProjectFilters } from "@plane/types";
+import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
 // components
 import { PageHead } from "@/components/core";
 import { ProjectsHeader } from "@/components/headers";
@@ -19,8 +19,15 @@ const ProjectsPage: NextPageWithLayout = observer(() => {
     router: { workspaceSlug },
   } = useApplication();
   const { currentWorkspace } = useWorkspace();
-  const { workspaceProjectIds, filteredProjectIds } = useProject();
-  const { currentWorkspaceFilters, clearAllFilters, updateFilters } = useProjectFilter();
+  const { totalProjectIds, filteredProjectIds } = useProject();
+  const {
+    currentWorkspaceFilters,
+    currentWorkspaceAppliedDisplayFilters,
+    clearAllFilters,
+    clearAllAppliedDisplayFilters,
+    updateFilters,
+    updateDisplayFilters,
+  } = useProjectFilter();
   // derived values
   const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Projects` : undefined;
 
@@ -37,18 +44,35 @@ const ProjectsPage: NextPageWithLayout = observer(() => {
     [currentWorkspaceFilters, updateFilters, workspaceSlug]
   );
 
+  const handleRemoveDisplayFilter = useCallback(
+    (key: TProjectAppliedDisplayFilterKeys) => {
+      if (!workspaceSlug) return;
+      updateDisplayFilters(workspaceSlug.toString(), { [key]: false });
+    },
+    [updateDisplayFilters, workspaceSlug]
+  );
+
+  const handleClearAllFilters = useCallback(() => {
+    if (!workspaceSlug) return;
+    clearAllFilters(workspaceSlug.toString());
+    clearAllAppliedDisplayFilters(workspaceSlug.toString());
+  }, [clearAllFilters, clearAllAppliedDisplayFilters, workspaceSlug]);
+
   return (
     <>
       <PageHead title={pageTitle} />
       <div className="h-full w-full flex flex-col">
-        {calculateTotalFilters(currentWorkspaceFilters ?? {}) !== 0 && (
+        {(calculateTotalFilters(currentWorkspaceFilters ?? {}) !== 0 ||
+          currentWorkspaceAppliedDisplayFilters?.length !== 0) && (
           <div className="border-b border-custom-border-200 px-5 py-3">
             <ProjectAppliedFiltersList
               appliedFilters={currentWorkspaceFilters ?? {}}
-              handleClearAllFilters={() => clearAllFilters(`${workspaceSlug}`)}
+              appliedDisplayFilters={currentWorkspaceAppliedDisplayFilters ?? []}
+              handleClearAllFilters={handleClearAllFilters}
               handleRemoveFilter={handleRemoveFilter}
+              handleRemoveDisplayFilter={handleRemoveDisplayFilter}
               filteredProjects={filteredProjectIds?.length ?? 0}
-              totalProjects={workspaceProjectIds?.length ?? 0}
+              totalProjects={totalProjectIds?.length ?? 0}
               alwaysAllowEditing
             />
           </div>