fix(Tenant): don't use HistoryAPI and redux-location-state together

Author: ariser

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -3,7 +3,7 @@ import qs from 'qs';
 import cn from 'bem-cn-lite';
 import {Link} from 'react-router-dom';
 import {useDispatch, useSelector} from 'react-redux';
-import {useHistory, useLocation} from 'react-router';
+import {useLocation} from 'react-router';
 
 import {Switch, Tabs} from '@yandex-cloud/uikit';
 
@@ -34,8 +34,10 @@ import {TenantGeneralTabsIds, TenantTabsGroups} from '../TenantPages';
 import {GeneralPagesIds, DATABASE_PAGES, TABLE_PAGES, DIR_PAGES} from './DiagnosticsPages';
 //@ts-ignore
 import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema';
+import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant';
 
 import './Diagnostics.scss';
+
 interface DiagnosticsProps {
     type: string;
     additionalTenantInfo?: any;
@@ -51,16 +53,17 @@ function Diagnostics(props: DiagnosticsProps) {
         currentSchema: currentItem = {},
         autorefresh,
     } = useSelector((state: any) => state.schema);
+    const {
+        diagnosticsTab = GeneralPagesIds.overview,
+    } = useSelector((state: any) => state.tenant);
 
     const location = useLocation();
 
-    const history = useHistory();
-
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
     });
 
-    const {name: tenantName, generalTab = GeneralPagesIds.overview} = queryParams;
+    const {name: tenantName} = queryParams;
 
     const isDatabase = currentSchemaPath === tenantName;
 
@@ -79,22 +82,17 @@ function Diagnostics(props: DiagnosticsProps) {
     }, [props.type]);
 
     const forwardToDiagnosticTab = (tab: GeneralPagesIds) => {
-        history.push(
-            createHref(routes.tenant, undefined, {
-                ...queryParams,
-                [TenantTabsGroups.generalTab]: tab,
-            }),
-        );
+        dispatch(setDiagnosticsTab(tab));
     };
     const activeTab = useMemo(() => {
-        if (pages.find((el) => el.id === generalTab)) {
-            return generalTab;
+        if (pages.find((el) => el.id === diagnosticsTab)) {
+            return diagnosticsTab;
         } else {
             const newPage = pages[0].id;
             forwardToDiagnosticTab(newPage);
             return newPage;
         }
-    }, [pages, generalTab]);
+    }, [pages, diagnosticsTab]);
 
     const onAutorefreshToggle = (value: boolean) => {
         if (value) {
@@ -105,20 +103,15 @@ function Diagnostics(props: DiagnosticsProps) {
     };
 
     const forwardToGeneralTab = (tab: TenantGeneralTabsIds) => {
-        history.push(
-            createHref(routes.tenant, undefined, {
-                ...queryParams,
-                [TenantTabsGroups.general]: tab,
-            }),
-        );
+        dispatch(setTopLevelTab(tab));
     };
 
     const renderTabContent = () => {
         const {type} = props;
 
         const tenantNameString = tenantName as string;
 
-        switch (generalTab) {
+        switch (diagnosticsTab) {
             case GeneralPagesIds.overview: {
                 return (
                     <DetailedOverview

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -36,6 +36,7 @@ import {
     PaneVisibilityToggleButtons,
 } from '../utils/paneVisibilityToggleHelpers';
 import {setShowPreview} from '../../../store/reducers/schema';
+import {setTopLevelTab} from '../../../store/reducers/tenant';
 
 import './ObjectSummary.scss';
 
@@ -222,12 +223,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
 
     const onOpenPreview = () => {
         dispatch(setShowPreview(true));
-        history.push(
-            createHref(routes.tenant, undefined, {
-                ...queryParams,
-                [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
-            }),
-        );
+        dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
     };
 
     const renderCommonInfoControls = () => {

src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -1,5 +1,4 @@
 import {useDispatch} from 'react-redux';
-import {useHistory} from 'react-router';
 
 import {NavigationTree} from 'ydb-ui-components';
 
@@ -26,7 +25,6 @@ export function SchemaTree(props: SchemaTreeProps) {
     } = props;
 
     const dispatch = useDispatch();
-    const history = useHistory();
 
     const fetchPath = (path: string) => window.api.getSchema(
         {path},
@@ -55,7 +53,7 @@ export function SchemaTree(props: SchemaTreeProps) {
                 collapsed: false,
             }}
             fetchPath={fetchPath}
-            getActions={getActions(dispatch, history, handleActivePathUpdate)}
+            getActions={getActions(dispatch, handleActivePathUpdate)}
             activePath={currentPath}
             onActivePathUpdate={handleActivePathUpdate}
             cache={false}

src/containers/Tenant/utils/schemaActions.ts

@@ -1,13 +1,11 @@
-import qs from 'qs';
 import {Dispatch} from 'react';
-import {History} from 'history';
 import type {NavigationTreeNodeType} from 'ydb-ui-components';
 
-import routes, {createHref} from '../../../routes';
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 import {setShowPreview} from '../../../store/reducers/schema';
+import {setTopLevelTab} from '../../../store/reducers/tenant';
 import createToast from '../../../utils/createToast';
-import {TenantGeneralTabsIds, TenantTabsGroups} from '../TenantPages';
+import {TenantGeneralTabsIds} from '../TenantPages';
 
 const createTableTemplate = (path: string) => {
     return `CREATE TABLE \`${path}/my_table\`
@@ -36,29 +34,16 @@ VALUES ( );`;
 
 export const getActions = (
     dispatch: Dispatch<any>,
-    history: History<unknown>,
     setActivePath: (path: string) => void,
 ) =>
     (path: string, type: NavigationTreeNodeType) => {
-        const queryParams = qs.parse(location.search, {
-            ignoreQueryPrefix: true,
-        });
-
         const switchTabToQuery = () => {
-            history.push(
-                createHref(routes.tenant, undefined, {
-                    ...queryParams,
-                    [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
-                }),
-            );
+            dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
         };
 
         const onCreateTableClick = () => {
             dispatch(changeUserInput({input: createTableTemplate(path)}));
             switchTabToQuery();
-            // here and in the other handlers this should be called after switching tab:
-            // redux-location-state catches the history.push event from the tab switching
-            // before active path updates in url, preventing its update at all
             setActivePath(path);
         };
 

src/store/reducers/tenant.js

@@ -3,6 +3,8 @@ import '../../services/api';
 import _ from 'lodash';
 
 const FETCH_TENANT = createRequestActionTypes('tenant', 'FETCH_TENANT');
+const SET_TOP_LEVEL_TAB = 'tenant/SET_TOP_LEVEL_TAB';
+const SET_DIAGNOSTICS_TAB = 'tenant/SET_DIAGNOSTICS_TAB';
 
 const tenantReducer = (state = {loading: false, tenant: {}}, action) => {
     switch (action.type) {
@@ -41,6 +43,20 @@ const tenantReducer = (state = {loading: false, tenant: {}}, action) => {
             };
         }
 
+        case SET_TOP_LEVEL_TAB: {
+            return {
+                ...state,
+                topLevelTab: action.data,
+            };
+        }
+
+        case SET_DIAGNOSTICS_TAB: {
+            return {
+                ...state,
+                diagnosticsTab: action.data,
+            };
+        }
+
         default:
             return state;
     }
@@ -73,4 +89,18 @@ export const getTenantInfo = ({path}) => {
     });
 };
 
+export function setTopLevelTab(tab) {
+    return {
+        type: SET_TOP_LEVEL_TAB,
+        data: tab,
+    };
+}
+
+export function setDiagnosticsTab(tab) {
+    return {
+        type: SET_DIAGNOSTICS_TAB,
+        data: tab,
+    };
+}
+
 export default tenantReducer;

src/store/state-url-mapping.js

@@ -42,6 +42,12 @@ const paramSetup = {
             stateKey: 'tablets.typeFilter',
             type: 'array',
         },
+        general: {
+            stateKey: 'tenant.topLevelTab',
+        },
+        generalTab: {
+            stateKey: 'tenant.diagnosticsTab',
+        },
     },
 };