Use new useConditionallyHiddenColumns hook (#2695)

https://linear.app/unleash/issue/2-515/adapt-tables-to-use-the-new-useconditionallyhiddencolumns-hook

Uses the new `useConditionallyHiddenColumns` hook, like mentioned here:
https://github.com/Unleash/unleash/pull/2691
Also includes small fixes for things I caught along the way. See
comments below.

frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import {
     Table,
     SortableTableHeader,
@@ -28,6 +28,7 @@ import { HighlightCell } from 'component/common/Table/cells/HighlightCell/Highli
 import theme from 'themes/theme';
 import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
 import { Search } from 'component/common/Search/Search';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 const ROOTROLE = 'root';
 const BUILTIN_ROLE_TYPE = 'project';
@@ -174,13 +175,16 @@ const ProjectRoleList = () => {
         useSortBy
     );
 
-    useEffect(() => {
+    useConditionallyHiddenColumns(
-        const hiddenColumns = [];
+        [
-        if (isExtraSmallScreen) {
+            {
-            hiddenColumns.push('Icon');
+                condition: isExtraSmallScreen,
-        }
+                columns: ['Icon'],
-        setHiddenColumns(hiddenColumns);
+            },
-    }, [setHiddenColumns, isExtraSmallScreen]);
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     let count =
         data.length < rows.length

frontend/src/component/admin/users/UsersList/UsersList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
 import ChangePassword from './ChangePassword/ChangePassword';
 import DeleteUser from './DeleteUser/DeleteUser';
@@ -32,6 +32,7 @@ import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCel
 import { UsersActionsCell } from './UsersActionsCell/UsersActionsCell';
 import { Search } from 'component/common/Search/Search';
 import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 const UsersList = () => {
     const navigate = useNavigate();
@@ -216,19 +217,24 @@ const UsersList = () => {
         useFlexLayout
     );
 
-    useEffect(() => {
+    useConditionallyHiddenColumns(
-        const hiddenColumns = [];
+        [
-        if (!isBillingUsers || isSmallScreen) {
+            {
-            hiddenColumns.push('type');
+                condition: !isBillingUsers || isSmallScreen,
-        }
+                columns: ['type'],
-        if (isSmallScreen) {
+            },
-            hiddenColumns.push('createdAt', 'last-login');
+            {
-        }
+                condition: isExtraSmallScreen,
-        if (isExtraSmallScreen) {
+                columns: ['imageUrl', 'role'],
-            hiddenColumns.push('imageUrl', 'role');
+            },
-        }
+            {
-        setHiddenColumns(hiddenColumns);
+                condition: isSmallScreen,
-    }, [setHiddenColumns, isExtraSmallScreen, isSmallScreen, isBillingUsers]);
+                columns: ['createdAt', 'last-login'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     return (
         <PageContent

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

@@ -26,6 +26,7 @@ import { FeatureArchivedCell } from './FeatureArchivedCell/FeatureArchivedCell';
 import { useSearchParams } from 'react-router-dom';
 import { ArchivedFeatureDeleteConfirm } from './ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm';
 import { IFeatureToggle } from 'interfaces/featureToggle';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 export interface IFeaturesArchiveTableProps {
     archivedFeatures: FeatureSchema[];
@@ -84,7 +85,6 @@ export const ArchiveTable = ({
     const columns = useMemo(
         () => [
             {
-                id: 'Seen',
                 Header: 'Seen',
                 width: 85,
                 canSort: true,
@@ -174,6 +174,8 @@ export const ArchiveTable = ({
             // Always hidden -- for search
             {
                 accessor: 'description',
+                header: 'Description',
+                searchable: true,
             },
         ],
         //eslint-disable-next-line
@@ -222,16 +224,20 @@ export const ArchiveTable = ({
         useSortBy
     );
 
-    useEffect(() => {
+    useConditionallyHiddenColumns(
-        const hiddenColumns = ['description'];
+        [
-        if (isMediumScreen) {
+            {
-            hiddenColumns.push('lastSeenAt', 'status');
+                condition: isSmallScreen,
-        }
+                columns: ['type', 'createdAt'],
-        if (isSmallScreen) {
+            },
-            hiddenColumns.push('type', 'createdAt');
+            {
-        }
+                condition: isMediumScreen,
-        setHiddenColumns(hiddenColumns);
+                columns: ['lastSeenAt', 'stale'],
-    }, [setHiddenColumns, isSmallScreen, isMediumScreen]);
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     useEffect(() => {
         if (loading) {

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx

@@ -25,6 +25,7 @@ import { ChangeRequestTitleCell } from './ChangeRequestTitleCell/ChangeRequestTi
 import { TableBody, TableRow } from '../../../common/Table';
 import { useStyles } from './ChangeRequestsTabs.styles';
 import { createLocalStorage } from '../../../../utils/createLocalStorage';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 export interface IChangeRequestTableProps {
     changeRequests: any[];
@@ -172,13 +173,16 @@ export const ChangeRequestsTabs = ({
         useSortBy
     );
 
-    useEffect(() => {
+    useConditionallyHiddenColumns(
-        const hiddenColumns = [''];
+        [
-        if (isSmallScreen) {
+            {
-            hiddenColumns.push('createdBy', 'updatedAt');
+                condition: isSmallScreen,
-        }
+                columns: ['createdBy'],
-        setHiddenColumns(hiddenColumns);
+            },
-    }, [setHiddenColumns, isSmallScreen]);
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     useEffect(() => {
         if (loading) {

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

@@ -26,6 +26,7 @@ import { FavoriteIconCell } from 'component/common/Table/cells/FavoriteIconCell/
 import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/FavoriteIconHeader';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 export const featuresPlaceholder: FeatureSchema[] = Array(15).fill({
     name: 'Name of the feature',
@@ -174,6 +175,8 @@ export const FeatureToggleListTable: VFC = () => {
             // Always hidden -- for search
             {
                 accessor: 'description',
+                Header: 'Description',
+                searchable: true,
             },
         ],
         [isFavoritesPinned, uiConfig?.flags?.favorites]
@@ -213,19 +216,24 @@ export const FeatureToggleListTable: VFC = () => {
         useFlexLayout
     );
 
-    useEffect(() => {
+    useConditionallyHiddenColumns(
-        const hiddenColumns = ['description'];
+        [
-        if (!features.some(({ tags }) => tags?.length)) {
+            {
-            hiddenColumns.push('tags');
+                condition: !features.some(({ tags }) => tags?.length),
-        }
+                columns: ['tags'],
-        if (isMediumScreen) {
+            },
-            hiddenColumns.push('lastSeenAt', 'stale');
+            {
-        }
+                condition: isSmallScreen,
-        if (isSmallScreen) {
+                columns: ['type', 'createdAt', 'tags'],
-            hiddenColumns.push('type', 'createdAt', 'tags');
+            },
-        }
+            {
-        setHiddenColumns(hiddenColumns);
+                condition: isMediumScreen,
-    }, [setHiddenColumns, isSmallScreen, isMediumScreen, features, columns]);
+                columns: ['lastSeenAt', 'stale'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     useEffect(() => {
         const tableState: PageQueryType = {};

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx

@@ -5,9 +5,10 @@ import { useTable, useGlobalFilter, useSortBy } from 'react-table';
 import { SortableTableHeader, TableCell, Table } from 'component/common/Table';
 import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
 import { Assessment } from '@mui/icons-material';
-import { useMemo, useEffect } from 'react';
+import { useMemo } from 'react';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import theme from 'themes/theme';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 interface IFeatureMetricsTableProps {
     metrics: IFeatureMetricsRaw[];
@@ -41,13 +42,16 @@ export const FeatureMetricsTable = ({
         useSortBy
     );
 
-    useEffect(() => {
+    useConditionallyHiddenColumns(
-        const hiddenColumns = [];
+        [
-        if (isMediumScreen) {
+            {
-            hiddenColumns.push('appName', 'environment');
+                condition: isMediumScreen,
-        }
+                columns: ['appName', 'environment'],
-        setHiddenColumns(hiddenColumns);
+            },
-    }, [setHiddenColumns, isMediumScreen]);
+        ],
+        setHiddenColumns,
+        COLUMNS
+    );
 
     if (metrics.length === 0) {
         return null;

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx

@@ -13,12 +13,13 @@ import {
     IOverride,
     IPayload,
 } from 'interfaces/featureToggle';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useFlexLayout, useSortBy, useTable } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { PayloadCell } from './PayloadCell/PayloadCell';
 import { OverridesCell } from './OverridesCell/OverridesCell';
 import { VariantsActionCell } from './VariantsActionsCell/VariantsActionsCell';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 const StyledTableContainer = styled('div')(({ theme }) => ({
     margin: theme.spacing(3, 0),
@@ -145,16 +146,20 @@ export const EnvironmentVariantsTable = ({
         useFlexLayout
     );
 
-    useEffect(() => {
+    useConditionallyHiddenColumns(
-        const hiddenColumns = [];
+        [
-        if (isLargeScreen) {
+            {
-            hiddenColumns.push('weightType');
+                condition: isMediumScreen,
-        }
+                columns: ['payload', 'overrides'],
-        if (isMediumScreen) {
+            },
-            hiddenColumns.push('payload', 'overrides');
+            {
-        }
+                condition: isLargeScreen,
-        setHiddenColumns(hiddenColumns);
+                columns: ['weightType'],
-    }, [setHiddenColumns, isMediumScreen, isLargeScreen]);
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     return (
         <StyledTableContainer>

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx

@@ -34,6 +34,7 @@ import { PayloadOverridesCell } from './PayloadOverridesCell/PayloadOverridesCel
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import theme from 'themes/theme';
 import { VariantsActionCell } from './VariantsActionsCell/VariantsActionsCell';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 export const FeatureVariantsList = () => {
     const { hasAccess } = useContext(AccessContext);
@@ -206,16 +207,20 @@ export const FeatureVariantsList = () => {
         useSortBy
     );
 
-    useEffect(() => {
+    useConditionallyHiddenColumns(
-        const hiddenColumns = [];
+        [
-        if (isLargeScreen) {
+            {
-            hiddenColumns.push('weightType');
+                condition: isMediumScreen,
-        }
+                columns: ['data'],
-        if (isMediumScreen) {
+            },
-            hiddenColumns.push('data');
+            {
-        }
+                condition: isLargeScreen,
-        setHiddenColumns(hiddenColumns);
+                columns: ['weightType'],
-    }, [setHiddenColumns, isMediumScreen, isLargeScreen]);
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     // @ts-expect-error
     const setClonedVariants = clonedVariants =>

frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx

@@ -26,6 +26,7 @@ import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import useLoading from 'hooks/useLoading';
 import { VariantCell } from './VariantCell/VariantCell';
 import { FeatureResultInfoPopoverCell } from './FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 const defaultSort: SortingRule<string> = { id: 'name' };
 const { value, setValue } = createLocalStorage(
@@ -184,16 +185,20 @@ export const PlaygroundResultsTable = ({
         useSortBy
     );
 
-    useEffect(() => {
+    useConditionallyHiddenColumns(
-        const hiddenColumns = [];
+        [
-        if (isSmallScreen) {
+            {
-            hiddenColumns.push('projectId');
+                condition: isExtraSmallScreen,
-        }
+                columns: ['variant'],
-        if (isExtraSmallScreen) {
+            },
-            hiddenColumns.push('variant');
+            {
-        }
+                condition: isSmallScreen,
-        setHiddenColumns(hiddenColumns);
+                columns: ['projectId'],
-    }, [setHiddenColumns, isExtraSmallScreen, isSmallScreen]);
+            },
+        ],
+        setHiddenColumns,
+        COLUMNS
+    );
 
     useEffect(() => {
         if (loading) {

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

@@ -45,6 +45,7 @@ import { usePinnedFavorites } from 'hooks/usePinnedFavorites';
 import { useFavoriteFeaturesApi } from 'hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi';
 import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/FeatureTagCell';
 import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 interface IProjectFeatureTogglesProps {
     features: IProject['features'];
@@ -430,15 +431,16 @@ export const ProjectFeatureToggles = ({
         useSortBy
     );
 
-    useEffect(() => {
+    useConditionallyHiddenColumns(
-        if (!features.some(({ tags }) => tags?.length)) {
+        [
-            setHiddenColumns(hiddenColumns => [...hiddenColumns, 'tags']);
+            {
-        } else {
+                condition: !features.some(({ tags }) => tags?.length),
-            setHiddenColumns(hiddenColumns =>
+                columns: ['tags'],
-                hiddenColumns.filter(column => column !== 'tags')
+            },
-            );
+        ],
-        }
+        setHiddenColumns,
-    }, [setHiddenColumns, features]);
+        columns
+    );
 
     useEffect(() => {
         if (loading) {

frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo } from 'react';
 import { IFeatureToggleListItem } from 'interfaces/featureToggle';
 import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
 import { PageContent } from 'component/common/PageContent/PageContent';
@@ -23,6 +23,7 @@ import { ReportExpiredCell } from './ReportExpiredCell/ReportExpiredCell';
 import { ReportStatusCell } from './ReportStatusCell/ReportStatusCell';
 import { formatStatus, ReportingStatus } from './ReportStatusCell/formatStatus';
 import { formatExpiredAt } from './ReportExpiredCell/formatExpiredAt';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 interface IReportTableProps {
     projectId: string;
@@ -91,19 +92,24 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
         useSortBy
     );
 
-    useEffect(() => {
+    useConditionallyHiddenColumns(
-        const hiddenColumns = [];
+        [
-        if (isMediumScreen) {
+            {
-            hiddenColumns.push('createdAt');
+                condition: isExtraSmallScreen,
-        }
+                columns: ['stale'],
-        if (isSmallScreen) {
+            },
-            hiddenColumns.push('expiredAt', 'lastSeenAt');
+            {
-        }
+                condition: isSmallScreen,
-        if (isExtraSmallScreen) {
+                columns: ['expiredAt', 'lastSeenAt'],
-            hiddenColumns.push('stale');
+            },
-        }
+            {
-        setHiddenColumns(hiddenColumns);
+                condition: isMediumScreen,
-    }, [setHiddenColumns, isSmallScreen, isMediumScreen, isExtraSmallScreen]);
+                columns: ['createdAt'],
+            },
+        ],
+        setHiddenColumns,
+        COLUMNS
+    );
 
     const title =
         rows.length < data.length

frontend/src/component/segments/SegmentTable/SegmentTable.tsx

@@ -14,7 +14,7 @@ import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightC
 import { useMediaQuery } from '@mui/material';
 import { sortTypes } from 'utils/sortTypes';
 import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
-import { useMemo, useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { SegmentEmpty } from 'component/segments/SegmentEmpty/SegmentEmpty';
 import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
 import { DonutLarge } from '@mui/icons-material';
@@ -24,6 +24,7 @@ import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
 import theme from 'themes/theme';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Search } from 'component/common/Search/Search';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 export const SegmentTable = () => {
     const { segments, loading } = useSegments();
@@ -71,13 +72,16 @@ export const SegmentTable = () => {
         useSortBy
     );
 
-    useEffect(() => {
+    useConditionallyHiddenColumns(
-        const hiddenColumns = ['description'];
+        [
-        if (isSmallScreen) {
+            {
-            hiddenColumns.push('createdAt', 'createdBy');
+                condition: isSmallScreen,
-        }
+                columns: ['createdAt', 'createdBy'],
-        setHiddenColumns(hiddenColumns);
+            },
-    }, [setHiddenColumns, isSmallScreen]);
+        ],
+        setHiddenColumns,
+        COLUMNS
+    );
 
     return (
         <PageContent

frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx

@@ -35,6 +35,7 @@ import { CreatePersonalAPIToken } from './CreatePersonalAPIToken/CreatePersonalA
 import { DeletePersonalAPIToken } from './DeletePersonalAPIToken/DeletePersonalAPIToken';
 import { PersonalAPITokenDialog } from './PersonalAPITokenDialog/PersonalAPITokenDialog';
 import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 const StyledAlert = styled(Alert)(({ theme }) => ({
     marginBottom: theme.spacing(3),
@@ -199,16 +200,20 @@ export const PersonalAPITokensTab = () => {
         useFlexLayout
     );
 
-    useEffect(() => {
+    useConditionallyHiddenColumns(
-        const hiddenColumns = [];
+        [
-        if (isSmallScreen) {
+            {
-            hiddenColumns.push('createdAt');
+                condition: isExtraSmallScreen,
-        }
+                columns: ['expiresAt'],
-        if (isExtraSmallScreen) {
+            },
-            hiddenColumns.push('expiresAt');
+            {
-        }
+                condition: isSmallScreen,
-        setHiddenColumns(hiddenColumns);
+                columns: ['createdAt'],
-    }, [setHiddenColumns, isSmallScreen, isExtraSmallScreen]);
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     useEffect(() => {
         const tableState: PageQueryType = {};

frontend/src/hooks/useConditionallyHiddenColumns.ts

@@ -7,19 +7,27 @@ interface IConditionallyHiddenColumns {
 
 export const useConditionallyHiddenColumns = (
     conditionallyHiddenColumns: IConditionallyHiddenColumns[],
-    setHiddenColumns: (param: string[]) => void,
+    setHiddenColumns: (
+        columns: string[] | ((columns: string[]) => string[])
+    ) => void,
     columnsDefinition: unknown[]
 ) => {
     useEffect(() => {
-        const hiddenColumnsSet = new Set<string>();
+        const columnsToHide = conditionallyHiddenColumns
-
-        conditionallyHiddenColumns
             .filter(({ condition }) => condition)
-            .forEach(({ columns }) =>
+            .flatMap(({ columns }) => columns);
-                columns.forEach(column => hiddenColumnsSet.add(column))
-            );
 
-        setHiddenColumns([...hiddenColumnsSet]);
+        const columnsToShow = conditionallyHiddenColumns
+            .flatMap(({ columns }) => columns)
+            .filter(column => !columnsToHide.includes(column));
+
+        setHiddenColumns(columns => [
+            ...new Set(
+                [...columns, ...columnsToHide].filter(
+                    column => !columnsToShow.includes(column)
+                )
+            ),
+        ]);
     }, [
         ...conditionallyHiddenColumns.map(({ condition }) => condition),
         setHiddenColumns,