feat: support use database id in links (#2812)

Author: Raubzeug

src/components/TenantNameWrapper/TenantNameWrapper.tsx

@@ -3,6 +3,7 @@ import {DefinitionList, Flex} from '@gravity-ui/uikit';
 import {getTenantPath} from '../../containers/Tenant/TenantPages';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
 import type {AdditionalTenantsProps} from '../../types/additionalProps';
+import {uiFactory} from '../../uiFactory/uiFactory';
 import {getDatabaseLinks} from '../../utils/additionalProps';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
@@ -63,7 +64,7 @@ export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWr
             hasClipboardButton
             path={getTenantPath(
                 {
-                    database: tenant.Name,
+                    database: uiFactory.useDatabaseId ? tenant.Id : tenant.Name,
                     backend,
                 },
                 {withBasename: isExternalLink},

src/containers/Header/breadcrumbs.tsx

@@ -24,6 +24,7 @@ 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';
@@ -84,12 +85,14 @@ const getClusterBreadcrumbs: GetBreadcrumbs<ClusterBreadcrumbsOptions> = (option
 };
 
 const getTenantBreadcrumbs: GetBreadcrumbs<TenantBreadcrumbsOptions> = (options, query = {}) => {
-    const {tenantName} = options;
+    const {tenantName, tenantId} = options;
 
     const breadcrumbs = getClusterBreadcrumbs(options, query);
 
     const text = tenantName || headerKeyset('breadcrumbs.tenant');
-    const link = tenantName ? getTenantPath({...query, database: tenantName}) : undefined;
+    const link = tenantName
+        ? getTenantPath({...query, database: uiFactory.useDatabaseId ? tenantId : tenantName})
+        : undefined;
 
     const lastItem = {text, link, icon: <DatabaseIcon />};
     breadcrumbs.push(lastItem);

src/containers/Tenant/Tenant.tsx

@@ -56,7 +56,7 @@ export function Tenant(props: TenantProps) {
 
     const {database, schema} = useTenantQueryParams();
 
-    const {controlPlane, name} = useTenantBaseInfo(database ?? '');
+    const {controlPlane, name, id} = 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}));
-    }, [databaseName, dispatch]);
+        dispatch(setHeaderBreadcrumbs('tenant', {tenantName: databaseName, tenantId: id}));
+    }, [databaseName, id, dispatch]);
 
     const preloadedData = useTypedSelector((state) =>
         selectSchemaObjectData(state, path, database),

src/store/reducers/header/types.ts

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

src/store/reducers/tenant/tenant.ts

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

src/uiFactory/types.ts

@@ -42,6 +42,8 @@ export interface UIFactory<H extends string = CommonIssueType> {
     };
     hasAccess?: boolean;
     yaMetricaMap?: Record<string, number>;
+
+    useDatabaseId?: boolean;
 }
 
 export type HandleCreateDB = (params: {clusterName: string}) => Promise<boolean>;

src/uiFactory/uiFactory.ts

@@ -19,6 +19,7 @@ const uiFactoryBase: UIFactory = {
         countHealthcheckIssuesByType,
     },
     hasAccess: true,
+    useDatabaseId: false,
 };
 
 export function configureUIFactory<H extends string>(overrides: Partial<UIFactory<H>>) {