fix(Clusters): fix columns setup do not save values

Author: artemmufazalov

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],

src/containers/Clusters/columns.tsx

@@ -122,8 +122,8 @@ export const CLUSTERS_COLUMNS: Column<PreparedCluster>[] = [
         },
     },
     {
-        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}) => {

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',

src/containers/Clusters/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 = <T extends {name: string}>(
+    columns: T[],
+    storageKey: string,
+    columnsTitles: Record<string, string>,
+    defaultColumnsIds: string[],
+    requiredColumnsIds?: string[],
+) => {
+    const [selectedColumnsIds, setSelectedColumnsIds] = React.useState<string[]>(() => {
+        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,
+    };
+};