Skip to content

Commit 83911b2

Browse files
artemmufazalovartemmufazalov
committed
fix(TenantNavigation): use query for tenant page
1 parent 57e8345 commit 83911b2

File tree

12 files changed

+72
-49
lines changed

12 files changed

+72
-49
lines changed

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,15 @@ import {
1212
TENANT_METRICS_TABS_IDS,
1313
TENANT_PAGES_IDS,
1414
} from '../../../../store/reducers/tenant/constants';
15-
import {
16-
setDiagnosticsTab,
17-
setTenantPage,
18-
tenantApi,
19-
} from '../../../../store/reducers/tenant/tenant';
15+
import {setDiagnosticsTab, tenantApi} from '../../../../store/reducers/tenant/tenant';
2016
import {calculateTenantMetrics} from '../../../../store/reducers/tenants/utils';
2117
import type {AdditionalTenantsProps} from '../../../../types/additionalProps';
2218
import {getInfoTabLinks} from '../../../../utils/additionalProps';
2319
import {TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
2420
import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
2521
import {useClusterNameFromQuery} from '../../../../utils/hooks/useDatabaseFromQuery';
2622
import {canShowTenantMonitoringTab} from '../../../../utils/monitoringVisibility';
23+
import {useTenantPage} from '../../TenantNavigation/useTenantNavigation';
2724
import {mapDatabaseTypeToDBName} from '../../utils/schema';
2825

2926
import {HealthcheckPreview} from './Healthcheck/HealthcheckPreview';
@@ -53,6 +50,8 @@ export function TenantOverview({
5350
const clusterName = useClusterNameFromQuery();
5451
const dispatch = useTypedDispatch();
5552

53+
const {handleTenantPageChange} = useTenantPage();
54+
5655
const isMetaDatabasesAvailable = useDatabasesAvailable();
5756

5857
const {currentData: tenant, isFetching} = tenantApi.useGetTenantInfoQuery(
@@ -196,7 +195,7 @@ export function TenantOverview({
196195
);
197196

198197
const handleOpenMonitoring = () => {
199-
dispatch(setTenantPage(TENANT_PAGES_IDS.diagnostics));
198+
handleTenantPageChange(TENANT_PAGES_IDS.diagnostics);
200199
dispatch(setDiagnosticsTab(TENANT_DIAGNOSTICS_TABS_IDS.monitoring));
201200
};
202201

‎src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import {useThemeValue} from '@gravity-ui/uikit';
33
import {TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
44
import type {AdditionalTenantsProps} from '../../../types/additionalProps';
55
import {cn} from '../../../utils/cn';
6-
import {useTypedSelector} from '../../../utils/hooks';
76
import Diagnostics from '../Diagnostics/Diagnostics';
87
import {Query} from '../Query/Query';
98
import {TenantNavigation} from '../TenantNavigation/TenantNavigation';
9+
import {useTenantPage} from '../TenantNavigation/useTenantNavigation';
1010

1111
import './ObjectGeneral.scss';
1212

@@ -19,7 +19,7 @@ interface ObjectGeneralProps {
1919
function ObjectGeneral({additionalTenantProps}: ObjectGeneralProps) {
2020
const theme = useThemeValue();
2121

22-
const {tenantPage} = useTypedSelector((state) => state.tenant);
22+
const {tenantPage} = useTenantPage();
2323

2424
const renderPageContent = () => {
2525
switch (tenantPage) {

‎src/containers/Tenant/ObjectSummary/ObjectSummary.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {prepareSystemViewType} from '../../../utils/schema';
3636
import {EntityTitle} from '../EntityTitle/EntityTitle';
3737
import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
3838
import {useCurrentSchema} from '../TenantContext';
39+
import {useTenantPage} from '../TenantNavigation/useTenantNavigation';
3940
import {TENANT_INFO_TABS, TENANT_SCHEMA_TAB, TenantTabsGroups} from '../TenantPages';
4041
import {useTenantQueryParams} from '../useTenantQueryParams';
4142
import {getSummaryControls} from '../utils/controls';
@@ -91,6 +92,8 @@ export function ObjectSummary({
9192
(state) => state.tenant,
9293
);
9394

95+
const {handleTenantPageChange} = useTenantPage();
96+
9497
const location = useLocation();
9598

9699
const queryParams = qs.parse(location.search, {
@@ -411,7 +414,7 @@ export function ObjectSummary({
411414
{showPreview &&
412415
getSummaryControls(
413416
dispatch,
414-
{setActivePath: handleSchemaChange},
417+
{setActivePath: handleSchemaChange, setTenantPage: handleTenantPageChange},
415418
'm',
416419
)(path, 'preview')}
417420
<ClipboardButton

‎src/containers/Tenant/ObjectSummary/SchemaActions.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,20 @@ import {
44
TENANT_DIAGNOSTICS_TABS_IDS,
55
TENANT_PAGES_IDS,
66
} from '../../../store/reducers/tenant/constants';
7-
import {setDiagnosticsTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
7+
import {setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
88
import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
9+
import {useTenantPage} from '../TenantNavigation/useTenantNavigation';
910

1011
import i18n from './i18n';
1112

1213
import ArrowRightFromSquareIcon from '@gravity-ui/icons/svgs/arrow-right-from-square.svg';
1314

1415
export function SchemaActions() {
1516
const dispatch = useTypedDispatch();
16-
const {diagnosticsTab, tenantPage} = useTypedSelector((state) => state.tenant);
17+
const {diagnosticsTab} = useTypedSelector((state) => state.tenant);
18+
19+
const {tenantPage, handleTenantPageChange} = useTenantPage();
20+
1721
const diagnosticsSchemaActive =
1822
tenantPage === TENANT_PAGES_IDS.diagnostics &&
1923
diagnosticsTab === TENANT_DIAGNOSTICS_TABS_IDS.schema;
@@ -24,7 +28,7 @@ export function SchemaActions() {
2428
<Button
2529
title={i18n('action_openInDiagnostics')}
2630
onClick={() => {
27-
dispatch(setTenantPage(TENANT_PAGES_IDS.diagnostics));
31+
handleTenantPageChange(TENANT_PAGES_IDS.diagnostics);
2832
dispatch(setDiagnosticsTab(TENANT_DIAGNOSTICS_TABS_IDS.schema));
2933
}}
3034
size="s"

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {valueIsDefined} from '../../../../utils';
2121
import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
2222
import {getConfirmation} from '../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
2323
import {canShowTenantMonitoringTab} from '../../../../utils/monitoringVisibility';
24+
import {useTenantPage} from '../../TenantNavigation/useTenantNavigation';
2425
import {getSchemaControls} from '../../utils/controls';
2526
import {
2627
isChildlessPathType,
@@ -60,6 +61,8 @@ export function SchemaTree(props: SchemaTreeProps) {
6061

6162
const isTopicPreviewAvailable = useTopicDataAvailable();
6263

64+
const {handleTenantPageChange} = useTenantPage();
65+
6366
const [createDirectoryOpen, setCreateDirectoryOpen] = React.useState(false);
6467
const [parentPath, setParentPath] = React.useState('');
6568
const setSchemaTreeKey = useDispatchTreeKey();
@@ -149,6 +152,7 @@ export function SchemaTree(props: SchemaTreeProps) {
149152
dispatch,
150153
{
151154
setActivePath: onActivePathUpdate,
155+
setTenantPage: handleTenantPageChange,
152156
showCreateDirectoryDialog: createDirectoryFeatureAvailable
153157
? handleOpenCreateDirectoryDialog
154158
: undefined,
@@ -216,6 +220,7 @@ export function SchemaTree(props: SchemaTreeProps) {
216220
dispatch,
217221
{
218222
setActivePath: onActivePathUpdate,
223+
setTenantPage: handleTenantPageChange,
219224
},
220225
undefined,
221226
isTopicPreviewAvailable,

‎src/containers/Tenant/TenantNavigation/useTenantNavigation.tsx‎

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import React from 'react';
22

33
import {Pulse, Terminal} from '@gravity-ui/icons';
4-
import {useHistory, useLocation, useRouteMatch} from 'react-router-dom';
4+
import {useLocation, useRouteMatch} from 'react-router-dom';
5+
import {StringParam, useQueryParams} from 'use-query-params';
56

67
import routes, {getTenantPath, parseQuery} from '../../../routes';
7-
import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
8+
import {DEFAULT_USER_SETTINGS, SETTING_KEYS} from '../../../store/reducers/settings/constants';
89
import {TENANT_PAGE, TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
9-
import {useSetting, useTypedSelector} from '../../../utils/hooks';
10+
import {tenantPageSchema} from '../../../store/reducers/tenant/types';
11+
import type {TenantPage} from '../../../store/reducers/tenant/types';
12+
import {useSetting} from '../../../utils/hooks';
1013
import i18n from '../i18n';
1114

1215
type TenantPages = keyof typeof TENANT_PAGES_IDS;
@@ -19,14 +22,11 @@ const mapPageToIcon = {
1922
};
2023

2124
export function useTenantNavigation() {
22-
const history = useHistory();
23-
2425
const location = useLocation();
2526
const queryParams = parseQuery(location);
2627
const match = useRouteMatch(routes.tenant);
2728

28-
const [, setInitialTenantPage] = useSetting<string>(SETTING_KEYS.TENANT_INITIAL_PAGE);
29-
const {tenantPage} = useTypedSelector((state) => state.tenant);
29+
const {tenantPage, handleTenantPageChange} = useTenantPage();
3030

3131
const menuItems = React.useMemo(() => {
3232
if (!match) {
@@ -44,16 +44,41 @@ export function useTenantNavigation() {
4444
path: pagePath,
4545
current: tenantPage === pageId,
4646
onForward: () => {
47-
setInitialTenantPage(pageId);
48-
history.push(pagePath);
47+
handleTenantPageChange(pageId);
4948
},
5049
};
5150

5251
return nextItem;
5352
});
5453

5554
return items;
56-
}, [tenantPage, setInitialTenantPage, match, history, queryParams]);
55+
}, [tenantPage, handleTenantPageChange, match, queryParams]);
5756

5857
return menuItems;
5958
}
59+
60+
export function useTenantPage() {
61+
const [{tenantPage: tenantPageFromQuery}, setQueryParams] = useQueryParams({
62+
tenantPage: StringParam,
63+
});
64+
65+
const [initialTenantPage, setInitialTenantPage] = useSetting<TenantPage | undefined>(
66+
SETTING_KEYS.TENANT_INITIAL_PAGE,
67+
);
68+
69+
const handleTenantPageChange = React.useCallback(
70+
(value?: TenantPage) => {
71+
setInitialTenantPage(value);
72+
setQueryParams({tenantPage: value});
73+
},
74+
[setInitialTenantPage, setQueryParams],
75+
);
76+
77+
const parsedInitialPage = tenantPageSchema
78+
.catch(DEFAULT_USER_SETTINGS[SETTING_KEYS.TENANT_INITIAL_PAGE])
79+
.parse(initialTenantPage);
80+
81+
const tenantPage = tenantPageSchema.catch(parsedInitialPage).parse(tenantPageFromQuery);
82+
83+
return {tenantPage, handleTenantPageChange} as const;
84+
}

‎src/containers/Tenant/TenantPages.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {TENANT_SUMMARY_TABS_IDS} from '../../store/reducers/tenant/constants';
2+
import type {TenantPage} from '../../store/reducers/tenant/types';
23
import type {paramSetup} from '../../store/state-url-mapping';
34
import type {ExtractType} from '../../types/common';
45

@@ -7,6 +8,7 @@ type TenantQueryParams = {
78
};
89

910
type AdditionalQueryParams = {
11+
tenantPage?: TenantPage;
1012
database?: string;
1113
name?: string;
1214
backend?: string;

‎src/containers/Tenant/utils/controls.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import type {NavigationTreeNodeType} from 'ydb-ui-components';
55
import {api} from '../../../store/reducers/api';
66
import {setShowPreview} from '../../../store/reducers/schema/schema';
77
import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
8-
import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
8+
import {setQueryTab} from '../../../store/reducers/tenant/tenant';
9+
import type {TenantPage} from '../../../store/reducers/tenant/types';
910
import {EPathSubType} from '../../../types/api/schema';
1011
import i18n from '../i18n';
1112

@@ -15,20 +16,21 @@ import EyeIcon from '@gravity-ui/icons/svgs/eye.svg';
1516

1617
interface ControlsAdditionalEffects {
1718
setActivePath: (path: string) => void;
19+
setTenantPage: (page: TenantPage) => void;
1820
}
1921

2022
const bindActions = (
2123
path: string,
2224
dispatch: React.Dispatch<any>,
2325
additionalEffects: ControlsAdditionalEffects,
2426
) => {
25-
const {setActivePath} = additionalEffects;
27+
const {setActivePath, setTenantPage} = additionalEffects;
2628

2729
return {
2830
openPreview: () => {
2931
dispatch(api.util.invalidateTags(['PreviewData']));
3032
dispatch(setShowPreview(true));
31-
dispatch(setTenantPage(TENANT_PAGES_IDS.query));
33+
setTenantPage(TENANT_PAGES_IDS.query);
3234
dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
3335
setActivePath(path);
3436
},

‎src/containers/Tenant/utils/schemaActions.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import {
1010
TENANT_PAGES_IDS,
1111
TENANT_QUERY_TABS_ID,
1212
} from '../../../store/reducers/tenant/constants';
13-
import {setDiagnosticsTab, setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
13+
import {setDiagnosticsTab, setQueryTab} from '../../../store/reducers/tenant/tenant';
14+
import type {TenantPage} from '../../../store/reducers/tenant/types';
1415
import type {IQueryResult} from '../../../types/store/query';
1516
import createToast from '../../../utils/createToast';
1617
import {insertSnippetToEditor} from '../../../utils/monaco/insertSnippet';
@@ -53,6 +54,7 @@ import type {YdbNavigationTreeProps} from './types';
5354

5455
interface ActionsAdditionalParams {
5556
setActivePath: (path: string) => void;
57+
setTenantPage: (page: TenantPage) => void;
5658
showCreateDirectoryDialog?: (path: string) => void;
5759
getConfirmation?: () => Promise<boolean>;
5860
getConnectToDBDialog?: (params: SnippetParams) => Promise<boolean>;
@@ -78,6 +80,7 @@ const bindActions = (
7880
) => {
7981
const {
8082
setActivePath,
83+
setTenantPage,
8184
showCreateDirectoryDialog,
8285
getConfirmation,
8386
getConnectToDBDialog,
@@ -88,7 +91,7 @@ const bindActions = (
8891
const inputQuery = (tmpl: TemplateFn) => () => {
8992
const applyInsert = () => {
9093
//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
91-
dispatch(setTenantPage(TENANT_PAGES_IDS.query));
94+
setTenantPage(TENANT_PAGES_IDS.query);
9295
dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
9396
setActivePath(params.path);
9497
insertSnippetToEditor(tmpl({...params, schemaData, streamingQueryData}));
@@ -113,7 +116,7 @@ const bindActions = (
113116
: undefined,
114117
getConnectToDBDialog: () => getConnectToDBDialog?.({database: params.database}),
115118
openMonitoring: () => {
116-
dispatch(setTenantPage(TENANT_PAGES_IDS.diagnostics));
119+
setTenantPage(TENANT_PAGES_IDS.diagnostics);
117120
dispatch(setDiagnosticsTab(TENANT_DIAGNOSTICS_TABS_IDS.monitoring));
118121
setActivePath(params.path);
119122
},

‎src/store/reducers/tenant/tenant.ts‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,22 @@
11
import {createSlice} from '@reduxjs/toolkit';
22
import type {PayloadAction} from '@reduxjs/toolkit';
33

4-
import {settingsManager} from '../../../services/settings';
54
import type {TTenantInfo} from '../../../types/api/tenant';
65
import {useClusterNameFromQuery} from '../../../utils/hooks/useDatabaseFromQuery';
76
import {api} from '../api';
87
import {useDatabasesAvailable} from '../capabilities/hooks';
9-
import {DEFAULT_USER_SETTINGS, SETTING_KEYS} from '../settings/constants';
108
import {prepareTenants} from '../tenants/utils';
119

1210
import {TENANT_DIAGNOSTICS_TABS_IDS, TENANT_METRICS_TABS_IDS} from './constants';
13-
import {tenantPageSchema} from './types';
1411
import type {
1512
TenantDiagnosticsTab,
1613
TenantMetricsTab,
17-
TenantPage,
1814
TenantQueryTab,
1915
TenantState,
2016
TenantSummaryTab,
2117
} from './types';
2218

23-
const tenantPage = tenantPageSchema
24-
.catch(DEFAULT_USER_SETTINGS[SETTING_KEYS.TENANT_INITIAL_PAGE])
25-
.parse(settingsManager.readUserSettingsValue(SETTING_KEYS.TENANT_INITIAL_PAGE));
26-
2719
export const initialState: TenantState = {
28-
tenantPage,
2920
metricsTab: TENANT_METRICS_TABS_IDS.cpu,
3021
diagnosticsTab: TENANT_DIAGNOSTICS_TABS_IDS.overview,
3122
};
@@ -34,9 +25,6 @@ const slice = createSlice({
3425
name: 'tenant',
3526
initialState,
3627
reducers: {
37-
setTenantPage: (state, action: PayloadAction<TenantPage>) => {
38-
state.tenantPage = action.payload;
39-
},
4028
setQueryTab: (state, action: PayloadAction<TenantQueryTab>) => {
4129
state.queryTab = action.payload;
4230
},
@@ -56,8 +44,7 @@ const slice = createSlice({
5644
});
5745

5846
export default slice.reducer;
59-
export const {setTenantPage, setQueryTab, setDiagnosticsTab, setSummaryTab, setMetricsTab} =
60-
slice.actions;
47+
export const {setQueryTab, setDiagnosticsTab, setSummaryTab, setMetricsTab} = slice.actions;
6148

6249
export const tenantApi = api.injectEndpoints({
6350
endpoints: (builder) => ({

0 commit comments

Comments
 (0)