feat(TableColumnSetup): support sortable columns

Raubzeug · Raubzeug · commit e0f74f4ebc4c · 2025-09-19T18:30:41.000+03:00
diff --git a/src/components/PaginatedTable/TableChunk.tsx b/src/components/PaginatedTable/TableChunk.tsx
@@ -66,7 +66,8 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {noBatching} = usePaginatedTableState();
 
-    const columnsIds = columns.map((column) => column.name);
+    //sort ids to prevent refetch if only order was changed
+    const columnsIds = columns.map((column) => column.name).toSorted();
 
     const queryParams = {
         offset: id * chunkSize,
diff --git a/src/containers/Clusters/Clusters.tsx b/src/containers/Clusters/Clusters.tsx
@@ -211,7 +211,6 @@ export function Clusters() {
                         items={columnsToSelect}
                         showStatus
                         onUpdate={setColumns}
-                        sortable={false}
                     />
                 </Flex>
                 {clusters?.length ? (
diff --git a/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx b/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx
@@ -213,7 +213,6 @@ export function GroupedNodesComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             error={error ? <ResponseError error={error} /> : null}
diff --git a/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx b/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx
@@ -70,7 +70,6 @@ export function NodesComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             table={
diff --git a/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx b/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx
@@ -183,7 +183,6 @@ export function GroupedStorageGroupsComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             error={error ? <ResponseError error={error} /> : null}
diff --git a/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx b/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx
@@ -41,7 +41,6 @@ export function StorageGroupsComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             table={
diff --git a/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx b/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx
@@ -184,7 +184,6 @@ export function GroupedStorageNodesComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             error={error ? <ResponseError error={error} /> : null}
diff --git a/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx b/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx
@@ -45,7 +45,6 @@ export function StorageNodesComponent({
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
-                    sortable={false}
                 />
             }
             table={
diff --git a/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx b/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx
@@ -186,7 +186,6 @@ export function PartitionsTableColumnSetup({
             items={columnsToSelect}
             showStatus
             onUpdate={handleTableColumnsSetupChange}
-            sortable={false}
         />
     );
 }
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx b/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx
@@ -78,7 +78,6 @@ export const RunningQueriesData = ({
                 items={columnsToSelect}
                 showStatus
                 onUpdate={setColumns}
-                sortable={false}
             />
         );
     };
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx b/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx
@@ -133,7 +133,6 @@ export const TopQueriesData = ({
                 items={columnsToSelect}
                 showStatus
                 onUpdate={setColumns}
-                sortable={false}
             />
         );
     };
diff --git a/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx b/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx
@@ -278,7 +278,6 @@ export function TopicData({scrollContainerRef, path, database, databaseFullPath}
                 items={columnsToSelect}
                 showStatus
                 onUpdate={setColumns}
-                sortable={false}
             />
         );
     }, [columnsToSelect, setColumns]);
diff --git a/src/utils/hooks/useSelectedColumns.ts b/src/utils/hooks/useSelectedColumns.ts
@@ -4,49 +4,80 @@ import type {TableColumnSetupItem, TableColumnSetupProps} from '@gravity-ui/uiki
 
 import {settingsManager} from '../../services/settings';
 
+type OrderedColumn = {id: string; selected?: boolean};
+
+function parseSavedColumn(saved: unknown): OrderedColumn | undefined {
+    if (typeof saved === 'string') {
+        return {id: saved, selected: true};
+    }
+    if (saved && typeof saved === 'object' && 'id' in saved && typeof saved.id === 'string') {
+        const selected = 'selected' in saved ? Boolean(saved.selected) : false;
+        return {id: saved.id, selected};
+    }
+    return undefined;
+}
+
 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 [orderedColumns, setOrderedColumns] = React.useState(() => {
+        const savedColumns = settingsManager.readUserSettingsValue(
+            storageKey,
+            defaultColumnsIds,
+        ) as unknown[];
+
+        const normalizedSavedColumns = savedColumns.map(parseSavedColumn);
+
+        return columns.reduce<OrderedColumn[]>((acc, column) => {
+            const savedColumn = normalizedSavedColumns.find((c) => c && c.id === column.name);
+            if (savedColumn) {
+                acc.push(savedColumn);
+            } else {
+                acc.push({id: column.name, selected: false});
+            }
+            return acc;
+        }, []);
     });
 
+    const columnsToSelect = React.useMemo(() => {
+        const preparedColumns = orderedColumns.reduce<(TableColumnSetupItem & {column: T})[]>(
+            (acc, {id, selected}) => {
+                const isRequired = requiredColumnsIds?.includes(id);
+                const column = columns.find((c) => c.name === id);
+                if (column) {
+                    acc.push({
+                        id,
+                        title: columnsTitles[id],
+                        selected: selected || isRequired,
+                        required: isRequired,
+                        sticky: isRequired ? 'start' : undefined,
+                        column,
+                    });
+                }
+                return acc;
+            },
+            [],
+        );
+        //required columns should be first to properly render columns settings
+        return preparedColumns.toSorted(
+            (a, b) => Number(Boolean(b.required)) - Number(Boolean(a.required)),
+        );
+    }, [columns, columnsTitles, requiredColumnsIds, orderedColumns]);
+
     const columnsToShow = React.useMemo(() => {
-        return columns.filter((column) => {
-            const columnId = column.name;
-            const isSelected = selectedColumnsIds.includes(columnId);
-            const isRequired = requiredColumnsIds?.includes(columnId);
-            return isSelected || isRequired;
-        });
-    }, [columns, requiredColumnsIds, 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]);
+        return columnsToSelect.filter((c) => c.selected).map((c) => c.column);
+    }, [columnsToSelect]);
 
     const setColumns: TableColumnSetupProps['onUpdate'] = React.useCallback(
         (value) => {
-            const selectedColumns = value.filter((el) => el.selected).map((el) => el.id);
+            const preparedColumns = value.map(({id, selected}) => ({id, selected}));
 
-            settingsManager.setUserSettingsValue(storageKey, selectedColumns);
-            setSelectedColumnsIds(selectedColumns);
+            settingsManager.setUserSettingsValue(storageKey, preparedColumns);
+            setOrderedColumns(preparedColumns);
         },
         [storageKey],
     );

Original file line number	Diff line number	Diff line change
`@@ -213,7 +213,6 @@ export function GroupedNodesComponent({`
`213`	`213`	`items={columnsToSelect}`
`214`	`214`	`showStatus`
`215`	`215`	`onUpdate={setColumns}`
`216`		`- sortable={false}`
`217`	`216`	`/>`
`218`	`217`	`}`
`219`	`218`	`error={error ? <ResponseError error={error} /> : null}`
Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,6 @@ export function NodesComponent({`
`70`	`70`	`items={columnsToSelect}`
`71`	`71`	`showStatus`
`72`	`72`	`onUpdate={setColumns}`
`73`		`- sortable={false}`
`74`	`73`	`/>`
`75`	`74`	`}`
`76`	`75`	`table={`
Original file line number	Diff line number	Diff line change
`@@ -183,7 +183,6 @@ export function GroupedStorageGroupsComponent({`
`183`	`183`	`items={columnsToSelect}`
`184`	`184`	`showStatus`
`185`	`185`	`onUpdate={setColumns}`
`186`		`- sortable={false}`
`187`	`186`	`/>`
`188`	`187`	`}`
`189`	`188`	`error={error ? <ResponseError error={error} /> : null}`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,6 @@ export function StorageGroupsComponent({`
`41`	`41`	`items={columnsToSelect}`
`42`	`42`	`showStatus`
`43`	`43`	`onUpdate={setColumns}`
`44`		`- sortable={false}`
`45`	`44`	`/>`
`46`	`45`	`}`
`47`	`46`	`table={`
Original file line number	Diff line number	Diff line change
`@@ -184,7 +184,6 @@ export function GroupedStorageNodesComponent({`
`184`	`184`	`items={columnsToSelect}`
`185`	`185`	`showStatus`
`186`	`186`	`onUpdate={setColumns}`
`187`		`- sortable={false}`
`188`	`187`	`/>`
`189`	`188`	`}`
`190`	`189`	`error={error ? <ResponseError error={error} /> : null}`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,6 @@ export function StorageNodesComponent({`
`45`	`45`	`items={columnsToSelect}`
`46`	`46`	`showStatus`
`47`	`47`	`onUpdate={setColumns}`
`48`		`- sortable={false}`
`49`	`48`	`/>`
`50`	`49`	`}`
`51`	`50`	`table={`
Original file line number	Diff line number	Diff line change
`@@ -186,7 +186,6 @@ export function PartitionsTableColumnSetup({`
`186`	`186`	`items={columnsToSelect}`
`187`	`187`	`showStatus`
`188`	`188`	`onUpdate={handleTableColumnsSetupChange}`
`189`		`- sortable={false}`
`190`	`189`	`/>`
`191`	`190`	`);`
`192`	`191`	`}`