fix: review

Author: Raubzeug

src/components/EntityStatus/EntityStatus.scss

@@ -20,6 +20,10 @@
         color: var(--g-color-text-secondary);
 
         @include table-hover-appearing-button();
+
+        &_visible {
+            opacity: 1;
+        }
     }
 
     &__wrapper {
@@ -42,13 +46,18 @@
         width: 0;
         height: 100%;
 
-        background-color: var(--g-color-base-float);
+        &_visible {
+            width: min-content;
+            padding: var(--g-spacing-1);
+        }
 
         .data-table__row:hover &,
         .ydb-paginated-table__row:hover &,
         .ydb-tree-view__item & {
             width: min-content;
             padding: var(--g-spacing-1);
+
+            background-color: var(--g-color-base-float);
         }
     }
 

src/components/EntityStatus/EntityStatus.tsx

@@ -95,7 +95,11 @@ export function EntityStatus({
                         {renderLink()}
                     </span>
                     {hasClipboardButton && (
-                        <div className={b('controls-wrapper')}>
+                        <div
+                            className={b('controls-wrapper', {
+                                visible: clipboardButtonAlwaysVisible,
+                            })}
+                        >
                             <ClipboardButton
                                 text={name}
                                 size="xs"

src/components/TenantNameWrapper/TenantNameWrapper.tsx

@@ -7,6 +7,7 @@ import type {AdditionalTenantsProps, NodeAddress} from '../../types/additionalPr
 import {useTypedSelector} from '../../utils/hooks';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
+import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
 
 import i18n from './i18n';
 
@@ -44,11 +45,16 @@ export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWr
         <CellWithPopover
             disabled={!isUserAllowedToMakeChanges || !monitoringLink}
             content={
-                <DefinitionList responsive>
-                    <DefinitionList.Item name={i18n('field_monitoring-link')}>
-                        {monitoringLink}
-                    </DefinitionList.Item>
-                </DefinitionList>
+                monitoringLink ? (
+                    <DefinitionList responsive>
+                        <DefinitionList.Item name={i18n('field_links')}>
+                            <LinkWithIcon
+                                title={i18n('field_monitoring-link')}
+                                url={monitoringLink}
+                            />
+                        </DefinitionList.Item>
+                    </DefinitionList>
+                ) : null
             }
             placement={['top', 'bottom']}
             behavior={PopoverBehavior.Immediate}

src/components/TenantNameWrapper/i18n/en.json

@@ -1,4 +1,5 @@
 {
-  "field_monitoring-link": "Monitoring link",
+  "field_links": "Links",
+  "field_monitoring-link": "Monitoring",
   "context_unknown": "unknown database"
 }

src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.tsx

@@ -23,7 +23,7 @@ export const NodeEndpointsTooltipContent = ({data, nodeHref}: NodeEdpointsToolti
     const info: (DefinitionListItemProps & {key: string})[] = [];
 
     if (data?.Rack) {
-        info.push({name: 'Rack', children: data.Rack, key: i18n('field_rack')});
+        info.push({name: i18n('field_rack'), children: data.Rack, key: 'Rack'});
     }
 
     if (data?.Endpoints && data.Endpoints.length) {

src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx

@@ -1,6 +1,5 @@
 import {ClipboardButton} from '@gravity-ui/uikit';
 
-import {MonitoringButton} from '../../../components/MonitoringButton/MonitoringButton';
 import type {
     AdditionalClusterProps,
     AdditionalTenantsProps,
@@ -103,8 +102,7 @@ const getAdditionalTenantsProps = (
     if (monitoring && getMonitoringLink) {
         additionalTenantsProps.getMonitoringLink = (dbName?: string, dbType?: ETenantType) => {
             if (dbName && dbType) {
-                const href = getMonitoringLink({monitoring, dbName, dbType, clusterName});
-                return <MonitoringButton href={href} />;
+                return getMonitoringLink({monitoring, dbName, dbType, clusterName});
             }
 
             return null;

src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx

@@ -1,4 +1,3 @@
-import {MonitoringButton} from '../../../components/MonitoringButton/MonitoringButton';
 import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
 import type {ETenantType} from '../../../types/api/tenant';
 import type {GetMonitoringLink} from '../../../utils/monitoring';
@@ -20,12 +19,11 @@ export function ExtendedTenant({
     const additionalTenantProps = {
         getMonitoringLink: (dbName?: string, dbType?: ETenantType) => {
             if (monitoring && dbName && dbType && getMonitoringLink) {
-                const href = getMonitoringLink({
+                return getMonitoringLink({
                     monitoring,
                     dbName,
                     dbType,
                 });
-                return href ? <MonitoringButton href={href} size="xs" /> : null;
             }
 
             return null;

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -1,6 +1,7 @@
 import {Loader} from '@gravity-ui/uikit';
 
 import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
+import {MonitoringButton} from '../../../../components/MonitoringButton/MonitoringButton';
 import {overviewApi} from '../../../../store/reducers/overview/overview';
 import {TENANT_METRICS_TABS_IDS} from '../../../../store/reducers/tenant/constants';
 import {tenantApi} from '../../../../store/reducers/tenant/tenant';
@@ -147,13 +148,15 @@ export function TenantOverview({
         );
     }
 
+    const monitoringLink = additionalTenantProps?.getMonitoringLink?.(Name, Type);
+
     return (
         <div className={b()}>
             <div className={b('info')}>
                 <div className={b('top-label')}>{tenantType}</div>
                 <div className={b('top')}>
                     {renderName()}
-                    {additionalTenantProps?.getMonitoringLink?.(Name, Type)}
+                    {monitoringLink && <MonitoringButton href={monitoringLink} />}
                 </div>
                 <MetricsCards
                     poolsCpuStats={poolsStats}

src/types/additionalProps.ts

@@ -20,7 +20,7 @@ export interface AdditionalClusterProps {
 
 export interface AdditionalTenantsProps {
     prepareTenantBackend?: (backend: string | NodeAddress | undefined) => string | undefined;
-    getMonitoringLink?: (name?: string, type?: ETenantType) => React.ReactNode;
+    getMonitoringLink?: (name?: string, type?: ETenantType) => string | null;
 }
 
 export type NodeAddress = Pick<TSystemStateInfo, 'Host' | 'Endpoints' | 'NodeId'>;