From e637f66259ea6f57e9eb46b03744c995048ccfb7 Mon Sep 17 00:00:00 2001 From: Valerii Sidorenko Date: Thu, 30 May 2024 11:33:42 +0000 Subject: [PATCH] fix(Tenant): always set tenantPage in the url --- .../AsideNavigation/useNavigationMenuItems.ts | 4 ++-- .../Tenant/ObjectGeneral/ObjectGeneral.tsx | 11 ++--------- src/services/settings.ts | 4 ++-- src/store/reducers/tenant/tenant.ts | 13 ++++++++++++- src/store/reducers/tenant/types.ts | 9 ++++++--- 5 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/containers/AsideNavigation/useNavigationMenuItems.ts b/src/containers/AsideNavigation/useNavigationMenuItems.ts index 7614cc575c..447c88f5d3 100644 --- a/src/containers/AsideNavigation/useNavigationMenuItems.ts +++ b/src/containers/AsideNavigation/useNavigationMenuItems.ts @@ -26,8 +26,8 @@ export function useNavigationMenuItems() { const location = useLocation(); const history = useHistory(); - const [initialTenantPage, setInitialTenantPage] = useSetting(TENANT_INITIAL_PAGE_KEY); - const {tenantPage = initialTenantPage} = useTypedSelector((state) => state.tenant); + const [, setInitialTenantPage] = useSetting(TENANT_INITIAL_PAGE_KEY); + const {tenantPage} = useTypedSelector((state) => state.tenant); const {pathname} = location; const queryParams = parseQuery(location); diff --git a/src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx b/src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx index e3a00af7bc..969a5d4e16 100644 --- a/src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx +++ b/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(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; diff --git a/src/services/settings.ts b/src/services/settings.ts index f90438653b..d08e7bfaed 100644 --- a/src/services/settings.ts +++ b/src/services/settings.ts @@ -23,7 +23,7 @@ import {parseJson} from '../utils/utils'; export type SettingsObject = Record; /** 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 { /** diff --git a/src/store/reducers/tenant/tenant.ts b/src/store/reducers/tenant/tenant.ts index 494ed9a97d..0bba8d1022 100644 --- a/src/store/reducers/tenant/tenant.ts +++ b/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) => { state.tenantPage = action.payload; diff --git a/src/store/reducers/tenant/types.ts b/src/store/reducers/tenant/types.ts index d643990730..953edab649 100644 --- a/src/store/reducers/tenant/types.ts +++ b/src/store/reducers/tenant/types.ts @@ -1,14 +1,17 @@ +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; +export const tenantPageSchema = z.nativeEnum(TENANT_PAGES_IDS); +export type TenantPage = z.infer; export type TenantQueryTab = ValueOf; export type TenantDiagnosticsTab = ValueOf; @@ -16,7 +19,7 @@ export type TenantSummaryTab = ValueOf; export type TenantMetricsTab = ValueOf; export interface TenantState { - tenantPage?: TenantPage; + tenantPage: TenantPage; queryTab?: TenantQueryTab; diagnosticsTab?: TenantDiagnosticsTab; summaryTab?: TenantSummaryTab;