fix: upgrades useHiddenColumns hook to fix related issues (#2691)

https://linear.app/unleash/issue/2-514/fix-issues-with-conditionally-hidden-table-columns

This upgrades the old `useHiddenColumns` to a new
`useConditionallyHiddenColumns`. This implementation covers some issues
and edge cases, and should hopefully be the standard way of achieving
responsive visibility for table columns from now on.

Some of these issues included incorrectly showing/hiding table columns,
whether when resizing the window or at page load, even when the proper
conditions were met to toggle their visibility.

This PR adapts the tables that were already using `useHiddenColumns` to
use the new approach.
I'll create a new PR after this one to adapt our other existing tables
to use this new approach as well.

frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx

@@ -25,7 +25,7 @@ import { ProjectsList } from 'component/admin/apiToken/ProjectsList/ProjectsList
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import { Search } from 'component/common/Search/Search';
-import useHiddenColumns from 'hooks/useHiddenColumns';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
 
 const hiddenColumnsSmall = ['Icon', 'createdAt'];
@@ -58,8 +58,20 @@ export const ApiTokenTable = () => {
         useSortBy
     );
 
-    useHiddenColumns(setHiddenColumns, hiddenColumnsSmall, isSmallScreen);
-    useHiddenColumns(setHiddenColumns, hiddenColumnsFlagE, !uiConfig.flags.E);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isSmallScreen,
+                columns: hiddenColumnsSmall,
+            },
+            {
+                condition: !uiConfig.flags.E,
+                columns: hiddenColumnsFlagE,
+            },
+        ],
+        setHiddenColumns,
+        COLUMNS
+    );
 
     return (
         <PageContent

frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx

@@ -11,7 +11,7 @@ import { useFlexLayout, useSortBy, useTable } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 import theme from 'themes/theme';
-import useHiddenColumns from 'hooks/useHiddenColumns';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 const hiddenColumnsSmall = ['imageUrl', 'name'];
 
@@ -100,7 +100,16 @@ export const GroupFormUsersTable: VFC<IGroupFormUsersTableProps> = ({
         useFlexLayout
     );
 
-    useHiddenColumns(setHiddenColumns, hiddenColumnsSmall, isSmallScreen);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isSmallScreen,
+                columns: hiddenColumnsSmall,
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     return (
         <ConditionallyRender

frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx

@@ -15,7 +15,7 @@ import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useSearch } from 'hooks/useSearch';
-import useHiddenColumns from 'hooks/useHiddenColumns';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 import {
     Link,
     Route,
@@ -308,8 +308,20 @@ export const ProjectAccessTable: VFC = () => {
         useFlexLayout
     );
 
-    useHiddenColumns(setHiddenColumns, hiddenColumnsSmall, isSmallScreen);
-    useHiddenColumns(setHiddenColumns, hiddenColumnsMedium, isMediumScreen);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isSmallScreen,
+                columns: hiddenColumnsSmall,
+            },
+            {
+                condition: isMediumScreen,
+                columns: hiddenColumnsMedium,
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     useEffect(() => {
         const tableState: PageQueryType = {};

frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx

@@ -19,7 +19,7 @@ import { IGroup, IGroupUser } from 'interfaces/group';
 import { VFC, useState } from 'react';
 import { SortingRule, useFlexLayout, useSortBy, useTable } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
-import useHiddenColumns from 'hooks/useHiddenColumns';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 
 const StyledPageContent = styled(PageContent)(({ theme }) => ({
     height: '100vh',
@@ -154,7 +154,16 @@ export const ProjectGroupView: VFC<IProjectGroupViewProps> = ({
         useFlexLayout
     );
 
-    useHiddenColumns(setHiddenColumns, hiddenColumnsSmall, isSmallScreen);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isSmallScreen,
+                columns: hiddenColumnsSmall,
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );
 
     return (
         <SidebarModal

frontend/src/hooks/useConditionallyHiddenColumns.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+interface IConditionallyHiddenColumns {
+    condition: boolean;
+    columns: string[];
+}
+
+export const useConditionallyHiddenColumns = (
+    conditionallyHiddenColumns: IConditionallyHiddenColumns[],
+    setHiddenColumns: (param: string[]) => void,
+    columnsDefinition: unknown[]
+) => {
+    useEffect(() => {
+        const hiddenColumnsSet = new Set<string>();
+
+        conditionallyHiddenColumns
+            .filter(({ condition }) => condition)
+            .forEach(({ columns }) =>
+                columns.forEach(column => hiddenColumnsSet.add(column))
+            );
+
+        setHiddenColumns([...hiddenColumnsSet]);
+    }, [
+        ...conditionallyHiddenColumns.map(({ condition }) => condition),
+        setHiddenColumns,
+        columnsDefinition,
+    ]);
+};

frontend/src/hooks/useHiddenColumns.ts

@@ -1,15 +0,0 @@
-import { useEffect } from 'react';
-import { IdType } from 'react-table';
-
-const useHiddenColumns = (
-    setHiddenColumns: <D>(param: Array<IdType<D>>) => void,
-    hiddenColumns: string[],
-    condition: boolean
-) => {
-    useEffect(() => {
-        const hidden = condition ? hiddenColumns : [];
-        setHiddenColumns(hidden);
-    }, [setHiddenColumns, hiddenColumns, condition]);
-};
-
-export default useHiddenColumns;