diff --git a/src/components/TenantNameWrapper/TenantNameWrapper.tsx b/src/components/TenantNameWrapper/TenantNameWrapper.tsx index 44e0297d3e..c66b200d2f 100644 --- a/src/components/TenantNameWrapper/TenantNameWrapper.tsx +++ b/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}, diff --git a/src/containers/Header/breadcrumbs.tsx b/src/containers/Header/breadcrumbs.tsx index ff21cad0cf..164231d767 100644 --- a/src/containers/Header/breadcrumbs.tsx +++ b/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 = (option }; const getTenantBreadcrumbs: GetBreadcrumbs = (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: }; breadcrumbs.push(lastItem); diff --git a/src/containers/Tenant/Tenant.tsx b/src/containers/Tenant/Tenant.tsx index bfccca6511..fe1cf9f2f5 100644 --- a/src/containers/Tenant/Tenant.tsx +++ b/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), diff --git a/src/store/reducers/header/types.ts b/src/store/reducers/header/types.ts index dfc40d931a..6f88ae3c80 100644 --- a/src/store/reducers/header/types.ts +++ b/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 { diff --git a/src/store/reducers/tenant/tenant.ts b/src/store/reducers/tenant/tenant.ts index 2da7ace466..1d30e5e5cd 100644 --- a/src/store/reducers/tenant/tenant.ts +++ b/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, }; } diff --git a/src/uiFactory/types.ts b/src/uiFactory/types.ts index c0e1ce11e3..6177d65e22 100644 --- a/src/uiFactory/types.ts +++ b/src/uiFactory/types.ts @@ -42,6 +42,8 @@ export interface UIFactory { }; hasAccess?: boolean; yaMetricaMap?: Record; + + useDatabaseId?: boolean; } export type HandleCreateDB = (params: {clusterName: string}) => Promise; diff --git a/src/uiFactory/uiFactory.ts b/src/uiFactory/uiFactory.ts index a0928fc535..af1efdd9ca 100644 --- a/src/uiFactory/uiFactory.ts +++ b/src/uiFactory/uiFactory.ts @@ -19,6 +19,7 @@ const uiFactoryBase: UIFactory = { countHealthcheckIssuesByType, }, hasAccess: true, + useDatabaseId: false, }; export function configureUIFactory(overrides: Partial>) {