ydb-embedded-ui 4.32.0 → 5.0.0

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

@@ -1,31 +1,23 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import cn from 'bem-cn-lite';
 import MonacoEditor from 'react-monaco-editor';
 import JSONTree from 'react-json-inspector';
 import 'react-json-inspector/json-inspector.css';
-
-import {TextOverflow, getYdbPlanNodeShape, getTopology} from '@gravity-ui/paranoid';
-import {Loader, RadioButton} from '@gravity-ui/uikit';
-
+import { TextOverflow, getYdbPlanNodeShape, getTopology } from '@gravity-ui/paranoid';
+import { Loader, RadioButton } from '@gravity-ui/uikit';
 import Divider from '../../../../components/Divider/Divider';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
-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';
-
-import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
-
-import {renderExplainNode} from './utils';
-
+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';
+import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
+import { renderExplainNode } from './utils';
 import './ExplainResult.scss';
-
 const b = cn('ydb-query-explain-result');
-
 const EDITOR_OPTIONS = {
     automaticLayout: true,
     selectOnLineNumbers: true,
@@ -35,96 +27,70 @@ const EDITOR_OPTIONS = {
     },
     wrappingIndent: 'indent',
 };
-
 const ExplainOptionIds = {
     schema: 'schema',
     json: 'json',
     ast: 'ast',
 };
-
 const explainOptions = [
-    {value: ExplainOptionIds.schema, content: 'Schema'},
-    {value: ExplainOptionIds.json, content: 'JSON'},
-    {value: ExplainOptionIds.ast, content: 'AST'},
+    { value: ExplainOptionIds.schema, content: 'Schema' },
+    { value: ExplainOptionIds.json, content: 'JSON' },
+    { value: ExplainOptionIds.ast, content: 'AST' },
 ];
-
 function GraphRoot(props) {
     const paranoid = useRef();
-
-    const {data, opts, shapes, theme} = props;
-
+    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(() => {
         const graphRoot = document.getElementById('graphRoot');
-
         if (!graphRoot) {
             throw new Error("Can't find element with id #graphRoot");
         }
-
         graphRoot.innerHTML = '';
-
         render();
     }, [componentTheme]);
-
     useEffect(() => {
-        paranoid.current?.updateData?.(props.data);
+        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]);
-
-    return <div id="graphRoot" style={{height: '100vh'}} />;
+    return _jsx("div", { id: "graphRoot", style: { height: '100vh' } });
 }
-
 export function ExplainResult(props) {
     const dispatch = useDispatch();
     const [activeOption, setActiveOption] = useState(ExplainOptionIds.schema);
-
     const isFullscreen = useSelector((state) => state.fullscreen);
-
     useEffect(() => {
         return () => {
             dispatch(disableFullscreen());
         };
     }, []);
-
     const onSelectOption = (tabId) => {
         setActiveOption(tabId);
     };
-
     const renderLoader = () => {
-        return (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
-        );
+        return (_jsx("div", Object.assign({ className: b('loader') }, { children: _jsx(Loader, { size: "m" }) })));
     };
-
     const renderStub = () => {
-        return (
-            <div className={b('text-message')}>{`There is no ${activeOption} for the request`}</div>
-        );
+        return (_jsx("div", Object.assign({ className: b('text-message') }, { children: `There is no ${activeOption} for the request` })));
     };
-
     const hasContent = () => {
+        var _a, _b;
         switch (activeOption) {
             case ExplainOptionIds.schema:
-                return Boolean(props.explain?.nodes?.length);
+                return Boolean((_b = (_a = props.explain) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.length);
             case ExplainOptionIds.json:
                 return Boolean(props.explain);
             case ExplainOptionIds.ast:
@@ -133,110 +99,56 @@ export function ExplainResult(props) {
                 return false;
         }
     };
-
     const renderTextExplain = () => {
-        const content = (
-            <JSONTree
-                data={props.explain?.pristine}
-                isExpanded={() => true}
-                className={b('inspector')}
-                searchOptions={{
-                    debounceTime: 300,
-                }}
-            />
-        );
-
-        return (
-            <React.Fragment>
-                {content}
-                {isFullscreen && <Fullscreen>{content}</Fullscreen>}
-            </React.Fragment>
-        );
+        var _a;
+        const content = (_jsx(JSONTree, { data: (_a = props.explain) === null || _a === void 0 ? void 0 : _a.pristine, isExpanded: () => true, className: b('inspector'), searchOptions: {
+                debounceTime: 300,
+            } }));
+        return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
-
     const renderAstExplain = () => {
-        const content = (
-            <div className={b('ast')}>
-                <MonacoEditor
-                    language={LANGUAGE_S_EXPRESSION_ID}
-                    value={props.ast}
-                    options={EDITOR_OPTIONS}
-                    wrappingIndent="indent"
-                />
-            </div>
-        );
-        return (
-            <React.Fragment>
-                {content}
-                {isFullscreen && <Fullscreen>{content}</Fullscreen>}
-            </React.Fragment>
-        );
+        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" }) })));
+        return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
-
     const renderGraph = () => {
-        const {explain = {}, theme} = props;
-        const {links, nodes, version} = explain;
-
+        const { explain = {}, theme } = props;
+        const { links, nodes, version } = explain;
         const isSupportedVersion = version === explainVersions.v2;
         const isEnoughDataForGraph = links && nodes && nodes.length;
-
-        const content =
-            isSupportedVersion && isEnoughDataForGraph ? (
-                <div
-                    className={b('explain-canvas-container', {
-                        hidden: activeOption !== ExplainOptionIds.schema,
-                    })}
-                >
-                    <GraphRoot
-                        theme={theme}
-                        data={{links, nodes}}
-                        opts={{
-                            renderNodeTitle: renderExplainNode,
-                            textOverflow: TextOverflow.Normal,
-                            initialZoomFitsCanvas: true,
-                        }}
-                        shapes={{
-                            node: getYdbPlanNodeShape,
-                        }}
-                    />
-                </div>
-            ) : null;
-        return (
-            <React.Fragment>
-                {!isFullscreen && content}
-                {isFullscreen && <Fullscreen>{content}</Fullscreen>}
-            </React.Fragment>
-        );
+        const content = isSupportedVersion && isEnoughDataForGraph ? (_jsx("div", Object.assign({ className: b('explain-canvas-container', {
+                hidden: activeOption !== ExplainOptionIds.schema,
+            }) }, { children: _jsx(GraphRoot, { theme: theme, data: { links, nodes }, opts: {
+                    renderNodeTitle: renderExplainNode,
+                    textOverflow: TextOverflow.Normal,
+                    initialZoomFitsCanvas: true,
+                }, shapes: {
+                    node: getYdbPlanNodeShape,
+                } }) }))) : null;
+        return (_jsxs(React.Fragment, { children: [!isFullscreen && content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
-
     const renderError = () => {
-        const {error} = props;
-
+        var _a;
+        const { error } = props;
         let message;
-
         if (error.data) {
-            message = typeof error.data === 'string' ? error.data : error.data.error?.message;
-        } else {
+            message = typeof error.data === 'string' ? error.data : (_a = error.data.error) === null || _a === void 0 ? void 0 : _a.message;
+        }
+        else {
             message = error;
         }
-
-        return <div className={b('text-message')}>{message}</div>;
+        return _jsx("div", Object.assign({ className: b('text-message') }, { children: message }));
     };
-
     const renderContent = () => {
-        const {error, loading, loadingAst} = props;
+        const { error, loading, loadingAst } = props;
         if (loading || loadingAst) {
             return renderLoader();
         }
-
         if (error) {
             return renderError();
         }
-
         if (!hasContent()) {
             return renderStub();
         }
-
         switch (activeOption) {
             case ExplainOptionIds.json: {
                 return renderTextExplain();
@@ -251,40 +163,5 @@ export function ExplainResult(props) {
                 return null;
         }
     };
-
-    return (
-        <React.Fragment>
-            <div className={b('controls')}>
-                {!props.loading && (
-                    <React.Fragment>
-                        <div className={b('controls-right')}>
-                            <QueryExecutionStatus error={props.error} />
-                            {!props.error && (
-                                <React.Fragment>
-                                    <Divider />
-                                    <RadioButton
-                                        options={explainOptions}
-                                        value={activeOption}
-                                        onUpdate={onSelectOption}
-                                    />
-                                </React.Fragment>
-                            )}
-                        </div>
-                        <div className={b('controls-left')}>
-                            <EnableFullscreenButton
-                                disabled={Boolean(props.error) || !hasContent()}
-                            />
-                            <PaneVisibilityToggleButtons
-                                onCollapse={props.onCollapseResults}
-                                onExpand={props.onExpandResults}
-                                isCollapsed={props.isResultsCollapsed}
-                                initialDirection="bottom"
-                            />
-                        </div>
-                    </React.Fragment>
-                )}
-            </div>
-            <div className={b('result')}>{renderContent()}</div>
-        </React.Fragment>
-    );
+    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() }))] }));
 }

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

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

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

@@ -0,0 +1,4 @@
+export const renderExplainNode = (node) => {
+    const parts = node.name.split('|');
+    return parts.length > 1 ? parts[1] : node.name;
+};

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

@@ -0,0 +1,12 @@
+/// <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;
+interface IssuesProps {
+    issues: IssueMessage[] | null | undefined;
+}
+export declare function Issues({ issues }: IssuesProps): JSX.Element;
+export {};

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

@@ -0,0 +1,75 @@
+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 ShortyString from '../../../../components/ShortyString/ShortyString';
+import fatalIcon from '../../../../assets/icons/circle-xmark.svg';
+import errorIcon from '../../../../assets/icons/triangle-exclamation.svg';
+import warningIcon from '../../../../assets/icons/circle-exclamation.svg';
+import infoIcon from '../../../../assets/icons/circle-info.svg';
+import { getSeverity } from './models';
+import './Issues.scss';
+const blockWrapper = cn('kv-result-issues');
+const blockIssues = cn('kv-issues');
+const blockIssue = cn('kv-issue');
+export function ResultIssues({ data }) {
+    const [showIssues, setShowIssues] = React.useState(false);
+    const issues = typeof data === 'string' ? undefined : data === null || data === void 0 ? void 0 : data.issues;
+    const hasIssues = Array.isArray(issues) && issues.length > 0;
+    const renderTitle = () => {
+        var _a, _b;
+        let content;
+        if (typeof data === 'string') {
+            content = 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 }))] }));
+        }
+        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 })] })));
+}
+export function Issues({ issues }) {
+    const mostSevereIssue = issues === null || issues === void 0 ? void 0 : issues.reduce((result, issue) => {
+        var _a;
+        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))) })));
+}
+function Issue({ issue, level = 0 }) {
+    const [isExpand, setIsExpand] = React.useState(true);
+    const severity = getSeverity(issue.severity);
+    const position = getIssuePosition(issue);
+    const issues = issue.issues;
+    const hasIssues = Array.isArray(issues) && issues.length > 0;
+    const arrowDirection = isExpand ? 'bottom' : 'right';
+    return (_jsxs("div", Object.assign({ 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 }) })))] })));
+}
+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))) })));
+}
+const severityIcons = {
+    S_INFO: infoIcon,
+    S_WARNING: warningIcon,
+    S_ERROR: errorIcon,
+    S_FATAL: fatalIcon,
+};
+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 }))] })));
+}
+function getIssuePosition(issue) {
+    const { position = {} } = issue;
+    if (!position) {
+        return false;
+    }
+    const { file, row, column } = position;
+    return `${file ? 'file:' : ''}${row}:${column}`;
+}

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

@@ -0,0 +1,4 @@
+export declare const SEVERITY_LIST: readonly ["S_FATAL", "S_ERROR", "S_WARNING", "S_INFO"];
+export declare 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/Issues/models.js

@@ -0,0 +1,12 @@
+export const SEVERITY_LIST = ['S_FATAL', 'S_ERROR', 'S_WARNING', 'S_INFO'];
+// Severity values from ydb/library/yql/public/issue/protos/issue_severity.proto
+// FATAL = 0;
+// ERROR = 1;
+// WARNING = 2;
+// INFO = 3;
+export function isSeverity(value) {
+    return value ? SEVERITY_LIST[value] !== undefined : false;
+}
+export function getSeverity(value) {
+    return isSeverity(value) ? SEVERITY_LIST[value] : 'S_INFO';
+}

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

@@ -0,0 +1,8 @@
+import type { EPathType } from '../../../../types/api/schema';
+import './Preview.scss';
+interface PreviewProps {
+    database: string;
+    type: EPathType | undefined;
+}
+export declare const Preview: ({ database, type }: PreviewProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+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, useTypedSelector } from '../../../../utils/hooks';
+import { Icon } from '../../../../components/Icon';
+import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import { QueryResultTable } from '../../../../components/QueryResultTable';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+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 = useDispatch();
+    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 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 }) }))] }))] })));
+    };
+    if (loading && !wasLoaded) {
+        return (_jsx("div", Object.assign({ 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') }));
+    }
+    else if (error) {
+        message = _jsx("div", Object.assign({ 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] })));
+};

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

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

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDispatch } from 'react-redux';
+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 { useQueryModes, 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');
+function QueriesHistory({ changeUserInput }) {
+    const dispatch = useDispatch();
+    const [queryMode, setQueryMode] = useQueryModes();
+    const queriesHistory = useTypedSelector(selectQueriesHistory);
+    const reversedHistory = [...queriesHistory].reverse();
+    const onQueryClick = (query) => {
+        if (query.syntax === QUERY_SYNTAX.pg && queryMode !== QUERY_MODES.pg) {
+            setQueryMode(QUERY_MODES.pg);
+        }
+        else if (query.syntax !== QUERY_SYNTAX.pg && queryMode === QUERY_MODES.pg) {
+            // Set query mode for queries with yql syntax
+            setQueryMode(QUERY_MODES.script);
+        }
+        changeUserInput({ input: query.queryText });
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+    };
+    const columns = [
+        {
+            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 }) })));
+            },
+            sortable: false,
+        },
+        {
+            name: 'syntax',
+            header: 'Syntax',
+            render: ({ row }) => {
+                return row.syntax === QUERY_SYNTAX.pg ? 'PostgreSQL' : 'YQL';
+            },
+            sortable: false,
+            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') }) })));
+}
+export default QueriesHistory;

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

@@ -0,0 +1,9 @@
+import type { EPathType } from '../../../types/api/schema';
+import './Query.scss';
+interface QueryProps {
+    theme: string;
+    path?: string;
+    type?: EPathType;
+}
+export declare const Query: (props: QueryProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDispatch } from 'react-redux';
+import block from 'bem-cn-lite';
+import { changeUserInput } from '../../../store/reducers/executeQuery';
+import { TENANT_QUERY_TABS_ID } from '../../../store/reducers/tenant/constants';
+import { useSetting, useTypedSelector } from '../../../utils/hooks';
+import { SAVED_QUERIES_KEY } from '../../../utils/constants';
+import { QueryTabs } from './QueryTabs/QueryTabs';
+import { SavedQueries } from './SavedQueries/SavedQueries';
+import QueriesHistory from './QueriesHistory/QueriesHistory';
+import QueryEditor from './QueryEditor/QueryEditor';
+import './Query.scss';
+const b = block('ydb-query');
+export const Query = (props) => {
+    const dispatch = useDispatch();
+    const { queryTab = TENANT_QUERY_TABS_ID.newQuery } = useTypedSelector((state) => state.tenant);
+    const [savedQueries, setSavedQueries] = useSetting(SAVED_QUERIES_KEY, []);
+    const handleDeleteQuery = (queryName) => {
+        const newSavedQueries = savedQueries.filter((el) => el.name.toLowerCase() !== queryName.toLowerCase());
+        setSavedQueries(newSavedQueries);
+    };
+    const handleUserInputChange = (value) => {
+        dispatch(changeUserInput(value));
+    };
+    const renderContent = () => {
+        switch (queryTab) {
+            case TENANT_QUERY_TABS_ID.newQuery: {
+                return _jsx(QueryEditor, Object.assign({ changeUserInput: handleUserInputChange }, props));
+            }
+            case TENANT_QUERY_TABS_ID.history: {
+                return _jsx(QueriesHistory, { changeUserInput: handleUserInputChange });
+            }
+            case TENANT_QUERY_TABS_ID.saved: {
+                return (_jsx(SavedQueries, { changeUserInput: handleUserInputChange, savedQueries: savedQueries, onDeleteQuery: handleDeleteQuery }));
+            }
+            default: {
+                return null;
+            }
+        }
+    };
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(QueryTabs, { className: b('tabs'), activeTab: queryTab }), _jsx("div", Object.assign({ className: b('content') }, { children: renderContent() }))] })));
+};

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

@@ -0,0 +1,6 @@
+import './QueryDuration.scss';
+interface QueryDurationProps {
+    duration?: string | number;
+}
+export declare const QueryDuration: ({ duration }: QueryDurationProps) => JSX.Element | null;
+export {};