From db7b39af2dfdd33c8aef62c3b44fb7c8ec4c7ff0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Wed, 14 Dec 2022 15:22:38 +0000 Subject: [PATCH] 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. --- .../apiToken/ApiTokenTable/ApiTokenTable.tsx | 18 ++++++++++-- .../GroupFormUsersTable.tsx | 13 +++++++-- .../ProjectAccessTable/ProjectAccessTable.tsx | 18 ++++++++++-- .../ProjectGroupView/ProjectGroupView.tsx | 13 +++++++-- .../hooks/useConditionallyHiddenColumns.ts | 28 +++++++++++++++++++ frontend/src/hooks/useHiddenColumns.ts | 15 ---------- 6 files changed, 80 insertions(+), 25 deletions(-) create mode 100644 frontend/src/hooks/useConditionallyHiddenColumns.ts delete mode 100644 frontend/src/hooks/useHiddenColumns.ts diff --git a/frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx b/frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx index e42a139ed7..a3fc7497d6 100644 --- a/frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx +++ b/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 ( = ({ useFlexLayout ); - useHiddenColumns(setHiddenColumns, hiddenColumnsSmall, isSmallScreen); + useConditionallyHiddenColumns( + [ + { + condition: isSmallScreen, + columns: hiddenColumnsSmall, + }, + ], + setHiddenColumns, + columns + ); return ( { useFlexLayout ); - useHiddenColumns(setHiddenColumns, hiddenColumnsSmall, isSmallScreen); - useHiddenColumns(setHiddenColumns, hiddenColumnsMedium, isMediumScreen); + useConditionallyHiddenColumns( + [ + { + condition: isSmallScreen, + columns: hiddenColumnsSmall, + }, + { + condition: isMediumScreen, + columns: hiddenColumnsMedium, + }, + ], + setHiddenColumns, + columns + ); useEffect(() => { const tableState: PageQueryType = {}; diff --git a/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx b/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx index e58073cc3c..f534ffbfc8 100644 --- a/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx +++ b/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 = ({ useFlexLayout ); - useHiddenColumns(setHiddenColumns, hiddenColumnsSmall, isSmallScreen); + useConditionallyHiddenColumns( + [ + { + condition: isSmallScreen, + columns: hiddenColumnsSmall, + }, + ], + setHiddenColumns, + columns + ); return ( void, + columnsDefinition: unknown[] +) => { + useEffect(() => { + const hiddenColumnsSet = new Set(); + + conditionallyHiddenColumns + .filter(({ condition }) => condition) + .forEach(({ columns }) => + columns.forEach(column => hiddenColumnsSet.add(column)) + ); + + setHiddenColumns([...hiddenColumnsSet]); + }, [ + ...conditionallyHiddenColumns.map(({ condition }) => condition), + setHiddenColumns, + columnsDefinition, + ]); +}; diff --git a/frontend/src/hooks/useHiddenColumns.ts b/frontend/src/hooks/useHiddenColumns.ts deleted file mode 100644 index f5df5e3bf4..0000000000 --- a/frontend/src/hooks/useHiddenColumns.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { useEffect } from 'react'; -import { IdType } from 'react-table'; - -const useHiddenColumns = ( - setHiddenColumns: (param: Array>) => void, - hiddenColumns: string[], - condition: boolean -) => { - useEffect(() => { - const hidden = condition ? hiddenColumns : []; - setHiddenColumns(hidden); - }, [setHiddenColumns, hiddenColumns, condition]); -}; - -export default useHiddenColumns;