From 5f67dcefcd8122ec30121f69d2ace99673f1eeb2 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Wed, 30 Oct 2024 10:38:42 +0200
Subject: [PATCH] feat: archive is now part of project feature list (#8587)

![image](https://github.com/user-attachments/assets/6218a1f7-1ef7-49f8-85d0-c6ee1c34d954)
---
 .../ArchivedFeatureDeleteConfirm.tsx          |  2 +-
 .../ArchivedFeatureReviveConfirm.tsx          |  3 +-
 .../ProjectFeatureToggles.tsx                 | 63 ++++++++++++++-----
 .../ProjectOverviewFilters.tsx                |  8 +++
 .../hooks/useRowActions.tsx                   | 49 +++++++++++++++
 5 files changed, 107 insertions(+), 18 deletions(-)

diff --git a/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx b/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx
index 4fa9f92d768d..4793db7e6cc2 100644
--- a/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx
+++ b/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx
@@ -11,7 +11,7 @@ interface IArchivedFeatureDeleteConfirmProps {
     deletedFeatures: string[];
     projectId: string;
     open: boolean;
-    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setOpen: (open: boolean) => void;
     refetch: () => void;
 }
 
diff --git a/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureReviveConfirm/ArchivedFeatureReviveConfirm.tsx b/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureReviveConfirm/ArchivedFeatureReviveConfirm.tsx
index 9fa0ffd358d5..3a1cfeee66fb 100644
--- a/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureReviveConfirm/ArchivedFeatureReviveConfirm.tsx
+++ b/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureReviveConfirm/ArchivedFeatureReviveConfirm.tsx
@@ -1,5 +1,4 @@
 import { Alert, styled } from '@mui/material';
-import type React from 'react';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import useToast from 'hooks/useToast';
@@ -11,7 +10,7 @@ interface IArchivedFeatureReviveConfirmProps {
     revivedFeatures: string[];
     projectId: string;
     open: boolean;
-    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setOpen: (open: boolean) => void;
     refetch: () => void;
 }
 
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
index 9ae5d4b0f293..8525dfa00c29 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -47,6 +47,8 @@ import { ProjectOnboarding } from '../../../onboarding/flow/ProjectOnboarding';
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
 import { ProjectOnboarded } from 'component/onboarding/flow/ProjectOnboarded';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { ArchivedFeatureActionCell } from '../../../archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureActionCell';
+import { ArchiveBatchActions } from '../../../archive/ArchiveTable/ArchiveBatchActions';
 
 interface IPaginatedProjectFeatureTogglesProps {
     environments: string[];
@@ -115,6 +117,8 @@ export const ProjectFeatureToggles = ({
         setFeatureArchiveState,
         setFeatureStaleDialogState,
         setShowMarkCompletedDialogue,
+        setShowFeatureReviveDialogue,
+        setShowFeatureDeleteDialogue,
     } = useRowActions(refetch, projectId);
 
     const isPlaceholder = Boolean(initialLoad || (loading && total));
@@ -321,14 +325,32 @@ export const ProjectFeatureToggles = ({
             columnHelper.display({
                 id: 'actions',
                 header: '',
-                cell: ({ row }) => (
-                    <ActionsCell
-                        row={row}
-                        projectId={projectId}
-                        onOpenArchiveDialog={setFeatureArchiveState}
-                        onOpenStaleDialog={setFeatureStaleDialogState}
-                    />
-                ),
+                cell: ({ row }) =>
+                    tableState.archived ? (
+                        <ArchivedFeatureActionCell
+                            project={projectId}
+                            onRevive={() => {
+                                setShowFeatureReviveDialogue({
+                                    featureId: row.id,
+                                    open: true,
+                                });
+                            }}
+                            onDelete={() => {
+                                setShowFeatureDeleteDialogue({
+                                    featureId: row.id,
+                                    open: true,
+                                });
+                            }}
+                        />
+                    ) : (
+                        <ActionsCell
+                            row={row}
+                            projectId={projectId}
+                            onOpenArchiveDialog={setFeatureArchiveState}
+                            onOpenStaleDialog={setFeatureStaleDialogState}
+                        />
+                    ),
+
                 enableSorting: false,
                 enableHiding: false,
                 meta: {
@@ -585,13 +607,24 @@ export const ProjectFeatureToggles = ({
                 }
             />
             <BatchSelectionActionsBar count={selectedData.length}>
-                <ProjectFeaturesBatchActions
-                    selectedIds={Object.keys(rowSelection)}
-                    data={selectedData}
-                    projectId={projectId}
-                    onResetSelection={table.resetRowSelection}
-                    onChange={refetch}
-                />
+                {tableState.archived ? (
+                    <ArchiveBatchActions
+                        selectedIds={Object.keys(rowSelection)}
+                        projectId={projectId}
+                        onConfirm={() => {
+                            refetch();
+                            table.resetRowSelection();
+                        }}
+                    />
+                ) : (
+                    <ProjectFeaturesBatchActions
+                        selectedIds={Object.keys(rowSelection)}
+                        data={selectedData}
+                        projectId={projectId}
+                        onResetSelection={table.resetRowSelection}
+                        onChange={refetch}
+                    />
+                )}
             </BatchSelectionActionsBar>
         </Container>
     );
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOverviewFilters.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOverviewFilters.tsx
index 0bbb2da2d3d6..ffce3a6f89fd 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOverviewFilters.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOverviewFilters.tsx
@@ -95,6 +95,14 @@ export const ProjectOverviewFilters: VFC<IProjectOverviewFilters> = ({
                 singularOperators: ['IS', 'IS_NOT'],
                 pluralOperators: ['IS_ANY_OF', 'IS_NONE_OF'],
             },
+            {
+                label: 'Show only archived',
+                icon: 'inventory',
+                options: [{ label: 'True', value: 'true' }],
+                filterKey: 'archived',
+                singularOperators: ['IS'],
+                pluralOperators: ['IS_ANY_OF'],
+            },
         ];
 
         setAvailableFilters(availableFilters);
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useRowActions.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useRowActions.tsx
index 5ba17bf051b3..ad05827e405f 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useRowActions.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useRowActions.tsx
@@ -2,6 +2,8 @@ import { useState } from 'react';
 import { FeatureArchiveDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveDialog';
 import { FeatureStaleDialog } from 'component/common/FeatureStaleDialog/FeatureStaleDialog';
 import { MarkCompletedDialogue } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/MarkCompletedDialogue';
+import { ArchivedFeatureDeleteConfirm } from '../../../../archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm';
+import { ArchivedFeatureReviveConfirm } from '../../../../archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureReviveConfirm/ArchivedFeatureReviveConfirm';
 
 export const useRowActions = (onChange: () => void, projectId: string) => {
     const [featureArchiveState, setFeatureArchiveState] = useState<
@@ -20,6 +22,21 @@ export const useRowActions = (onChange: () => void, projectId: string) => {
         featureId: 'default',
         open: false,
     });
+    const [showFeatureReviveDialogue, setShowFeatureReviveDialogue] = useState<{
+        featureId: string;
+        open: boolean;
+    }>({
+        featureId: 'default',
+        open: false,
+    });
+    const [showFeatureDeleteDialogue, setShowFeatureDeleteDialogue] = useState<{
+        featureId: string;
+        open: boolean;
+    }>({
+        featureId: 'default',
+        open: false,
+    });
+
     const rowActionsDialogs = (
         <>
             <FeatureStaleDialog
@@ -54,6 +71,36 @@ export const useRowActions = (onChange: () => void, projectId: string) => {
                 featureId={showMarkCompletedDialogue.featureId}
                 onComplete={onChange}
             />
+            <ArchivedFeatureDeleteConfirm
+                deletedFeatures={[showFeatureDeleteDialogue.featureId]}
+                projectId={projectId}
+                open={showFeatureDeleteDialogue.open}
+                setOpen={(open) => {
+                    setShowFeatureDeleteDialogue((prev) => ({
+                        ...prev,
+                        open,
+                    }));
+                }}
+                refetch={onChange}
+            />
+            <ArchivedFeatureReviveConfirm
+                revivedFeatures={[showFeatureReviveDialogue.featureId]}
+                projectId={projectId}
+                open={showFeatureReviveDialogue.open}
+                setOpen={(open) => {
+                    setShowFeatureReviveDialogue((prev) => ({
+                        ...prev,
+                        open,
+                    }));
+                }}
+                refetch={() => {
+                    setShowFeatureReviveDialogue((prev) => ({
+                        ...prev,
+                        open: false,
+                    }));
+                    onChange();
+                }}
+            />
         </>
     );
 
@@ -62,5 +109,7 @@ export const useRowActions = (onChange: () => void, projectId: string) => {
         setFeatureArchiveState,
         setFeatureStaleDialogState,
         setShowMarkCompletedDialogue,
+        setShowFeatureReviveDialogue,
+        setShowFeatureDeleteDialogue,
     };
 };