fix(TenantNavigation): use query for tenant page

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

@@ -12,18 +12,15 @@ import {
     TENANT_METRICS_TABS_IDS,
     TENANT_PAGES_IDS,
 } from '../../../../store/reducers/tenant/constants';
-import {
-    setDiagnosticsTab,
-    setTenantPage,
-    tenantApi,
-} from '../../../../store/reducers/tenant/tenant';
+import {setDiagnosticsTab, tenantApi} from '../../../../store/reducers/tenant/tenant';
 import {calculateTenantMetrics} from '../../../../store/reducers/tenants/utils';
 import type {AdditionalTenantsProps} from '../../../../types/additionalProps';
 import {getInfoTabLinks} from '../../../../utils/additionalProps';
 import {TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {useClusterNameFromQuery} from '../../../../utils/hooks/useDatabaseFromQuery';
 import {canShowTenantMonitoringTab} from '../../../../utils/monitoringVisibility';
+import {useTenantPage} from '../../TenantNavigation/useTenantNavigation';
 import {mapDatabaseTypeToDBName} from '../../utils/schema';
 
 import {HealthcheckPreview} from './Healthcheck/HealthcheckPreview';
@@ -53,6 +50,8 @@ export function TenantOverview({
     const clusterName = useClusterNameFromQuery();
     const dispatch = useTypedDispatch();
 
+    const {handleTenantPageChange} = useTenantPage();
+
     const isMetaDatabasesAvailable = useDatabasesAvailable();
 
     const {currentData: tenant, isFetching} = tenantApi.useGetTenantInfoQuery(
@@ -196,7 +195,7 @@ export function TenantOverview({
     );
 
     const handleOpenMonitoring = () => {
-        dispatch(setTenantPage(TENANT_PAGES_IDS.diagnostics));
+        handleTenantPageChange(TENANT_PAGES_IDS.diagnostics);
         dispatch(setDiagnosticsTab(TENANT_DIAGNOSTICS_TABS_IDS.monitoring));
     };
 

src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -3,10 +3,10 @@ import {useThemeValue} from '@gravity-ui/uikit';
 import {TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
 import type {AdditionalTenantsProps} from '../../../types/additionalProps';
 import {cn} from '../../../utils/cn';
-import {useTypedSelector} from '../../../utils/hooks';
 import Diagnostics from '../Diagnostics/Diagnostics';
 import {Query} from '../Query/Query';
 import {TenantNavigation} from '../TenantNavigation/TenantNavigation';
+import {useTenantPage} from '../TenantNavigation/useTenantNavigation';
 
 import './ObjectGeneral.scss';
 
@@ -19,7 +19,7 @@ interface ObjectGeneralProps {
 function ObjectGeneral({additionalTenantProps}: ObjectGeneralProps) {
     const theme = useThemeValue();
 
-    const {tenantPage} = useTypedSelector((state) => state.tenant);
+    const {tenantPage} = useTenantPage();
 
     const renderPageContent = () => {
         switch (tenantPage) {

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -36,6 +36,7 @@ import {prepareSystemViewType} from '../../../utils/schema';
 import {EntityTitle} from '../EntityTitle/EntityTitle';
 import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
 import {useCurrentSchema} from '../TenantContext';
+import {useTenantPage} from '../TenantNavigation/useTenantNavigation';
 import {TENANT_INFO_TABS, TENANT_SCHEMA_TAB, TenantTabsGroups} from '../TenantPages';
 import {useTenantQueryParams} from '../useTenantQueryParams';
 import {getSummaryControls} from '../utils/controls';
@@ -91,6 +92,8 @@ export function ObjectSummary({
         (state) => state.tenant,
     );
 
+    const {handleTenantPageChange} = useTenantPage();
+
     const location = useLocation();
 
     const queryParams = qs.parse(location.search, {
@@ -411,7 +414,7 @@ export function ObjectSummary({
                 {showPreview &&
                     getSummaryControls(
                         dispatch,
-                        {setActivePath: handleSchemaChange},
+                        {setActivePath: handleSchemaChange, setTenantPage: handleTenantPageChange},
                         'm',
                     )(path, 'preview')}
                 <ClipboardButton

src/containers/Tenant/ObjectSummary/SchemaActions.tsx

@@ -4,16 +4,20 @@ import {
     TENANT_DIAGNOSTICS_TABS_IDS,
     TENANT_PAGES_IDS,
 } from '../../../store/reducers/tenant/constants';
-import {setDiagnosticsTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
+import {setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
 import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
+import {useTenantPage} from '../TenantNavigation/useTenantNavigation';
 
 import i18n from './i18n';
 
 import ArrowRightFromSquareIcon from '@gravity-ui/icons/svgs/arrow-right-from-square.svg';
 
 export function SchemaActions() {
     const dispatch = useTypedDispatch();
-    const {diagnosticsTab, tenantPage} = useTypedSelector((state) => state.tenant);
+    const {diagnosticsTab} = useTypedSelector((state) => state.tenant);
+
+    const {tenantPage, handleTenantPageChange} = useTenantPage();
+
     const diagnosticsSchemaActive =
         tenantPage === TENANT_PAGES_IDS.diagnostics &&
         diagnosticsTab === TENANT_DIAGNOSTICS_TABS_IDS.schema;
@@ -24,7 +28,7 @@ export function SchemaActions() {
                 <Button
                     title={i18n('action_openInDiagnostics')}
                     onClick={() => {
-                        dispatch(setTenantPage(TENANT_PAGES_IDS.diagnostics));
+                        handleTenantPageChange(TENANT_PAGES_IDS.diagnostics);
                         dispatch(setDiagnosticsTab(TENANT_DIAGNOSTICS_TABS_IDS.schema));
                     }}
                     size="s"

src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx

@@ -21,6 +21,7 @@ import {valueIsDefined} from '../../../../utils';
 import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {getConfirmation} from '../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
 import {canShowTenantMonitoringTab} from '../../../../utils/monitoringVisibility';
+import {useTenantPage} from '../../TenantNavigation/useTenantNavigation';
 import {getSchemaControls} from '../../utils/controls';
 import {
     isChildlessPathType,
@@ -60,6 +61,8 @@ export function SchemaTree(props: SchemaTreeProps) {
 
     const isTopicPreviewAvailable = useTopicDataAvailable();
 
+    const {handleTenantPageChange} = useTenantPage();
+
     const [createDirectoryOpen, setCreateDirectoryOpen] = React.useState(false);
     const [parentPath, setParentPath] = React.useState('');
     const setSchemaTreeKey = useDispatchTreeKey();
@@ -149,6 +152,7 @@ export function SchemaTree(props: SchemaTreeProps) {
             dispatch,
             {
                 setActivePath: onActivePathUpdate,
+                setTenantPage: handleTenantPageChange,
                 showCreateDirectoryDialog: createDirectoryFeatureAvailable
                     ? handleOpenCreateDirectoryDialog
                     : undefined,
@@ -216,6 +220,7 @@ export function SchemaTree(props: SchemaTreeProps) {
                     dispatch,
                     {
                         setActivePath: onActivePathUpdate,
+                        setTenantPage: handleTenantPageChange,
                     },
                     undefined,
                     isTopicPreviewAvailable,

src/containers/Tenant/TenantNavigation/useTenantNavigation.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 
 import {Pulse, Terminal} from '@gravity-ui/icons';
-import {useHistory, useLocation, useRouteMatch} from 'react-router-dom';
+import {useLocation, useRouteMatch} from 'react-router-dom';
+import {StringParam, useQueryParams} from 'use-query-params';
 
 import routes, {getTenantPath, parseQuery} from '../../../routes';
-import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
+import {DEFAULT_USER_SETTINGS, SETTING_KEYS} from '../../../store/reducers/settings/constants';
 import {TENANT_PAGE, TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
-import {useSetting, useTypedSelector} from '../../../utils/hooks';
+import {tenantPageSchema} from '../../../store/reducers/tenant/types';
+import type {TenantPage} from '../../../store/reducers/tenant/types';
+import {useSetting} from '../../../utils/hooks';
 import i18n from '../i18n';
 
 type TenantPages = keyof typeof TENANT_PAGES_IDS;
@@ -19,14 +22,11 @@ const mapPageToIcon = {
 };
 
 export function useTenantNavigation() {
-    const history = useHistory();
-
     const location = useLocation();
     const queryParams = parseQuery(location);
     const match = useRouteMatch(routes.tenant);
 
-    const [, setInitialTenantPage] = useSetting<string>(SETTING_KEYS.TENANT_INITIAL_PAGE);
-    const {tenantPage} = useTypedSelector((state) => state.tenant);
+    const {tenantPage, handleTenantPageChange} = useTenantPage();
 
     const menuItems = React.useMemo(() => {
         if (!match) {
@@ -44,16 +44,64 @@ export function useTenantNavigation() {
                 path: pagePath,
                 current: tenantPage === pageId,
                 onForward: () => {
-                    setInitialTenantPage(pageId);
-                    history.push(pagePath);
+                    handleTenantPageChange(pageId);
                 },
             };
 
             return nextItem;
         });
 
         return items;
-    }, [tenantPage, setInitialTenantPage, match, history, queryParams]);
+    }, [tenantPage, handleTenantPageChange, match, queryParams]);
 
     return menuItems;
 }
+
+export function useTenantPage() {
+    const [{tenantPage: tenantPageFromQuery}, setQueryParams] = useQueryParams({
+        tenantPage: StringParam,
+    });
+
+    const [initialTenantPage, setInitialTenantPage] = useSetting<TenantPage | undefined>(
+        SETTING_KEYS.TENANT_INITIAL_PAGE,
+    );
+
+    const handleTenantPageChange = React.useCallback(
+        (value?: TenantPage) => {
+            setQueryParams({tenantPage: value});
+            setInitialTenantPage(value);
+        },
+        [setInitialTenantPage, setQueryParams],
+    );
+
+    const parsedInitialPage = React.useMemo(
+        () =>
+            tenantPageSchema
+                .catch(DEFAULT_USER_SETTINGS[SETTING_KEYS.TENANT_INITIAL_PAGE])
+                .parse(initialTenantPage),
+        [initialTenantPage],
+    );
+
+    const tenantPage = React.useMemo(
+        () => tenantPageSchema.catch(parsedInitialPage).parse(tenantPageFromQuery),
+        [tenantPageFromQuery, parsedInitialPage],
+    );
+
+    React.useEffect(() => {
+        try {
+            // Check whether query has valid tenantPage param
+            const parsedQueryPage = tenantPageSchema.parse(tenantPageFromQuery);
+
+            // Save query page as initial if they differ
+            if (parsedQueryPage !== parsedInitialPage) {
+                setInitialTenantPage(parsedQueryPage);
+            }
+        } catch {
+            // If query page is not valid, set saved page to query
+            // `replaceIn` to not create new history entry when applying previously saved tab
+            setQueryParams({tenantPage: parsedInitialPage}, 'replaceIn');
+        }
+    }, [tenantPageFromQuery, parsedInitialPage, setQueryParams, setInitialTenantPage]);
+
+    return {tenantPage, handleTenantPageChange} as const;
+}

src/containers/Tenant/TenantPages.tsx

@@ -1,4 +1,5 @@
 import {TENANT_SUMMARY_TABS_IDS} from '../../store/reducers/tenant/constants';
+import type {TenantPage} from '../../store/reducers/tenant/types';
 import type {paramSetup} from '../../store/state-url-mapping';
 import type {ExtractType} from '../../types/common';
 
@@ -7,6 +8,7 @@ type TenantQueryParams = {
 };
 
 type AdditionalQueryParams = {
+    tenantPage?: TenantPage;
     database?: string;
     name?: string;
     backend?: string;

src/containers/Tenant/utils/controls.tsx

@@ -5,7 +5,8 @@ import type {NavigationTreeNodeType} from 'ydb-ui-components';
 import {api} from '../../../store/reducers/api';
 import {setShowPreview} from '../../../store/reducers/schema/schema';
 import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
-import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
+import {setQueryTab} from '../../../store/reducers/tenant/tenant';
+import type {TenantPage} from '../../../store/reducers/tenant/types';
 import {EPathSubType} from '../../../types/api/schema';
 import i18n from '../i18n';
 
@@ -15,20 +16,21 @@ import EyeIcon from '@gravity-ui/icons/svgs/eye.svg';
 
 interface ControlsAdditionalEffects {
     setActivePath: (path: string) => void;
+    setTenantPage: (page: TenantPage) => void;
 }
 
 const bindActions = (
     path: string,
     dispatch: React.Dispatch<any>,
     additionalEffects: ControlsAdditionalEffects,
 ) => {
-    const {setActivePath} = additionalEffects;
+    const {setActivePath, setTenantPage} = additionalEffects;
 
     return {
         openPreview: () => {
             dispatch(api.util.invalidateTags(['PreviewData']));
             dispatch(setShowPreview(true));
-            dispatch(setTenantPage(TENANT_PAGES_IDS.query));
+            setTenantPage(TENANT_PAGES_IDS.query);
             dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
             setActivePath(path);
         },

src/containers/Tenant/utils/schemaActions.tsx

@@ -10,7 +10,8 @@ import {
     TENANT_PAGES_IDS,
     TENANT_QUERY_TABS_ID,
 } from '../../../store/reducers/tenant/constants';
-import {setDiagnosticsTab, setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
+import {setDiagnosticsTab, setQueryTab} from '../../../store/reducers/tenant/tenant';
+import type {TenantPage} from '../../../store/reducers/tenant/types';
 import type {IQueryResult} from '../../../types/store/query';
 import createToast from '../../../utils/createToast';
 import {insertSnippetToEditor} from '../../../utils/monaco/insertSnippet';
@@ -52,6 +53,7 @@ import type {YdbNavigationTreeProps} from './types';
 
 interface ActionsAdditionalParams {
     setActivePath: (path: string) => void;
+    setTenantPage: (page: TenantPage) => void;
     showCreateDirectoryDialog?: (path: string) => void;
     getConfirmation?: () => Promise<boolean>;
     getConnectToDBDialog?: (params: SnippetParams) => Promise<boolean>;
@@ -77,6 +79,7 @@ const bindActions = (
 ) => {
     const {
         setActivePath,
+        setTenantPage,
         showCreateDirectoryDialog,
         getConfirmation,
         getConnectToDBDialog,
@@ -87,7 +90,7 @@ const bindActions = (
     const inputQuery = (tmpl: TemplateFn) => () => {
         const applyInsert = () => {
             //order is important here: firstly we should open query tab and initialize editor (it will be set to window.ydbEditor), after that it is possible to insert snippet
-            dispatch(setTenantPage(TENANT_PAGES_IDS.query));
+            setTenantPage(TENANT_PAGES_IDS.query);
             dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
             setActivePath(params.path);
             insertSnippetToEditor(tmpl({...params, schemaData, streamingQueryData}));
@@ -112,7 +115,7 @@ const bindActions = (
             : undefined,
         getConnectToDBDialog: () => getConnectToDBDialog?.({database: params.database}),
         openMonitoring: () => {
-            dispatch(setTenantPage(TENANT_PAGES_IDS.diagnostics));
+            setTenantPage(TENANT_PAGES_IDS.diagnostics);
             dispatch(setDiagnosticsTab(TENANT_DIAGNOSTICS_TABS_IDS.monitoring));
             setActivePath(params.path);
         },

src/store/reducers/tenant/tenant.ts

@@ -1,31 +1,22 @@
 import {createSlice} from '@reduxjs/toolkit';
 import type {PayloadAction} from '@reduxjs/toolkit';
 
-import {settingsManager} from '../../../services/settings';
 import type {TTenantInfo} from '../../../types/api/tenant';
 import {useClusterNameFromQuery} from '../../../utils/hooks/useDatabaseFromQuery';
 import {api} from '../api';
 import {useDatabasesAvailable} from '../capabilities/hooks';
-import {DEFAULT_USER_SETTINGS, SETTING_KEYS} from '../settings/constants';
 import {prepareTenants} from '../tenants/utils';
 
 import {TENANT_DIAGNOSTICS_TABS_IDS, TENANT_METRICS_TABS_IDS} from './constants';
-import {tenantPageSchema} from './types';
 import type {
     TenantDiagnosticsTab,
     TenantMetricsTab,
-    TenantPage,
     TenantQueryTab,
     TenantState,
     TenantSummaryTab,
 } from './types';
 
-const tenantPage = tenantPageSchema
-    .catch(DEFAULT_USER_SETTINGS[SETTING_KEYS.TENANT_INITIAL_PAGE])
-    .parse(settingsManager.readUserSettingsValue(SETTING_KEYS.TENANT_INITIAL_PAGE));
-
 export const initialState: TenantState = {
-    tenantPage,
     metricsTab: TENANT_METRICS_TABS_IDS.cpu,
     diagnosticsTab: TENANT_DIAGNOSTICS_TABS_IDS.overview,
 };
@@ -34,9 +25,6 @@ const slice = createSlice({
     name: 'tenant',
     initialState,
     reducers: {
-        setTenantPage: (state, action: PayloadAction<TenantPage>) => {
-            state.tenantPage = action.payload;
-        },
         setQueryTab: (state, action: PayloadAction<TenantQueryTab>) => {
             state.queryTab = action.payload;
         },
@@ -56,8 +44,7 @@ const slice = createSlice({
 });
 
 export default slice.reducer;
-export const {setTenantPage, setQueryTab, setDiagnosticsTab, setSummaryTab, setMetricsTab} =
-    slice.actions;
+export const {setQueryTab, setDiagnosticsTab, setSummaryTab, setMetricsTab} = slice.actions;
 
 export const tenantApi = api.injectEndpoints({
     endpoints: (builder) => ({