fix(breadcrumbs): use database param for links (#2823)

Author: Raubzeug

src/containers/Header/breadcrumbs.tsx

@@ -24,7 +24,6 @@ import {
     TENANT_PAGE,
     TENANT_PAGES_IDS,
 } from '../../store/reducers/tenant/constants';
-import {uiFactory} from '../../uiFactory/uiFactory';
 import {CLUSTER_DEFAULT_TITLE, getTabletLabel} from '../../utils/constants';
 import {getClusterPath} from '../Cluster/utils';
 import {getDefaultNodePath} from '../Node/NodePages';
@@ -85,14 +84,12 @@ const getClusterBreadcrumbs: GetBreadcrumbs<ClusterBreadcrumbsOptions> = (option
 };
 
 const getTenantBreadcrumbs: GetBreadcrumbs<TenantBreadcrumbsOptions> = (options, query = {}) => {
-    const {tenantName, tenantId} = options;
+    const {tenantName, database} = options;
 
     const breadcrumbs = getClusterBreadcrumbs(options, query);
 
     const text = tenantName || headerKeyset('breadcrumbs.tenant');
-    const link = tenantName
-        ? getTenantPath({...query, database: uiFactory.useDatabaseId ? tenantId : tenantName})
-        : undefined;
+    const link = tenantName ? getTenantPath({...query, database}) : undefined;
 
     const lastItem = {text, link, icon: <DatabaseIcon />};
     breadcrumbs.push(lastItem);

src/containers/Node/Node.tsx

@@ -90,18 +90,21 @@ export function Node() {
 
     const tenantName = node?.Tenants?.[0] || tenantNameFromQuery?.toString();
 
+    const database = tenantNameFromQuery?.toString();
+
     React.useEffect(() => {
         // Dispatch only if loaded to get correct node role
         if (!isLoading) {
             dispatch(
                 setHeaderBreadcrumbs('node', {
                     tenantName,
+                    database,
                     nodeRole: isStorageNode ? 'Storage' : 'Compute',
                     nodeId,
                 }),
             );
         }
-    }, [dispatch, tenantName, nodeId, isLoading, isStorageNode]);
+    }, [dispatch, tenantName, nodeId, isLoading, isStorageNode, database]);
 
     return (
         <div className={b(null)} ref={container}>

src/containers/StorageGroupPage/StorageGroupPage.tsx

@@ -37,7 +37,7 @@ export function StorageGroupPage() {
     const [{groupId}] = useQueryParams({groupId: StringParam});
 
     React.useEffect(() => {
-        dispatch(setHeaderBreadcrumbs('storageGroup', {groupId, tenantName: database}));
+        dispatch(setHeaderBreadcrumbs('storageGroup', {groupId, tenantName: database, database}));
     }, [dispatch, groupId, database]);
 
     const [autoRefreshInterval] = useAutoRefreshInterval();

src/containers/Tablet/Tablet.tsx

@@ -89,6 +89,7 @@ export function Tablet() {
         dispatch(
             setHeaderBreadcrumbs('tablet', {
                 tenantName: queryDatabase ?? undefined,
+                database: queryDatabase ?? undefined,
                 tabletId: id,
                 tabletType,
             }),

src/containers/Tenant/Tenant.tsx

@@ -56,7 +56,7 @@ export function Tenant(props: TenantProps) {
 
     const {database, schema} = useTenantQueryParams();
 
-    const {controlPlane, name, id} = useTenantBaseInfo(database ?? '');
+    const {controlPlane, name} = useTenantBaseInfo(database ?? '');
 
     if (!database) {
         throw new Error('Tenant name is not defined');
@@ -88,8 +88,8 @@ export function Tenant(props: TenantProps) {
 
     const dispatch = useTypedDispatch();
     React.useEffect(() => {
-        dispatch(setHeaderBreadcrumbs('tenant', {tenantName: databaseName, tenantId: id}));
-    }, [databaseName, id, dispatch]);
+        dispatch(setHeaderBreadcrumbs('tenant', {tenantName: databaseName, database}));
+    }, [databaseName, database, dispatch]);
 
     const preloadedData = useTypedSelector((state) =>
         selectSchemaObjectData(state, path, database),

src/containers/VDiskPage/VDiskPage.tsx

@@ -101,6 +101,7 @@ export function VDiskPage() {
             setHeaderBreadcrumbs('vDisk', {
                 groupId: vDiskData?.VDiskId?.GroupID,
                 tenantName: database,
+                database,
                 vDiskId: vDiskData?.StringifiedId,
             }),
         );

src/store/reducers/header/types.ts

@@ -24,7 +24,7 @@ export interface ClusterBreadcrumbsOptions extends ClustersBreadcrumbsOptions {
 
 export interface TenantBreadcrumbsOptions extends ClusterBreadcrumbsOptions {
     tenantName?: string;
-    tenantId?: string;
+    database?: string;
 }
 
 export interface StorageGroupBreadcrumbsOptions extends ClusterBreadcrumbsOptions {

src/store/reducers/tenant/tenant.ts

@@ -135,11 +135,10 @@ export function useTenantBaseInfo(path: string) {
         {skip: !path},
     );
 
-    const {ControlPlane, Name, Id} = currentData || {};
+    const {ControlPlane, Name} = currentData || {};
 
     return {
         controlPlane: ControlPlane,
         name: Name,
-        id: Id,
     };
 }