fix: pass database to capabilities query

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(

src/containers/Tablet/Tablet.tsx

@@ -4,7 +4,7 @@ import {Flex, Tabs} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {Helmet} from 'react-helmet-async';
 import {useParams} from 'react-router-dom';
-import {StringParam, useQueryParams} from 'use-query-params';
+import {useQueryParams} from 'use-query-params';
 import {z} from 'zod';
 
 import {EmptyStateWrapper} from '../../components/EmptyState';
@@ -13,7 +13,7 @@ import {ResponseError} from '../../components/Errors/ResponseError';
 import {InternalLink} from '../../components/InternalLink';
 import {LoaderWrapper} from '../../components/LoaderWrapper/LoaderWrapper';
 import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
-import {getTabletPagePath} from '../../routes';
+import {getTabletPagePath, tabletPageQueryParams} from '../../routes';
 import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {tabletApi} from '../../store/reducers/tablet';
@@ -58,19 +58,13 @@ const TABLET_PAGE_TABS = [
 
 const tabletTabSchema = z.nativeEnum(TABLET_TABS_IDS).catch(TABLET_TABS_IDS.history);
 
-const tabletQueryParams = {
-    tenantName: StringParam,
-    clusterName: StringParam,
-    activeTab: StringParam,
-};
-
 export function Tablet() {
     const dispatch = useTypedDispatch();
 
     const {id} = useParams<{id: string}>();
 
-    const [{tenantName: queryDatabase, clusterName: queryClusterName}] =
-        useQueryParams(tabletQueryParams);
+    const [{database: queryDatabase, clusterName: queryClusterName}] =
+        useQueryParams(tabletPageQueryParams);
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = tabletApi.useGetTabletQuery(
@@ -168,7 +162,7 @@ function TabletTabs({
     hiveId?: string;
     history: ITabletPreparedHistoryItem[];
 }) {
-    const [{activeTab, ...restParams}, setParams] = useQueryParams(tabletQueryParams);
+    const [{activeTab, ...restParams}, setParams] = useQueryParams(tabletPageQueryParams);
     const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
 
     const noAdvancedInfo = !isUserAllowedToMakeChanges || !hasHive(hiveId);

src/containers/Tenant/Diagnostics/Consumers/columns/columns.tsx

@@ -4,12 +4,11 @@ import qs from 'qs';
 
 import {InternalLink} from '../../../../../components/InternalLink';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
-import routes, {createHref} from '../../../../../routes';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {IPreparedConsumerData} from '../../../../../types/store/topic';
 import {cn} from '../../../../../utils/cn';
 import {formatMsToUptime} from '../../../../../utils/dataFormatters/dataFormatters';
-import {TenantTabsGroups} from '../../../TenantPages';
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import {ReadLagsHeader} from '../Headers';
 import {
     CONSUMERS_COLUMNS_IDS,
@@ -40,7 +39,7 @@ export const columns: Column<IPreparedConsumerData>[] = [
 
             return (
                 <InternalLink
-                    to={createHref(routes.tenant, undefined, {
+                    to={getTenantPath({
                         ...queryParams,
                         [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
                         selectedConsumer: row.name,

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -6,7 +6,6 @@ import {Link} from 'react-router-dom';
 import {StringParam, useQueryParams} from 'use-query-params';
 
 import {AutoRefreshControl} from '../../../components/AutoRefreshControl/AutoRefreshControl';
-import routes, {createHref} from '../../../routes';
 import {useFeatureFlagsAvailable} from '../../../store/reducers/capabilities/hooks';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 import {setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
@@ -20,7 +19,7 @@ import {Operations} from '../../Operations';
 import {StorageWrapper} from '../../Storage/StorageWrapper';
 import {Tablets} from '../../Tablets';
 import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
-import {TenantTabsGroups} from '../TenantPages';
+import {TenantTabsGroups, getTenantPath} from '../TenantPages';
 import {isDatabaseEntityType} from '../utils/schema';
 
 import {Configs} from './Configs/Configs';
@@ -55,7 +54,7 @@ function Diagnostics(props: DiagnosticsProps) {
     );
 
     const [queryParams] = useQueryParams({
-        name: StringParam,
+        database: StringParam,
         schema: StringParam,
         backend: StringParam,
         clusterName: StringParam,
@@ -155,7 +154,7 @@ function Diagnostics(props: DiagnosticsProps) {
                         items={pages}
                         activeTab={activeTab?.id}
                         wrapTo={({id}, node) => {
-                            const path = createHref(routes.tenant, undefined, {
+                            const path = getTenantPath({
                                 ...queryParams,
                                 [TenantTabsGroups.diagnosticsTab]: id,
                             });

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -11,7 +11,7 @@ import {AsyncReplicationState} from '../../../components/AsyncReplicationState';
 import {toFormattedSize} from '../../../components/FormattedBytes/utils';
 import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
 import SplitPane from '../../../components/SplitPane';
-import routes, {createExternalUILink, createHref} from '../../../routes';
+import {createExternalUILink} from '../../../routes';
 import {overviewApi} from '../../../store/reducers/overview/overview';
 import {TENANT_SUMMARY_TABS_IDS} from '../../../store/reducers/tenant/constants';
 import {setSummaryTab} from '../../../store/reducers/tenant/tenant';
@@ -29,7 +29,7 @@ import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../
 import {Acl} from '../Acl/Acl';
 import {EntityTitle} from '../EntityTitle/EntityTitle';
 import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
-import {TENANT_INFO_TABS, TENANT_SCHEMA_TAB, TenantTabsGroups} from '../TenantPages';
+import {TENANT_INFO_TABS, TENANT_SCHEMA_TAB, TenantTabsGroups, getTenantPath} from '../TenantPages';
 import {getSummaryControls} from '../utils/controls';
 import {
     PaneVisibilityActionTypes,
@@ -128,13 +128,12 @@ export function ObjectSummary({
                         items={tabsItems}
                         activeTab={summaryTab}
                         wrapTo={({id}, node) => {
-                            const path = createHref(routes.tenant, undefined, {
+                            const tabPath = getTenantPath({
                                 ...queryParams,
-                                name: tenantName,
                                 [TenantTabsGroups.summaryTab]: id,
                             });
                             return (
-                                <Link to={path} key={id} className={b('tab')}>
+                                <Link to={tabPath} key={id} className={b('tab')}>
                                     {node}
                                 </Link>
                             );

src/containers/Tenant/Tenant.tsx

@@ -48,7 +48,21 @@ export function Tenant(props: TenantProps) {
         getTenantSummaryState,
     );
 
-    const [{name: tenantName, schema}] = useQueryParams({name: StringParam, schema: StringParam});
+    // TODO: name is used together with database to keep old links valid
+    // Remove it after some time - 1-2 weeks
+    const [{database, name, schema}, setQuery] = useQueryParams({
+        database: StringParam,
+        name: StringParam,
+        schema: StringParam,
+    });
+
+    React.useEffect(() => {
+        if (name && !database) {
+            setQuery({database: name, name: undefined}, 'replaceIn');
+        }
+    }, [database, name, setQuery]);
+
+    const tenantName = database ?? name;
 
     if (!tenantName) {
         throw new Error('Tenant name is not defined');