fix: code snippets

Author: astandrik

src/components/Snippet/Snippet.scss

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

src/components/Snippet/Snippet.tsx

@@ -0,0 +1,69 @@
+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,
+        }),
+        [],
+    );
+
+    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/SqlHighlighter/SqlHighlighter.scss

@@ -1,34 +1,17 @@
-import React from 'react';
-
 import {cn} from '../../utils/cn';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
-import {SqlHighlighter} from '../SqlHighlighter/SqlHighlighter';
+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>
-                <SqlHighlighter className={b()}>{content}</SqlHighlighter>
-                <span className={b('message', {color: 'secondary'})}>{message}</span>
-            </React.Fragment>
-        );
-    }
-    return <SqlHighlighter>{value}</SqlHighlighter>;
+export const TruncatedQuery = ({value = ''}: TruncatedQueryProps) => {
+    return <Snippet>{value}</Snippet>;
 };
 
 interface OneLineQueryWithPopoverProps {
@@ -39,9 +22,9 @@ export const OneLineQueryWithPopover = ({value = ''}: OneLineQueryWithPopoverPro
     return (
         <CellWithPopover
             contentClassName={b('popover-content')}
-            content={<SqlHighlighter>{value}</SqlHighlighter>}
+            content={<Snippet>{value}</Snippet>}
         >
-            <SqlHighlighter>{value}</SqlHighlighter>
+            <Snippet>{value}</Snippet>
         </CellWithPopover>
     );
 };

src/components/SqlHighlighter/SqlHighlighter.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/components/TruncatedQuery/TruncatedQuery.tsx

@@ -1,6 +1,6 @@
 import type {DefinitionListItem} from '@gravity-ui/components';
 
-import {SqlHighlighter} from '../../../../components/SqlHighlighter/SqlHighlighter';
+import {Snippet} from '../../../../components/Snippet/Snippet';
 import {YDBDefinitionList} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
 import type {TEvDescribeSchemeResult} from '../../../../types/api/schema';
 import {getEntityName} from '../../utils';
@@ -13,7 +13,7 @@ const prepareViewItems = (data: TEvDescribeSchemeResult): DefinitionListItem[] =
         {
             name: i18n('view.query-text'),
             copyText: queryText,
-            content: queryText ? <SqlHighlighter>{queryText}</SqlHighlighter> : null,
+            content: queryText ? <Snippet>{queryText}</Snippet> : null,
         },
     ];
 };

src/containers/Tenant/Diagnostics/TopQueries/columns/columns.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/Info/View/View.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/QueriesHistory/QueriesHistory.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';