feat: display view query text

playwright.config.ts

@@ -19,6 +19,7 @@ const config: PlaywrightTestConfig = {
         : {
               command: 'npm run dev',
               port: 3000,
+              reuseExistingServer: true,
           },
     use: {
         baseURL: baseUrl || 'http://localhost:3000/',

src/components/Snippet/Snippet.scss

@@ -0,0 +1,9 @@
+.snippet {
+    &__content {
+        border: 1px solid var(--g-color-line-generic);
+
+        * {
+            cursor: pointer !important;
+        }
+    }
+}

src/components/Snippet/Snippet.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import {useThemeValue} from '@gravity-ui/uikit';
+import type {editor} from 'monaco-editor';
+import 'monaco-yql-languages/build/monaco.contribution';
+import MonacoEditor from 'react-monaco-editor';
+
+import {cn} from '../../utils/cn';
+import {YQL_LANGUAGE_ID} from '../../utils/monaco/constants';
+
+import './Snippet.scss';
+
+const block = cn('snippet');
+const SNIPPET_LENGTH = 7;
+
+export interface SnippetProps {
+    className?: string;
+    children: string;
+    language?: string;
+}
+
+export const Snippet = ({
+    className,
+    children,
+    language = YQL_LANGUAGE_ID,
+}: SnippetProps): JSX.Element => {
+    const themeValue = useThemeValue();
+    const theme = `vs-${themeValue}`;
+
+    const editorOptions = React.useMemo<editor.IStandaloneEditorConstructionOptions>(
+        () => ({
+            readOnly: true,
+            minimap: {enabled: false},
+            scrollBeyondLastLine: false,
+            lineNumbers: 'off' as const,
+            scrollbar: {
+                vertical: 'visible',
+                horizontal: 'visible',
+                verticalScrollbarSize: 8,
+                horizontalScrollbarSize: 8,
+                alwaysConsumeMouseWheel: false,
+            },
+            renderLineHighlight: 'none' as const,
+            overviewRulerLanes: 0,
+            hideCursorInOverviewRuler: true,
+            overviewRulerBorder: false,
+            lineDecorationsWidth: 0,
+            contextmenu: false,
+            fontSize: 13,
+            lineHeight: 20,
+            domReadOnly: true,
+            automaticLayout: true,
+        }),
+        [],
+    );
+
+    return (
+        <div className={block(null, className)}>
+            <div className={block('content')}>
+                <MonacoEditor
+                    language={language}
+                    theme={theme}
+                    value={children}
+                    height={SNIPPET_LENGTH * 20}
+                    options={editorOptions}
+                />
+            </div>
+        </div>
+    );
+};

src/components/TruncatedQuery/TruncatedQuery.tsx

@@ -1,33 +1,17 @@
-import React from 'react';
-
 import {cn} from '../../utils/cn';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
+import {Snippet} from '../Snippet/Snippet';
 
 import './TruncatedQuery.scss';
 
 const b = cn('kv-truncated-query');
 
 interface TruncatedQueryProps {
     value?: string;
-    maxQueryHeight?: number;
 }
 
-export const TruncatedQuery = ({value = '', maxQueryHeight = 6}: TruncatedQueryProps) => {
-    const lines = value.split('\n');
-    const truncated = lines.length > maxQueryHeight;
-
-    if (truncated) {
-        const content = lines.slice(0, maxQueryHeight).join('\n');
-        const message =
-            '\n...\nThe request was truncated. Click on the line to show the full query on the query tab';
-        return (
-            <React.Fragment>
-                <span className={b()}>{content}</span>
-                <span className={b('message', {color: 'secondary'})}>{message}</span>
-            </React.Fragment>
-        );
-    }
-    return <React.Fragment>{value}</React.Fragment>;
+export const TruncatedQuery = ({value = ''}: TruncatedQueryProps) => {
+    return <Snippet>{value}</Snippet>;
 };
 
 interface OneLineQueryWithPopoverProps {
@@ -36,8 +20,11 @@ interface OneLineQueryWithPopoverProps {
 
 export const OneLineQueryWithPopover = ({value = ''}: OneLineQueryWithPopoverProps) => {
     return (
-        <CellWithPopover contentClassName={b('popover-content')} content={value}>
-            {value}
+        <CellWithPopover
+            contentClassName={b('popover-content')}
+            content={<Snippet>{value}</Snippet>}
+        >
+            <Snippet>{value}</Snippet>
         </CellWithPopover>
     );
 };

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

@@ -10,7 +10,6 @@ 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 {
     TOP_QUERIES_COLUMNS_IDS,
@@ -38,7 +37,7 @@ 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()} />
         </div>
     ),
     sortable: false,

src/containers/Tenant/Info/View/View.scss

@@ -0,0 +1,5 @@
+.view {
+    &__snippet-container {
+        width: 650px;
+    }
+}

src/containers/Tenant/Info/View/View.tsx

@@ -1,23 +1,26 @@
 import type {DefinitionListItem} from '@gravity-ui/components';
-import {Text} from '@gravity-ui/uikit';
 
+import {Snippet} from '../../../../components/Snippet/Snippet';
 import {YDBDefinitionList} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
 import type {TEvDescribeSchemeResult} from '../../../../types/api/schema';
+import {cn} from '../../../../utils/cn';
 import {getEntityName} from '../../utils';
 import i18n from '../i18n';
 
+import './View.scss';
+
+const b = cn('view');
+
 const prepareViewItems = (data: TEvDescribeSchemeResult): DefinitionListItem[] => {
     const queryText = data.PathDescription?.ViewDescription?.QueryText;
 
     return [
         {
             name: i18n('view.query-text'),
             copyText: queryText,
-            content: (
-                <Text variant="code-2" wordBreak="break-word">
-                    {queryText}
-                </Text>
-            ),
+            content: queryText ? (
+                <Snippet className={b('snippet-container')}>{queryText}</Snippet>
+            ) : null,
         },
     ];
 };

src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx

@@ -17,7 +17,7 @@ import {formatDateTime} from '../../../../utils/dataFormatters/dataFormatters';
 import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {useChangeInputWithConfirmation} from '../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
 import {formatToMs, parseUsToMs} from '../../../../utils/timeParsers';
-import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
+import {QUERY_TABLE_SETTINGS} from '../../utils/constants';
 import i18n from '../i18n';
 
 import './QueriesHistory.scss';
@@ -55,7 +55,7 @@ function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
             render: ({row}) => {
                 return (
                     <div className={b('query')}>
-                        <TruncatedQuery value={row.queryText} maxQueryHeight={MAX_QUERY_HEIGHT} />
+                        <TruncatedQuery value={row.queryText} />
                     </div>
                 );
             },

src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx

@@ -41,7 +41,7 @@ import {
 } from '../../../../utils/hooks';
 import {useChangedQuerySettings} from '../../../../utils/hooks/useChangedQuerySettings';
 import {useLastQueryExecutionSettings} from '../../../../utils/hooks/useLastQueryExecutionSettings';
-import {YQL_LANGUAGE_ID} from '../../../../utils/monaco/constats';
+import {YQL_LANGUAGE_ID} from '../../../../utils/monaco/constants';
 import {QUERY_ACTIONS} from '../../../../utils/query';
 import type {InitialPaneState} from '../../utils/paneVisibilityToggleHelpers';
 import {

src/containers/Tenant/Query/QueryResult/components/Ast/Ast.tsx

@@ -1,7 +1,7 @@
 import MonacoEditor from 'react-monaco-editor';
 
 import {cn} from '../../../../../../utils/cn';
-import {S_EXPRESSION_LANGUAGE_ID} from '../../../../../../utils/monaco/constats';
+import {S_EXPRESSION_LANGUAGE_ID} from '../../../../../../utils/monaco/constants';
 
 import './Ast.scss';
 

src/containers/Tenant/Query/SavedQueries/SavedQueries.tsx

@@ -21,7 +21,7 @@ import type {SavedQuery} from '../../../../types/store/query';
 import {cn} from '../../../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {useChangeInputWithConfirmation} from '../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
-import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
+import {QUERY_TABLE_SETTINGS} from '../../utils/constants';
 import i18n from '../i18n';
 import {useSavedQueries} from '../utils/useSavedQueries';
 
@@ -125,7 +125,7 @@ export const SavedQueries = ({changeUserInput}: SavedQueriesProps) => {
             render: ({row: query}) => (
                 <div className={b('query')}>
                     <div className={b('query-body')}>
-                        <TruncatedQuery value={query.body} maxQueryHeight={MAX_QUERY_HEIGHT} />
+                        <TruncatedQuery value={query.body} />
                     </div>
                     <span className={b('controls')}>
                         <Button view="flat-secondary">
@@ -139,6 +139,7 @@ export const SavedQueries = ({changeUserInput}: SavedQueriesProps) => {
             ),
             sortable: false,
             resizeMinWidth: 650,
+            width: 650,
         },
     ];
 

src/containers/Tenant/utils/constants.ts

@@ -2,8 +2,6 @@ import type {Settings} from '@gravity-ui/react-data-table';
 
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 
-export const MAX_QUERY_HEIGHT = 6;
-
 export const QUERY_TABLE_SETTINGS: Settings = {
     ...DEFAULT_TABLE_SETTINGS,
     dynamicRenderType: 'variable',

src/utils/monaco/constants.ts

@@ -0,0 +1,4 @@
+import {LANGUAGE_ID} from 'monaco-yql-languages/build/yql/yql.contribution';
+
+export const S_EXPRESSION_LANGUAGE_ID = 's-expression';
+export const YQL_LANGUAGE_ID = LANGUAGE_ID;

tests/suites/tenant/queryHistory/queryHistory.test.ts

@@ -34,7 +34,7 @@ test.describe('Query History', () => {
 
         // Check if the query appears in the history
         const historyTable = page.locator('.ydb-queries-history table');
-        await expect(historyTable.locator(`text="${testQuery}"`)).toBeVisible({
+        await expect(historyTable.locator('.sql-highlighter', {hasText: testQuery})).toBeVisible({
             timeout: VISIBILITY_TIMEOUT,
         });
     });
@@ -85,6 +85,6 @@ test.describe('Query History', () => {
 
         // Check if the query appears in the history
         const historyTable = page.locator('.ydb-queries-history table');
-        await expect(historyTable.locator(`text="${testQuery}"`)).toBeVisible();
+        await expect(historyTable.locator('.sql-highlighter', {hasText: testQuery})).toBeVisible();
     });
 });