fix: fix buttons incorrect align in Nodes and Tenants tables (#830)

Author: artemmufazalov

src/components/EntityStatus/EntityStatus.scss

@@ -14,7 +14,9 @@
     }
 
     &__clipboard-button {
+        display: flex;
         visibility: hidden;
+        flex-shrink: 0;
 
         margin-left: 8px;
 
@@ -25,16 +27,6 @@
         }
     }
 
-    a {
-        text-decoration: none;
-
-        color: var(--g-color-text-link);
-    }
-
-    a:hover {
-        color: var(--g-color-text-link-hover);
-    }
-
     &__label {
         margin-right: 2px;
 

src/components/EntityStatus/EntityStatus.tsx

@@ -1,9 +1,9 @@
 import {Link as UIKitLink} from '@gravity-ui/uikit';
-import {Link} from 'react-router-dom';
 
 import {EFlag} from '../../types/api/enums';
 import {cn} from '../../utils/cn';
 import {ClipboardButton} from '../ClipboardButton';
+import {InternalLink} from '../InternalLink/InternalLink';
 import {StatusIcon} from '../StatusIcon/StatusIcon';
 import type {StatusIconMode, StatusIconSize} from '../StatusIcon/StatusIcon';
 
@@ -29,6 +29,8 @@ interface EntityStatusProps {
     clipboardButtonAlwaysVisible?: boolean;
 
     className?: string;
+
+    additionalControls?: React.ReactNode;
 }
 
 export function EntityStatus({
@@ -49,6 +51,8 @@ export function EntityStatus({
     clipboardButtonAlwaysVisible = false,
 
     className,
+
+    additionalControls,
 }: EntityStatusProps) {
     const renderIcon = () => {
         if (!showStatus) {
@@ -75,9 +79,9 @@ export function EntityStatus({
             }
 
             return (
-                <Link className={b('name')} to={path}>
+                <InternalLink className={b('name')} to={path}>
                     {name}
-                </Link>
+                </InternalLink>
             );
         }
         return name && <span className={b('name')}>{name}</span>;
@@ -100,6 +104,7 @@ export function EntityStatus({
                     })}
                 />
             )}
+            {additionalControls}
         </div>
     );
 }

src/components/NodeHostWrapper/NodeHostWrapper.scss

@@ -1,10 +1,7 @@
 .ydb-node-host-wrapper {
-    &__host {
-        overflow: hidden;
-    }
-
     &__external-button {
         display: none;
+        flex-shrink: 0;
 
         margin-left: 4px;
     }

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -32,6 +32,12 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
           })
         : undefined;
 
+    const additionalControls = nodeRef ? (
+        <Button size="s" href={nodeRef} className={b('external-button')} target="_blank">
+            <Icon name="external" />
+        </Button>
+    ) : null;
+
     return (
         <CellWithPopover
             disabled={!isNodeAvailable}
@@ -44,13 +50,8 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
                 status={node.SystemState}
                 path={nodePath}
                 hasClipboardButton
-                className={b('host')}
+                additionalControls={additionalControls}
             />
-            {nodeRef && (
-                <Button size="s" href={nodeRef} className={b('external-button')} target="_blank">
-                    <Icon name="external" />
-                </Button>
-            )}
         </CellWithPopover>
     );
 };

src/containers/Tenants/Tenants.scss

@@ -49,10 +49,8 @@
         display: block;
     }
 
-    &__name-wrapper {
-        display: flex;
-        align-items: center;
-        gap: 4px;
+    &__monitoring-button {
+        margin-left: 4px;
     }
 
     &__name {

src/containers/Tenants/Tenants.tsx

@@ -104,21 +104,26 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
                     const backend = getTenantBackend(row);
                     const isExternalLink = Boolean(backend);
                     return (
-                        <div className={b('name-wrapper')}>
-                            <EntityStatus
-                                externalLink={isExternalLink}
-                                className={b('name')}
-                                name={row.Name || 'unknown database'}
-                                withLeftTrim={true}
-                                status={row.Overall}
-                                hasClipboardButton
-                                path={getTenantPath({
-                                    name: row.Name,
-                                    backend,
-                                })}
-                            />
-                            {additionalTenantsProps?.getMonitoringLink?.(row.Name, row.Type)}
-                        </div>
+                        <EntityStatus
+                            externalLink={isExternalLink}
+                            className={b('name')}
+                            name={row.Name || 'unknown database'}
+                            withLeftTrim={true}
+                            status={row.Overall}
+                            hasClipboardButton
+                            path={getTenantPath({
+                                name: row.Name,
+                                backend,
+                            })}
+                            additionalControls={
+                                <span className={b('monitoring-button')}>
+                                    {additionalTenantsProps?.getMonitoringLink?.(
+                                        row.Name,
+                                        row.Type,
+                                    )}
+                                </span>
+                            }
+                        />
                     );
                 },
                 width: 440,