ydb-embedded-ui 4.29.0 → 4.30.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.30.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.29.0...v4.30.0) (2024-01-16)
+
+
+### Features
+
+* add clipboard button to nodes tree titles ([#648](https://github.com/ydb-platform/ydb-embedded-ui/issues/648)) ([1411651](https://github.com/ydb-platform/ydb-embedded-ui/commit/141165173189be064e9e9314b42aa3eb7fce9c69))
+
 ## [4.29.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.28.0...v4.29.0) (2024-01-12)
 
 

package/README.md

@@ -2,7 +2,8 @@
 
 Local viewer for YDB clusters
 
-[Docs for users](https://ydb.tech/en/docs/maintenance/embedded_monitoring/ydb_monitoring)
+* [Docs for users](https://ydb.tech/en/docs/maintenance/embedded_monitoring/ydb_monitoring)
+* [Project Roadmap](ROADMAP.md)
 
 ## Preview
 

package/dist/components/ClipboardButton/ClipboardButton.tsx

@@ -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>
+    );
+}

package/dist/components/ClipboardButton/index.ts

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

package/dist/components/EntityStatus/EntityStatus.js

@@ -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>
         );

package/dist/components/EntityStatus/EntityStatus.scss

@@ -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;
         }
     }
 

package/dist/containers/App/App.scss

@@ -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 {

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -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')}
                     />
                 )}

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx

@@ -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}
             />
         );

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss

@@ -17,10 +17,12 @@
             margin-left: 30px;
         }
     }
+
     &__overview-container {
         display: flex;
         align-items: center;
     }
+
     &__info-label {
         font-weight: 200;
 
@@ -52,4 +54,17 @@
             width: 200px;
         }
     }
+
+    &__overview-title {
+        display: flex;
+        align-items: center;
+    }
+
+    &__clipboard-button {
+        visibility: hidden;
+
+        margin-left: 8px;
+
+        color: var(--yc-color-text-secondary);
+    }
 }

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx

@@ -1,11 +1,9 @@
-import block from 'bem-cn-lite';
-
 import {Progress} from '@gravity-ui/uikit';
-
-import type {VersionValue} from '../../../types/versions';
+import block from 'bem-cn-lite';
+import {ClipboardButton} from '../../../components/ClipboardButton';
 import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
+import type {VersionValue} from '../../../types/versions';
 import type {GroupedNodesItem} from '../types';
-
 import './NodesTreeTitle.scss';
 
 const b = block('ydb-versions-nodes-tree-title');
@@ -43,7 +41,12 @@ export const NodesTreeTitle = ({
                 {versionColor ? (
                     <div className={b('version-color')} style={{background: versionColor}} />
                 ) : null}
-                <span className={b('overview-title')}>{title}</span>
+                {title ? (
+                    <span className={b('overview-title')}>
+                        {title}
+                        <ClipboardButton text={title} size="s" className={b('clipboard-button')} />
+                    </span>
+                ) : null}
             </div>
             <div className={b('overview-info')}>
                 <div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.29.0",
+  "version": "4.30.0",
   "files": [
     "dist"
   ],
@@ -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/dist/components/CopyToClipboard/CopyToClipboard.tsx

@@ -1,38 +0,0 @@
-import {Button, CopyToClipboard as CopyToClipboardUiKit} from '@gravity-ui/uikit';
-import createToast from '../../utils/createToast';
-import {Icon} from '../Icon';
-
-interface CopyToClipboardProps {
-    text: string;
-    title?: string;
-    disabled?: boolean;
-    toastText?: string;
-}
-
-function CopyToClipboard(props: CopyToClipboardProps) {
-    return (
-        <CopyToClipboardUiKit text={props.text} timeout={1000}>
-            {(state) => {
-                if (state === 'success') {
-                    createToast({
-                        name: 'Copied',
-                        title: props.toastText ?? 'Data was copied to clipboard successfully',
-                        type: state,
-                    });
-                }
-
-                return (
-                    <Button
-                        disabled={props.disabled}
-                        title={props.title ?? 'Copy'}
-                        view="flat-secondary"
-                    >
-                        <Icon name="copy" viewBox={'0 0 16 16'} width={16} height={16} />
-                    </Button>
-                );
-            }}
-        </CopyToClipboardUiKit>
-    );
-}
-
-export default CopyToClipboard;