chore(CHYT): allow to copy alias/operationId [YTFRONT-3863]

ytsaurus · Nov 29, 2023 · 2e394d6 · 2e394d6
1 parent fad8c8f
commit 2e394d6
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/packages/ui/src/ui/components/ClipboardButton/ClipboardButton.scss b/packages/ui/src/ui/components/ClipboardButton/ClipboardButton.scss
@@ -1,8 +1,10 @@
 .yt-clipboard-button {
     color: var(--g-color-text-secondary);
 
-    &_inline-margins {
-        margin: -5px 1ex;
+    &_inline-margin {
+        & .yt-tooltip {
+            margin: -5px 1ex;
+        }
     }
 }
 

diff --git a/packages/ui/src/ui/components/OperationId/OperationId.tsx b/packages/ui/src/ui/components/OperationId/OperationId.tsx
@@ -5,24 +5,41 @@ import {Text} from '@gravity-ui/uikit';
 import Link from '../../components/Link/Link';
 import format from '../../common/hammer/format';
 import {Page} from '../../../shared/constants/settings';
+import ClipboardButton from '../../components/ClipboardButton/ClipboardButton';
 
 export function OperationId({
     id,
     cluster,
     color,
+    allowCopy,
 }: {
     id?: string;
     color?: 'secondary';
     cluster: string;
+    allowCopy?: boolean;
 }) {
     const operationId = id && id !== '0-0-0-0' ? id : null;
 
     return (
         <Text variant="code-1" color={color}>
             {operationId ? (
-                <Link theme={color} url={`/${cluster}/${Page.OPERATIONS}/${operationId}`} routed>
-                    {operationId}
-                </Link>
+                <React.Fragment>
+                    <Link
+                        theme={color}
+                        url={`/${cluster}/${Page.OPERATIONS}/${operationId}`}
+                        routed
+                    >
+                        {operationId}
+                    </Link>
+                    {allowCopy && (
+                        <ClipboardButton
+                            text={operationId}
+                            view="clear"
+                            visibleOnRowHover
+                            inlineMargins
+                        />
+                    )}
+                </React.Fragment>
             ) : (
                 format.NO_VALUE
             )}

diff --git a/packages/ui/src/ui/pages/chyt/ChytPageList/ChytPageListTable.tsx b/packages/ui/src/ui/pages/chyt/ChytPageList/ChytPageListTable.tsx
@@ -9,6 +9,7 @@ import format from '../../../common/hammer/format';
 import DataTableYT, {
     DATA_TABLE_YT_SETTINGS_UNDER_TOOLBAR,
 } from '../../../components/DataTableYT/DataTableYT';
+import ClipboardButton from '../../../components/ClipboardButton/ClipboardButton';
 import ColumnHeader from '../../../components/ColumnHeader/ColumnHeader';
 import Link from '../../../components/Link/Link';
 import {OperationId} from '../../../components/OperationId/OperationId';
@@ -162,11 +163,18 @@ function useChytListColumns(cluster: string) {
                             >
                                 {row.alias}
                             </Link>
+                            <ClipboardButton
+                                text={row.alias}
+                                view="clear"
+                                visibleOnRowHover
+                                inlineMargins
+                            />
                             <div>
                                 <OperationId
                                     id={row.yt_operation_id}
                                     cluster={cluster}
                                     color="secondary"
+                                    allowCopy
                                 />
                             </div>
                         </div>