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: #2691 Also includes small fixes for things I caught along the way. See comments below.
Unleash · Dec 16, 2022 · 1d1219a · 1d1219a
1 parent e437b61
commit 1d1219a
Show file tree

Hide file tree

Showing 14 changed files with 213 additions and 141 deletions.
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx b/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(() => {
-        const hiddenColumns = [];
-        if (isExtraSmallScreen) {
-            hiddenColumns.push('Icon');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isExtraSmallScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isExtraSmallScreen,
+                columns: ['Icon'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     let count =
         data.length < rows.length

diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/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(() => {
-        const hiddenColumns = [];
-        if (!isBillingUsers || isSmallScreen) {
-            hiddenColumns.push('type');
-        }
-        if (isSmallScreen) {
-            hiddenColumns.push('createdAt', 'last-login');
-        }
-        if (isExtraSmallScreen) {
-            hiddenColumns.push('imageUrl', 'role');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isExtraSmallScreen, isSmallScreen, isBillingUsers]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: !isBillingUsers || isSmallScreen,
+                columns: ['type'],
+            },
+            {
+                condition: isExtraSmallScreen,
+                columns: ['imageUrl', 'role'],
+            },
+            {
+                condition: isSmallScreen,
+                columns: ['createdAt', 'last-login'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     return (
         <PageContent

diff --git a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx b/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(() => {
-        const hiddenColumns = ['description'];
-        if (isMediumScreen) {
-            hiddenColumns.push('lastSeenAt', 'status');
-        }
-        if (isSmallScreen) {
-            hiddenColumns.push('type', 'createdAt');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isSmallScreen, isMediumScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isSmallScreen,
+                columns: ['type', 'createdAt'],
+            },
+            {
+                condition: isMediumScreen,
+                columns: ['lastSeenAt', 'stale'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     useEffect(() => {
         if (loading) {

diff --git a/...c/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx b/...c/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(() => {
-        const hiddenColumns = [''];
-        if (isSmallScreen) {
-            hiddenColumns.push('createdBy', 'updatedAt');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isSmallScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isSmallScreen,
+                columns: ['createdBy'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     useEffect(() => {
         if (loading) {

diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/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(() => {
-        const hiddenColumns = ['description'];
-        if (!features.some(({ tags }) => tags?.length)) {
-            hiddenColumns.push('tags');
-        }
-        if (isMediumScreen) {
-            hiddenColumns.push('lastSeenAt', 'stale');
-        }
-        if (isSmallScreen) {
-            hiddenColumns.push('type', 'createdAt', 'tags');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isSmallScreen, isMediumScreen, features, columns]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: !features.some(({ tags }) => tags?.length),
+                columns: ['tags'],
+            },
+            {
+                condition: isSmallScreen,
+                columns: ['type', 'createdAt', 'tags'],
+            },
+            {
+                condition: isMediumScreen,
+                columns: ['lastSeenAt', 'stale'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     useEffect(() => {
         const tableState: PageQueryType = {};

diff --git a/.../component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx b/.../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(() => {
-        const hiddenColumns = [];
-        if (isMediumScreen) {
-            hiddenColumns.push('appName', 'environment');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isMediumScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isMediumScreen,
+                columns: ['appName', 'environment'],
+            },
+        ],
+        setHiddenColumns,
+        COLUMNS
+    );
 
     if (metrics.length === 0) {
         return null;

diff --git a/...entVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx b/...entVariants/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(() => {
-        const hiddenColumns = [];
-        if (isLargeScreen) {
-            hiddenColumns.push('weightType');
-        }
-        if (isMediumScreen) {
-            hiddenColumns.push('payload', 'overrides');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isMediumScreen, isLargeScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isMediumScreen,
+                columns: ['payload', 'overrides'],
+            },
+            {
+                condition: isLargeScreen,
+                columns: ['weightType'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     return (
         <StyledTableContainer>

diff --git a/...component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx b/...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(() => {
-        const hiddenColumns = [];
-        if (isLargeScreen) {
-            hiddenColumns.push('weightType');
-        }
-        if (isMediumScreen) {
-            hiddenColumns.push('data');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isMediumScreen, isLargeScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isMediumScreen,
+                columns: ['data'],
+            },
+            {
+                condition: isLargeScreen,
+                columns: ['weightType'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     // @ts-expect-error
     const setClonedVariants = clonedVariants =>

diff --git a/...end/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx b/...end/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(() => {
-        const hiddenColumns = [];
-        if (isSmallScreen) {
-            hiddenColumns.push('projectId');
-        }
-        if (isExtraSmallScreen) {
-            hiddenColumns.push('variant');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isExtraSmallScreen, isSmallScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isExtraSmallScreen,
+                columns: ['variant'],
+            },
+            {
+                condition: isSmallScreen,
+                columns: ['projectId'],
+            },
+        ],
+        setHiddenColumns,
+        COLUMNS
+    );
 
     useEffect(() => {
         if (loading) {