From 8b60c076a677265dbb4d600fb6e5ebf22005ded3 Mon Sep 17 00:00:00 2001 From: mufazalov Date: Wed, 18 Sep 2024 18:23:06 +0300 Subject: [PATCH] fix(Clusters): fix columns setup do not save values --- src/containers/Clusters/Clusters.tsx | 11 ++-- src/containers/Clusters/columns.tsx | 4 +- src/containers/Clusters/constants.ts | 6 +-- src/containers/Clusters/useSelectedColumns.ts | 46 ---------------- src/utils/hooks/useSelectedColumns.ts | 54 +++++++++++++++++++ 5 files changed, 67 insertions(+), 54 deletions(-) delete mode 100644 src/containers/Clusters/useSelectedColumns.ts create mode 100644 src/utils/hooks/useSelectedColumns.ts diff --git a/src/containers/Clusters/Clusters.tsx b/src/containers/Clusters/Clusters.tsx index 296f74e13..7698d0d5e 100644 --- a/src/containers/Clusters/Clusters.tsx +++ b/src/containers/Clusters/Clusters.tsx @@ -20,14 +20,19 @@ import { } from '../../store/reducers/clusters/selectors'; import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants'; import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks'; +import {useSelectedColumns} from '../../utils/hooks/useSelectedColumns'; import {getMinorVersion} from '../../utils/versions'; import {ClustersStatistics} from './ClustersStatistics'; import {CLUSTERS_COLUMNS, CLUSTERS_COLUMNS_WIDTH_LS_KEY} from './columns'; -import {COLUMNS_NAMES, COLUMNS_TITLES, DEFAULT_COLUMNS, SELECTED_COLUMNS_KEY} from './constants'; +import { + CLUSTERS_SELECTED_COLUMNS_KEY, + COLUMNS_NAMES, + COLUMNS_TITLES, + DEFAULT_COLUMNS, +} from './constants'; import i18n from './i18n'; import {b} from './shared'; -import {useSelectedColumns} from './useSelectedColumns'; import './Clusters.scss'; @@ -59,7 +64,7 @@ export function Clusters() { const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns( CLUSTERS_COLUMNS, - SELECTED_COLUMNS_KEY, + CLUSTERS_SELECTED_COLUMNS_KEY, COLUMNS_TITLES, DEFAULT_COLUMNS, [COLUMNS_NAMES.TITLE], diff --git a/src/containers/Clusters/columns.tsx b/src/containers/Clusters/columns.tsx index 0e43d93af..a7dea7326 100644 --- a/src/containers/Clusters/columns.tsx +++ b/src/containers/Clusters/columns.tsx @@ -122,8 +122,8 @@ export const CLUSTERS_COLUMNS: Column[] = [ }, }, { - name: COLUMNS_NAMES.CLUSTER, - header: COLUMNS_TITLES[COLUMNS_NAMES.CLUSTER], + name: COLUMNS_NAMES.DC, + header: COLUMNS_TITLES[COLUMNS_NAMES.DC], width: 120, sortable: false, render: ({row}) => { diff --git a/src/containers/Clusters/constants.ts b/src/containers/Clusters/constants.ts index 0096914a7..58149dd42 100644 --- a/src/containers/Clusters/constants.ts +++ b/src/containers/Clusters/constants.ts @@ -1,9 +1,9 @@ -export const SELECTED_COLUMNS_KEY = 'selectedColumns'; +export const CLUSTERS_SELECTED_COLUMNS_KEY = 'selectedColumns'; export const COLUMNS_NAMES = { TITLE: 'title', VERSIONS: 'versions', - CLUSTER: 'cluster', + DC: 'dc', SERVICE: 'service', STATUS: 'status', NODES: 'nodes', @@ -33,7 +33,7 @@ export const DEFAULT_COLUMNS = [ export const COLUMNS_TITLES = { [COLUMNS_NAMES.TITLE]: 'Cluster', [COLUMNS_NAMES.VERSIONS]: 'Versions', - [COLUMNS_NAMES.CLUSTER]: 'DC', + [COLUMNS_NAMES.DC]: 'DC', [COLUMNS_NAMES.SERVICE]: 'Service', [COLUMNS_NAMES.STATUS]: 'Status', [COLUMNS_NAMES.NODES]: 'Nodes', diff --git a/src/containers/Clusters/useSelectedColumns.ts b/src/containers/Clusters/useSelectedColumns.ts deleted file mode 100644 index 808f58722..000000000 --- a/src/containers/Clusters/useSelectedColumns.ts +++ /dev/null @@ -1,46 +0,0 @@ -import type {Column} from '@gravity-ui/react-data-table'; -import type {TableColumnSetupItem, TableColumnSetupProps} from '@gravity-ui/uikit'; - -import {useSetting} from '../../utils/hooks'; - -export const useSelectedColumns = ( - columns: Column[], - storageKey: string, - columnsTitles: Record, - defaultColumnsIds: string[], - requiredColumnsIds?: string[], -) => { - const [selectedColumnsIds, setSelectedColumnsIds] = useSetting( - storageKey, - defaultColumnsIds, - ); - - const columnsIds = columns.map((column) => column.name); - - const columnsToShow = columns.filter((column) => - selectedColumnsIds.find((name) => name === column.name), - ); - - const columnsToSelect: TableColumnSetupItem[] = columnsIds.map((id) => { - const isRequired = requiredColumnsIds?.includes(id); - return { - id, - title: columnsTitles[id], - selected: selectedColumnsIds.includes(id), - required: isRequired, - sticky: isRequired ? 'start' : undefined, - }; - }); - - const setColumns: TableColumnSetupProps['onUpdate'] = (value) => { - const selectedColumns = value.filter((el) => el.selected).map((el) => el.id); - - setSelectedColumnsIds(selectedColumns); - }; - - return { - columnsToShow, - columnsToSelect, - setColumns, - }; -}; diff --git a/src/utils/hooks/useSelectedColumns.ts b/src/utils/hooks/useSelectedColumns.ts new file mode 100644 index 000000000..5e0eb6044 --- /dev/null +++ b/src/utils/hooks/useSelectedColumns.ts @@ -0,0 +1,54 @@ +import React from 'react'; + +import type {TableColumnSetupItem, TableColumnSetupProps} from '@gravity-ui/uikit'; + +import {settingsManager} from '../../services/settings'; + +export const useSelectedColumns = ( + columns: T[], + storageKey: string, + columnsTitles: Record, + defaultColumnsIds: string[], + requiredColumnsIds?: string[], +) => { + const [selectedColumnsIds, setSelectedColumnsIds] = React.useState(() => { + return settingsManager.readUserSettingsValue(storageKey, defaultColumnsIds) as string[]; + }); + + const columnsToShow = React.useMemo(() => { + return columns.filter((column) => selectedColumnsIds.find((name) => name === column.name)); + }, [columns, selectedColumnsIds]); + + const columnsToSelect: TableColumnSetupItem[] = React.useMemo(() => { + const columnsIds = columns.map((column) => column.name); + + return columnsIds.map((id) => { + const isRequired = requiredColumnsIds?.includes(id); + const isSelected = selectedColumnsIds.includes(id); + + return { + id, + title: columnsTitles[id], + selected: isRequired || isSelected, + required: isRequired, + sticky: isRequired ? 'start' : undefined, + }; + }); + }, [columns, columnsTitles, requiredColumnsIds, selectedColumnsIds]); + + const setColumns: TableColumnSetupProps['onUpdate'] = React.useCallback( + (value) => { + const selectedColumns = value.filter((el) => el.selected).map((el) => el.id); + + settingsManager.setUserSettingsValue(storageKey, selectedColumns); + setSelectedColumnsIds(selectedColumns); + }, + [storageKey], + ); + + return { + columnsToShow, + columnsToSelect, + setColumns, + }; +};