feat: drawer table scroll

Author: astandrik

src/components/FixedHeightQuery/FixedHeightQuery.scss

@@ -0,0 +1,45 @@
+.kv-fixed-height-query {
+    position: relative;
+
+    overflow: hidden;
+
+    max-width: 100%;
+
+    // Target the YDBSyntaxHighlighter wrapper
+    > div {
+        display: box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--line-clamp, 4);
+        overflow: hidden;
+
+        height: 100%;
+
+        text-overflow: ellipsis;
+
+        // Target the ReactSyntaxHighlighter pre element
+        pre {
+            display: flex !important;
+            overflow: hidden !important;
+            align-items: center !important;
+
+            height: 100% !important;
+            margin: 0 !important;
+            padding: 8px !important;
+
+            white-space: pre-wrap !important;
+            word-break: break-word !important;
+        }
+
+        // Target code elements within
+        code {
+            display: box !important;
+            -webkit-box-orient: vertical !important;
+            -webkit-line-clamp: var(--line-clamp, 4) !important;
+            overflow: hidden !important;
+
+            white-space: pre-wrap !important;
+            text-overflow: ellipsis !important;
+            word-break: break-word !important;
+        }
+    }
+}

src/components/FixedHeightQuery/FixedHeightQuery.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {cn} from '../../utils/cn';
+import {YDBSyntaxHighlighter} from '../SyntaxHighlighter/YDBSyntaxHighlighter';
+
+import './FixedHeightQuery.scss';
+
+const b = cn('kv-fixed-height-query');
+
+const FIXED_PADDING = 8;
+const LINE_HEIGHT = 20;
+
+interface FixedHeightQueryProps {
+    value?: string;
+    lines?: number;
+    hasClipboardButton?: boolean;
+    clipboardButtonAlwaysVisible?: boolean;
+}
+
+export const FixedHeightQuery = ({
+    value = '',
+    lines = 4,
+    hasClipboardButton,
+    clipboardButtonAlwaysVisible,
+}: FixedHeightQueryProps) => {
+    const heightValue = `${lines * LINE_HEIGHT + FIXED_PADDING}px`;
+
+    // Remove empty lines from the beginning (lines with only whitespace are considered empty)
+    const trimmedValue = value.replace(/^(\s*\n)+/, '');
+
+    return (
+        <div
+            className={b()}
+            style={
+                {
+                    height: heightValue,
+                    '--line-clamp': lines,
+                } as React.CSSProperties & {'--line-clamp': number}
+            }
+        >
+            <YDBSyntaxHighlighter
+                language="yql"
+                text={trimmedValue}
+                withClipboardButton={
+                    hasClipboardButton
+                        ? {
+                              alwaysVisible: clipboardButtonAlwaysVisible,
+                              copyText: value,
+                              withLabel: false,
+                          }
+                        : false
+                }
+            />
+        </div>
+    );
+};

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

@@ -1,14 +1,13 @@
 import DataTable from '@gravity-ui/react-data-table';
 import type {Column, OrderType} from '@gravity-ui/react-data-table';
 
+import {FixedHeightQuery} from '../../../../../components/FixedHeightQuery/FixedHeightQuery';
 import {YDBSyntaxHighlighter} from '../../../../../components/SyntaxHighlighter/YDBSyntaxHighlighter';
-import {TruncatedQuery} from '../../../../../components/TruncatedQuery/TruncatedQuery';
 import type {KeyValueRow} from '../../../../../types/api/query';
 import {cn} from '../../../../../utils/cn';
 import {formatDateTime, formatNumber} from '../../../../../utils/dataFormatters/dataFormatters';
 import {generateHash} from '../../../../../utils/generateHash';
 import {formatToMs, parseUsToMs} from '../../../../../utils/timeParsers';
-import {MAX_QUERY_HEIGHT} from '../../../utils/constants';
 
 import {
     QUERIES_COLUMNS_IDS,
@@ -34,11 +33,7 @@ const queryTextColumn: Column<KeyValueRow> = {
     header: QUERIES_COLUMNS_TITLES.QueryText,
     render: ({row}) => (
         <div className={b('query')}>
-            <TruncatedQuery
-                value={row.QueryText?.toString()}
-                maxQueryHeight={MAX_QUERY_HEIGHT}
-                hasClipboardButton
-            />
+            <FixedHeightQuery value={row.QueryText?.toString()} lines={4} hasClipboardButton />
         </div>
     ),
     width: 500,