ydb-embedded-ui 5.5.0 → 6.0.0

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.js

@@ -1,7 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { RadioButton, Tabs } from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import React, { useEffect, useState } from 'react';
 import JSONTree from 'react-json-inspector';
 import { ClipboardButton } from '../../../../components/ClipboardButton';
 import Divider from '../../../../components/Divider/Divider';
@@ -11,6 +10,7 @@ import { QueryExecutionStatus } from '../../../../components/QueryExecutionStatu
 import { QueryResultTable } from '../../../../components/QueryResultTable/QueryResultTable';
 import { disableFullscreen } from '../../../../store/reducers/fullscreen';
 import { getArray } from '../../../../utils';
+import { cn } from '../../../../utils/cn';
 import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { prepareQueryError } from '../../../../utils/query';
 import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
@@ -29,8 +29,8 @@ const resultOptions = [
 ];
 export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollapseResults, onExpandResults, }) {
     var _a, _b, _c;
-    const [selectedResultSet, setSelectedResultSet] = useState(0);
-    const [activeSection, setActiveSection] = useState(resultOptionsIds.result);
+    const [selectedResultSet, setSelectedResultSet] = React.useState(0);
+    const [activeSection, setActiveSection] = React.useState(resultOptionsIds.result);
     const isFullscreen = useTypedSelector((state) => state.fullscreen);
     const dispatch = useTypedDispatch();
     const resultsSetsCount = (_a = data === null || data === void 0 ? void 0 : data.resultSets) === null || _a === void 0 ? void 0 : _a.length;
@@ -39,7 +39,7 @@ export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollap
     const currentColumns = isMulti ? (_c = data === null || data === void 0 ? void 0 : data.resultSets) === null || _c === void 0 ? void 0 : _c[selectedResultSet].columns : data === null || data === void 0 ? void 0 : data.columns;
     const textResults = getPreparedResult(currentResult);
     const copyDisabled = !textResults.length;
-    useEffect(() => {
+    React.useEffect(() => {
         return () => {
             dispatch(disableFullscreen());
         };
@@ -51,10 +51,10 @@ export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollap
         return _jsx(QueryResultTable, { data: result, columns: columns, settings: { sortable: false } });
     };
     const renderContent = () => {
-        return (_jsxs(_Fragment, { children: [isMulti && resultsSetsCount > 1 && (_jsx("div", { children: _jsx(Tabs, { className: b('result-tabs'), size: "l", items: getArray(resultsSetsCount).map((item) => ({
+        return (_jsxs(React.Fragment, { children: [isMulti && resultsSetsCount > 1 && (_jsx("div", { children: _jsx(Tabs, { className: b('result-tabs'), size: "l", items: getArray(resultsSetsCount).map((item) => ({
                             id: String(item),
                             title: `Result #${item + 1}`,
-                        })), activeTab: String(selectedResultSet), onSelectTab: (tabId) => setSelectedResultSet(Number(tabId)) }) })), _jsx("div", Object.assign({ className: b('result') }, { children: renderResultTable(currentResult, currentColumns) }))] }));
+                        })), activeTab: String(selectedResultSet), onSelectTab: (tabId) => setSelectedResultSet(Number(tabId)) }) })), _jsx("div", { className: b('result'), children: renderResultTable(currentResult, currentColumns) })] }));
     };
     const renderClipboardButton = () => {
         return (_jsx(ClipboardButton, { text: textResults, view: "flat-secondary", title: "Copy results", disabled: copyDisabled }));
@@ -63,11 +63,11 @@ export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollap
         const content = (_jsx(JSONTree, { data: stats, isExpanded: () => true, className: b('inspector'), searchOptions: {
                 debounceTime: 300,
             } }));
-        return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", Object.assign({ className: b('inspector', { fullscreen: true }) }, { children: content })) }))] }));
+        return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", { className: b('inspector', { fullscreen: true }), children: content }) }))] }));
     };
     const renderResult = () => {
         const content = renderContent();
-        return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", Object.assign({ className: b('result-fullscreen-wrapper') }, { children: content })) }))] }));
+        return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", { className: b('result-fullscreen-wrapper'), children: content }) }))] }));
     };
     const renderIssues = () => {
         var _a;
@@ -76,16 +76,16 @@ export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollap
         }
         if (typeof error === 'object' && ((_a = error.data) === null || _a === void 0 ? void 0 : _a.issues) && Array.isArray(error.data.issues)) {
             const content = _jsx(ResultIssues, { data: error.data });
-            return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", Object.assign({ className: b('result-fullscreen-wrapper', b('result')) }, { children: content })) }))] }));
+            return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", { className: b('result-fullscreen-wrapper', b('result')), children: content }) }))] }));
         }
         const parsedError = typeof error === 'string' ? error : prepareQueryError(error);
-        return _jsx("div", Object.assign({ className: b('error') }, { children: parsedError }));
+        return _jsx("div", { className: b('error'), children: parsedError });
     };
     const renderResultSection = () => {
         if (activeSection === resultOptionsIds.result && !error) {
             return renderResult();
         }
-        return (_jsxs("div", Object.assign({ className: b('result') }, { children: [activeSection === resultOptionsIds.stats && !error && renderStats(), renderIssues()] })));
+        return (_jsxs("div", { className: b('result'), children: [activeSection === resultOptionsIds.stats && !error && renderStats(), renderIssues()] }));
     };
-    return (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsxs("div", Object.assign({ className: b('controls-right') }, { children: [_jsx(QueryExecutionStatus, { error: error }), stats && !error && (_jsxs(React.Fragment, { children: [_jsx(QueryDuration, { duration: stats === null || stats === void 0 ? void 0 : stats.DurationUs }), _jsx(Divider, {}), _jsx(RadioButton, { options: resultOptions, value: activeSection, onUpdate: onSelectSection })] }))] })), _jsxs("div", Object.assign({ className: b('controls-left') }, { children: [renderClipboardButton(), _jsx(EnableFullscreenButton, {}), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseResults, onExpand: onExpandResults, isCollapsed: isResultsCollapsed, initialDirection: "bottom" })] }))] })), renderResultSection()] }));
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('controls'), children: [_jsxs("div", { className: b('controls-right'), children: [_jsx(QueryExecutionStatus, { error: error }), stats && !error && (_jsxs(React.Fragment, { children: [_jsx(QueryDuration, { duration: stats === null || stats === void 0 ? void 0 : stats.DurationUs }), _jsx(Divider, {}), _jsx(RadioButton, { options: resultOptions, value: activeSection, onUpdate: onSelectSection })] }))] }), _jsxs("div", { className: b('controls-left'), children: [renderClipboardButton(), _jsx(EnableFullscreenButton, {}), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseResults, onExpand: onExpandResults, isCollapsed: isResultsCollapsed, initialDirection: "bottom" })] })] }), renderResultSection()] }));
 }

package/dist/containers/Tenant/Query/ExplainResult/ExplainResult.d.ts

@@ -1 +1 @@
-export function ExplainResult(props: any): JSX.Element;
+export function ExplainResult(props: any): import("react/jsx-runtime").JSX.Element;

package/dist/containers/Tenant/Query/ExplainResult/ExplainResult.js

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from 'react';
-import cn from 'bem-cn-lite';
-import { MonacoEditor } from '../../../../components/MonacoEditor/MonacoEditor';
-import JSONTree from 'react-json-inspector';
-import 'react-json-inspector/json-inspector.css';
-import { TextOverflow, getYdbPlanNodeShape, getTopology } from '@gravity-ui/paranoid';
+import React from 'react';
+import { TextOverflow, getTopology, getYdbPlanNodeShape } from '@gravity-ui/paranoid';
 import { Loader, RadioButton } from '@gravity-ui/uikit';
+import JSONTree from 'react-json-inspector';
 import Divider from '../../../../components/Divider/Divider';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import { MonacoEditor } from '../../../../components/MonacoEditor/MonacoEditor';
 import { QueryExecutionStatus } from '../../../../components/QueryExecutionStatus';
 import { explainVersions } from '../../../../store/reducers/explainQuery';
 import { disableFullscreen } from '../../../../store/reducers/fullscreen';
-import { LANGUAGE_S_EXPRESSION_ID } from '../../../../utils/monaco/s-expression/constants';
+import { cn } from '../../../../utils/cn';
 import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { LANGUAGE_S_EXPRESSION_ID } from '../../../../utils/monaco/s-expression/constants';
 import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
-import { renderExplainNode } from './utils';
+import { getColors, renderExplainNode } from './utils';
 import './ExplainResult.scss';
+import 'react-json-inspector/json-inspector.css';
 const b = cn('ydb-query-explain-result');
 const EDITOR_OPTIONS = {
     automaticLayout: true,
@@ -38,31 +38,21 @@ const explainOptions = [
     { value: ExplainOptionIds.ast, content: 'AST' },
 ];
 function GraphRoot(props) {
-    const paranoid = useRef();
+    const paranoid = React.useRef();
     const { data, opts, shapes, theme } = props;
-    const [componentTheme, updateComponentTheme] = useState(theme);
-    useEffect(() => {
-        updateComponentTheme(theme);
-    }, [theme]);
-    const render = () => {
-        paranoid.current = getTopology('graphRoot', data, opts, shapes);
-        paranoid.current.render();
-    };
-    useEffect(() => {
-        render();
-        return () => {
-            paranoid.current = undefined;
-        };
-    }, []);
-    useEffect(() => {
+    React.useEffect(() => {
         const graphRoot = document.getElementById('graphRoot');
         if (!graphRoot) {
             throw new Error("Can't find element with id #graphRoot");
         }
         graphRoot.innerHTML = '';
-        render();
-    }, [componentTheme]);
-    useEffect(() => {
+        paranoid.current = getTopology('graphRoot', data, Object.assign(Object.assign({}, opts), { colors: getColors() }), shapes);
+        paranoid.current.render();
+        return () => {
+            paranoid.current = undefined;
+        };
+    }, [theme]);
+    React.useEffect(() => {
         var _a, _b;
         (_b = (_a = paranoid.current) === null || _a === void 0 ? void 0 : _a.updateData) === null || _b === void 0 ? void 0 : _b.call(_a, props.data);
     }, [props.data]);
@@ -70,21 +60,21 @@ function GraphRoot(props) {
 }
 export function ExplainResult(props) {
     const dispatch = useTypedDispatch();
-    const [activeOption, setActiveOption] = useState(ExplainOptionIds.schema);
+    const [activeOption, setActiveOption] = React.useState(ExplainOptionIds.schema);
     const isFullscreen = useTypedSelector((state) => state.fullscreen);
-    useEffect(() => {
+    React.useEffect(() => {
         return () => {
             dispatch(disableFullscreen());
         };
-    }, []);
+    }, [dispatch]);
     const onSelectOption = (tabId) => {
         setActiveOption(tabId);
     };
     const renderLoader = () => {
-        return (_jsx("div", Object.assign({ className: b('loader') }, { children: _jsx(Loader, { size: "m" }) })));
+        return (_jsx("div", { className: b('loader'), children: _jsx(Loader, { size: "m" }) }));
     };
     const renderStub = () => {
-        return (_jsx("div", Object.assign({ className: b('text-message') }, { children: `There is no ${activeOption} for the request` })));
+        return (_jsx("div", { className: b('text-message'), children: `There is no ${activeOption} for the request` }));
     };
     const hasContent = () => {
         var _a, _b;
@@ -107,9 +97,7 @@ export function ExplainResult(props) {
         return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
     const renderAstExplain = () => {
-        const content = (_jsx("div", Object.assign({ className: b('ast') }, { children: _jsx(MonacoEditor, { language: LANGUAGE_S_EXPRESSION_ID, value: props.ast, options: EDITOR_OPTIONS, wrappingIndent: "indent", 
-                // pass noop otherwise it will throw error
-                editorWillUnmount: () => { } }) })));
+        const content = (_jsx("div", { className: b('ast'), children: _jsx(MonacoEditor, { language: LANGUAGE_S_EXPRESSION_ID, value: props.ast, options: EDITOR_OPTIONS, wrappingIndent: "indent" }) }));
         return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
     const renderGraph = () => {
@@ -117,15 +105,15 @@ export function ExplainResult(props) {
         const { links, nodes, version } = explain;
         const isSupportedVersion = version === explainVersions.v2;
         const isEnoughDataForGraph = links && nodes && nodes.length;
-        const content = isSupportedVersion && isEnoughDataForGraph ? (_jsx("div", Object.assign({ className: b('explain-canvas-container', {
+        const content = isSupportedVersion && isEnoughDataForGraph ? (_jsx("div", { className: b('explain-canvas-container', {
                 hidden: activeOption !== ExplainOptionIds.schema,
-            }) }, { children: _jsx(GraphRoot, { theme: theme, data: { links, nodes }, opts: {
+            }), children: _jsx(GraphRoot, { theme: theme, data: { links, nodes }, opts: {
                     renderNodeTitle: renderExplainNode,
                     textOverflow: TextOverflow.Normal,
                     initialZoomFitsCanvas: true,
                 }, shapes: {
                     node: getYdbPlanNodeShape,
-                } }) }))) : null;
+                } }) })) : null;
         return (_jsxs(React.Fragment, { children: [!isFullscreen && content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
     const renderError = () => {
@@ -138,7 +126,7 @@ export function ExplainResult(props) {
         else {
             message = error;
         }
-        return _jsx("div", Object.assign({ className: b('text-message') }, { children: message }));
+        return _jsx("div", { className: b('text-message'), children: message });
     };
     const renderContent = () => {
         const { error, loading, loadingAst } = props;
@@ -165,5 +153,5 @@ export function ExplainResult(props) {
                 return null;
         }
     };
-    return (_jsxs(React.Fragment, { children: [_jsx("div", Object.assign({ className: b('controls') }, { children: !props.loading && (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({ className: b('controls-right') }, { children: [_jsx(QueryExecutionStatus, { error: props.error }), !props.error && (_jsxs(React.Fragment, { children: [_jsx(Divider, {}), _jsx(RadioButton, { options: explainOptions, value: activeOption, onUpdate: onSelectOption })] }))] })), _jsxs("div", Object.assign({ className: b('controls-left') }, { children: [_jsx(EnableFullscreenButton, { disabled: Boolean(props.error) || !hasContent() }), _jsx(PaneVisibilityToggleButtons, { onCollapse: props.onCollapseResults, onExpand: props.onExpandResults, isCollapsed: props.isResultsCollapsed, initialDirection: "bottom" })] }))] })) })), _jsx("div", Object.assign({ className: b('result') }, { children: renderContent() }))] }));
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('controls'), children: !props.loading && (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('controls-right'), children: [_jsx(QueryExecutionStatus, { error: props.error }), !props.error && (_jsxs(React.Fragment, { children: [_jsx(Divider, {}), _jsx(RadioButton, { options: explainOptions, value: activeOption, onUpdate: onSelectOption })] }))] }), _jsxs("div", { className: b('controls-left'), children: [_jsx(EnableFullscreenButton, { disabled: Boolean(props.error) || !hasContent() }), _jsx(PaneVisibilityToggleButtons, { onCollapse: props.onCollapseResults, onExpand: props.onExpandResults, isCollapsed: props.isResultsCollapsed, initialDirection: "bottom" })] })] })) }), _jsx("div", { className: b('result'), children: renderContent() })] }));
 }

package/dist/containers/Tenant/Query/ExplainResult/utils.d.ts

@@ -1,2 +1,5 @@
 import type { GraphNode } from '@gravity-ui/paranoid';
 export declare const renderExplainNode: (node: GraphNode) => string;
+export declare function getColors(): {
+    getCommonColor: (name: string) => string;
+};

package/dist/containers/Tenant/Query/ExplainResult/utils.js

@@ -2,3 +2,37 @@ export const renderExplainNode = (node) => {
     const parts = node.name.split('|');
     return parts.length > 1 ? parts[1] : node.name;
 };
+export function getColors() {
+    const colorsMap = {
+        success: '--g-color-text-positive',
+        error: '--g-color-text-danger',
+        warning: '--g-color-text-warning',
+        errorBackground: '--g-color-base-danger-medium',
+        warningBackground: '--g-color-base-warning-medium',
+        mute: '--g-color-line-generic',
+        stroke: '--g-color-text-hint',
+        fill: '--g-color-base-generic-ultralight',
+        nodeFill: '--g-color-base-float',
+        nodeShadow: '--g-color-sfx-shadow',
+        titleColor: '--g-color-text-primary',
+        textColor: '--g-color-text-complementary',
+        buttonBorderColor: '--g-color-line-generic',
+        // groupBorderColor: '--g-color-celestial-thunder',
+        // groupFill: '--g-color-celestial',
+        titleHoverColor: '--g-color-text-link-hover',
+        nodeHover: '--g-color-base-float-hover',
+        specialHover: '--g-color-line-focus',
+    };
+    const style = getComputedStyle(document.body);
+    const colors = Object.keys(colorsMap).reduce((acc, key) => {
+        const color = style.getPropertyValue(colorsMap[key]).replace(/ /g, '');
+        if (color) {
+            acc[key] = color;
+        }
+        return acc;
+    }, {});
+    const getCommonColor = (name) => {
+        return style.getPropertyValue(`--g-color-${name}`).replace(/ /g, '');
+    };
+    return Object.assign(Object.assign({}, colors), { getCommonColor });
+}

package/dist/containers/Tenant/Query/Issues/Issues.d.ts

@@ -1,12 +1,11 @@
-/// <reference types="react" />
 import type { ErrorResponse, IssueMessage } from '../../../../types/api/query';
 import './Issues.scss';
 interface ResultIssuesProps {
     data: ErrorResponse | string;
 }
-export declare function ResultIssues({ data }: ResultIssuesProps): JSX.Element;
+export declare function ResultIssues({ data }: ResultIssuesProps): import("react/jsx-runtime").JSX.Element;
 interface IssuesProps {
     issues: IssueMessage[] | null | undefined;
 }
-export declare function Issues({ issues }: IssuesProps): JSX.Element;
+export declare function Issues({ issues }: IssuesProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Query/Issues/Issues.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import cn from 'bem-cn-lite';
-import { Button, Icon, ArrowToggle } from '@gravity-ui/uikit';
+import React from 'react';
+import { ArrowToggle, Button, Icon } from '@gravity-ui/uikit';
 import ShortyString from '../../../../components/ShortyString/ShortyString';
-import fatalIcon from '../../../../assets/icons/circle-xmark.svg';
-import errorIcon from '../../../../assets/icons/triangle-exclamation.svg';
+import { cn } from '../../../../utils/cn';
+import { getSeverity } from './models';
 import warningIcon from '../../../../assets/icons/circle-exclamation.svg';
 import infoIcon from '../../../../assets/icons/circle-info.svg';
-import { getSeverity } from './models';
+import fatalIcon from '../../../../assets/icons/circle-xmark.svg';
+import errorIcon from '../../../../assets/icons/triangle-exclamation.svg';
 import './Issues.scss';
 const blockWrapper = cn('kv-result-issues');
 const blockIssues = cn('kv-issues');
@@ -24,11 +24,11 @@ export function ResultIssues({ data }) {
         }
         else {
             const severity = getSeverity((_a = data === null || data === void 0 ? void 0 : data.error) === null || _a === void 0 ? void 0 : _a.severity);
-            content = (_jsxs(React.Fragment, { children: [_jsx(IssueSeverity, { severity: severity }), ' ', _jsx("span", Object.assign({ className: blockWrapper('error-message-text') }, { children: (_b = data === null || data === void 0 ? void 0 : data.error) === null || _b === void 0 ? void 0 : _b.message }))] }));
+            content = (_jsxs(React.Fragment, { children: [_jsx(IssueSeverity, { severity: severity }), ' ', _jsx("span", { className: blockWrapper('error-message-text'), children: (_b = data === null || data === void 0 ? void 0 : data.error) === null || _b === void 0 ? void 0 : _b.message })] }));
         }
         return content;
     };
-    return (_jsxs("div", Object.assign({ className: blockWrapper() }, { children: [_jsxs("div", Object.assign({ className: blockWrapper('error-message') }, { children: [renderTitle(), hasIssues && (_jsx(Button, Object.assign({ view: "normal", onClick: () => setShowIssues(!showIssues) }, { children: showIssues ? 'Hide details' : 'Show details' })))] })), hasIssues && showIssues && _jsx(Issues, { issues: issues })] })));
+    return (_jsxs("div", { className: blockWrapper(), children: [_jsxs("div", { className: blockWrapper('error-message'), children: [renderTitle(), hasIssues && (_jsx(Button, { view: "normal", onClick: () => setShowIssues(!showIssues), children: showIssues ? 'Hide details' : 'Show details' }))] }), hasIssues && showIssues && _jsx(Issues, { issues: issues })] }));
 }
 export function Issues({ issues }) {
     const mostSevereIssue = issues === null || issues === void 0 ? void 0 : issues.reduce((result, issue) => {
@@ -36,7 +36,7 @@ export function Issues({ issues }) {
         const severity = (_a = issue.severity) !== null && _a !== void 0 ? _a : 10;
         return Math.min(result, severity);
     }, 10);
-    return (_jsx("div", Object.assign({ className: blockIssues(null) }, { children: issues === null || issues === void 0 ? void 0 : issues.map((issue, index) => (_jsx(Issue, { issue: issue, expanded: issue === mostSevereIssue }, index))) })));
+    return (_jsx("div", { className: blockIssues(null), children: issues === null || issues === void 0 ? void 0 : issues.map((issue, index) => (_jsx(Issue, { issue: issue, expanded: issue === mostSevereIssue }, index))) }));
 }
 function Issue({ issue, level = 0 }) {
     const [isExpand, setIsExpand] = React.useState(true);
@@ -45,14 +45,14 @@ function Issue({ issue, level = 0 }) {
     const issues = issue.issues;
     const hasIssues = Array.isArray(issues) && issues.length > 0;
     const arrowDirection = isExpand ? 'bottom' : 'right';
-    return (_jsxs("div", Object.assign({ className: blockIssue({
+    return (_jsxs("div", { className: blockIssue({
             leaf: !hasIssues,
             'has-issues': hasIssues,
-        }) }, { children: [_jsxs("div", Object.assign({ className: blockIssue('line') }, { children: [hasIssues && (_jsx(Button, Object.assign({ view: "flat-secondary", onClick: () => setIsExpand(!isExpand), className: blockIssue('arrow-toggle') }, { children: _jsx(ArrowToggle, { direction: arrowDirection, size: 16 }) }))), _jsx(IssueSeverity, { severity: severity }), _jsxs("span", Object.assign({ className: blockIssue('message') }, { children: [position && (_jsx("span", Object.assign({ className: blockIssue('place-text'), title: "Position" }, { children: position }))), _jsx("div", Object.assign({ className: blockIssue('message-text') }, { children: _jsx(ShortyString, { value: issue.message, expandLabel: 'Show full message' }) }))] })), issue.issue_code ? (_jsxs("span", Object.assign({ className: blockIssue('code') }, { children: ["Code: ", issue.issue_code] }))) : null] })), hasIssues && isExpand && (_jsx("div", Object.assign({ className: blockIssue('issues') }, { children: _jsx(IssueList, { issues: issues, level: level + 1, expanded: isExpand }) })))] })));
+        }), children: [_jsxs("div", { className: blockIssue('line'), children: [hasIssues && (_jsx(Button, { view: "flat-secondary", onClick: () => setIsExpand(!isExpand), className: blockIssue('arrow-toggle'), children: _jsx(ArrowToggle, { direction: arrowDirection, size: 16 }) })), _jsx(IssueSeverity, { severity: severity }), _jsxs("span", { className: blockIssue('message'), children: [position && (_jsx("span", { className: blockIssue('place-text'), title: "Position", children: position })), _jsx("div", { className: blockIssue('message-text'), children: _jsx(ShortyString, { value: issue.message, expandLabel: 'Show full message' }) })] }), issue.issue_code ? (_jsxs("span", { className: blockIssue('code'), children: ["Code: ", issue.issue_code] })) : null] }), hasIssues && isExpand && (_jsx("div", { className: blockIssue('issues'), children: _jsx(IssueList, { issues: issues, level: level + 1, expanded: isExpand }) }))] }));
 }
 function IssueList(props) {
     const { issues, level, expanded } = props;
-    return (_jsx("div", Object.assign({ className: blockIssue('list') }, { children: issues.map((issue, index) => (_jsx(Issue, { issue: issue, level: level, expanded: expanded }, index))) })));
+    return (_jsx("div", { className: blockIssue('list'), children: issues.map((issue, index) => (_jsx(Issue, { issue: issue, level: level, expanded: expanded }, index))) }));
 }
 const severityIcons = {
     S_INFO: infoIcon,
@@ -63,7 +63,7 @@ const severityIcons = {
 const blockIssueSeverity = cn('yql-issue-severity');
 function IssueSeverity({ severity }) {
     const shortenSeverity = severity.slice(2).toLowerCase();
-    return (_jsxs("span", Object.assign({ className: blockIssueSeverity({ severity: shortenSeverity }) }, { children: [_jsx(Icon, { className: blockIssueSeverity('icon'), data: severityIcons[severity], size: 16 }), _jsx("span", Object.assign({ className: blockIssueSeverity('title') }, { children: shortenSeverity }))] })));
+    return (_jsxs("span", { className: blockIssueSeverity({ severity: shortenSeverity }), children: [_jsx(Icon, { className: blockIssueSeverity('icon'), data: severityIcons[severity], size: 16 }), _jsx("span", { className: blockIssueSeverity('title'), children: shortenSeverity })] }));
 }
 function getIssuePosition(issue) {
     const { position = {} } = issue;

package/dist/containers/Tenant/Query/Issues/models.d.ts

@@ -1,4 +1,4 @@
 export declare const SEVERITY_LIST: readonly ["S_FATAL", "S_ERROR", "S_WARNING", "S_INFO"];
-export type SEVERITY = typeof SEVERITY_LIST[number];
+export type SEVERITY = (typeof SEVERITY_LIST)[number];
 export declare function isSeverity(value: number | undefined): boolean;
 export declare function getSeverity(value: number | undefined): "S_FATAL" | "S_ERROR" | "S_WARNING" | "S_INFO";

package/dist/containers/Tenant/Query/Preview/Preview.d.ts

@@ -4,5 +4,5 @@ interface PreviewProps {
     database: string;
     type: EPathType | undefined;
 }
-export declare const Preview: ({ database, type }: PreviewProps) => JSX.Element;
+export declare const Preview: ({ database, type }: PreviewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Query/Preview/Preview.js

@@ -1,58 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import cn from 'bem-cn-lite';
-import { Loader, Button } from '@gravity-ui/uikit';
-import { sendQuery, setQueryOptions } from '../../../../store/reducers/preview';
-import { setShowPreview } from '../../../../store/reducers/schema/schema';
-import { prepareQueryError } from '../../../../utils/query';
-import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
-import { Icon } from '../../../../components/Icon';
+import { Button, Loader } from '@gravity-ui/uikit';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import { Icon } from '../../../../components/Icon';
 import { QueryResultTable } from '../../../../components/QueryResultTable';
-import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import { previewApi } from '../../../../store/reducers/preview';
+import { setShowPreview } from '../../../../store/reducers/schema/schema';
+import { cn } from '../../../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { prepareQueryError } from '../../../../utils/query';
 import { isExternalTable, isTableType } from '../../utils/schema';
 import i18n from '../i18n';
 import './Preview.scss';
 const b = cn('kv-preview');
 export const Preview = ({ database, type }) => {
     const dispatch = useTypedDispatch();
-    const { data = {}, loading, error, wasLoaded } = useTypedSelector((state) => state.preview);
     const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
     const isFullscreen = useTypedSelector((state) => state.fullscreen);
-    const sendQueryForPreview = useCallback((isBackground) => {
-        if (!isTableType(type)) {
-            return;
-        }
-        if (!isBackground) {
-            dispatch(setQueryOptions({
-                wasLoaded: false,
-                data: undefined,
-            }));
-        }
-        const query = `--!syntax_v1\nselect * from \`${currentSchemaPath}\` limit 32`;
-        dispatch(sendQuery({
-            query,
-            database,
-            action: isExternalTable(type) ? 'execute-query' : 'execute-scan',
-        }));
-    }, [dispatch, database, currentSchemaPath, type]);
-    useAutofetcher(sendQueryForPreview, [sendQueryForPreview], autorefresh);
+    const query = `--!syntax_v1\nselect * from \`${currentSchemaPath}\` limit 32`;
+    const { currentData, isFetching, error } = previewApi.useSendQueryQuery({ database, query, action: isExternalTable(type) ? 'execute-query' : 'execute-scan' }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const data = currentData !== null && currentData !== void 0 ? currentData : {};
     const handleClosePreview = () => {
         dispatch(setShowPreview(false));
     };
     const renderHeader = () => {
-        return (_jsxs("div", Object.assign({ className: b('header') }, { children: [_jsxs("div", Object.assign({ className: b('title') }, { children: [i18n('preview.title'), ' ', _jsx("div", Object.assign({ className: b('table-name') }, { children: currentSchemaPath }))] })), _jsxs("div", Object.assign({ className: b('controls-left') }, { children: [_jsx(EnableFullscreenButton, { disabled: Boolean(error) }), _jsx(Button, Object.assign({ view: "flat-secondary", onClick: handleClosePreview, title: i18n('preview.close') }, { children: _jsx(Icon, { name: "close", viewBox: '0 0 16 16', width: 16, height: 16 }) }))] }))] })));
+        return (_jsxs("div", { className: b('header'), children: [_jsxs("div", { className: b('title'), children: [i18n('preview.title'), ' ', _jsx("div", { className: b('table-name'), children: currentSchemaPath })] }), _jsxs("div", { className: b('controls-left'), children: [_jsx(EnableFullscreenButton, { disabled: Boolean(error) }), _jsx(Button, { view: "flat-secondary", onClick: handleClosePreview, title: i18n('preview.close'), children: _jsx(Icon, { name: "close", viewBox: '0 0 16 16', width: 16, height: 16 }) })] })] }));
     };
-    if (loading && !wasLoaded) {
-        return (_jsx("div", Object.assign({ className: b('loader-container') }, { children: _jsx(Loader, { size: "m" }) })));
+    if (loading) {
+        return (_jsx("div", { className: b('loader-container'), children: _jsx(Loader, { size: "m" }) }));
     }
     let message;
     if (!isTableType(type)) {
-        message = _jsx("div", Object.assign({ className: b('message-container') }, { children: i18n('preview.not-available') }));
+        message = _jsx("div", { className: b('message-container'), children: i18n('preview.not-available') });
     }
     else if (error) {
-        message = _jsx("div", Object.assign({ className: b('message-container', 'error') }, { children: prepareQueryError(error) }));
+        message = _jsx("div", { className: b('message-container', 'error'), children: prepareQueryError(error) });
     }
-    const content = message !== null && message !== void 0 ? message : (_jsx("div", Object.assign({ className: b('result') }, { children: _jsx(QueryResultTable, { data: data.result, columns: data.columns }) })));
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [renderHeader(), isFullscreen ? _jsx(Fullscreen, { children: content }) : content] })));
+    const content = message !== null && message !== void 0 ? message : (_jsx("div", { className: b('result'), children: _jsx(QueryResultTable, { data: data.result, columns: data.columns }) }));
+    return (_jsxs("div", { className: b(), children: [renderHeader(), isFullscreen ? _jsx(Fullscreen, { children: content }) : content] }));
 };

package/dist/containers/Tenant/Query/QueriesHistory/QueriesHistory.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import './QueriesHistory.scss';
 interface QueriesHistoryProps {
     changeUserInput: (value: {
         input: string;
     }) => void;
 }
-declare function QueriesHistory({ changeUserInput }: QueriesHistoryProps): JSX.Element;
+declare function QueriesHistory({ changeUserInput }: QueriesHistoryProps): import("react/jsx-runtime").JSX.Element;
 export default QueriesHistory;

package/dist/containers/Tenant/Query/QueriesHistory/QueriesHistory.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
 import DataTable from '@gravity-ui/react-data-table';
 import { TruncatedQuery } from '../../../../components/TruncatedQuery/TruncatedQuery';
-import { setQueryTab } from '../../../../store/reducers/tenant/tenant';
 import { selectQueriesHistory } from '../../../../store/reducers/executeQuery';
 import { TENANT_QUERY_TABS_ID } from '../../../../store/reducers/tenant/constants';
+import { setQueryTab } from '../../../../store/reducers/tenant/tenant';
+import { cn } from '../../../../utils/cn';
 import { useQueryModes, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { QUERY_MODES, QUERY_SYNTAX } from '../../../../utils/query';
 import { MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS } from '../../utils/constants';
 import i18n from '../i18n';
 import './QueriesHistory.scss';
-const b = block('ydb-queries-history');
+const b = cn('ydb-queries-history');
 function QueriesHistory({ changeUserInput }) {
     const dispatch = useTypedDispatch();
     const [queryMode, setQueryMode] = useQueryModes();
@@ -32,7 +32,7 @@ function QueriesHistory({ changeUserInput }) {
             name: 'queryText',
             header: 'Query Text',
             render: ({ row }) => {
-                return (_jsx("div", Object.assign({ className: b('query') }, { children: _jsx(TruncatedQuery, { value: row.queryText, maxQueryHeight: MAX_QUERY_HEIGHT }) })));
+                return (_jsx("div", { className: b('query'), children: _jsx(TruncatedQuery, { value: row.queryText, maxQueryHeight: MAX_QUERY_HEIGHT }) }));
             },
             sortable: false,
         },
@@ -46,6 +46,6 @@ function QueriesHistory({ changeUserInput }) {
             width: 200,
         },
     ];
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsx(DataTable, { theme: "yandex-cloud", columns: columns, data: reversedHistory, settings: QUERY_TABLE_SETTINGS, emptyDataMessage: i18n('history.empty'), onRowClick: (row) => onQueryClick(row), rowClassName: () => b('table-row') }) })));
+    return (_jsx("div", { className: b(), children: _jsx(DataTable, { theme: "yandex-cloud", columns: columns, data: reversedHistory, settings: QUERY_TABLE_SETTINGS, emptyDataMessage: i18n('history.empty'), onRowClick: (row) => onQueryClick(row), rowClassName: () => b('table-row') }) }));
 }
 export default QueriesHistory;

package/dist/containers/Tenant/Query/Query.d.ts

@@ -3,7 +3,7 @@ import './Query.scss';
 interface QueryProps {
     theme: string;
     path: string;
-    type: EPathType;
+    type?: EPathType;
 }
-export declare const Query: (props: QueryProps) => JSX.Element;
+export declare const Query: (props: QueryProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Query/Query.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Helmet } from 'react-helmet-async';
-import block from 'bem-cn-lite';
 import { changeUserInput } from '../../../store/reducers/executeQuery';
 import { TENANT_QUERY_TABS_ID } from '../../../store/reducers/tenant/constants';
-import { useSetting, useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
+import { cn } from '../../../utils/cn';
 import { SAVED_QUERIES_KEY } from '../../../utils/constants';
-import { QueryTabs, queryEditorTabs } from './QueryTabs/QueryTabs';
-import { SavedQueries } from './SavedQueries/SavedQueries';
+import { useSetting, useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import QueriesHistory from './QueriesHistory/QueriesHistory';
 import QueryEditor from './QueryEditor/QueryEditor';
+import { QueryTabs, queryEditorTabs } from './QueryTabs/QueryTabs';
+import { SavedQueries } from './SavedQueries/SavedQueries';
 import './Query.scss';
-const b = block('ydb-query');
+const b = cn('ydb-query');
 export const Query = (props) => {
     const dispatch = useTypedDispatch();
     const { queryTab = TENANT_QUERY_TABS_ID.newQuery } = useTypedSelector((state) => state.tenant);
@@ -40,5 +40,5 @@ export const Query = (props) => {
             }
         }
     };
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [activeTab ? (_jsx(Helmet, { children: _jsx("title", { children: activeTab.title }) })) : null, _jsx(QueryTabs, { className: b('tabs'), activeTab: queryTab }), _jsx("div", Object.assign({ className: b('content') }, { children: renderContent() }))] })));
+    return (_jsxs("div", { className: b(), children: [activeTab ? (_jsx(Helmet, { children: _jsx("title", { children: activeTab.title }) })) : null, _jsx(QueryTabs, { className: b('tabs'), activeTab: queryTab }), _jsx("div", { className: b('content'), children: renderContent() })] }));
 };

package/dist/containers/Tenant/Query/QueryDuration/QueryDuration.d.ts

@@ -2,5 +2,5 @@ import './QueryDuration.scss';
 interface QueryDurationProps {
     duration?: string | number;
 }
-export declare const QueryDuration: ({ duration }: QueryDurationProps) => JSX.Element | null;
+export declare const QueryDuration: ({ duration }: QueryDurationProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/containers/Tenant/Query/QueryDuration/QueryDuration.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
-import { formatDurationToShortTimeFormat, parseUsToMs } from '../../../../utils/timeParsers';
 import { LabelWithPopover } from '../../../../components/LabelWithPopover';
+import { cn } from '../../../../utils/cn';
+import { formatDurationToShortTimeFormat, parseUsToMs } from '../../../../utils/timeParsers';
 import i18n from '../i18n';
 import './QueryDuration.scss';
-const b = block('ydb-query-duration');
+const b = cn('ydb-query-duration');
 export const QueryDuration = ({ duration }) => {
     if (!duration) {
         return null;
     }
     const parsedDuration = formatDurationToShortTimeFormat(parseUsToMs(duration), 1);
-    return (_jsx("span", Object.assign({ className: b() }, { children: _jsx(LabelWithPopover, { className: b('item-with-popover'), contentClassName: b('popover'), text: parsedDuration, popoverContent: i18n('query-duration.description') }) })));
+    return (_jsx("span", { className: b(), children: _jsx(LabelWithPopover, { className: b('item-with-popover'), contentClassName: b('popover'), text: parsedDuration, popoverContent: i18n('query-duration.description') }) }));
 };