fix(Tenant): always set tenantPage in the url (#859)

Author: ValeraS

src/containers/AsideNavigation/useNavigationMenuItems.ts

@@ -26,8 +26,8 @@ export function useNavigationMenuItems() {
     const location = useLocation();
     const history = useHistory();
 
-    const [initialTenantPage, setInitialTenantPage] = useSetting<string>(TENANT_INITIAL_PAGE_KEY);
-    const {tenantPage = initialTenantPage} = useTypedSelector((state) => state.tenant);
+    const [, setInitialTenantPage] = useSetting<string>(TENANT_INITIAL_PAGE_KEY);
+    const {tenantPage} = useTypedSelector((state) => state.tenant);
 
     const {pathname} = location;
     const queryParams = parseQuery(location);

src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -1,13 +1,10 @@
 import {useThemeValue} from '@gravity-ui/uikit';
-import {useLocation} from 'react-router';
 
-import {parseQuery} from '../../../routes';
 import {TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../types/additionalProps';
 import type {EPathType} from '../../../types/api/schema';
 import {cn} from '../../../utils/cn';
-import {TENANT_INITIAL_PAGE_KEY} from '../../../utils/constants';
-import {useSetting} from '../../../utils/hooks';
+import {useTypedSelector} from '../../../utils/hooks';
 import Diagnostics from '../Diagnostics/Diagnostics';
 import {Query} from '../Query/Query';
 
@@ -23,13 +20,9 @@ interface ObjectGeneralProps {
 }
 
 function ObjectGeneral(props: ObjectGeneralProps) {
-    const location = useLocation();
     const theme = useThemeValue();
 
-    const [initialPage] = useSetting<string>(TENANT_INITIAL_PAGE_KEY);
-
-    const queryParams = parseQuery(location);
-    const {tenantPage = initialPage} = queryParams;
+    const {tenantPage} = useTypedSelector((state) => state.tenant);
 
     const renderTabContent = () => {
         const {type, additionalTenantProps, additionalNodesProps, tenantName} = props;

src/services/settings.ts

@@ -23,7 +23,7 @@ import {parseJson} from '../utils/utils';
 export type SettingsObject = Record<string, unknown>;
 
 /** User settings keys and their default values */
-export const DEFAULT_USER_SETTINGS: SettingsObject = {
+export const DEFAULT_USER_SETTINGS = {
     [THEME_KEY]: 'system',
     [LANGUAGE_KEY]: undefined,
     [INVERTED_DISKS_KEY]: false,
@@ -40,7 +40,7 @@ export const DEFAULT_USER_SETTINGS: SettingsObject = {
     [USE_CLUSTER_BALANCER_AS_BACKEND_KEY]: true,
     [ENABLE_AUTOCOMPLETE]: false,
     [AUTOCOMPLETE_ON_ENTER]: true,
-};
+} as const satisfies SettingsObject;
 
 class SettingsManager {
     /**

src/store/reducers/tenant/tenant.ts

@@ -1,8 +1,11 @@
 import {createSlice} from '@reduxjs/toolkit';
 import type {PayloadAction} from '@reduxjs/toolkit';
 
+import {DEFAULT_USER_SETTINGS, settingsManager} from '../../../services/settings';
+import {TENANT_INITIAL_PAGE_KEY} from '../../../utils/constants';
 import {api} from '../api';
 
+import {tenantPageSchema} from './types';
 import type {
     TenantDiagnosticsTab,
     TenantMetricsTab,
@@ -12,9 +15,17 @@ import type {
     TenantSummaryTab,
 } from './types';
 
+const tenantPage = tenantPageSchema
+    .catch(DEFAULT_USER_SETTINGS[TENANT_INITIAL_PAGE_KEY])
+    .parse(settingsManager.readUserSettingsValue(TENANT_INITIAL_PAGE_KEY));
+
+const initialState: TenantState = {
+    tenantPage,
+};
+
 const slice = createSlice({
     name: 'tenant',
-    initialState: {} as TenantState,
+    initialState,
     reducers: {
         setTenantPage: (state, action: PayloadAction<TenantPage>) => {
             state.tenantPage = action.payload;

src/store/reducers/tenant/types.ts

@@ -1,22 +1,25 @@
+import {z} from 'zod';
+
 import type {ValueOf} from '../../../types/common';
 
+import {TENANT_PAGES_IDS} from './constants';
 import type {
     TENANT_DIAGNOSTICS_TABS_IDS,
     TENANT_METRICS_TABS_IDS,
-    TENANT_PAGES_IDS,
     TENANT_QUERY_TABS_ID,
     TENANT_SUMMARY_TABS_IDS,
 } from './constants';
 
-export type TenantPage = ValueOf<typeof TENANT_PAGES_IDS>;
+export const tenantPageSchema = z.nativeEnum(TENANT_PAGES_IDS);
+export type TenantPage = z.infer<typeof tenantPageSchema>;
 
 export type TenantQueryTab = ValueOf<typeof TENANT_QUERY_TABS_ID>;
 export type TenantDiagnosticsTab = ValueOf<typeof TENANT_DIAGNOSTICS_TABS_IDS>;
 export type TenantSummaryTab = ValueOf<typeof TENANT_SUMMARY_TABS_IDS>;
 export type TenantMetricsTab = ValueOf<typeof TENANT_METRICS_TABS_IDS>;
 
 export interface TenantState {
-    tenantPage?: TenantPage;
+    tenantPage: TenantPage;
     queryTab?: TenantQueryTab;
     diagnosticsTab?: TenantDiagnosticsTab;
     summaryTab?: TenantSummaryTab;