feat: queries tab top design

Author: astandrik

src/components/ConnectToDB/ConnectToDBDialog.tsx

@@ -56,7 +56,7 @@ function ConnectToDBDialog({open, onClose, database, endpoint}: ConnectToDBDialo
                         language={activeTab}
                         text={snippet}
                         transparentBackground={false}
-                        withCopy
+                        withClipboardButton={{alwaysVisible: true}}
                     />
                 </div>
                 {docsLink ? (

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.scss

@@ -16,5 +16,17 @@
         position: absolute;
         top: 13px;
         right: 14px;
+
+        opacity: 0;
+
+        pointer-events: all;
+        &_visible {
+            opacity: 1;
+        }
+    }
+
+    .data-table__row:hover &__copy,
+    .ydb-paginated-table__row:hover &__copy {
+        opacity: 1;
     }
 }

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx

@@ -23,20 +23,28 @@ async function registerLanguage(lang: Language) {
     }
 }
 
+interface ClipboardButtonOptions {
+    alwaysVisible?: boolean;
+    copyText?: string;
+    withLabel?: boolean;
+}
+
+export type WithClipboardButtonProp = ClipboardButtonOptions | boolean;
+
 type YDBSyntaxHighlighterProps = {
     text: string;
     language: Language;
     className?: string;
     transparentBackground?: boolean;
-    withCopy?: boolean;
+    withClipboardButton?: WithClipboardButtonProp;
 };
 
 export function YDBSyntaxHighlighter({
     text,
     language,
     className,
     transparentBackground = true,
-    withCopy,
+    withClipboardButton,
 }: YDBSyntaxHighlighterProps) {
     const [highlighterKey, setHighlighterKey] = React.useState('');
 
@@ -51,16 +59,27 @@ export function YDBSyntaxHighlighter({
     }, [language]);
 
     const renderCopyButton = () => {
-        if (withCopy) {
+        if (withClipboardButton) {
             return (
-                <div className={b('sticky-container')}>
+                <div className={b('sticky-container')} onClick={(e) => e.stopPropagation()}>
                     <ClipboardButton
                         view="flat-secondary"
                         size="s"
-                        className={b('copy')}
-                        text={text}
+                        className={b('copy', {
+                            visible:
+                                typeof withClipboardButton === 'object' &&
+                                withClipboardButton.alwaysVisible,
+                        })}
+                        text={
+                            (typeof withClipboardButton === 'object' &&
+                                withClipboardButton.copyText) ||
+                            text
+                        }
                     >
-                        {i18n('copy')}
+                        {typeof withClipboardButton === 'object' &&
+                        withClipboardButton.withLabel === false
+                            ? null
+                            : i18n('copy')}
                     </ClipboardButton>
                 </div>
             );

src/components/TruncatedQuery/TruncatedQuery.tsx

@@ -10,9 +10,16 @@ const b = cn('kv-truncated-query');
 interface TruncatedQueryProps {
     value?: string;
     maxQueryHeight?: number;
+    hasClipboardButton?: boolean;
+    clipboardButtonAlwaysVisible?: boolean;
 }
 
-export const TruncatedQuery = ({value = '', maxQueryHeight = 6}: TruncatedQueryProps) => {
+export const TruncatedQuery = ({
+    value = '',
+    maxQueryHeight = 6,
+    hasClipboardButton,
+    clipboardButtonAlwaysVisible,
+}: TruncatedQueryProps) => {
     const lines = value.split('\n');
     const truncated = lines.length > maxQueryHeight;
 
@@ -22,10 +29,37 @@ export const TruncatedQuery = ({value = '', maxQueryHeight = 6}: TruncatedQueryP
             '\n...\nThe request was truncated. Click on the line to show the full query on the query tab';
         return (
             <React.Fragment>
-                <YDBSyntaxHighlighter language="yql" className={b()} text={content} />
+                <YDBSyntaxHighlighter
+                    language="yql"
+                    className={b()}
+                    text={content}
+                    withClipboardButton={
+                        hasClipboardButton
+                            ? {
+                                  alwaysVisible: clipboardButtonAlwaysVisible,
+                                  copyText: value,
+                                  withLabel: false,
+                              }
+                            : false
+                    }
+                />
                 <span className={b('message', {color: 'secondary'})}>{message}</span>
             </React.Fragment>
         );
     }
-    return <YDBSyntaxHighlighter language="yql" text={value} />;
+    return (
+        <YDBSyntaxHighlighter
+            language="yql"
+            text={value}
+            withClipboardButton={
+                hasClipboardButton
+                    ? {
+                          alwaysVisible: clipboardButtonAlwaysVisible,
+                          copyText: value,
+                          withLabel: false,
+                      }
+                    : false
+            }
+        />
+    );
 };

src/containers/Tenant/Diagnostics/TopQueries/columns/columns.tsx

@@ -36,7 +36,11 @@ const queryTextColumn: Column<KeyValueRow> = {
     sortAccessor: (row) => Number(row.CPUTimeUs),
     render: ({row}) => (
         <div className={b('query')}>
-            <TruncatedQuery value={row.QueryText?.toString()} maxQueryHeight={MAX_QUERY_HEIGHT} />
+            <TruncatedQuery
+                value={row.QueryText?.toString()}
+                maxQueryHeight={MAX_QUERY_HEIGHT}
+                hasClipboardButton
+            />
         </div>
     ),
     sortable: false,
@@ -81,7 +85,13 @@ const oneLineQueryTextColumn: Column<KeyValueRow> = {
     name: TOP_QUERIES_COLUMNS_IDS.OneLineQueryText,
     header: TOP_QUERIES_COLUMNS_TITLES.OneLineQueryText,
     render: ({row}) => (
-        <YDBSyntaxHighlighter language="yql" text={row.QueryText?.toString() || ''} />
+        <YDBSyntaxHighlighter
+            language="yql"
+            text={row.QueryText?.toString() || ''}
+            withClipboardButton={{
+                withLabel: false,
+            }}
+        />
     ),
     sortable: false,
     width: 500,