ydb-embedded-ui 4.32.0 → 5.0.0

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

@@ -0,0 +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 i18n from '../i18n';
+import './QueryDuration.scss';
+const b = block('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') }) })));
+};

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

@@ -0,0 +1,32 @@
+declare var _default: import("react-redux").ConnectedComponent<typeof QueryEditor, import("react-redux").Omit<PropTypes.InferProps<{
+    sendExecuteQuery: PropTypes.Requireable<(...args: any[]) => any>;
+    changeUserInput: PropTypes.Requireable<(...args: any[]) => any>;
+    path: PropTypes.Requireable<string>;
+    response: PropTypes.Requireable<boolean | any[]>;
+    executeQuery: PropTypes.Requireable<object>;
+    explainQuery: PropTypes.Requireable<object>;
+    setMonacoHotKey: PropTypes.Requireable<(...args: any[]) => any>;
+    theme: PropTypes.Requireable<string>;
+    type: PropTypes.Requireable<string>;
+    initialQueryMode: PropTypes.Requireable<string>;
+    setTenantPath: PropTypes.Requireable<(...args: any[]) => any>;
+}>, "executeQuery" | "explainQuery" | "setTenantPath" | "sendExecuteQuery" | "setMonacoHotKey">>;
+export default _default;
+declare function QueryEditor(props: any): JSX.Element;
+declare namespace QueryEditor {
+    export { propTypes };
+}
+import PropTypes from "prop-types";
+declare namespace propTypes {
+    const sendExecuteQuery: PropTypes.Requireable<(...args: any[]) => any>;
+    const changeUserInput: PropTypes.Requireable<(...args: any[]) => any>;
+    const path: PropTypes.Requireable<string>;
+    const response: PropTypes.Requireable<boolean | any[]>;
+    const executeQuery: PropTypes.Requireable<object>;
+    const explainQuery: PropTypes.Requireable<object>;
+    const setMonacoHotKey: PropTypes.Requireable<(...args: any[]) => any>;
+    const theme: PropTypes.Requireable<string>;
+    const type: PropTypes.Requireable<string>;
+    const initialQueryMode: PropTypes.Requireable<string>;
+    const setTenantPath: PropTypes.Requireable<(...args: any[]) => any>;
+}

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

@@ -1,45 +1,23 @@
-import {useEffect, useReducer, useRef, useState} from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useReducer, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import MonacoEditor from 'react-monaco-editor';
-
 import SplitPane from '../../../../components/SplitPane';
-
-import {
-    sendExecuteQuery,
-    saveQueryToHistory,
-    goToPreviousQuery,
-    goToNextQuery,
-    MONACO_HOT_KEY_ACTIONS,
-    setMonacoHotKey,
-    setTenantPath,
-} from '../../../../store/reducers/executeQuery';
-import {getExplainQuery, getExplainQueryAst} from '../../../../store/reducers/explainQuery';
-import {setShowPreview} from '../../../../store/reducers/schema/schema';
-import {
-    DEFAULT_IS_QUERY_RESULT_COLLAPSED,
-    DEFAULT_SIZE_RESULT_PANE_KEY,
-    SAVED_QUERIES_KEY,
-    LAST_USED_QUERY_ACTION_KEY,
-    QUERY_USE_MULTI_SCHEMA_KEY,
-} from '../../../../utils/constants';
-import {useSetting, useQueryModes} from '../../../../utils/hooks';
-import {QUERY_ACTIONS} from '../../../../utils/query';
-
-import {
-    PaneVisibilityActionTypes,
-    paneVisibilityToggleReducerCreator,
-} from '../../utils/paneVisibilityToggleHelpers';
-import {Preview} from '../Preview/Preview';
-
-import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
-import {ExplainResult} from '../ExplainResult/ExplainResult';
-import {QueryEditorControls} from '../QueryEditorControls/QueryEditorControls';
-
+import { sendExecuteQuery, saveQueryToHistory, goToPreviousQuery, goToNextQuery, MONACO_HOT_KEY_ACTIONS, setMonacoHotKey, setTenantPath, } from '../../../../store/reducers/executeQuery';
+import { getExplainQuery, getExplainQueryAst } from '../../../../store/reducers/explainQuery';
+import { setShowPreview } from '../../../../store/reducers/schema/schema';
+import { DEFAULT_IS_QUERY_RESULT_COLLAPSED, DEFAULT_SIZE_RESULT_PANE_KEY, SAVED_QUERIES_KEY, LAST_USED_QUERY_ACTION_KEY, QUERY_USE_MULTI_SCHEMA_KEY, } from '../../../../utils/constants';
+import { useSetting, useQueryModes } from '../../../../utils/hooks';
+import { QUERY_ACTIONS } from '../../../../utils/query';
+import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from '../../utils/paneVisibilityToggleHelpers';
+import { Preview } from '../Preview/Preview';
+import { ExecuteResult } from '../ExecuteResult/ExecuteResult';
+import { ExplainResult } from '../ExplainResult/ExplainResult';
+import { QueryEditorControls } from '../QueryEditorControls/QueryEditorControls';
 import './QueryEditor.scss';
-
 const EDITOR_OPTIONS = {
     automaticLayout: true,
     selectOnLineNumbers: true,
@@ -47,15 +25,12 @@ const EDITOR_OPTIONS = {
         enabled: false,
     },
 };
-
 const CONTEXT_MENU_GROUP_ID = 'navigation';
 const RESULT_TYPES = {
     EXECUTE: 'execute',
     EXPLAIN: 'explain',
 };
-
 const b = cn('query-editor');
-
 const propTypes = {
     sendExecuteQuery: PropTypes.func,
     changeUserInput: PropTypes.func,
@@ -69,46 +44,34 @@ const propTypes = {
     initialQueryMode: PropTypes.string,
     setTenantPath: PropTypes.func,
 };
-
 const initialTenantCommonInfoState = {
     triggerExpand: false,
     triggerCollapse: false,
     collapsed: true,
 };
 function QueryEditor(props) {
-    const {path, executeQuery, theme, setTenantPath, changeUserInput} = props;
-    const {tenantPath: savedPath} = executeQuery;
-
+    const { path, executeQuery, theme, setTenantPath, changeUserInput } = props;
+    const { tenantPath: savedPath } = executeQuery;
     const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
-
     const [isResultLoaded, setIsResultLoaded] = useState(false);
     const [queryMode, setQueryMode] = useQueryModes();
     const [useMultiSchema] = useSetting(QUERY_USE_MULTI_SCHEMA_KEY);
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
     const [savedQueries, setSavedQueries] = useSetting(SAVED_QUERIES_KEY);
-
     useEffect(() => {
         if (savedPath !== path) {
             if (savedPath) {
-                changeUserInput({input: ''});
+                changeUserInput({ input: '' });
             }
             setTenantPath(path);
         }
     }, [changeUserInput, setTenantPath, path, savedPath]);
-
-    const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(
-        paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED),
-        initialTenantCommonInfoState,
-    );
-
+    const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED), initialTenantCommonInfoState);
     const editorRef = useRef(null);
-
     useEffect(() => {
         updateEditor();
-
         window.addEventListener('resize', onChangeWindow);
         window.addEventListener('storage', storageEventHandler);
-
         return () => {
             window.removeEventListener('resize', onChangeWindow);
             window.removeEventListener('storage', storageEventHandler);
@@ -116,42 +79,35 @@ function QueryEditor(props) {
             props.setMonacoHotKey(null);
         };
     }, []);
-
     useEffect(() => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
     }, []);
-
     useEffect(() => {
         if (props.showPreview || isResultLoaded) {
             dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
-        } else {
+        }
+        else {
             dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
         }
     }, [props.showPreview, isResultLoaded]);
-
     useEffect(() => {
-        const {
-            explainQuery: {data},
-            executeQuery: {input, history},
-        } = props;
-
+        var _a;
+        const { explainQuery: { data }, executeQuery: { input, history }, } = props;
         const hasUnsavedInput = input
-            ? input !== history.queries[history.queries?.length - 1]
+            ? input !== history.queries[((_a = history.queries) === null || _a === void 0 ? void 0 : _a.length) - 1]
             : false;
-
         if (hasUnsavedInput) {
             window.onbeforeunload = checkIfHasUnsavedInput;
-        } else {
+        }
+        else {
             window.onbeforeunload = undefined;
         }
-
         if (!data || resultType !== RESULT_TYPES.EXPLAIN) {
             return;
         }
     }, [props.executeQuery, props.executeQuery]);
-
     useEffect(() => {
-        const {monacoHotKey, setMonacoHotKey} = props;
+        const { monacoHotKey, setMonacoHotKey } = props;
         if (monacoHotKey === null) {
             return;
         }
@@ -160,7 +116,8 @@ function QueryEditor(props) {
             case MONACO_HOT_KEY_ACTIONS.sendQuery: {
                 if (lastUsedQueryAction === QUERY_ACTIONS.explain) {
                     return handleGetExplainQueryClick(queryMode);
-                } else {
+                }
+                else {
                     return handleSendExecuteClick(queryMode);
                 }
             }
@@ -175,17 +132,14 @@ function QueryEditor(props) {
             }
         }
     }, [props.monacoHotKey]);
-
     const checkIfHasUnsavedInput = (e) => {
         e.preventDefault();
         // Chrome requires returnValue to be set
         e.returnValue = '';
     };
-
     const handleKeyBinding = (value) => {
         return () => props.setMonacoHotKey(value);
     };
-
     const editorDidMount = (editor, monaco) => {
         editorRef.current = editor;
         editor.focus();
@@ -206,7 +160,6 @@ function QueryEditor(props) {
             // @param editor The editor instance is passed in as a convinience
             run: handleKeyBinding(MONACO_HOT_KEY_ACTIONS.sendQuery),
         });
-
         editor.addAction({
             id: 'previous-query',
             label: 'Previous query',
@@ -231,20 +184,11 @@ function QueryEditor(props) {
         });
     };
     const onChange = (newValue) => {
-        props.changeUserInput({input: newValue});
+        props.changeUserInput({ input: newValue });
     };
-
     const handleSendExecuteClick = (mode) => {
-        const {
-            path,
-            executeQuery: {input, history},
-            sendExecuteQuery,
-            saveQueryToHistory,
-            setShowPreview,
-        } = props;
-
+        const { path, executeQuery: { input, history }, sendExecuteQuery, saveQueryToHistory, setShowPreview, } = props;
         const schema = useMultiSchema ? 'multi' : 'modern';
-
         setLastUsedQueryAction(QUERY_ACTIONS.execute);
         setResultType(RESULT_TYPES.EXECUTE);
         sendExecuteQuery({
@@ -255,22 +199,14 @@ function QueryEditor(props) {
         });
         setIsResultLoaded(true);
         setShowPreview(false);
-
-        const {queries, currentIndex} = history;
+        const { queries, currentIndex } = history;
         if (input !== queries[currentIndex]) {
             saveQueryToHistory(input, mode);
         }
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
-
     const handleGetExplainQueryClick = (mode) => {
-        const {
-            path,
-            executeQuery: {input},
-            getExplainQuery,
-            setShowPreview,
-        } = props;
-
+        const { path, executeQuery: { input }, getExplainQuery, setShowPreview, } = props;
         setLastUsedQueryAction(QUERY_ACTIONS.explain);
         setResultType(RESULT_TYPES.EXPLAIN);
         getExplainQuery({
@@ -282,66 +218,27 @@ function QueryEditor(props) {
         setShowPreview(false);
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
-
     const handleAstQuery = () => {
-        const {
-            path,
-            executeQuery: {input},
-            getExplainQueryAst,
-        } = props;
-        getExplainQueryAst({query: input, database: path});
+        const { path, executeQuery: { input }, getExplainQueryAst, } = props;
+        getExplainQueryAst({ query: input, database: path });
     };
-
     const onCollapseResultHandler = () => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
     };
     const onExpandResultHandler = () => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
-
     const onSplitStartDragAdditional = () => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.clear);
     };
-
     const renderExecuteQuery = () => {
-        const {
-            executeQuery: {data, error, stats},
-        } = props;
-
-        return data || error ? (
-            <ExecuteResult
-                data={data}
-                stats={stats}
-                error={error}
-                isResultsCollapsed={resultVisibilityState.collapsed}
-                onExpandResults={onExpandResultHandler}
-                onCollapseResults={onCollapseResultHandler}
-            />
-        ) : null;
+        const { executeQuery: { data, error, stats }, } = props;
+        return data || error ? (_jsx(ExecuteResult, { data: data, stats: stats, error: error, isResultsCollapsed: resultVisibilityState.collapsed, onExpandResults: onExpandResultHandler, onCollapseResults: onCollapseResultHandler })) : null;
     };
-
     const renderExplainQuery = () => {
-        const {
-            explainQuery: {data, dataAst, error, loading, loadingAst},
-            theme,
-        } = props;
-
-        return (
-            <ExplainResult
-                error={error}
-                explain={data}
-                astQuery={handleAstQuery}
-                ast={dataAst}
-                loading={loading}
-                loadingAst={loadingAst}
-                theme={theme}
-                isResultsCollapsed={resultVisibilityState.collapsed}
-                onExpandResults={onExpandResultHandler}
-                onCollapseResults={onCollapseResultHandler}
-            />
-        );
+        const { explainQuery: { data, dataAst, error, loading, loadingAst }, theme, } = props;
+        return (_jsx(ExplainResult, { error: error, explain: data, astQuery: handleAstQuery, ast: dataAst, loading: loading, loadingAst: loadingAst, theme: theme, isResultsCollapsed: resultVisibilityState.collapsed, onExpandResults: onExpandResultHandler, onCollapseResults: onCollapseResultHandler }));
     };
-
     const renderResult = () => {
         let result;
         switch (resultType) {
@@ -354,167 +251,83 @@ function QueryEditor(props) {
             default:
                 result = null;
         }
-
         return result;
     };
-
     const renderPreview = () => {
-        const {path, type} = props;
-        return <Preview database={path} type={type} />;
+        const { path, type } = props;
+        return _jsx(Preview, { database: path, type: type });
     };
-
     const handlePreviousHistoryClick = () => {
-        const {
-            changeUserInput,
-            executeQuery: {history},
-            goToPreviousQuery,
-        } = props;
-        const {queries, currentIndex} = history;
-
+        const { changeUserInput, executeQuery: { history }, goToPreviousQuery, } = props;
+        const { queries, currentIndex } = history;
         if (previousButtonIsDisabled()) {
             return;
         }
-
         goToPreviousQuery();
-        changeUserInput({input: queries[currentIndex - 1]});
+        changeUserInput({ input: queries[currentIndex - 1] });
     };
-
     const handleNextHistoryClick = () => {
-        const {
-            changeUserInput,
-            executeQuery: {history},
-            goToNextQuery,
-        } = props;
-        const {queries, currentIndex} = history;
-
+        const { changeUserInput, executeQuery: { history }, goToNextQuery, } = props;
+        const { queries, currentIndex } = history;
         if (nextButtonIsDisabled()) {
             return;
         }
-
         goToNextQuery();
-        changeUserInput({input: queries[currentIndex + 1]});
+        changeUserInput({ input: queries[currentIndex + 1] });
     };
-
     const previousButtonIsDisabled = () => {
-        const {
-            history: {currentIndex},
-        } = props.executeQuery;
-
+        const { history: { currentIndex }, } = props.executeQuery;
         return currentIndex <= 0;
     };
-
     const nextButtonIsDisabled = () => {
-        const {
-            history: {queries, currentIndex},
-        } = props.executeQuery;
-
+        const { history: { queries, currentIndex }, } = props.executeQuery;
         return queries.length - 1 === currentIndex;
     };
-
     const onChangeWindow = _.throttle(() => {
         updateEditor();
     }, 100);
-
     const storageEventHandler = (event) => {
         if (event.key === SAVED_QUERIES_KEY) {
             setSavedQueries(event.newValue);
         }
     };
-
     const updateEditor = () => {
         if (editorRef.current) {
             editorRef.current.layout();
         }
     };
-
     const onSaveQueryHandler = (queryName) => {
-        const {
-            executeQuery: {input},
-        } = props;
-
-        const queryIndex = savedQueries.findIndex(
-            (el) => el.name.toLowerCase() === queryName.toLowerCase(),
-        );
+        const { executeQuery: { input }, } = props;
+        const queryIndex = savedQueries.findIndex((el) => el.name.toLowerCase() === queryName.toLowerCase());
         const newSavedQueries = [...savedQueries];
-        const newQuery = {name: queryName, body: input};
+        const newQuery = { name: queryName, body: input };
         if (queryIndex !== -1) {
             newSavedQueries[queryIndex] = newQuery;
-        } else {
+        }
+        else {
             newSavedQueries.push(newQuery);
         }
-
         setSavedQueries(newSavedQueries);
     };
-
     const renderControls = () => {
-        const {executeQuery, explainQuery} = props;
-
-        return (
-            <QueryEditorControls
-                onRunButtonClick={handleSendExecuteClick}
-                runIsLoading={executeQuery.loading}
-                onExplainButtonClick={handleGetExplainQueryClick}
-                explainIsLoading={explainQuery.loading}
-                onSaveQueryClick={onSaveQueryHandler}
-                savedQueries={savedQueries}
-                disabled={!executeQuery.input}
-                onUpdateQueryMode={setQueryMode}
-                queryMode={queryMode}
-                highlitedAction={lastUsedQueryAction}
-            />
-        );
+        const { executeQuery, explainQuery } = props;
+        return (_jsx(QueryEditorControls, { onRunButtonClick: handleSendExecuteClick, runIsLoading: executeQuery.loading, onExplainButtonClick: handleGetExplainQueryClick, explainIsLoading: explainQuery.loading, onSaveQueryClick: onSaveQueryHandler, savedQueries: savedQueries, disabled: !executeQuery.input, onUpdateQueryMode: setQueryMode, queryMode: queryMode, highlitedAction: lastUsedQueryAction }));
     };
-
     const result = renderResult();
-
-    return (
-        <div className={b()}>
-            <SplitPane
-                direction="vertical"
-                defaultSizePaneKey={DEFAULT_SIZE_RESULT_PANE_KEY}
-                triggerCollapse={resultVisibilityState.triggerCollapse}
-                triggerExpand={resultVisibilityState.triggerExpand}
-                minSize={[0, 52]}
-                collapsedSizes={[100, 0]}
-                onSplitStartDragAdditional={onSplitStartDragAdditional}
-            >
-                <div
-                    className={b('pane-wrapper', {
+    return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs(SplitPane, Object.assign({ direction: "vertical", defaultSizePaneKey: DEFAULT_SIZE_RESULT_PANE_KEY, triggerCollapse: resultVisibilityState.triggerCollapse, triggerExpand: resultVisibilityState.triggerExpand, minSize: [0, 52], collapsedSizes: [100, 0], onSplitStartDragAdditional: onSplitStartDragAdditional }, { children: [_jsxs("div", Object.assign({ className: b('pane-wrapper', {
                         top: true,
-                    })}
-                >
-                    <div className={b('monaco-wrapper')}>
-                        <div className={b('monaco')}>
-                            <MonacoEditor
-                                language="sql"
-                                value={executeQuery.input}
-                                options={EDITOR_OPTIONS}
-                                onChange={onChange}
-                                editorDidMount={editorDidMount}
-                                theme={`vs-${theme}`}
-                            />
-                        </div>
-                    </div>
-                    {renderControls()}
-                </div>
-                <div className={b('pane-wrapper')}>
-                    {props.showPreview ? renderPreview() : result}
-                </div>
-            </SplitPane>
-        </div>
-    );
+                    }) }, { children: [_jsx("div", Object.assign({ className: b('monaco-wrapper') }, { children: _jsx("div", Object.assign({ className: b('monaco') }, { children: _jsx(MonacoEditor, { language: "sql", value: executeQuery.input, options: EDITOR_OPTIONS, onChange: onChange, editorDidMount: editorDidMount, theme: `vs-${theme}` }) })) })), renderControls()] })), _jsx("div", Object.assign({ className: b('pane-wrapper') }, { children: props.showPreview ? renderPreview() : result }))] })) })));
 }
-
 const mapStateToProps = (state) => {
+    var _a;
     return {
         executeQuery: state.executeQuery,
         explainQuery: state.explainQuery,
         showPreview: state.schema.showPreview,
         currentSchema: state.schema.currentSchema,
-        monacoHotKey: state.executeQuery?.monacoHotKey,
+        monacoHotKey: (_a = state.executeQuery) === null || _a === void 0 ? void 0 : _a.monacoHotKey,
     };
 };
-
 const mapDispatchToProps = {
     sendExecuteQuery,
     saveQueryToHistory,
@@ -526,7 +339,5 @@ const mapDispatchToProps = {
     setMonacoHotKey,
     setTenantPath,
 };
-
 QueryEditor.propTypes = propTypes;
-
 export default connect(mapStateToProps, mapDispatchToProps)(QueryEditor);

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

@@ -0,0 +1,16 @@
+import type { QueryAction, QueryMode } from '../../../../types/store/query';
+import './QueryEditorControls.scss';
+interface QueryEditorControlsProps {
+    onRunButtonClick: (mode?: QueryMode) => void;
+    runIsLoading: boolean;
+    onExplainButtonClick: (mode?: QueryMode) => void;
+    explainIsLoading: boolean;
+    onSaveQueryClick: (queryName: string) => void;
+    savedQueries: unknown;
+    disabled: boolean;
+    onUpdateQueryMode: (mode: QueryMode) => void;
+    queryMode: QueryMode;
+    highlitedAction: QueryAction;
+}
+export declare const QueryEditorControls: ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, onSaveQueryClick, savedQueries, disabled, onUpdateQueryMode, queryMode, highlitedAction, }: QueryEditorControlsProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import block from 'bem-cn-lite';
+import { Button, DropdownMenu } from '@gravity-ui/uikit';
+import { useMemo } from 'react';
+import { QUERY_MODES, QUERY_MODES_TITLES } from '../../../../utils/query';
+import { Icon } from '../../../../components/Icon';
+import { LabelWithPopover } from '../../../../components/LabelWithPopover';
+import SaveQuery from '../SaveQuery/SaveQuery';
+import i18n from '../i18n';
+import './QueryEditorControls.scss';
+const queryModeSelectorQa = 'query-mode-selector';
+const queryModeSelectorPopupQa = 'query-mode-selector-popup';
+const b = block('ydb-query-editor-controls');
+const QueryModeSelectorOptions = {
+    [QUERY_MODES.script]: {
+        title: QUERY_MODES_TITLES[QUERY_MODES.script],
+        description: i18n('method-description.script'),
+    },
+    [QUERY_MODES.scan]: {
+        title: QUERY_MODES_TITLES[QUERY_MODES.scan],
+        description: i18n('method-description.scan'),
+    },
+    [QUERY_MODES.data]: {
+        title: QUERY_MODES_TITLES[QUERY_MODES.data],
+        description: i18n('method-description.data'),
+    },
+    [QUERY_MODES.query]: {
+        title: QUERY_MODES_TITLES[QUERY_MODES.query],
+        description: i18n('method-description.query'),
+    },
+    [QUERY_MODES.pg]: {
+        title: QUERY_MODES_TITLES[QUERY_MODES.pg],
+        description: i18n('method-description.pg'),
+    },
+};
+export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, onSaveQueryClick, savedQueries, disabled, onUpdateQueryMode, queryMode, highlitedAction, }) => {
+    const querySelectorMenuItems = useMemo(() => {
+        return Object.entries(QueryModeSelectorOptions).map(([mode, { title, description }]) => {
+            return {
+                text: (_jsx(LabelWithPopover, { className: b('item-with-popover'), contentClassName: b('popover'), text: title, popoverContent: description })),
+                action: () => {
+                    onUpdateQueryMode(mode);
+                },
+            };
+        });
+    }, [onUpdateQueryMode]);
+    const runView = highlitedAction === 'execute' ? 'action' : undefined;
+    const explainView = highlitedAction === 'explain' ? 'action' : undefined;
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('left') }, { children: [_jsxs(Button, Object.assign({ onClick: () => {
+                            onRunButtonClick(queryMode);
+                        }, disabled: disabled, loading: runIsLoading, view: runView }, { children: [_jsx(Icon, { name: "startPlay", viewBox: "0 0 16 16", width: 16, height: 16 }), 'Run'] })), _jsx(Button, Object.assign({ onClick: () => {
+                            onExplainButtonClick(queryMode);
+                        }, disabled: disabled, loading: explainIsLoading, view: explainView }, { children: "Explain" })), _jsx("div", Object.assign({ className: b('mode-selector') }, { children: _jsx(DropdownMenu, { items: querySelectorMenuItems, popupProps: {
+                                className: b('mode-selector__popup'),
+                                qa: queryModeSelectorPopupQa,
+                            }, switcher: _jsx(Button, Object.assign({ className: b('mode-selector__button'), qa: queryModeSelectorQa }, { children: _jsxs("span", Object.assign({ className: b('mode-selector__button-content') }, { children: [`${i18n('controls.query-mode-selector_type')} ${QueryModeSelectorOptions[queryMode].title}`, _jsx(Icon, { name: "chevron-down", width: 16, height: 16 })] })) })) }) }))] })), _jsx(SaveQuery, { savedQueries: savedQueries, onSaveQuery: onSaveQueryClick, saveButtonDisabled: disabled })] })));
+};

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

@@ -0,0 +1,7 @@
+import type { TenantQueryTab } from '../../../../store/reducers/tenant/types';
+interface QueryEditorTabsProps {
+    className?: string;
+    activeTab?: TenantQueryTab;
+}
+export declare const QueryTabs: ({ className, activeTab }: QueryEditorTabsProps) => JSX.Element;
+export {};