feat: add clipboard button to nodes tree titles (#648)

Author: vovaspace

package-lock.json

@@ -46,7 +46,7 @@
     "sass": "1.32.8",
     "url": "^0.11.0",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "^3.5.0"
+    "ydb-ui-components": "^3.6.0"
   },
   "scripts": {
     "start": "react-app-rewired start",

package.json

@@ -0,0 +1,52 @@
+import {
+    Button,
+    ButtonProps,
+    ClipboardIcon,
+    CopyToClipboard as CopyToClipboardUiKit,
+    CopyToClipboardStatus,
+    Tooltip,
+} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+const b = cn('clipboard-button');
+
+interface ClipboardButtonProps extends Pick<ButtonProps, 'disabled' | 'size' | 'title' | 'view'> {
+    className?: string;
+    text: string;
+}
+
+/**
+ * An inner component required
+ * because `react-copy-to-clipboard` doesn't work with `Tooltip` otherwise.
+ */
+function InnerButton({
+    className,
+    status,
+    title,
+    ...props
+}: Omit<ClipboardButtonProps, 'text'> & {status: CopyToClipboardStatus}) {
+    return (
+        <Tooltip
+            content={status === CopyToClipboardStatus.Success ? 'Copied!' : title || 'Copy'}
+            /**
+             * Auto-placement has a bug with text changing.
+             * @link https://github.com/ydb-platform/ydb-embedded-ui/pull/648#discussion_r1453530092
+             */
+            placement="bottom-start"
+        >
+            <Button {...props} className={b(null, className)}>
+                <Button.Icon>
+                    <ClipboardIcon status={status} size={16} />
+                </Button.Icon>
+            </Button>
+        </Tooltip>
+    );
+}
+
+export function ClipboardButton({text, ...props}: ClipboardButtonProps) {
+    return (
+        <CopyToClipboardUiKit text={text} timeout={1000}>
+            {(status) => <InnerButton {...props} status={status} />}
+        </CopyToClipboardUiKit>
+    );
+}

src/components/ClipboardButton/ClipboardButton.tsx

@@ -0,0 +1 @@
+export * from './ClipboardButton';

src/components/ClipboardButton/index.ts

@@ -1,14 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import {Icon, Link as UIKitLink} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+import React from 'react';
 import {Link} from 'react-router-dom';
-import {ClipboardButton, Link as UIKitLink, Button, Icon} from '@gravity-ui/uikit';
-
-import circleInfoIcon from '../../assets/icons/circle-info.svg';
 import circleExclamationIcon from '../../assets/icons/circle-exclamation.svg';
-import triangleExclamationIcon from '../../assets/icons/triangle-exclamation.svg';
+import circleInfoIcon from '../../assets/icons/circle-info.svg';
 import circleTimesIcon from '../../assets/icons/circle-xmark.svg';
-
+import triangleExclamationIcon from '../../assets/icons/triangle-exclamation.svg';
+import {ClipboardButton} from '../ClipboardButton';
 import './EntityStatus.scss';
 
 const icons = {
@@ -121,15 +120,13 @@ class EntityStatus extends React.Component {
                     {this.renderLink()}
                 </span>
                 {hasClipboardButton && (
-                    <Button
-                        component="span"
+                    <ClipboardButton
+                        text={name}
                         size="s"
                         className={b('clipboard-button', {
                             visible: this.props.clipboardButtonAlwaysVisible,
                         })}
-                    >
-                        <ClipboardButton text={name} size={16} />
-                    </Button>
+                    />
                 )}
             </div>
         );

src/components/CopyToClipboard/CopyToClipboard.tsx

@@ -10,25 +10,14 @@
     @include body-2-typography();
 
     &__clipboard-button {
-        display: none;
-        justify-content: center;
-        align-items: center;
+        visibility: hidden;
 
         margin-left: 8px;
 
         color: var(--yc-color-text-secondary);
 
-        .yc-button__text {
-            margin: 0;
-        }
-
-        .yc-clipboard-button {
-            width: 24px;
-            height: 24px;
-        }
-
         &_visible {
-            display: inline-flex;
+            visibility: visible;
         }
     }
 

src/components/EntityStatus/EntityStatus.js

@@ -107,21 +107,21 @@ body,
         border-right: unset;
         border-left: unset;
     }
-
-    .yc-clipboard-button {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-    }
 }
 
 .error {
     color: var(--g-color-text-danger);
 }
 
-.data-table__row:hover .entity-status__clipboard-button,
-.ydb-virtual-table__row:hover .entity-status__clipboard-button {
-    display: flex;
+.data-table__row,
+.ydb-virtual-table__row,
+.ydb-tree-view__item {
+    &:hover,
+    &:focus-within {
+        & .clipboard-button {
+            visibility: visible;
+        }
+    }
 }
 
 .g-root .data-table_highlight-rows .data-table__row:hover {

src/components/EntityStatus/EntityStatus.scss

@@ -1,60 +1,53 @@
+import {HelpPopover} from '@gravity-ui/components';
+import {Button, Tabs} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import qs from 'qs';
 import React, {ReactNode, useEffect, useReducer} from 'react';
 import {useDispatch} from 'react-redux';
 import {useLocation} from 'react-router';
 import {Link} from 'react-router-dom';
-import qs from 'qs';
-import cn from 'bem-cn-lite';
-
-import {Button, Tabs} from '@gravity-ui/uikit';
-import {HelpPopover} from '@gravity-ui/components';
-
-import SplitPane from '../../../components/SplitPane';
-import CopyToClipboard from '../../../components/CopyToClipboard/CopyToClipboard';
+import {ClipboardButton} from '../../../components/ClipboardButton';
+import {Icon} from '../../../components/Icon';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
 import {
     CDCStreamOverview,
     PersQueueGroupOverview,
 } from '../../../components/InfoViewer/schemaOverview';
-import {Icon} from '../../../components/Icon';
 import {Loader} from '../../../components/Loader';
-
+import SplitPane from '../../../components/SplitPane';
+import routes, {createHref} from '../../../routes';
+import {setShowPreview} from '../../../store/reducers/schema/schema';
+import {
+    TENANT_PAGES_IDS,
+    TENANT_QUERY_TABS_ID,
+    TENANT_SUMMARY_TABS_IDS,
+} from '../../../store/reducers/tenant/constants';
+import {setQueryTab, setSummaryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import {
     EPathSubType,
     EPathType,
     TColumnDescription,
     TColumnTableDescription,
 } from '../../../types/api/schema';
-import routes, {createHref} from '../../../routes';
-import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
-import {useTypedSelector} from '../../../utils/hooks';
 import {
     DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED,
     DEFAULT_SIZE_TENANT_SUMMARY_KEY,
 } from '../../../utils/constants';
-import {setShowPreview} from '../../../store/reducers/schema/schema';
-import {setQueryTab, setSummaryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
-import {
-    TENANT_PAGES_IDS,
-    TENANT_QUERY_TABS_ID,
-    TENANT_SUMMARY_TABS_IDS,
-} from '../../../store/reducers/tenant/constants';
-
-import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
-import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
+import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
+import {useTypedSelector} from '../../../utils/hooks';
 import {Acl} from '../Acl/Acl';
-import {ExternalTableSummary} from '../Info/ExternalTable/ExternalTable';
+import i18n from '../i18n';
 import {ExternalDataSourceSummary} from '../Info/ExternalDataSource/ExternalDataSource';
-
+import {ExternalTableSummary} from '../Info/ExternalTable/ExternalTable';
+import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
+import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
 import {TenantTabsGroups, TENANT_INFO_TABS, TENANT_SCHEMA_TAB} from '../TenantPages';
 import {
     PaneVisibilityActionTypes,
-    paneVisibilityToggleReducerCreator,
     PaneVisibilityToggleButtons,
+    paneVisibilityToggleReducerCreator,
 } from '../utils/paneVisibilityToggleHelpers';
 import {isColumnEntityType, isExternalTable, isIndexTable, isTableType} from '../utils/schema';
-
-import i18n from '../i18n';
-
 import './ObjectSummary.scss';
 
 const b = cn('object-summary');
@@ -306,8 +299,9 @@ export function ObjectSummary({
                     </Button>
                 )}
                 {currentSchemaPath && (
-                    <CopyToClipboard
+                    <ClipboardButton
                         text={currentSchemaPath}
+                        view="flat-secondary"
                         title={i18n('summary.copySchemaPath')}
                     />
                 )}

src/containers/App/App.scss

@@ -1,31 +1,25 @@
-import React, {useEffect, useState} from 'react';
-import {useDispatch} from 'react-redux';
+import {RadioButton, Tabs} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
+import React, {useEffect, useState} from 'react';
 import JSONTree from 'react-json-inspector';
-
-import {RadioButton, Tabs} from '@gravity-ui/uikit';
-
-import CopyToClipboard from '../../../../components/CopyToClipboard/CopyToClipboard';
+import {useDispatch} from 'react-redux';
+import {ClipboardButton} from '../../../../components/ClipboardButton';
 import Divider from '../../../../components/Divider/Divider';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
 import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
 import {QueryResultTable} from '../../../../components/QueryResultTable/QueryResultTable';
-
+import {disableFullscreen} from '../../../../store/reducers/fullscreen';
+import type {ColumnType, KeyValueRow} from '../../../../types/api/query';
 import type {ValueOf} from '../../../../types/common';
 import type {IQueryResult, QueryErrorResponse} from '../../../../types/store/query';
-import type {ColumnType, KeyValueRow} from '../../../../types/api/query';
-import {disableFullscreen} from '../../../../store/reducers/fullscreen';
-import {prepareQueryError} from '../../../../utils/query';
-import {useTypedSelector} from '../../../../utils/hooks';
 import {getArray} from '../../../../utils';
-
+import {useTypedSelector} from '../../../../utils/hooks';
+import {prepareQueryError} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
-
 import {ResultIssues} from '../Issues/Issues';
 import {QueryDuration} from '../QueryDuration/QueryDuration';
 import {getPreparedResult} from '../utils/getPreparedResult';
-
 import './ExecuteResult.scss';
 
 const b = cn('ydb-query-execute-result');
@@ -115,10 +109,10 @@ export function ExecuteResult({
 
     const renderClipboardButton = () => {
         return (
-            <CopyToClipboard
+            <ClipboardButton
                 text={textResults}
+                view="flat-secondary"
                 title="Copy results"
-                toastText="Results were copied to clipboard successfully"
                 disabled={copyDisabled}
             />
         );