feat: save storage type in user settings (#3160)

Author: Raubzeug

src/containers/Storage/PaginatedStorage.tsx

@@ -3,7 +3,7 @@ import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedT
 import {PaginatedStorageGroups} from './PaginatedStorageGroups';
 import {PaginatedStorageNodes} from './PaginatedStorageNodes';
 import type {StorageViewContext} from './types';
-import {useStorageQueryParams} from './useStorageQueryParams';
+import {useSaveStorageType, useStorageQueryParams} from './useStorageQueryParams';
 import {getStorageGroupsInitialEntitiesCount, getStorageNodesInitialEntitiesCount} from './utils';
 
 export interface PaginatedStorageProps {
@@ -21,6 +21,7 @@ export interface PaginatedStorageProps {
 
 export const PaginatedStorage = (props: PaginatedStorageProps) => {
     const {storageType} = useStorageQueryParams();
+    useSaveStorageType();
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
 
     const isNodes = storageType === 'nodes';

src/containers/Storage/useStorageQueryParams.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 
-import {StringParam, useQueryParams} from 'use-query-params';
+import {StringParam, useQueryParam, useQueryParams} from 'use-query-params';
 
+import {SETTING_KEYS} from '../../store/reducers/settings/constants';
+import {STORAGE_TYPES} from '../../store/reducers/storage/constants';
 import type {StorageType, VisibleEntities} from '../../store/reducers/storage/types';
 import {storageTypeSchema, visibleEntitiesSchema} from '../../store/reducers/storage/types';
+import {useSetting} from '../../utils/hooks';
 import {NodesUptimeFilterValues, nodesUptimeFilterValuesSchema} from '../../utils/nodes';
 
 import {storageGroupsGroupByParamSchema} from './PaginatedStorageGroupsTable/columns/constants';
@@ -22,6 +25,11 @@ export function useStorageQueryParams() {
         storageGroupsGroupBy: StringParam,
     });
 
+    const [_savedStorageType, setSavedStorageType] = useSetting<StorageType>(
+        SETTING_KEYS.STORAGE_TYPE,
+        STORAGE_TYPES.groups,
+    );
+
     const storageType = storageTypeSchema.parse(queryParams.type);
 
     const visibleEntities = visibleEntitiesSchema.parse(queryParams.visible);
@@ -42,7 +50,7 @@ export function useStorageQueryParams() {
             patch[STORAGE_SEARCH_PARAM_BY_TYPE[storageType]] = queryParams.search;
             setQueryParams(patch, 'replaceIn');
         }
-    }, [queryParams.search, storageType]);
+    }, [queryParams.search, storageType, setQueryParams]);
 
     const handleTextFilterGroupsChange = (value: string) => {
         setQueryParams({groupsSearch: value || undefined}, 'replaceIn');
@@ -56,9 +64,13 @@ export function useStorageQueryParams() {
         setQueryParams({visible: value}, 'replaceIn');
     };
 
-    const handleStorageTypeChange = (value: StorageType) => {
-        setQueryParams({type: value}, 'replaceIn');
-    };
+    const handleStorageTypeChange = React.useCallback(
+        (value: StorageType) => {
+            setQueryParams({type: value}, 'replaceIn');
+            setSavedStorageType(value);
+        },
+        [setQueryParams, setSavedStorageType],
+    );
 
     const handleUptimeFilterChange = (value: NodesUptimeFilterValues) => {
         setQueryParams({uptimeFilter: value}, 'replaceIn');
@@ -103,3 +115,22 @@ export function useStorageQueryParams() {
         handleShowAllNodes,
     };
 }
+
+export function useSaveStorageType() {
+    const [queryStorageType, setQueryStorageType] = useQueryParam('type', StringParam);
+    const [savedStorageType] = useSetting<StorageType>(
+        SETTING_KEYS.STORAGE_TYPE,
+        STORAGE_TYPES.groups,
+    );
+
+    const normalizedStorageType = React.useMemo(
+        () => storageTypeSchema.parse(queryStorageType ?? savedStorageType),
+        [queryStorageType, savedStorageType],
+    );
+
+    React.useEffect(() => {
+        if (normalizedStorageType !== queryStorageType) {
+            setQueryStorageType(normalizedStorageType);
+        }
+    }, [normalizedStorageType, queryStorageType, setQueryStorageType]);
+}

src/store/reducers/settings/constants.ts

@@ -2,6 +2,7 @@ import type {ValueOf} from '../../../types/common';
 import {AclSyntax} from '../../../utils/constants';
 import {Lang} from '../../../utils/i18n';
 import {DEFAULT_QUERY_SETTINGS, QUERY_ACTIONS} from '../../../utils/query';
+import {STORAGE_TYPES} from '../storage/constants';
 import {TENANT_PAGES_IDS} from '../tenant/constants';
 
 import type {SettingOptions} from './types';
@@ -36,6 +37,7 @@ export const SETTING_KEYS = {
     QUERY_SETTINGS_BANNER_LAST_CLOSED: 'querySettingsBannerLastClosed',
     QUERY_EXECUTION_SETTINGS: 'queryExecutionSettings',
     ACL_SYNTAX: 'aclSyntax',
+    STORAGE_TYPE: 'storageType',
 } as const;
 
 export type SettingKey = ValueOf<typeof SETTING_KEYS>;
@@ -71,6 +73,7 @@ export const DEFAULT_USER_SETTINGS = {
     [SETTING_KEYS.QUERY_SETTINGS_BANNER_LAST_CLOSED]: undefined,
     [SETTING_KEYS.QUERY_EXECUTION_SETTINGS]: DEFAULT_QUERY_SETTINGS,
     [SETTING_KEYS.ACL_SYNTAX]: AclSyntax.YdbShort,
+    [SETTING_KEYS.STORAGE_TYPE]: STORAGE_TYPES.groups,
 } as const satisfies Record<SettingKey, unknown>;
 
 export const SETTINGS_OPTIONS: Record<string, SettingOptions> = {