feat(QueryResultTable): add per-row clipboard copy button to query results

Author: Arunkoo

src/components/QueryResultTable/QueryResultTable.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import DataTable from '@gravity-ui/react-data-table';
 import type {Column, Settings} from '@gravity-ui/react-data-table';
+import {ClipboardButton} from '@gravity-ui/uikit';
 
 import type {ColumnType, KeyValueRow} from '../../types/api/query';
 import {cn} from '../../utils/cn';
@@ -28,32 +29,49 @@ export const b = cn('ydb-query-result-table');
 
 const WIDTH_PREDICTION_ROWS_COUNT = 100;
 
+//helper function to convert a row to TSV format for copying to clipboard
+const rowToTsv = (row: KeyValueRow) =>
+    Object.values(row)
+        .map((v) => (typeof v === 'object' ? JSON.stringify(v) : String(v)))
+        .join('\t');
+
 const prepareTypedColumns = (columns: ColumnType[], data: KeyValueRow[] | undefined) => {
     if (!columns.length) {
         return [];
     }
 
     const dataSlice = data?.slice(0, WIDTH_PREDICTION_ROWS_COUNT);
 
-    return columns.map(({name, type}) => {
+    const dataColumns = columns.map(({name, type}) => {
         const columnType = getColumnType(type);
 
         const column: Column<KeyValueRow> = {
             name,
             width: getColumnWidth({data: dataSlice, name}),
             align: columnType === 'number' ? DataTable.RIGHT : DataTable.LEFT,
             render: ({row}) => {
-                const data = row[name];
+                const rowData = row[name];
                 const normalizedData =
                     columnType === 'binary-string' && typeof data === 'string'
-                        ? JSON.stringify(data).slice(1, -1)
-                        : String(data);
+                        ? JSON.stringify(rowData).slice(1, -1)
+                        : String(rowData);
                 return <Cell value={normalizedData} />;
             },
         };
 
         return column;
     });
+
+    const copyColumn: Column<KeyValueRow> = {
+        name: 'copy',
+        header: '',
+        width: 40,
+        render: ({row}) => (
+            <ClipboardButton text={rowToTsv(row)} view="flat-secondary" size="s" title="Copy row" />
+        ),
+    };
+
+    return [...dataColumns, copyColumn];
 };
 
 const prepareGenericColumns = (data: KeyValueRow[] | undefined) => {
@@ -63,7 +81,7 @@ const prepareGenericColumns = (data: KeyValueRow[] | undefined) => {
 
     const dataSlice = data?.slice(0, WIDTH_PREDICTION_ROWS_COUNT);
 
-    return Object.keys(data[0]).map((name) => {
+    const dataColumns = Object.keys(data[0]).map((name) => {
         const column: Column<KeyValueRow> = {
             name,
             width: getColumnWidth({data: dataSlice, name}),
@@ -73,6 +91,17 @@ const prepareGenericColumns = (data: KeyValueRow[] | undefined) => {
 
         return column;
     });
+
+    const copyColumn: Column<KeyValueRow> = {
+        name: 'copy',
+        header: '',
+        width: 40,
+        render: ({row}) => (
+            <ClipboardButton text={rowToTsv(row)} view="flat-secondary" size="s" title="Copy row" />
+        ),
+    };
+
+    return [...dataColumns, copyColumn];
 };
 
 const getRowIndex = (_: unknown, index: number) => index;