fix: move reducer to url

Author: astandrik

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx

@@ -1,24 +1,20 @@
 import React from 'react';
 
 import {Tab, TabList, TabProvider} from '@gravity-ui/uikit';
-import {useLocation} from 'react-router-dom';
 
 import {InfoViewer} from '../../../../../components/InfoViewer/InfoViewer';
-import {InternalLink} from '../../../../../components/InternalLink';
 import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
 import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
-import {parseQuery} from '../../../../../routes';
 import {TENANT_STORAGE_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {cn} from '../../../../../utils/cn';
 import {formatStorageValues} from '../../../../../utils/dataFormatters/dataFormatters';
-import {useTypedSelector} from '../../../../../utils/hooks';
-import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
 import i18n from '../i18n';
 
 import {TopGroups} from './TopGroups';
 import {TopTables} from './TopTables';
 import {storageDashboardConfig} from './storageDashboardConfig';
+import {useTenantStorageQueryParams} from './useTenantStorageQueryParams';
 
 import './TenantStorage.scss';
 
@@ -42,13 +38,10 @@ interface TenantStorageProps {
 }
 
 export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
-    const location = useLocation();
-    const {storageTab = TENANT_STORAGE_TABS_IDS.tables} = useTypedSelector((state) => state.tenant);
+    const {storageTab, handleStorageTabChange} = useTenantStorageQueryParams();
 
     const {blobStorageUsed, tabletStorageUsed, blobStorageLimit, tabletStorageLimit} = metrics;
 
-    const queryParams = parseQuery(location);
-
     const renderTabContent = () => {
         switch (storageTab) {
             case TENANT_STORAGE_TABS_IDS.tables:
@@ -110,15 +103,9 @@ export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
                 <TabProvider value={storageTab}>
                     <TabList size="m">
                         {storageTabs.map(({id, title}) => {
-                            const path = getTenantPath({
-                                ...queryParams,
-                                [TenantTabsGroups.storageTab]: id,
-                            });
                             return (
-                                <Tab key={id} value={id}>
-                                    <InternalLink to={path} as="tab">
-                                        {title}
-                                    </InternalLink>
+                                <Tab key={id} value={id} onClick={() => handleStorageTabChange(id)}>
+                                    {title}
                                 </Tab>
                             );
                         })}

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/useTenantStorageQueryParams.ts

@@ -0,0 +1,30 @@
+import {StringParam, useQueryParams} from 'use-query-params';
+
+import {TENANT_STORAGE_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
+import type {TenantStorageTab} from '../../../../../store/reducers/tenant/types';
+
+export function useTenantStorageQueryParams() {
+    const [queryParams, setQueryParams] = useQueryParams({
+        storageTab: StringParam,
+    });
+
+    // Parse and validate storageTab with fallback to tables
+    const storageTab: TenantStorageTab = (() => {
+        if (!queryParams.storageTab) {
+            return TENANT_STORAGE_TABS_IDS.tables;
+        }
+        const validTabs = Object.values(TENANT_STORAGE_TABS_IDS) as string[];
+        return validTabs.includes(queryParams.storageTab)
+            ? (queryParams.storageTab as TenantStorageTab)
+            : TENANT_STORAGE_TABS_IDS.tables;
+    })();
+
+    const handleStorageTabChange = (value: TenantStorageTab) => {
+        setQueryParams({storageTab: value}, 'replaceIn');
+    };
+
+    return {
+        storageTab,
+        handleStorageTabChange,
+    };
+}

src/store/reducers/tenant/tenant.ts

@@ -6,15 +6,14 @@ import type {TTenantInfo} from '../../../types/api/tenant';
 import {TENANT_INITIAL_PAGE_KEY} from '../../../utils/constants';
 import {api} from '../api';
 
-import {TENANT_METRICS_TABS_IDS, TENANT_STORAGE_TABS_IDS} from './constants';
+import {TENANT_METRICS_TABS_IDS} from './constants';
 import {tenantPageSchema} from './types';
 import type {
     TenantDiagnosticsTab,
     TenantMetricsTab,
     TenantPage,
     TenantQueryTab,
     TenantState,
-    TenantStorageTab,
     TenantSummaryTab,
 } from './types';
 
@@ -25,7 +24,6 @@ const tenantPage = tenantPageSchema
 export const initialState: TenantState = {
     tenantPage,
     metricsTab: TENANT_METRICS_TABS_IDS.cpu,
-    storageTab: TENANT_STORAGE_TABS_IDS.tables,
 };
 
 const slice = createSlice({
@@ -50,24 +48,12 @@ const slice = createSlice({
             const isValidTab = action.payload && validTabs.includes(action.payload);
             state.metricsTab = isValidTab ? action.payload : TENANT_METRICS_TABS_IDS.cpu;
         },
-        setStorageTab: (state, action: PayloadAction<TenantStorageTab>) => {
-            // Ensure we always have a valid storage tab - fallback to tables if empty/invalid
-            const validTabs = Object.values(TENANT_STORAGE_TABS_IDS) as TenantStorageTab[];
-            const isValidTab = action.payload && validTabs.includes(action.payload);
-            state.storageTab = isValidTab ? action.payload : TENANT_STORAGE_TABS_IDS.tables;
-        },
     },
 });
 
 export default slice.reducer;
-export const {
-    setTenantPage,
-    setQueryTab,
-    setDiagnosticsTab,
-    setSummaryTab,
-    setMetricsTab,
-    setStorageTab,
-} = slice.actions;
+export const {setTenantPage, setQueryTab, setDiagnosticsTab, setSummaryTab, setMetricsTab} =
+    slice.actions;
 
 export const tenantApi = api.injectEndpoints({
     endpoints: (builder) => ({

src/store/reducers/tenant/types.ts

@@ -30,5 +30,4 @@ export interface TenantState {
     diagnosticsTab?: TenantDiagnosticsTab;
     summaryTab?: TenantSummaryTab;
     metricsTab: TenantMetricsTab;
-    storageTab?: TenantStorageTab;
 }

src/store/state-url-mapping.ts

@@ -53,10 +53,6 @@ export const paramSetup = {
             stateKey: 'tenant.metricsTab',
             initialState: initialTenantState.metricsTab,
         },
-        storageTab: {
-            stateKey: 'tenant.storageTab',
-            initialState: initialTenantState.storageTab,
-        },
         shardsMode: {
             stateKey: 'shardsWorkload.mode',
         },