Fix/archive table (#1086)

* feat: upgrade search to use the new search component (#1073)

* feat: upgrade project list search to use the new search field

* cleanup unused imports

* feat: add upgraded search to projects and applications, polish search UX

* refactor: TableSearch to new Search common component

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>

* fix: resolve issues with project edit/delete button conditions (#1084)

* fix: fix UPDATE_PROJECT permission checks for editors

* fix: disable delete button for the default project

* fix: warn about access on edit project page

* fix: hide broken project edit/delete buttons for OSS

* refactor: avoid project card clicks when closing modals

* refactor: improve default project deletion message

* refactor: improve project access error text

* Update src/component/project/ProjectCard/ProjectCard.tsx

Co-authored-by: Thomas Heartman <thomas@getunleash.ai>

* refactor: fix string quotes

* refactor: improve disabled menu item contrast

* refactor: remove Enterprise routes for OSS

Co-authored-by: Thomas Heartman <thomas@getunleash.ai>

* fix: archive table small adjustments

* refactor archive table params

Co-authored-by: Nuno Góis <github@nunogois.com>
Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Co-authored-by: olav <mail@olav.io>
Co-authored-by: Thomas Heartman <thomas@getunleash.ai>

frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx

@@ -25,14 +25,15 @@ import { ReviveArchivedFeatureCell } from 'component/archive/ArchiveTable/Revive
 import { useStyles } from '../../feature/FeatureToggleList/styles';
 import { featuresPlaceholder } from '../../feature/FeatureToggleList/FeatureToggleListTable';
 import theme from 'themes/theme';
-import { FeatureSchema } from '../../../openapi';
+import { FeatureSchema } from 'openapi';
 import { useFeatureArchiveApi } from 'hooks/api/actions/useFeatureArchiveApi/useReviveFeatureApi';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { useSearch } from 'hooks/useSearch';
-import { FeatureArchivedCell } from '../../common/Table/cells/FeatureArchivedCell/FeatureArchivedCell';
+import { FeatureArchivedCell } from './FeatureArchivedCell/FeatureArchivedCell';
 import { useVirtualizedRange } from 'hooks/useVirtualizedRange';
-import { URLSearchParamsInit } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
+import { useWindowVirtualizer } from '@tanstack/react-virtual';
 
 export interface IFeaturesArchiveTableProps {
     archivedFeatures: FeatureSchema[];
@@ -45,13 +46,6 @@ export interface IFeaturesArchiveTableProps {
             | SortingRule<string>
             | ((prev: SortingRule<string>) => SortingRule<string>)
     ) => SortingRule<string>;
-    searchParams: URLSearchParams;
-    setSearchParams: (
-        nextInit: URLSearchParamsInit,
-        navigateOptions?:
-            | { replace?: boolean | undefined; state?: any }
-            | undefined
-    ) => void;
 }
 
 export const ArchiveTable = ({
@@ -60,8 +54,6 @@ export const ArchiveTable = ({
     refetch,
     storedParams,
     setStoredParams,
-    searchParams,
-    setSearchParams,
     title,
 }: IFeaturesArchiveTableProps) => {
     const rowHeight = theme.shape.tableRowHeight;
@@ -70,6 +62,7 @@ export const ArchiveTable = ({
     const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg'));
     const { setToastData, setToastApiError } = useToast();
 
+    const [searchParams, setSearchParams] = useSearchParams();
     const { reviveFeature } = useFeatureArchiveApi();
 
     const [searchValue, setSearchValue] = useState(
@@ -108,7 +101,7 @@ export const ArchiveTable = ({
                 Cell: FeatureTypeCell,
             },
             {
-                Header: 'Feature toggle Name',
+                Header: 'Feature toggle name',
                 accessor: 'name',
                 searchable: true,
                 minWidth: 100,
@@ -249,7 +242,7 @@ export const ArchiveTable = ({
             replace: true,
         });
         setStoredParams({ id: sortBy[0].id, desc: sortBy[0].desc || false });
-    }, [loading, sortBy, searchValue, setSearchParams, setStoredParams]);
+    }, [loading, sortBy, searchValue]);
 
     const [firstRenderedIndex, lastRenderedIndex] =
         useVirtualizedRange(rowHeight);

frontend/src/component/archive/ArchiveTable/FeatureArchivedCell/FeatureArchivedCell.tsx

@@ -1,9 +1,9 @@
-import React, { VFC } from 'react';
+import { VFC } from 'react';
 import TimeAgo from 'react-timeago';
 import { Tooltip, Typography } from '@mui/material';
-import { formatDateYMD } from '../../../../../utils/formatDate';
-import { TextCell } from '../TextCell/TextCell';
-import { useLocationSettings } from '../../../../../hooks/useLocationSettings';
+import { formatDateYMD } from 'utils/formatDate';
+import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
+import { useLocationSettings } from 'hooks/useLocationSettings';
 
 interface IFeatureArchivedCellProps {
     value?: string | Date | null;

frontend/src/component/archive/ArchiveTable/ReviveArchivedFeatureCell/ReviveArchivedFeatureCell.tsx

@@ -1,4 +1,4 @@
-import { SyntheticEvent, VFC } from 'react';
+import { VFC } from 'react';
 import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell';
 import { Undo } from '@mui/icons-material';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
@@ -13,15 +13,10 @@ export const ReviveArchivedFeatureCell: VFC<IReviveArchivedFeatureCell> = ({
     onRevive,
     project,
 }) => {
-    const handleClick = (e: SyntheticEvent<Element, Event>) => {
-        e.preventDefault();
-        onRevive();
-    };
-
     return (
         <ActionCell>
             <PermissionIconButton
-                onClick={handleClick}
+                onClick={onRevive}
                 projectId={project}
                 permission={UPDATE_FEATURE}
                 tooltipProps={{ title: 'Revive feature' }}

frontend/src/component/archive/FeaturesArchiveTable.tsx

@@ -1,11 +1,14 @@
 import { useFeaturesArchive } from '../../hooks/api/getters/useFeaturesArchive/useFeaturesArchive';
 import { ArchiveTable } from './ArchiveTable/ArchiveTable';
-import { useSearchParams } from 'react-router-dom';
 import { SortingRule } from 'react-table';
 import { usePageTitle } from 'hooks/usePageTitle';
 import { createLocalStorage } from 'utils/createLocalStorage';
 
 const defaultSort: SortingRule<string> = { id: 'createdAt', desc: true };
+const { value, setValue } = createLocalStorage(
+    'FeaturesArchiveTable:v1',
+    defaultSort
+);
 
 export const FeaturesArchiveTable = () => {
     usePageTitle('Archived');
@@ -15,19 +18,11 @@ export const FeaturesArchiveTable = () => {
         refetchArchived,
     } = useFeaturesArchive();
 
-    const [searchParams, setSearchParams] = useSearchParams();
-    const { value, setValue } = createLocalStorage(
-        'FeaturesArchiveTable:v1',
-        defaultSort
-    );
-
     return (
         <ArchiveTable
             title="Archived"
             archivedFeatures={archivedFeatures}
             loading={loading}
-            searchParams={searchParams}
-            setSearchParams={setSearchParams}
             storedParams={value}
             setStoredParams={setValue}
             refetch={refetchArchived}

frontend/src/component/archive/ProjectFeaturesArchiveTable.tsx

@@ -1,5 +1,4 @@
 import { ArchiveTable } from './ArchiveTable/ArchiveTable';
-import { useSearchParams } from 'react-router-dom';
 import { SortingRule } from 'react-table';
 import { useProjectFeaturesArchive } from '../../hooks/api/getters/useProjectFeaturesArchive/useProjectFeaturesArchive';
 import { createLocalStorage } from 'utils/createLocalStorage';
@@ -19,7 +18,6 @@ export const ProjectFeaturesArchiveTable = ({
         loading,
     } = useProjectFeaturesArchive(projectId);
 
-    const [searchParams, setSearchParams] = useSearchParams();
     const { value, setValue } = createLocalStorage(
         `${projectId}:ProjectFeaturesArchiveTable`,
         defaultSort
@@ -30,8 +28,6 @@ export const ProjectFeaturesArchiveTable = ({
             title="Project Features Archive"
             archivedFeatures={archivedFeatures}
             loading={loading}
-            searchParams={searchParams}
-            setSearchParams={setSearchParams}
             storedParams={value}
             setStoredParams={setValue}
             refetch={refetchArchived}