From 03bac0dcf59e03ca302cb1556be9974198f33dfc Mon Sep 17 00:00:00 2001
From: mufazalov <mufazalov@yandex-team.ru>
Date: Mon, 20 May 2024 14:19:57 +0300
Subject: [PATCH 1/2] fix: fix buttons incorrect aling in Nodes and Tenants
 tables

---
 src/components/EntityStatus/EntityStatus.scss | 22 ++++++------
 src/components/EntityStatus/EntityStatus.tsx  |  5 +++
 .../NodeHostWrapper/NodeHostWrapper.scss      |  5 +--
 .../NodeHostWrapper/NodeHostWrapper.tsx       | 13 +++----
 src/containers/Tenants/Tenants.scss           |  6 ++--
 src/containers/Tenants/Tenants.tsx            | 35 +++++++++++--------
 6 files changed, 47 insertions(+), 39 deletions(-)

diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss
index d1476afe7b..53de1dea1a 100644
--- a/src/components/EntityStatus/EntityStatus.scss
+++ b/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;
 
@@ -52,6 +44,16 @@
 
         white-space: nowrap;
         text-overflow: ellipsis;
+
+        a {
+            text-decoration: none;
+
+            color: var(--g-color-text-link);
+        }
+
+        a:hover {
+            color: var(--g-color-text-link-hover);
+        }
     }
 
     &__link_with-left-trim {
diff --git a/src/components/EntityStatus/EntityStatus.tsx b/src/components/EntityStatus/EntityStatus.tsx
index 7c58f2cf1f..2e3588afe7 100644
--- a/src/components/EntityStatus/EntityStatus.tsx
+++ b/src/components/EntityStatus/EntityStatus.tsx
@@ -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) {
@@ -100,6 +104,7 @@ export function EntityStatus({
                     })}
                 />
             )}
+            {additionalControls}
         </div>
     );
 }
diff --git a/src/components/NodeHostWrapper/NodeHostWrapper.scss b/src/components/NodeHostWrapper/NodeHostWrapper.scss
index 7b01ea1b18..6afbc8c885 100644
--- a/src/components/NodeHostWrapper/NodeHostWrapper.scss
+++ b/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;
     }
diff --git a/src/components/NodeHostWrapper/NodeHostWrapper.tsx b/src/components/NodeHostWrapper/NodeHostWrapper.tsx
index 6ee1442da0..d380a01d68 100644
--- a/src/components/NodeHostWrapper/NodeHostWrapper.tsx
+++ b/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>
     );
 };
diff --git a/src/containers/Tenants/Tenants.scss b/src/containers/Tenants/Tenants.scss
index aa313ef345..8c1cfe7e5b 100644
--- a/src/containers/Tenants/Tenants.scss
+++ b/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 {
diff --git a/src/containers/Tenants/Tenants.tsx b/src/containers/Tenants/Tenants.tsx
index 203791482d..dfa7aa7ca7 100644
--- a/src/containers/Tenants/Tenants.tsx
+++ b/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,

From 975bcaad670fa7267c3b66bda965be8f94d9a981 Mon Sep 17 00:00:00 2001
From: mufazalov <mufazalov@yandex-team.ru>
Date: Tue, 21 May 2024 13:51:33 +0300
Subject: [PATCH 2/2] fix: review

---
 src/components/EntityStatus/EntityStatus.scss | 10 ----------
 src/components/EntityStatus/EntityStatus.tsx  |  6 +++---
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss
index 53de1dea1a..b68ae2aad8 100644
--- a/src/components/EntityStatus/EntityStatus.scss
+++ b/src/components/EntityStatus/EntityStatus.scss
@@ -44,16 +44,6 @@
 
         white-space: nowrap;
         text-overflow: ellipsis;
-
-        a {
-            text-decoration: none;
-
-            color: var(--g-color-text-link);
-        }
-
-        a:hover {
-            color: var(--g-color-text-link-hover);
-        }
     }
 
     &__link_with-left-trim {
diff --git a/src/components/EntityStatus/EntityStatus.tsx b/src/components/EntityStatus/EntityStatus.tsx
index 2e3588afe7..c9d0f91291 100644
--- a/src/components/EntityStatus/EntityStatus.tsx
+++ b/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';
 
@@ -79,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>;