Persistent table query (#999)

* feat: persistent table query

* project overview sort query

* refactor: api methods as hook callbacks

* persitent columns in project overview

* enable new project overview

* fix: refactor feature state change in overview

* add type to sort

* update e2e tests

now takes 10% less time with use of cypress session

* prevent sort reset on features list

* fix feature toggle list loading

* fix: update column state saving

* update local storage hook test

frontend/cypress/integration/feature/feature.spec.ts

@@ -2,8 +2,6 @@
 
 export {};
 
-const AUTH_USER = Cypress.env('AUTH_USER');
-const AUTH_PASSWORD = Cypress.env('AUTH_PASSWORD');
 const ENTERPRISE = Boolean(Cypress.env('ENTERPRISE'));
 const randomId = String(Math.random()).split('.')[1];
 const featureToggleName = `unleash-e2e-${randomId}`;
@@ -41,16 +39,8 @@ describe('feature', () => {
     });
 
     beforeEach(() => {
+        cy.login();
         cy.visit('/');
-        cy.get('[data-testid="LOGIN_EMAIL_ID"]').type(AUTH_USER);
-
-        if (AUTH_PASSWORD) {
-            cy.get('[data-testid="LOGIN_PASSWORD_ID"]').type(AUTH_PASSWORD);
-        }
-
-        cy.get("[data-testid='LOGIN_BUTTON']").click();
-        // Wait for the login redirect to complete.
-        cy.get('[data-testid=HEADER_USER_AVATAR');
     });
 
     it('can create a feature toggle', () => {

frontend/cypress/integration/segments/segments.spec.ts

@@ -1,16 +1,9 @@
 /// <reference types="cypress" />
 
 export {};
-
-const AUTH_USER = Cypress.env('AUTH_USER');
-const AUTH_PASSWORD = Cypress.env('AUTH_PASSWORD');
 const randomId = String(Math.random()).split('.')[1];
 const segmentName = `unleash-e2e-${randomId}`;
 
-Cypress.config({
-    experimentalSessionSupport: true,
-});
-
 // Disable all active splash pages by visiting them.
 const disableActiveSplashScreens = () => {
     cy.visit(`/splash/operators`);
@@ -22,20 +15,7 @@ describe('segments', () => {
     });
 
     beforeEach(() => {
-        cy.session(AUTH_USER, () => {
+        cy.login();
-            cy.visit('/');
-            cy.wait(1000);
-            cy.get("[data-testid='LOGIN_EMAIL_ID']").type(AUTH_USER);
-
-            if (AUTH_PASSWORD) {
-                cy.get("[data-testid='LOGIN_PASSWORD_ID']").type(AUTH_PASSWORD);
-            }
-
-            cy.get("[data-testid='LOGIN_BUTTON']").click();
-            // Wait for the login redirect to complete.
-            cy.get("[data-testid='HEADER_USER_AVATAR']");
-        });
-
         cy.visit('/segments');
     });
 

frontend/cypress/support/commands.ts

@@ -23,3 +23,27 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+const AUTH_USER = Cypress.env('AUTH_USER');
+const AUTH_PASSWORD = Cypress.env('AUTH_PASSWORD');
+
+Cypress.config({
+    experimentalSessionSupport: true,
+});
+
+Cypress.Commands.add('login', (user = AUTH_USER, password = AUTH_PASSWORD) =>
+    cy.session(user, () => {
+        cy.visit('/');
+        cy.wait(1000);
+        cy.get("[data-testid='LOGIN_EMAIL_ID']").type(user);
+
+        if (AUTH_PASSWORD) {
+            cy.get("[data-testid='LOGIN_PASSWORD_ID']").type(password);
+        }
+
+        cy.get("[data-testid='LOGIN_BUTTON']").click();
+
+        // Wait for the login redirect to complete.
+        cy.get("[data-testid='HEADER_USER_AVATAR']");
+    })
+);

frontend/cypress/support/index.ts

@@ -14,7 +14,15 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            login(user?: string, password?: string): Chainable<null>;
+        }
+    }
+}

frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts

@@ -16,23 +16,16 @@ export const useStyles = makeStyles()(theme => ({
     },
     sortButton: {
         all: 'unset',
-        padding: theme.spacing(2),
         whiteSpace: 'nowrap',
         width: '100%',
-        '& .hover-only': {
+        position: 'relative',
-            visibility: 'hidden',
-        },
         ':hover, :focus, &:focus-visible, &:active': {
             outline: 'revert',
-            '& svg': {
+            '.hover-only': {
-                color: 'inherit',
+                display: 'inline-block',
-            },
-            '& .hover-only': {
-                visibility: 'visible',
             },
         },
         display: 'flex',
-        alignItems: 'center',
         boxSizing: 'inherit',
         cursor: 'pointer',
     },
@@ -42,10 +35,8 @@ export const useStyles = makeStyles()(theme => ({
     label: {
         display: 'flex',
         flexDirection: 'column',
-        whiteSpace: 'nowrap',
+        flexShrink: 1,
-        textOverflow: 'ellipsis',
+        minWidth: 0,
-        overflowX: 'hidden',
-        overflowY: 'visible',
         '::after': {
             fontWeight: 'bold',
             display: 'inline-block',
@@ -67,4 +58,29 @@ export const useStyles = makeStyles()(theme => ({
         justifyContent: 'center',
         textAlign: 'center',
     },
+    hiddenMeasurementLayer: {
+        padding: theme.spacing(2),
+        visibility: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+    },
+    visibleAbsoluteLayer: {
+        padding: theme.spacing(2),
+        position: 'absolute',
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+        '.hover-only': {
+            display: 'none',
+        },
+        '& > span': {
+            minWidth: 0,
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            overflowX: 'hidden',
+            overflowY: 'visible',
+        },
+    },
 }));

frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx

@@ -102,14 +102,19 @@ export const CellSortable: FC<ICellSortableProps> = ({
                         <button
                             className={classnames(
                                 isSorted && styles.sortedButton,
-                                styles.sortButton,
+                                styles.sortButton
-                                alignClass
                             )}
                             onClick={onSortClick}
+                        >
+                            <span
+                                className={classnames(
+                                    styles.hiddenMeasurementLayer,
+                                    alignClass
+                                )}
+                                aria-hidden
                             >
                                 <span
                                     className={styles.label}
-                                ref={ref}
                                     tabIndex={-1}
                                     data-text={children}
                                 >
@@ -119,6 +124,22 @@ export const CellSortable: FC<ICellSortableProps> = ({
                                     isSorted={isSorted}
                                     isDesc={isDescending}
                                 />
+                            </span>
+                            <span
+                                className={classnames(
+                                    styles.visibleAbsoluteLayer,
+                                    alignClass
+                                )}
+                            >
+                                <span ref={ref} tabIndex={-1}>
+                                    <span>{children}</span>
+                                </span>
+                                <SortArrow
+                                    isSorted={isSorted}
+                                    isDesc={isDescending}
+                                    className="sort-arrow"
+                                />
+                            </span>
                         </button>
                     </Tooltip>
                 }

frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.styles.ts

@@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
     icon: {
         marginLeft: theme.spacing(0.25),
-        marginRight: -theme.spacing(0.5),
+        marginRight: theme.spacing(-0.5),
         color: theme.palette.grey[700],
         fontSize: theme.fontSizes.mainHeader,
         verticalAlign: 'middle',

frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx

@@ -11,11 +11,13 @@ import classnames from 'classnames';
 interface ISortArrowProps {
     isSorted?: boolean;
     isDesc?: boolean;
+    className?: string;
 }
 
 export const SortArrow: VFC<ISortArrowProps> = ({
     isSorted: sorted,
     isDesc: desc = false,
+    className,
 }) => {
     const { classes: styles } = useStyles();
 
@@ -27,13 +29,21 @@ export const SortArrow: VFC<ISortArrowProps> = ({
                     condition={Boolean(desc)}
                     show={
                         <KeyboardArrowDown
-                            className={classnames(styles.icon, styles.sorted)}
+                            className={classnames(
+                                styles.icon,
+                                styles.sorted,
+                                className
+                            )}
                             fontSize="inherit"
                         />
                     }
                     elseShow={
                         <KeyboardArrowUp
-                            className={classnames(styles.icon, styles.sorted)}
+                            className={classnames(
+                                styles.icon,
+                                styles.sorted,
+                                className
+                            )}
                             fontSize="inherit"
                         />
                     }
@@ -41,7 +51,7 @@ export const SortArrow: VFC<ISortArrowProps> = ({
             }
             elseShow={
                 <UnfoldMoreOutlined
-                    className={classnames(styles.icon, 'hover-only')}
+                    className={classnames(styles.icon, className, 'hover-only')}
                     fontSize="inherit"
                 />
             }

frontend/src/component/common/Table/TablePlaceholder/TablePlaceholder.styles.ts

@@ -8,5 +8,6 @@ export const useStyles = makeStyles()(theme => ({
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
+        marginTop: theme.spacing(2),
     },
 }));

frontend/src/component/common/flags.ts

@@ -5,4 +5,3 @@ export const RBAC = 'RBAC';
 export const EEA = 'EEA';
 export const RE = 'RE';
 export const SE = 'SE';
-export const NEW_PROJECT_OVERVIEW = 'NEW_PROJECT_OVERVIEW';

frontend/src/component/feature/FeatureToggleList/FeatureToggleListContainer.tsx

@@ -1,22 +0,0 @@
-import { useFeatures } from 'hooks/api/getters/useFeatures/useFeatures';
-import { FeatureSchema } from 'openapi';
-import { FeatureToggleListTable } from './FeatureToggleListTable/FeatureToggleListTable';
-
-const featuresPlaceholder: FeatureSchema[] = Array(15).fill({
-    name: 'Name of the feature',
-    description: 'Short description of the feature',
-    type: '-',
-    createdAt: new Date(2022, 1, 1),
-    project: 'projectID',
-});
-
-export const FeatureToggleListContainer = () => {
-    const { features = [], loading } = useFeatures();
-
-    return (
-        <FeatureToggleListTable
-            data={loading ? featuresPlaceholder : features}
-            isLoading={loading}
-        />
-    );
-};

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useMemo, VFC } from 'react';
+import { useEffect, useMemo, useState, VFC } from 'react';
 import { Link, useMediaQuery, useTheme } from '@mui/material';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink, useSearchParams } from 'react-router-dom';
-import { useGlobalFilter, useSortBy, useTable } from 'react-table';
+import { SortingRule, useGlobalFilter, useSortBy, useTable } from 'react-table';
 import {
     Table,
     SortableTableHeader,
@@ -11,22 +11,30 @@ import {
     TablePlaceholder,
     TableSearch,
 } from 'component/common/Table';
+import { useFeatures } from 'hooks/api/getters/useFeatures/useFeatures';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
-import { DateCell } from '../../../common/Table/cells/DateCell/DateCell';
+import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
 import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
 import { FeatureSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureSeenCell';
 import { FeatureTypeCell } from 'component/common/Table/cells/FeatureTypeCell/FeatureTypeCell';
-import { FeatureStaleCell } from './FeatureStaleCell/FeatureStaleCell';
-import { CreateFeatureButton } from '../../CreateFeatureButton/CreateFeatureButton';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { sortTypes } from 'utils/sortTypes';
+import { useLocalStorage } from 'hooks/useLocalStorage';
+import { FeatureSchema } from 'openapi';
+import { CreateFeatureButton } from '../CreateFeatureButton/CreateFeatureButton';
+import { FeatureStaleCell } from './FeatureStaleCell/FeatureStaleCell';
 
-interface IExperimentProps {
+const featuresPlaceholder: FeatureSchema[] = Array(15).fill({
-    data: Record<string, any>[];
+    name: 'Name of the feature',
-    isLoading?: boolean;
+    description: 'Short description of the feature',
-}
+    type: '-',
+    createdAt: new Date(2022, 1, 1),
+    project: 'projectID',
+});
+
+type PageQueryType = Partial<Record<'sort' | 'order' | 'search', string>>;
 
 const columns = [
     {
@@ -87,21 +95,36 @@ const columns = [
     },
 ];
 
-export const FeatureToggleListTable: VFC<IExperimentProps> = ({
+const defaultSort: SortingRule<string> = { id: 'createdAt', desc: false };
-    data,
+
-    isLoading = false,
+export const FeatureToggleListTable: VFC = () => {
-}) => {
     const theme = useTheme();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
     const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg'));
-
+    const [searchParams, setSearchParams] = useSearchParams();
-    const initialState = useMemo(
+    const [storedParams, setStoredParams] = useLocalStorage(
-        () => ({
+        'FeatureToggleListTable:v1',
-            sortBy: [{ id: 'createdAt', desc: false }],
+        defaultSort
-            hiddenColumns: ['description'],
-        }),
-        []
     );
+    const { features = [], loading } = useFeatures();
+    const data = useMemo(
+        () =>
+            features?.length === 0 && loading ? featuresPlaceholder : features,
+        [features, loading]
+    );
+
+    const [initialState] = useState(() => ({
+        sortBy: [
+            {
+                id: searchParams.get('sort') || storedParams.id,
+                desc: searchParams.has('order')
+                    ? searchParams.get('order') === 'desc'
+                    : storedParams.desc,
+            },
+        ],
+        hiddenColumns: ['description'],
+        globalFilter: searchParams.get('search') || '',
+    }));
 
     const {
         getTableProps,
@@ -109,17 +132,20 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
         headerGroups,
         rows,
         prepareRow,
-        state: { globalFilter },
+        state: { globalFilter, sortBy },
         setGlobalFilter,
         setHiddenColumns,
     } = useTable(
         {
+            // @ts-expect-error -- fix in react-table v8
             columns,
             data,
             initialState,
             sortTypes,
             autoResetGlobalFilter: false,
+            autoResetSortBy: false,
             disableSortRemove: true,
+            disableMultiSort: true,
         },
         useGlobalFilter,
         useSortBy
@@ -141,9 +167,25 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
         }
     }, [setHiddenColumns, isSmallScreen, isMediumScreen]);
 
+    useEffect(() => {
+        const tableState: PageQueryType = {};
+        tableState.sort = sortBy[0].id;
+        if (sortBy[0].desc) {
+            tableState.order = 'desc';
+        }
+        if (globalFilter) {
+            tableState.search = globalFilter;
+        }
+
+        setSearchParams(tableState, {
+            replace: true,
+        });
+        setStoredParams({ id: sortBy[0].id, desc: sortBy[0].desc || false });
+    }, [sortBy, globalFilter, setSearchParams, setStoredParams]);
+
     return (
         <PageContent
-            isLoading={isLoading}
+            isLoading={loading}
             header={
                 <PageHeader
                     title={`Feature toggles (${data.length})`}
@@ -173,6 +215,7 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
         >
             <SearchHighlightProvider value={globalFilter}>
                 <Table {...getTableProps()}>
+                    {/* @ts-expect-error -- fix in react-table v8 */}
                     <SortableTableHeader headerGroups={headerGroups} />
                     <TableBody {...getTableBodyProps()}>
                         {rows.map(row => {

frontend/src/component/menu/routes.ts

@@ -1,4 +1,4 @@
-import { FeatureToggleListContainer } from 'component/feature/FeatureToggleList/FeatureToggleListContainer';
+import { FeatureToggleListTable } from 'component/feature/FeatureToggleList/FeatureToggleListTable';
 import { StrategyView } from 'component/strategies/StrategyView/StrategyView';
 import { StrategiesList } from 'component/strategies/StrategiesList/StrategiesList';
 
@@ -166,7 +166,7 @@ export const routes: IRoute[] = [
     {
         path: '/features',
         title: 'Feature toggles',
-        component: FeatureToggleListContainer,
+        component: FeatureToggleListTable,
         type: 'protected',
         menu: { mobile: true },
     },

frontend/src/component/project/Project/ProjectFeatureToggles/ColumnsMenu/ColumnsMenu.tsx

@@ -29,6 +29,8 @@ interface IColumnsMenuProps {
     staticColumns?: string[];
     dividerBefore?: string[];
     dividerAfter?: string[];
+    isCustomized?: boolean;
+    onCustomize?: (columns: string[]) => void;
     setHiddenColumns: (
         hiddenColumns:
             | string[]
@@ -41,6 +43,8 @@ export const ColumnsMenu: VFC<IColumnsMenuProps> = ({
     staticColumns = [],
     dividerBefore = [],
     dividerAfter = [],
+    isCustomized = false,
+    onCustomize = () => {},
     setHiddenColumns,
 }) => {
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -51,6 +55,10 @@ export const ColumnsMenu: VFC<IColumnsMenuProps> = ({
     const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg'));
 
     useEffect(() => {
+        if (isCustomized) {
+            return;
+        }
+
         const setVisibleColumns = (
             columns: string[],
             environmentsToShow: number = 0
@@ -88,6 +96,17 @@ export const ColumnsMenu: VFC<IColumnsMenuProps> = ({
         setAnchorEl(null);
     };
 
+    const onItemClick = (column: typeof allColumns[number]) => {
+        onCustomize([
+            ...allColumns
+                .filter(({ isVisible }) => isVisible)
+                .map(({ id }) => id)
+                .filter(id => !staticColumns.includes(id) && id !== column.id),
+            ...(!column.isVisible ? [column.id] : []),
+        ]);
+        column.toggleHidden(column.isVisible);
+    };
+
     const isOpen = Boolean(anchorEl);
     const id = `columns-menu`;
     const menuId = `columns-menu-list-${id}`;
@@ -142,9 +161,7 @@ export const ColumnsMenu: VFC<IColumnsMenuProps> = ({
                             show={<Divider className={classes.divider} />}
                         />,
                         <MenuItem
-                            onClick={() => {
+                            onClick={() => onItemClick(column)}
-                                column.toggleHidden(column.isVisible);
-                            }}
                             disabled={staticColumns.includes(column.id)}
                             className={classes.menuItem}
                         >

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Add } from '@mui/icons-material';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useFilters, useSortBy, useTable } from 'react-table';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
@@ -28,11 +28,12 @@ import {
 } from 'component/common/Table';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import useProject from 'hooks/api/getters/useProject/useProject';
+import { useLocalStorage } from 'hooks/useLocalStorage';
 import useToast from 'hooks/useToast';
 import { ENVIRONMENT_STRATEGY_ERROR } from 'constants/apiErrors';
 import EnvironmentStrategyDialog from 'component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog';
 import { useEnvironmentsRef } from './hooks/useEnvironmentsRef';
-import { useSetFeatureState } from './hooks/useSetFeatureState';
+import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import { FeatureToggleSwitch } from './FeatureToggleSwitch/FeatureToggleSwitch';
 import { ActionsCell } from './ActionsCell/ActionsCell';
 import { ColumnsMenu } from './ColumnsMenu/ColumnsMenu';
@@ -56,6 +57,8 @@ type ListItemType = Pick<
     };
 };
 
+const staticColumns = ['Actions', 'name'];
+
 export const ProjectFeatureToggles = ({
     features,
     loading,
@@ -118,7 +121,8 @@ export const ProjectFeatureToggles = ({
         );
     }, [features, loading]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    const { setFeatureState } = useSetFeatureState();
+    const { toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } =
+        useFeatureApi();
     const onToggle = useCallback(
         async (
             projectId: string,
@@ -127,12 +131,20 @@ export const ProjectFeatureToggles = ({
             enabled: boolean
         ) => {
             try {
-                await setFeatureState(
+                if (enabled) {
+                    await toggleFeatureEnvironmentOn(
                         projectId,
                         featureName,
-                    environment,
+                        environment
-                    enabled
                     );
+                } else {
+                    await toggleFeatureEnvironmentOff(
+                        projectId,
+                        featureName,
+                        environment
+                    );
+                }
+                refetch();
             } catch (error) {
                 const message = formatUnknownError(error);
                 if (message === ENVIRONMENT_STRATEGY_ERROR) {
@@ -154,7 +166,7 @@ export const ProjectFeatureToggles = ({
             });
             refetch();
         },
-        [setFeatureState] // eslint-disable-line react-hooks/exhaustive-deps
+        [toggleFeatureEnvironmentOff, toggleFeatureEnvironmentOn] // eslint-disable-line react-hooks/exhaustive-deps
     );
 
     const columns = useMemo(
@@ -232,22 +244,60 @@ export const ProjectFeatureToggles = ({
         ],
         [projectId, environments, onToggle, loading]
     );
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [storedParams, setStoredParams] = useLocalStorage<{
+        columns?: string[];
+    }>(`${projectId}:ProjectFeatureToggles`, {});
 
     const initialState = useMemo(
-        () => ({
+        () => {
-            sortBy: [{ id: 'createdAt', desc: false }],
+            const allColumnIds = columns.map(
-            hiddenColumns: environments
+                (column: any) => column?.accessor || column?.id
+            );
+            let hiddenColumns = environments
                 .filter((_, index) => index >= 3)
-                .map(environment => `environments.${environment}`),
+                .map(environment => `environments.${environment}`);
-        }),
+
-        [environments]
+            if (searchParams.has('columns')) {
+                const columnsInParams =
+                    searchParams.get('columns')?.split(',') || [];
+                const visibleColumns = [...staticColumns, ...columnsInParams];
+                hiddenColumns = allColumnIds.filter(
+                    columnId => !visibleColumns.includes(columnId)
+                );
+            } else if (storedParams.columns) {
+                const visibleColumns = [
+                    ...staticColumns,
+                    ...storedParams.columns,
+                ];
+                hiddenColumns = allColumnIds.filter(
+                    columnId => !visibleColumns.includes(columnId)
+                );
+            }
+
+            return {
+                sortBy: [
+                    {
+                        id: searchParams.get('sort') || 'createdAt',
+                        desc: searchParams.has('order')
+                            ? searchParams.get('order') === 'desc'
+                            : false,
+                    },
+                ],
+                hiddenColumns,
+                filters: [
+                    { id: 'name', value: searchParams.get('search') || '' },
+                ],
+            };
+        },
+        [environments] // eslint-disable-line react-hooks/exhaustive-deps
     );
 
     const {
         allColumns,
         headerGroups,
         rows,
-        state: { filters },
+        state: { filters, sortBy, hiddenColumns },
         getTableBodyProps,
         getTableProps,
         prepareRow,
@@ -268,8 +318,44 @@ export const ProjectFeatureToggles = ({
     );
 
     const filter = useMemo(
-        () => filters?.find(filterRow => filterRow?.id === 'name')?.value || '',
+        () =>
-        [filters]
+            filters?.find(filterRow => filterRow?.id === 'name')?.value ||
+            initialState.filters[0].value,
+        [filters, initialState]
+    );
+
+    useEffect(() => {
+        if (loading) {
+            return;
+        }
+        const tableState: Record<string, string> = {};
+        tableState.sort = sortBy[0].id;
+        if (sortBy[0].desc) {
+            tableState.order = 'desc';
+        }
+        if (filter) {
+            tableState.search = filter;
+        }
+        tableState.columns = allColumns
+            .map(({ id }) => id)
+            .filter(
+                id =>
+                    !staticColumns.includes(id) && !hiddenColumns?.includes(id)
+            )
+            .join(',');
+
+        setSearchParams(tableState, {
+            replace: true,
+        });
+    }, [loading, sortBy, hiddenColumns, filter, setSearchParams, allColumns]);
+
+    const onCustomizeColumns = useCallback(
+        visibleColumns => {
+            setStoredParams({
+                columns: visibleColumns,
+            });
+        },
+        [setStoredParams]
     );
 
     return (
@@ -289,9 +375,11 @@ export const ProjectFeatureToggles = ({
                             />
                             <ColumnsMenu
                                 allColumns={allColumns}
-                                staticColumns={['Actions', 'name']}
+                                staticColumns={staticColumns}
                                 dividerAfter={['createdAt']}
                                 dividerBefore={['Actions']}
+                                isCustomized={Boolean(storedParams.columns)}
+                                onCustomize={onCustomizeColumns}
                                 setHiddenColumns={setHiddenColumns}
                             />
                             <PageHeader.Divider />

frontend/src/component/project/Project/ProjectFeatureToggles/hooks/useSetFeatureState.ts

@@ -1,31 +0,0 @@
-import useAPI from 'hooks/api/actions/useApi/useApi';
-import { useCallback } from 'react';
-
-export const useSetFeatureState = () => {
-    const { makeRequest, createRequest, errors } = useAPI({
-        propagateErrors: true,
-    });
-
-    const setFeatureState = useCallback(
-        async (
-            projectId: string,
-            featureName: string,
-            environment: string,
-            enabled: boolean
-        ) => {
-            const path = `api/admin/projects/${projectId}/features/${featureName}/environments/${environment}/${
-                enabled ? 'on' : 'off'
-            }`;
-            const req = createRequest(path, { method: 'POST' });
-
-            try {
-                return makeRequest(req.caller, req.id);
-            } catch (e) {
-                throw e;
-            }
-        },
-        [] // eslint-disable-line react-hooks/exhaustive-deps
-    );
-
-    return { setFeatureState, errors };
-};

frontend/src/component/project/Project/ProjectOverview.tsx

@@ -1,8 +1,5 @@
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useProject from 'hooks/api/getters/useProject/useProject';
-import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ProjectFeatureToggles } from './ProjectFeatureToggles/ProjectFeatureToggles';
-import { ProjectFeatureToggles as LegacyProjectFeatureToggles } from './ProjectFeatureToggles/LegacyProjectFeatureToggles';
 import ProjectInfo from './ProjectInfo/ProjectInfo';
 import { useStyles } from './Project.styles';
 
@@ -12,11 +9,10 @@ interface IProjectOverviewProps {
 
 const ProjectOverview = ({ projectId }: IProjectOverviewProps) => {
     const { project, loading } = useProject(projectId, {
-        refreshInterval: 10000,
+        refreshInterval: 15 * 1000, // ms
     });
     const { members, features, health, description, environments } = project;
     const { classes: styles } = useStyles();
-    const { uiConfig } = useUiConfig();
 
     return (
         <div>
@@ -29,22 +25,11 @@ const ProjectOverview = ({ projectId }: IProjectOverviewProps) => {
                     featureCount={features?.length}
                 />
                 <div className={styles.projectToggles}>
-                    <ConditionallyRender
-                        condition={uiConfig.flags.NEW_PROJECT_OVERVIEW}
-                        show={() => (
                     <ProjectFeatureToggles
                         features={features}
                         environments={environments}
                         loading={loading}
                     />
-                        )}
-                        elseShow={() => (
-                            <LegacyProjectFeatureToggles
-                                features={features}
-                                loading={loading}
-                            />
-                        )}
-                    />
                 </div>
             </div>
         </div>

frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx

@@ -1,5 +1,5 @@
 import { useStyles } from './SegmentListItem.styles';
-import { TableCell, TableRow, Typography } from '@mui/material';
+import { Box, TableCell, TableRow, Typography } from '@mui/material';
 import { Delete, Edit } from '@mui/icons-material';
 import {
     UPDATE_SEGMENT,
@@ -60,6 +60,7 @@ export const SegmentListItem = ({
             </TableCell>
 
             <TableCell align="right">
+                <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                     <PermissionIconButton
                         data-loading
                         onClick={() => {
@@ -89,6 +90,7 @@ export const SegmentListItem = ({
                     >
                         <Delete />
                     </PermissionIconButton>
+                </Box>
             </TableCell>
         </TableRow>
     );

frontend/src/hooks/api/actions/useApi/useApi.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, SetStateAction, useCallback, useState } from 'react';
 import {
     BAD_REQUEST,
     FORBIDDEN,
@@ -40,55 +40,8 @@ const useAPI = ({
     const [errors, setErrors] = useState<Record<string, string>>({});
     const [loading, setLoading] = useState(false);
 
-    const defaultOptions: RequestInit = {
+    const handleResponses = useCallback(
-        headers,
+        async (res: Response, requestId: string) => {
-        credentials: 'include',
-    };
-
-    const makeRequest = async (
-        apiCaller: () => Promise<Response>,
-        requestId: string,
-        loadingOn: boolean = true
-    ): Promise<Response> => {
-        if (loadingOn) {
-            setLoading(true);
-        }
-
-        try {
-            const res = await apiCaller();
-            setLoading(false);
-            if (res.status > 299) {
-                await handleResponses(res, requestId);
-            }
-
-            if (res.status === OK) {
-                setErrors({});
-            }
-
-            return res;
-        } catch (e) {
-            setLoading(false);
-            throw e;
-        }
-    };
-
-    const createRequest = (
-        path: string,
-        options: any,
-        requestId: string = ''
-    ) => {
-        return {
-            caller: () => {
-                return fetch(formatApiPath(path), {
-                    ...defaultOptions,
-                    ...options,
-                });
-            },
-            id: requestId,
-        };
-    };
-
-    const handleResponses = async (res: Response, requestId: string) => {
             if (res.status === BAD_REQUEST) {
                 if (handleBadRequest) {
                     return handleBadRequest(setErrors, res, requestId);
@@ -170,8 +123,66 @@ const useAPI = ({
                     throw new Error('Action could not be performed');
                 }
             }
+        },
+        [
+            handleBadRequest,
+            handleForbidden,
+            handleNotFound,
+            handleUnauthorized,
+            propagateErrors,
+        ]
+    );
+
+    const makeRequest = useCallback(
+        async (
+            apiCaller: () => Promise<Response>,
+            requestId: string,
+            loadingOn: boolean = true
+        ): Promise<Response> => {
+            if (loadingOn) {
+                setLoading(true);
+            }
+
+            try {
+                const res = await apiCaller();
+                setLoading(false);
+                if (res.status > 299) {
+                    await handleResponses(res, requestId);
+                }
+
+                if (res.status === OK) {
+                    setErrors({});
+                }
+
+                return res;
+            } catch (e) {
+                setLoading(false);
+                throw e;
+            }
+        },
+        [handleResponses]
+    );
+
+    const createRequest = useCallback(
+        (path: string, options: any, requestId: string = '') => {
+            const defaultOptions: RequestInit = {
+                headers,
+                credentials: 'include',
             };
 
+            return {
+                caller: () => {
+                    return fetch(formatApiPath(path), {
+                        ...defaultOptions,
+                        ...options,
+                    });
+                },
+                id: requestId,
+            };
+        },
+        []
+    );
+
     return {
         loading,
         makeRequest,

frontend/src/hooks/api/actions/useFeatureApi/useFeatureApi.ts

@@ -4,6 +4,7 @@ import { Operation } from 'fast-json-patch';
 import { CreateFeatureSchema } from 'openapi';
 import { openApiAdmin } from 'utils/openapiClient';
 import { IConstraint } from 'interfaces/strategy';
+import { useCallback } from 'react';
 
 const useFeatureApi = () => {
     const { makeRequest, createRequest, errors, loading } = useAPI({
@@ -47,11 +48,8 @@ const useFeatureApi = () => {
         });
     };
 
-    const toggleFeatureEnvironmentOn = async (
+    const toggleFeatureEnvironmentOn = useCallback(
-        projectId: string,
+        async (projectId: string, featureId: string, environmentId: string) => {
-        featureId: string,
-        environmentId: string
-    ) => {
             const path = `api/admin/projects/${projectId}/features/${featureId}/environments/${environmentId}/on`;
             const req = createRequest(
                 path,
@@ -66,13 +64,12 @@ const useFeatureApi = () => {
             } catch (e) {
                 throw e;
             }
-    };
+        },
+        [createRequest, makeRequest]
+    );
 
-    const toggleFeatureEnvironmentOff = async (
+    const toggleFeatureEnvironmentOff = useCallback(
-        projectId: string,
+        async (projectId: string, featureId: string, environmentId: string) => {
-        featureId: string,
-        environmentId: string
-    ) => {
             const path = `api/admin/projects/${projectId}/features/${featureId}/environments/${environmentId}/off`;
             const req = createRequest(
                 path,
@@ -87,7 +84,9 @@ const useFeatureApi = () => {
             } catch (e) {
                 throw e;
             }
-    };
+        },
+        [createRequest, makeRequest]
+    );
 
     const changeFeatureProject = async (
         projectId: string,

frontend/src/hooks/api/getters/useFeatures/useFeatures.ts

@@ -12,7 +12,10 @@ export interface IUseFeaturesOutput {
 export const useFeatures = (): IUseFeaturesOutput => {
     const { data, refetch, loading, error } = useApiGetter(
         'apiAdminFeaturesGet',
-        () => openApiAdmin.getAllToggles()
+        () => openApiAdmin.getAllToggles(),
+        {
+            refreshInterval: 15 * 1000, // ms
+        }
     );
 
     return {

frontend/src/hooks/api/getters/useUiConfig/defaultValue.ts

@@ -14,7 +14,6 @@ export const defaultValue = {
         CO: false,
         SE: false,
         T: false,
-        NEW_PROJECT_OVERVIEW: false,
     },
     links: [
         {

frontend/src/hooks/useLocalStorage.test.ts

@@ -0,0 +1,65 @@
+import { vi } from 'vitest';
+import { useLocalStorage } from './useLocalStorage';
+import { act, renderHook } from '@testing-library/react-hooks';
+
+describe('useLocalStorage', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    it('should return an object with data and mutate properties', () => {
+        vi.spyOn(Storage.prototype, 'getItem').mockImplementationOnce(() =>
+            JSON.stringify(undefined)
+        );
+        const { result } = renderHook(() => useLocalStorage('key', {}));
+
+        expect(result.current).toEqual([{}, expect.any(Function)]);
+    });
+
+    it('returns default value', () => {
+        vi.spyOn(Storage.prototype, 'getItem').mockImplementationOnce(() =>
+            JSON.stringify(undefined)
+        );
+        const { result } = renderHook(() =>
+            useLocalStorage('key', { key: 'value' })
+        );
+
+        expect(result.current).toEqual([
+            { key: 'value' },
+            expect.any(Function),
+        ]);
+    });
+
+    it('returns a value from local storage', async () => {
+        vi.spyOn(Storage.prototype, 'getItem').mockImplementationOnce(() =>
+            JSON.stringify({ key: 'value' })
+        );
+
+        const { result, waitFor } = renderHook(() =>
+            useLocalStorage('test-key', {})
+        );
+
+        await waitFor(() =>
+            expect(result.current).toEqual([
+                { key: 'value' },
+                expect.any(Function),
+            ])
+        );
+    });
+
+    it('sets new value to local storage', async () => {
+        const setItem = vi.spyOn(Storage.prototype, 'setItem');
+        const { result } = renderHook(() =>
+            useLocalStorage('test-key', { key: 'initial-value' })
+        );
+
+        await act(async () => {
+            result.current[1]({ key: 'new-value' });
+        });
+
+        expect(setItem).toHaveBeenCalledWith(
+            ':test-key:useLocalStorage:v1',
+            JSON.stringify({ key: 'new-value' })
+        );
+    });
+});

frontend/src/hooks/useLocalStorage.ts

@@ -0,0 +1,34 @@
+import { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import { basePath } from 'utils/formatPath';
+import { getLocalStorageItem, setLocalStorageItem } from '../utils/storage';
+
+export const useLocalStorage = <T extends object>(
+    key: string,
+    initialValue: T
+) => {
+    const internalKey = `${basePath}:${key}:useLocalStorage:v1`;
+    const [value, setValue] = useState<T>(() => {
+        const state = getLocalStorageItem<T>(internalKey);
+        if (state === undefined) {
+            return initialValue;
+        }
+        return state;
+    });
+
+    const onUpdate = useCallback<Dispatch<SetStateAction<T>>>(
+        value => {
+            if (value instanceof Function) {
+                setValue(prev => {
+                    const output = value(prev);
+                    setLocalStorageItem(internalKey, output);
+                    return output;
+                });
+            }
+            setLocalStorageItem(internalKey, value);
+            setValue(value);
+        },
+        [internalKey]
+    );
+
+    return [value, onUpdate] as const;
+};

frontend/src/hooks/usePersistentGlobalState.ts

@@ -12,14 +12,14 @@ type UsePersistentGlobalState<T> = () => [
  * The state is also persisted to localStorage and restored on page load.
  * The localStorage state is not synced between tabs.
  *
- * @deprecated
+ * @deprecated `hooks/useLocalStorage` -- we don't need `react-hooks-global-state`
  */
 export const createPersistentGlobalStateHook = <T extends object>(
     key: string,
     initialValue: T
 ): UsePersistentGlobalState<T> => {
     const container = createGlobalState<{ [key: string]: T }>({
-        [key]: getLocalStorageItem(key) ?? initialValue,
+        [key]: getLocalStorageItem<T>(key) ?? initialValue,
     });
 
     const setGlobalState = (value: React.SetStateAction<T>) => {

frontend/src/interfaces/uiConfig.ts

@@ -29,7 +29,6 @@ export interface IFlags {
     CO?: boolean;
     SE?: boolean;
     T?: boolean;
-    NEW_PROJECT_OVERVIEW: boolean;
 }
 
 export interface IVersionInfo {