feat: improve appearing controls styles (#1436)

Author: Raubzeug

src/components/ClipboardButton/ClipboardButton.tsx

@@ -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/ClipboardButton/index.ts

@@ -1,22 +1,45 @@
 import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
+import type {ButtonSize} from '@gravity-ui/uikit';
 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');
 
+const buttonSizeToIconSize: Record<ButtonSize, number> = {
+    xs: 14,
+    s: 16,
+    m: 16,
+    l: 18,
+    xl: 18,
+};
+
 interface DeveloperUiLinkProps {
     className?: string;
     visible?: boolean;
     href: string;
+    size?: ButtonSize;
 }
 
-export function DeveloperUILinkButton({href, visible = false, className}: DeveloperUiLinkProps) {
+export function DeveloperUILinkButton({
+    href,
+    visible = false,
+    className,
+    size = 's',
+}: DeveloperUiLinkProps) {
     return (
-        <Button size="s" href={href} className={b({visible}, className)} target="_blank">
-            <Icon data={ArrowUpRightFromSquare} />
+        <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/DeveloperUILinkButton.scss

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

src/components/DeveloperUILinkButton/DeveloperUILinkButton.tsx

@@ -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/DeveloperUILinkButton/i18n/en.json

@@ -1,6 +1,8 @@
 @import '../../styles/mixins.scss';
 
 .entity-status {
+    position: relative;
+
     display: inline-flex;
     align-items: center;
 
@@ -14,24 +16,33 @@
     }
 
     &__clipboard-button {
+        color: var(--g-color-text-secondary);
+
+        @include table-hover-appearing-button();
+    }
+
+    &__controls-wrapper {
+        position: absolute;
+        top: 0;
+        right: 0;
+
         display: flex;
-        flex-shrink: 0;
+        align-items: center;
+        gap: var(--g-spacing-1);
 
-        margin-left: var(--g-spacing-2);
+        width: 0;
+        height: 100%;
 
-        opacity: 0;
-        color: var(--g-color-text-secondary);
+        background-color: var(--g-color-base-float);
 
-        &_visible,
-        &:focus-visible {
-            opacity: 1;
+        .data-table__row:hover &,
+        .ydb-paginated-table__row:hover &,
+        .ydb-tree-view__item & {
+            width: min-content;
+            padding: var(--g-spacing-1);
         }
     }
 
-    &__additional-controls {
-        margin-left: var(--g-spacing-1);
-    }
-
     &__label {
         margin-right: 2px;
 

src/components/DeveloperUILinkButton/i18n/index.ts

@@ -1,8 +1,7 @@
-import {Link as UIKitLink} from '@gravity-ui/uikit';
+import {ClipboardButton, Link as UIKitLink} from '@gravity-ui/uikit';
 
 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';
@@ -95,18 +94,21 @@ export function EntityStatus({
                 </span>
             )}
             <span className={b('link', {'with-left-trim': withLeftTrim})}>{renderLink()}</span>
-            {hasClipboardButton && (
-                <ClipboardButton
-                    text={name}
-                    size="s"
-                    className={b('clipboard-button', {
-                        visible: clipboardButtonAlwaysVisible,
-                    })}
-                />
-            )}
-            {additionalControls && (
-                <span className={b('additional-controls ')}>{additionalControls}</span>
-            )}
+            <div className={b('controls-wrapper')}>
+                {hasClipboardButton && (
+                    <ClipboardButton
+                        text={name}
+                        size="xs"
+                        view="normal"
+                        className={b('clipboard-button', {
+                            visible: clipboardButtonAlwaysVisible,
+                        })}
+                    />
+                )}
+                {additionalControls && (
+                    <span className={b('additional-controls')}>{additionalControls}</span>
+                )}
+            </div>
         </div>
     );
 }

src/components/EntityStatus/EntityStatus.scss

@@ -42,7 +42,9 @@ export const NodeHostWrapper = ({node, getNodeRef, database}: NodeHostWrapperPro
           })
         : undefined;
 
-    const additionalControls = nodeHref ? <DeveloperUILinkButton href={nodeHref} /> : null;
+    const additionalControls = nodeHref ? (
+        <DeveloperUILinkButton href={nodeHref} size="xs" />
+    ) : null;
 
     return (
         <CellWithPopover

src/components/EntityStatus/EntityStatus.tsx

@@ -7,7 +7,7 @@
     --paginated-table-cell-horizontal-padding: 10px;
 
     --paginated-table-border-color: var(--g-color-base-generic-hover);
-    --paginated-table-hover-color: var(--g-color-base-float-hover);
+    --paginated-table-hover-color: var(--g-color-base-float);
 
     width: 100%;
     @include body-2-typography();

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -36,7 +36,7 @@ body,
 }
 
 .g-root {
-    --ydb-data-table-color-hover: var(--g-color-base-float-hover);
+    --ydb-data-table-color-hover: var(--g-color-base-float);
 
     // Colors for tablets, status icons and progress bars
     --ydb-color-status-grey: var(--g-color-base-neutral-heavy);
@@ -89,16 +89,6 @@ body,
     color: var(--g-color-text-danger);
 }
 
-.data-table__row,
-.ydb-paginated-table__row,
-.ydb-tree-view__item {
-    &:hover {
-        & .clipboard-button {
-            opacity: 1;
-        }
-    }
-}
-
 .g-root .data-table_highlight-rows .data-table__row:hover {
     background: var(--ydb-data-table-color-hover);
 }

src/components/PaginatedTable/PaginatedTable.scss

@@ -92,7 +92,10 @@ const tabletIdColumn: Column<KeyValueRow> = {
                 hasClipboardButton
                 showStatus={false}
                 additionalControls={
-                    <DeveloperUILinkButton href={createTabletDeveloperUIHref(row.TabletId)} />
+                    <DeveloperUILinkButton
+                        href={createTabletDeveloperUIHref(row.TabletId)}
+                        size="xs"
+                    />
                 }
             />
         );

src/containers/App/App.scss

@@ -2,13 +2,12 @@ import React from 'react';
 
 import {DefinitionList, HelpPopover} from '@gravity-ui/components';
 import type {DefinitionListSingleItem} from '@gravity-ui/components/build/esm/components/DefinitionList/types';
-import {Flex, Tabs} from '@gravity-ui/uikit';
+import {ClipboardButton, Flex, Tabs} from '@gravity-ui/uikit';
 import qs from 'qs';
 import {Link, useLocation} from 'react-router-dom';
 import {StringParam, useQueryParam} from 'use-query-params';
 
 import {AsyncReplicationState} from '../../../components/AsyncReplicationState';
-import {ClipboardButton} from '../../../components/ClipboardButton';
 import {toFormattedSize} from '../../../components/FormattedBytes/utils';
 import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
 import SplitPane from '../../../components/SplitPane';

src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 
 import type {ControlGroupOption} from '@gravity-ui/uikit';
-import {RadioButton, Tabs, Text} from '@gravity-ui/uikit';
+import {ClipboardButton, RadioButton, Tabs, Text} from '@gravity-ui/uikit';
 import JSONTree from 'react-json-inspector';
 
-import {ClipboardButton} from '../../../../components/ClipboardButton';
 import Divider from '../../../../components/Divider/Divider';
 import ElapsedTime from '../../../../components/ElapsedTime/ElapsedTime';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import {RadioButton} from '@gravity-ui/uikit';
+import {ClipboardButton, RadioButton} from '@gravity-ui/uikit';
 
-import {ClipboardButton} from '../../../../components/ClipboardButton';
 import Divider from '../../../../components/Divider/Divider';
 import ElapsedTime from '../../../../components/ElapsedTime/ElapsedTime';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';

src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx

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

src/containers/Tenant/Query/ExplainResult/ExplainResult.tsx

@@ -1,6 +1,5 @@
-import {Progress} from '@gravity-ui/uikit';
+import {ClipboardButton, Progress} from '@gravity-ui/uikit';
 
-import {ClipboardButton} from '../../../components/ClipboardButton';
 import type {VersionValue} from '../../../types/versions';
 import {cn} from '../../../utils/cn';
 import type {PreparedNodeSystemState} from '../../../utils/nodes';
@@ -46,7 +45,12 @@ export const NodesTreeTitle = ({
                 {title ? (
                     <span className={b('overview-title')}>
                         {title}
-                        <ClipboardButton text={title} size="s" className={b('clipboard-button')} />
+                        <ClipboardButton
+                            text={title}
+                            size="s"
+                            className={b('clipboard-button')}
+                            view="normal"
+                        />
                     </span>
                 ) : null}
             </div>

src/containers/Versions/NodesTreeTitle/NodesTreeTitle.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;
+    }
+}