feat: improve appearing controls styles, get rid of custom ClipboardButton component in favor of uikit version

Raubzeug · Raubzeug · commit b53324fb134b · 2024-10-17T09:40:38.000+03:00
diff --git a/src/components/ClipboardButton/ClipboardButton.tsx b/src/components/ClipboardButton/ClipboardButton.tsx
diff --git a/src/components/ClipboardButton/index.ts b/src/components/ClipboardButton/index.ts
diff --git a/src/components/DeveloperUILinkButton/DeveloperUILinkButton.tsx b/src/components/DeveloperUILinkButton/DeveloperUILinkButton.tsx
@@ -1,4 +1,5 @@
 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';
@@ -7,16 +8,30 @@ 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">
+            <Icon data={ArrowUpRightFromSquare} size={buttonSizeToIconSize[size]} />
         </Button>
     );
 }
diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss
@@ -1,6 +1,8 @@
 @import '../../styles/mixins.scss';
 
 .entity-status {
+    position: relative;
+
     display: inline-flex;
     align-items: center;
 
@@ -17,8 +19,6 @@
         display: flex;
         flex-shrink: 0;
 
-        margin-left: var(--g-spacing-2);
-
         opacity: 0;
         color: var(--g-color-text-secondary);
 
@@ -28,8 +28,19 @@
         }
     }
 
-    &__additional-controls {
-        margin-left: var(--g-spacing-1);
+    &__controls-wrapper {
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-1);
+
+        width: 0;
+        height: 100%;
+
+        background-color: var(--g-color-base-float);
     }
 
     &__label {
diff --git a/src/components/EntityStatus/EntityStatus.tsx b/src/components/EntityStatus/EntityStatus.tsx
@@ -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>
     );
 }
diff --git a/src/components/NodeHostWrapper/NodeHostWrapper.tsx b/src/components/NodeHostWrapper/NodeHostWrapper.tsx
@@ -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
diff --git a/src/components/PaginatedTable/PaginatedTable.scss b/src/components/PaginatedTable/PaginatedTable.scss
@@ -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();
diff --git a/src/containers/App/App.scss b/src/containers/App/App.scss
@@ -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);
@@ -93,9 +93,14 @@ body,
 .ydb-paginated-table__row,
 .ydb-tree-view__item {
     &:hover {
-        & .clipboard-button {
+        & .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);
+        }
     }
 }
 
diff --git a/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx b/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx
@@ -92,7 +92,10 @@ const tabletIdColumn: Column<KeyValueRow> = {
                 hasClipboardButton
                 showStatus={false}
                 additionalControls={
-                    <DeveloperUILinkButton href={createTabletDeveloperUIHref(row.TabletId)} />
+                    <DeveloperUILinkButton
+                        href={createTabletDeveloperUIHref(row.TabletId)}
+                        size="xs"
+                    />
                 }
             />
         );
diff --git a/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx b/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx
@@ -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';
diff --git a/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx b/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.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';
diff --git a/src/containers/Tenant/Query/ExplainResult/ExplainResult.tsx b/src/containers/Tenant/Query/ExplainResult/ExplainResult.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';
diff --git a/src/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx b/src/containers/Versions/NodesTreeTitle/NodesTreeTitle.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>

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ body,`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`.g-root {`
`39`		`- --ydb-data-table-color-hover: var(--g-color-base-float-hover);`
	`39`	`+ --ydb-data-table-color-hover: var(--g-color-base-float);`
`40`	`40`
`41`	`41`	`// Colors for tablets, status icons and progress bars`
`42`	`42`	`--ydb-color-status-grey: var(--g-color-base-neutral-heavy);`
`@@ -93,9 +93,14 @@ body,`
`93`	`93`	`.ydb-paginated-table__row,`
`94`	`94`	`.ydb-tree-view__item {`
`95`	`95`	`&:hover {`
`96`		`- & .clipboard-button {`
	`96`	`+ & .entity-status__clipboard-button,`
	`97`	`+ .ydb-versions-nodes-tree-title__clipboard-button {`
`97`	`98`	`opacity: 1;`
`98`	`99`	`}`
	`100`	`+ & .entity-status__controls-wrapper {`
	`101`	`+ width: min-content;`
	`102`	`+ padding: var(--g-spacing-1);`
	`103`	`+ }`
`99`	`104`	`}`
`100`	`105`	`}`
`101`	`106`