fix(ObjectSummary): fix issue on object change with active schema tab (#482)

Author: artemmufazalov

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -1,6 +1,6 @@
 import React, {ReactNode, useEffect, useReducer} from 'react';
 import {useDispatch} from 'react-redux';
-import {useHistory, useLocation} from 'react-router';
+import {useLocation} from 'react-router';
 import {Link} from 'react-router-dom';
 import qs from 'qs';
 import cn from 'bem-cn-lite';
@@ -31,19 +31,18 @@ import {
     DEFAULT_SIZE_TENANT_SUMMARY_KEY,
 } from '../../../utils/constants';
 import {setShowPreview} from '../../../store/reducers/schema/schema';
-import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
-import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
+import {setQueryTab, setSummaryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
+import {
+    TENANT_PAGES_IDS,
+    TENANT_QUERY_TABS_ID,
+    TENANT_SUMMARY_TABS_IDS,
+} from '../../../store/reducers/tenant/constants';
 
 import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
 import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
 import {Acl} from '../Acl/Acl';
 
-import {
-    TenantInfoTabsIds,
-    TenantTabsGroups,
-    TENANT_INFO_TABS,
-    TENANT_SCHEMA_TAB,
-} from '../TenantPages';
+import {TenantTabsGroups, TENANT_INFO_TABS, TENANT_SCHEMA_TAB} from '../TenantPages';
 import {
     PaneVisibilityActionTypes,
     paneVisibilityToggleReducerCreator,
@@ -115,16 +114,17 @@ export function ObjectSummary({
         currentSchema: currentItem = {},
         loading: loadingSchema,
     } = useTypedSelector((state) => state.schema);
+    const {summaryTab = TENANT_SUMMARY_TABS_IDS.overview} = useTypedSelector(
+        (state) => state.tenant,
+    );
 
     const location = useLocation();
 
-    const history = useHistory();
-
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
     });
 
-    const {name: tenantName, info: infoTab} = queryParams;
+    const {name: tenantName} = queryParams;
 
     const pathData = tenantName ? data[tenantName.toString()]?.PathDescription?.Self : undefined;
     const currentObjectData = currentSchemaPath ? data[currentSchemaPath] : undefined;
@@ -143,13 +143,10 @@ export function ObjectSummary({
     useEffect(() => {
         const isTable = isTableType(type);
 
-        if (type && !isTable && !TENANT_INFO_TABS.find((el) => el.id === infoTab)) {
-            history.push({
-                pathname: location.pathname,
-                search: qs.stringify({...queryParams, info: TenantInfoTabsIds.overview}),
-            });
+        if (type && !isTable && !TENANT_INFO_TABS.find((el) => el.id === summaryTab)) {
+            dispatch(setSummaryTab(TENANT_SUMMARY_TABS_IDS.overview));
         }
-    }, [type, history, infoTab, location, queryParams]);
+    }, [dispatch, type, summaryTab]);
 
     const renderTabs = () => {
         const isTable = isTableType(type);
@@ -160,12 +157,12 @@ export function ObjectSummary({
                 <Tabs
                     size="l"
                     items={tabsItems}
-                    activeTab={infoTab as string}
+                    activeTab={summaryTab}
                     wrapTo={({id}, node) => {
                         const path = createHref(routes.tenant, undefined, {
                             ...queryParams,
                             name: tenantName as string,
-                            [TenantTabsGroups.info]: id,
+                            [TenantTabsGroups.summaryTab]: id,
                         });
                         return (
                             <Link to={path} key={id} className={b('tab')}>
@@ -218,11 +215,11 @@ export function ObjectSummary({
     };
 
     const renderTabContent = () => {
-        switch (infoTab) {
-            case TenantInfoTabsIds.acl: {
+        switch (summaryTab) {
+            case TENANT_SUMMARY_TABS_IDS.acl: {
                 return <Acl />;
             }
-            case TenantInfoTabsIds.schema: {
+            case TENANT_SUMMARY_TABS_IDS.schema: {
                 return loadingSchema ? (
                     renderLoader()
                 ) : (

src/containers/Tenant/TenantPages.tsx

@@ -1,31 +1,26 @@
 import routes, {createHref} from '../../routes';
+import {TENANT_SUMMARY_TABS_IDS} from '../../store/reducers/tenant/constants';
 
-export enum TenantInfoTabsIds {
-    overview = 'overview',
-    acl = 'acl',
-    schema = 'schema',
-}
-
-export enum TenantTabsGroups {
-    info = 'info',
-    queryTab = 'queryTab',
-    diagnosticsTab = 'diagnosticsTab',
-}
+export const TenantTabsGroups = {
+    summaryTab: 'summaryTab',
+    queryTab: 'queryTab',
+    diagnosticsTab: 'diagnosticsTab',
+} as const;
 
 export const TENANT_INFO_TABS = [
     {
-        id: TenantInfoTabsIds.overview,
+        id: TENANT_SUMMARY_TABS_IDS.overview,
         title: 'Overview',
     },
     {
-        id: TenantInfoTabsIds.acl,
+        id: TENANT_SUMMARY_TABS_IDS.acl,
         title: 'ACL',
     },
 ];
 
 export const TENANT_SCHEMA_TAB = [
     {
-        id: TenantInfoTabsIds.schema,
+        id: TENANT_SUMMARY_TABS_IDS.schema,
         title: 'Schema',
     },
 ];

src/containers/Tenants/Tenants.tsx

@@ -31,7 +31,7 @@ import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 import {clusterName} from '../../store';
 
-import {TenantTabsGroups, TENANT_INFO_TABS, getTenantPath} from '../Tenant/TenantPages';
+import {getTenantPath} from '../Tenant/TenantPages';
 
 import './Tenants.scss';
 
@@ -80,8 +80,6 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
     };
 
     const renderTable = () => {
-        const initialTenantInfoTab = TENANT_INFO_TABS[0].id;
-
         const getTenantBackend = (tenant: PreparedTenant) => {
             const backend = tenant.MonitoringEndpoint ?? tenant.backend;
             return additionalTenantsProps?.prepareTenantBackend?.(backend);
@@ -106,7 +104,6 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
                                 path={getTenantPath({
                                     name: row.Name,
                                     backend,
-                                    [TenantTabsGroups.info]: initialTenantInfoTab,
                                 })}
                             />
                             {additionalTenantsProps?.getMonitoringLink?.(row.Name, row.Type)}

src/store/reducers/tenant/constants.ts

@@ -25,3 +25,9 @@ export const TENANT_DIAGNOSTICS_TABS_IDS = {
     consumers: 'consumers',
     partitions: 'partitions',
 } as const;
+
+export const TENANT_SUMMARY_TABS_IDS = {
+    overview: 'overview',
+    acl: 'acl',
+    schema: 'schema',
+} as const;

src/store/reducers/tenant/tenant.ts

@@ -7,6 +7,7 @@ import type {
     TenantPage,
     TenantQueryTab,
     TenantState,
+    TenantSummaryTab,
 } from './types';
 
 import '../../../services/api';
@@ -17,6 +18,7 @@ export const FETCH_TENANT = createRequestActionTypes('tenant', 'FETCH_TENANT');
 const SET_TOP_LEVEL_TAB = 'tenant/SET_TOP_LEVEL_TAB';
 const SET_QUERY_TAB = 'tenant/SET_QUERY_TAB';
 const SET_DIAGNOSTICS_TAB = 'tenant/SET_DIAGNOSTICS_TAB';
+const SET_SUMMARY_TAB = 'tenant/SET_SUMMARY_TAB';
 const CLEAR_TENANT = 'tenant/CLEAR_TENANT';
 
 const initialState = {loading: false, wasLoaded: false};
@@ -75,6 +77,12 @@ const tenantReducer: Reducer<TenantState, TenantAction> = (state = initialState,
                 diagnosticsTab: action.data,
             };
         }
+        case SET_SUMMARY_TAB: {
+            return {
+                ...state,
+                summaryTab: action.data,
+            };
+        }
 
         default:
             return state;
@@ -116,4 +124,11 @@ export function setDiagnosticsTab(tab: TenantDiagnosticsTab) {
     } as const;
 }
 
+export function setSummaryTab(tab: TenantSummaryTab) {
+    return {
+        type: SET_SUMMARY_TAB,
+        data: tab,
+    } as const;
+}
+
 export default tenantReducer;

src/store/reducers/tenant/types.ts

@@ -3,20 +3,34 @@ import type {TTenant} from '../../../types/api/tenant';
 import type {ValueOf} from '../../../types/common';
 import type {ApiRequestAction} from '../../utils';
 
-import {TENANT_QUERY_TABS_ID, TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGES_IDS} from './constants';
-import {FETCH_TENANT, clearTenant, setDiagnosticsTab, setQueryTab, setTenantPage} from './tenant';
+import {
+    TENANT_QUERY_TABS_ID,
+    TENANT_DIAGNOSTICS_TABS_IDS,
+    TENANT_PAGES_IDS,
+    TENANT_SUMMARY_TABS_IDS,
+} from './constants';
+import {
+    FETCH_TENANT,
+    clearTenant,
+    setDiagnosticsTab,
+    setQueryTab,
+    setSummaryTab,
+    setTenantPage,
+} from './tenant';
 
 export type TenantPage = ValueOf<typeof TENANT_PAGES_IDS>;
 
 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 interface TenantState {
     loading: boolean;
     wasLoaded: boolean;
     tenantPage?: TenantPage;
     queryTab?: TenantQueryTab;
     diagnosticsTab?: TenantDiagnosticsTab;
+    summaryTab?: TenantSummaryTab;
     tenant?: TTenant;
     error?: IResponseError;
 }
@@ -26,4 +40,5 @@ export type TenantAction =
     | ReturnType<typeof clearTenant>
     | ReturnType<typeof setTenantPage>
     | ReturnType<typeof setQueryTab>
-    | ReturnType<typeof setDiagnosticsTab>;
+    | ReturnType<typeof setDiagnosticsTab>
+    | ReturnType<typeof setSummaryTab>;

src/store/state-url-mapping.js

@@ -51,6 +51,9 @@ const paramSetup = {
         diagnosticsTab: {
             stateKey: 'tenant.diagnosticsTab',
         },
+        summaryTab: {
+            stateKey: 'tenant.summaryTab',
+        },
         shardsMode: {
             stateKey: 'shardsWorkload.filters.mode',
         },