fix: pass database to capabilities query (#1551)

Author: artemmufazalov

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -37,7 +37,7 @@ export const NodeHostWrapper = ({node, getNodeRef, database}: NodeHostWrapperPro
 
     const nodePath = isNodeAvailable
         ? getDefaultNodePath(node.NodeId, {
-              tenantName: database ?? node.TenantName,
+              database: database ?? node.TenantName,
           })
         : undefined;
 

src/components/Tablet/Tablet.tsx

@@ -13,14 +13,14 @@ const b = cn('tablet');
 
 interface TabletProps {
     tablet?: TTabletStateInfo;
-    tenantName?: string;
+    database?: string;
 }
 
-export const Tablet = ({tablet = {}, tenantName}: TabletProps) => {
-    const {TabletId: id, NodeId, Type} = tablet;
+export const Tablet = ({tablet = {}, database}: TabletProps) => {
+    const {TabletId: id} = tablet;
     const status = tablet.Overall?.toLowerCase();
 
-    const tabletPath = id && getTabletPagePath(id, {nodeId: NodeId, tenantName, type: Type});
+    const tabletPath = id && getTabletPagePath(id, {database});
 
     return (
         <ContentWithPopup

src/components/TabletNameWrapper/TabletNameWrapper.tsx

@@ -18,9 +18,7 @@ interface TabletNameWrapperProps {
 export function TabletNameWrapper({tabletId, database}: TabletNameWrapperProps) {
     const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
 
-    const tabletPath = getTabletPagePath(tabletId, {
-        tenantName: database,
-    });
+    const tabletPath = getTabletPagePath(tabletId, {database});
 
     return (
         <CellWithPopover

src/components/TabletsStatistic/TabletsStatistic.tsx

@@ -1,7 +1,6 @@
 import {Link} from 'react-router-dom';
 
-import {TABLETS} from '../../containers/Node/NodePages';
-import routes, {createHref} from '../../routes';
+import {TABLETS, getDefaultNodePath} from '../../containers/Node/NodePages';
 import type {TTabletStateInfo} from '../../types/api/tablet';
 import {cn} from '../../utils/cn';
 import {getTabletLabel} from '../../utils/constants';
@@ -26,35 +25,18 @@ const prepareTablets = (tablets: TTabletStateInfo[]) => {
 
 interface TabletsStatisticProps {
     tablets: TTabletStateInfo[];
-    tenantName: string | undefined;
+    database: string | undefined;
     nodeId: string | number;
-    backend?: string;
 }
 
-export const TabletsStatistic = ({
-    tablets = [],
-    tenantName,
-    nodeId,
-    backend,
-}: TabletsStatisticProps) => {
+export const TabletsStatistic = ({tablets = [], database, nodeId}: TabletsStatisticProps) => {
     const renderTabletInfo = (item: ReturnType<typeof prepareTablets>[number], index: number) => {
-        const tabletsPath = createHref(
-            routes.node,
-            {id: nodeId, activeTab: TABLETS},
-            {
-                tenantName,
-                backend,
-            },
-        );
+        const tabletsPath = getDefaultNodePath(nodeId, {database}, TABLETS);
 
         const label = `${item.label}: ${item.count}`;
         const className = b('tablet', {state: item.state?.toLowerCase()});
 
-        return backend ? (
-            <a href={tabletsPath} key={index} className={className}>
-                {label}
-            </a>
-        ) : (
+        return (
             <Link to={tabletsPath} key={index} className={className}>
                 {label}
             </Link>

src/components/TenantNameWrapper/TenantNameWrapper.tsx

@@ -66,7 +66,7 @@ export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWr
                 status={tenant.Overall}
                 hasClipboardButton
                 path={getTenantPath({
-                    name: tenant.Name,
+                    database: tenant.Name,
                     backend,
                 })}
             />

src/components/nodesColumns/columns.tsx

@@ -230,7 +230,7 @@ export function getTabletsColumn<
         render: ({row}) => {
             return row.Tablets ? (
                 <TabletsStatistic
-                    tenantName={database ?? row.TenantName}
+                    database={database ?? row.TenantName}
                     nodeId={row.NodeId}
                     tablets={row.Tablets}
                 />

src/containers/App/Content.tsx

@@ -12,7 +12,7 @@ import type {SlotComponent} from '../../components/slots/types';
 import routes from '../../routes';
 import type {RootState} from '../../store';
 import {authenticationApi} from '../../store/reducers/authentication/authentication';
-import {capabilitiesApi} from '../../store/reducers/capabilities/capabilities';
+import {useCapabilitiesQuery} from '../../store/reducers/capabilities/hooks';
 import {nodesListApi} from '../../store/reducers/nodesList';
 import {cn} from '../../utils/cn';
 import {lazyComponent} from '../../utils/lazyComponent';
@@ -200,7 +200,7 @@ function GetNodesList() {
 }
 
 function GetCapabilities() {
-    capabilitiesApi.useGetClusterCapabilitiesQuery(undefined);
+    useCapabilitiesQuery();
     return null;
 }
 

src/containers/Header/breadcrumbs.tsx

@@ -67,7 +67,7 @@ const getTenantBreadcrumbs: GetBreadcrumbs<TenantBreadcrumbsOptions> = (options,
     const breadcrumbs = getClusterBreadcrumbs(options, query);
 
     const text = tenantName ? prepareTenantName(tenantName) : headerKeyset('breadcrumbs.tenant');
-    const link = tenantName ? getTenantPath({...query, name: tenantName}) : undefined;
+    const link = tenantName ? getTenantPath({...query, database: tenantName}) : undefined;
 
     const lastItem = {text, link, icon: <DatabaseIcon />};
     breadcrumbs.push(lastItem);
@@ -92,7 +92,7 @@ const getNodeBreadcrumbs: GetBreadcrumbs<NodeBreadcrumbsOptions> = (options, que
     const lastItem = {
         text,
         link: nodeId
-            ? getDefaultNodePath(nodeId, {tenantName, ...query}, nodeActiveTab)
+            ? getDefaultNodePath(nodeId, {database: tenantName, ...query}, nodeActiveTab)
             : undefined,
         icon: getNodeIcon(nodeRole),
     };

src/containers/Node/Node.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 
 import {Tabs} from '@gravity-ui/uikit';
 import {Helmet} from 'react-helmet-async';
-import {Link, useLocation, useRouteMatch} from 'react-router-dom';
+import {Link, useRouteMatch} from 'react-router-dom';
+import {useQueryParams} from 'use-query-params';
 
 import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {FullNodeViewer} from '../../components/FullNodeViewer/FullNodeViewer';
 import {Loader} from '../../components/Loader';
-import routes, {createHref, parseQuery} from '../../routes';
+import routes from '../../routes';
 import {
     useCapabilitiesLoaded,
     useDiskPagesAvailable,
@@ -22,7 +23,16 @@ import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks';
 import {StorageWrapper} from '../Storage/StorageWrapper';
 import {Tablets} from '../Tablets';
 
-import {NODE_PAGES, OVERVIEW, STORAGE, STRUCTURE, TABLETS} from './NodePages';
+import type {NodeTab} from './NodePages';
+import {
+    NODE_PAGES,
+    OVERVIEW,
+    STORAGE,
+    STRUCTURE,
+    TABLETS,
+    getDefaultNodePath,
+    nodePageQueryParams,
+} from './NodePages';
 import NodeStructure from './NodeStructure/NodeStructure';
 
 import './Node.scss';
@@ -40,13 +50,12 @@ export function Node(props: NodeProps) {
     const container = React.useRef<HTMLDivElement>(null);
 
     const dispatch = useTypedDispatch();
-    const location = useLocation();
 
     const match =
         useRouteMatch<{id: string; activeTab: string}>(routes.node) ?? Object.create(null);
 
     const {id: nodeId, activeTab} = match.params;
-    const {tenantName: tenantNameFromQuery} = parseQuery(location);
+    const [{database: tenantNameFromQuery}] = useQueryParams(nodePageQueryParams);
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = nodeApi.useGetNodeInfoQuery(
@@ -109,7 +118,13 @@ export function Node(props: NodeProps) {
                     activeTab={activeTabVerified.id}
                     wrapTo={({id}, tabNode) => (
                         <Link
-                            to={createHref(routes.node, {id: nodeId, activeTab: id}, {tenantName})}
+                            to={getDefaultNodePath(
+                                nodeId,
+                                {
+                                    database: tenantName,
+                                },
+                                id as NodeTab,
+                            )}
                             key={id}
                             className={b('tab')}
                         >

src/containers/Node/NodePages.ts

@@ -1,4 +1,6 @@
-import type {Query} from '../../routes';
+import {StringParam} from 'use-query-params';
+
+import type {QueryParamsTypeFromQueryObject} from '../../routes';
 import routes, {createHref} from '../../routes';
 
 export const STORAGE = 'storage';
@@ -27,9 +29,15 @@ export const NODE_PAGES = [
     },
 ];
 
+export const nodePageQueryParams = {
+    database: StringParam,
+};
+
+type NodePageQuery = QueryParamsTypeFromQueryObject<typeof nodePageQueryParams>;
+
 export function getDefaultNodePath(
     nodeId: string | number,
-    query: Query = {},
+    query: NodePageQuery = {},
     activeTab: NodeTab = OVERVIEW,
 ) {
     return createHref(