fix: review

Author: Raubzeug

src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss

@@ -1,12 +1,5 @@
-.developer-ui-link-button {
-    display: none;
-
-    &_visible {
-        display: inline-block;
-    }
+@import '../../styles/mixins.scss';
 
-    .data-table__row:hover &,
-    .ydb-paginated-table__row:hover & {
-        display: inline-block;
-    }
+.developer-ui-link-button {
+    @include table-hover-appearing-button();
 }

src/components/DeveloperUILinkButton/DeveloperUILinkButton.tsx

@@ -4,6 +4,8 @@ import {Button, Icon} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 
+import i18n from './i18n';
+
 import './DeveloperUILinkButton.scss';
 
 const b = cn('developer-ui-link-button');
@@ -30,7 +32,13 @@ export function DeveloperUILinkButton({
     size = 's',
 }: DeveloperUiLinkProps) {
     return (
-        <Button size={size} href={href} className={b({visible}, className)} target="_blank">
+        <Button
+            size={size}
+            href={href}
+            className={b({visible}, className)}
+            target="_blank"
+            title={i18n('action_go-to', {href})}
+        >
             <Icon data={ArrowUpRightFromSquare} size={buttonSizeToIconSize[size]} />
         </Button>
     );

src/components/DeveloperUILinkButton/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "action_go-to": "Go to {{href}}"
+}

src/components/DeveloperUILinkButton/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-developer-ui-button';
+
+export default registerKeysets(COMPONENT, {en});

src/components/EntityStatus/EntityStatus.scss

@@ -16,16 +16,9 @@
     }
 
     &__clipboard-button {
-        display: flex;
-        flex-shrink: 0;
-
-        opacity: 0;
         color: var(--g-color-text-secondary);
 
-        &_visible,
-        &:focus-visible {
-            opacity: 1;
-        }
+        @include table-hover-appearing-button();
     }
 
     &__controls-wrapper {
@@ -41,6 +34,13 @@
         height: 100%;
 
         background-color: var(--g-color-base-float);
+
+        .data-table__row:hover &,
+        .ydb-paginated-table__row:hover &,
+        .ydb-tree-view__item & {
+            width: min-content;
+            padding: var(--g-spacing-1);
+        }
     }
 
     &__label {

src/containers/App/App.scss

@@ -89,21 +89,6 @@ body,
     color: var(--g-color-text-danger);
 }
 
-.data-table__row,
-.ydb-paginated-table__row,
-.ydb-tree-view__item {
-    &:hover {
-        & .entity-status__clipboard-button,
-        .ydb-versions-nodes-tree-title__clipboard-button {
-            opacity: 1;
-        }
-        & .entity-status__controls-wrapper {
-            width: min-content;
-            padding: var(--g-spacing-1);
-        }
-    }
-}
-
 .g-root .data-table_highlight-rows .data-table__row:hover {
     background: var(--ydb-data-table-color-hover);
 }

src/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss

@@ -65,5 +65,9 @@
 
         opacity: 0;
         color: var(--g-color-text-secondary);
+        .ydb-tree-view__item:hover &,
+        &:focus-visible {
+            opacity: 1;
+        }
     }
 }

src/styles/mixins.scss

@@ -368,3 +368,29 @@
         --entity-state-border-color: var(--g-color-line-generic-hover);
     }
 }
+
+@mixin table-hover-appearing-button {
+    opacity: 0;
+
+    &_visible,
+    &:focus-visible {
+        opacity: 1;
+    }
+    &:focus-visible {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+
+        background-color: var(--g-color-base-float);
+    }
+    .data-table__row:hover &,
+    .ydb-paginated-table__row:hover & {
+        opacity: 1;
+    }
+    .data-table__row:hover &:focus-visible,
+    .ydb-paginated-table__row:hover &:focus-visible {
+        position: static;
+
+        background-color: unset;
+    }
+}