ydb-embedded-ui 5.0.0 → 5.2.0

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

@@ -1,17 +1,17 @@
 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 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 { sendExecuteQuery, saveQueryToHistory, goToPreviousQuery, goToNextQuery, 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 { parseJson } from '../../../../utils/utils';
 import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from '../../utils/paneVisibilityToggleHelpers';
 import { Preview } from '../Preview/Preview';
 import { ExecuteResult } from '../ExecuteResult/ExecuteResult';
@@ -30,27 +30,18 @@ const RESULT_TYPES = {
     EXECUTE: 'execute',
     EXPLAIN: 'explain',
 };
-const b = cn('query-editor');
-const propTypes = {
-    sendExecuteQuery: PropTypes.func,
-    changeUserInput: PropTypes.func,
-    path: PropTypes.string,
-    response: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
-    executeQuery: PropTypes.object,
-    explainQuery: PropTypes.object,
-    setMonacoHotKey: PropTypes.func,
-    theme: PropTypes.string,
-    type: PropTypes.string,
-    initialQueryMode: PropTypes.string,
-    setTenantPath: PropTypes.func,
+const MONACO_HOT_KEY_ACTIONS = {
+    sendQuery: 'sendQuery',
+    sendSelectedQuery: 'sendSelectedQuery',
 };
+const b = cn('query-editor');
 const initialTenantCommonInfoState = {
     triggerExpand: false,
     triggerCollapse: false,
     collapsed: true,
 };
 function QueryEditor(props) {
-    const { path, executeQuery, theme, setTenantPath, changeUserInput } = props;
+    const { path, setTenantPath: setPath, executeQuery, explainQuery, type, theme, changeUserInput, showPreview, } = props;
     const { tenantPath: savedPath } = executeQuery;
     const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
     const [isResultLoaded, setIsResultLoaded] = useState(false);
@@ -58,27 +49,44 @@ function QueryEditor(props) {
     const [useMultiSchema] = useSetting(QUERY_USE_MULTI_SCHEMA_KEY);
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
     const [savedQueries, setSavedQueries] = useSetting(SAVED_QUERIES_KEY);
+    const [monacoHotKey, setMonacoHotKey] = useState(null);
     useEffect(() => {
         if (savedPath !== path) {
             if (savedPath) {
                 changeUserInput({ input: '' });
             }
-            setTenantPath(path);
+            setPath(path);
         }
-    }, [changeUserInput, setTenantPath, path, savedPath]);
+    }, [changeUserInput, setPath, path, savedPath]);
     const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED), initialTenantCommonInfoState);
-    const editorRef = useRef(null);
+    const editorRef = useRef();
     useEffect(() => {
+        const updateEditor = () => {
+            if (editorRef.current) {
+                editorRef.current.layout();
+            }
+        };
+        const onChangeWindow = _.throttle(() => {
+            updateEditor();
+        }, 100);
         updateEditor();
         window.addEventListener('resize', onChangeWindow);
-        window.addEventListener('storage', storageEventHandler);
         return () => {
             window.removeEventListener('resize', onChangeWindow);
-            window.removeEventListener('storage', storageEventHandler);
-            window.onbeforeunload = undefined;
-            props.setMonacoHotKey(null);
         };
     }, []);
+    useEffect(() => {
+        const storageEventHandler = (event) => {
+            if (event.key === SAVED_QUERIES_KEY) {
+                const v = parseJson(event.newValue);
+                setSavedQueries(v);
+            }
+        };
+        window.addEventListener('storage', storageEventHandler);
+        return () => {
+            window.removeEventListener('storage', storageEventHandler);
+        };
+    }, [setSavedQueries]);
     useEffect(() => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
     }, []);
@@ -92,22 +100,66 @@ function QueryEditor(props) {
     }, [props.showPreview, isResultLoaded]);
     useEffect(() => {
         var _a;
-        const { explainQuery: { data }, executeQuery: { input, history }, } = props;
+        const { input, history } = executeQuery;
         const hasUnsavedInput = input
-            ? input !== history.queries[((_a = history.queries) === null || _a === void 0 ? void 0 : _a.length) - 1]
+            ? input !== ((_a = history.queries[history.queries.length - 1]) === null || _a === void 0 ? void 0 : _a.queryText)
             : false;
         if (hasUnsavedInput) {
-            window.onbeforeunload = checkIfHasUnsavedInput;
+            window.onbeforeunload = (e) => {
+                e.preventDefault();
+                // Chrome requires returnValue to be set
+                e.returnValue = '';
+            };
         }
         else {
-            window.onbeforeunload = undefined;
+            window.onbeforeunload = null;
         }
-        if (!data || resultType !== RESULT_TYPES.EXPLAIN) {
+        return () => {
+            window.onbeforeunload = null;
+        };
+    }, [executeQuery]);
+    const handleSendExecuteClick = (mode, text) => {
+        var _a;
+        if (!mode) {
             return;
         }
-    }, [props.executeQuery, props.executeQuery]);
+        const { input, history } = executeQuery;
+        const schema = useMultiSchema ? 'multi' : 'modern';
+        const query = text !== null && text !== void 0 ? text : input;
+        setLastUsedQueryAction(QUERY_ACTIONS.execute);
+        setResultType(RESULT_TYPES.EXECUTE);
+        props.sendExecuteQuery({
+            query,
+            database: path,
+            mode,
+            schema,
+        });
+        setIsResultLoaded(true);
+        props.setShowPreview(false);
+        // Don't save partial queries in history
+        if (!text) {
+            const { queries, currentIndex } = history;
+            if (query !== ((_a = queries[currentIndex]) === null || _a === void 0 ? void 0 : _a.queryText)) {
+                props.saveQueryToHistory(input, mode);
+            }
+        }
+        dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
+    };
+    const handleGetExplainQueryClick = (mode) => {
+        const { input } = executeQuery;
+        setLastUsedQueryAction(QUERY_ACTIONS.explain);
+        setResultType(RESULT_TYPES.EXPLAIN);
+        props.getExplainQuery({
+            query: input,
+            database: path,
+            mode: mode,
+        });
+        setIsResultLoaded(true);
+        props.setShowPreview(false);
+        dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
+    };
     useEffect(() => {
-        const { monacoHotKey, setMonacoHotKey } = props;
+        var _a, _b;
         if (monacoHotKey === null) {
             return;
         }
@@ -115,31 +167,30 @@ function QueryEditor(props) {
         switch (monacoHotKey) {
             case MONACO_HOT_KEY_ACTIONS.sendQuery: {
                 if (lastUsedQueryAction === QUERY_ACTIONS.explain) {
-                    return handleGetExplainQueryClick(queryMode);
+                    handleGetExplainQueryClick(queryMode);
                 }
                 else {
-                    return handleSendExecuteClick(queryMode);
+                    handleSendExecuteClick(queryMode);
                 }
+                break;
             }
-            case MONACO_HOT_KEY_ACTIONS.goPrev: {
-                return handlePreviousHistoryClick();
-            }
-            case MONACO_HOT_KEY_ACTIONS.goNext: {
-                return handleNextHistoryClick();
-            }
-            default: {
-                return;
+            case MONACO_HOT_KEY_ACTIONS.sendSelectedQuery: {
+                const selection = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getSelection();
+                const model = (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.getModel();
+                if (selection && model) {
+                    const text = model.getValueInRange({
+                        startLineNumber: selection.getSelectionStart().lineNumber,
+                        startColumn: selection.getSelectionStart().column,
+                        endLineNumber: selection.getPosition().lineNumber,
+                        endColumn: selection.getPosition().column,
+                    });
+                    handleSendExecuteClick(queryMode, text);
+                }
+                break;
             }
         }
-    }, [props.monacoHotKey]);
-    const checkIfHasUnsavedInput = (e) => {
-        e.preventDefault();
-        // Chrome requires returnValue to be set
-        e.returnValue = '';
-    };
-    const handleKeyBinding = (value) => {
-        return () => props.setMonacoHotKey(value);
-    };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [monacoHotKey]);
     const editorDidMount = (editor, monaco) => {
         editorRef.current = editor;
         editor.focus();
@@ -151,14 +202,33 @@ function QueryEditor(props) {
                 monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
             ],
             // A precondition for this action.
-            precondition: null,
+            precondition: undefined,
             // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
-            keybindingContext: null,
+            keybindingContext: undefined,
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 1,
             // Method that will be executed when the action is triggered.
-            // @param editor The editor instance is passed in as a convinience
-            run: handleKeyBinding(MONACO_HOT_KEY_ACTIONS.sendQuery),
+            // @param editor The editor instance is passed in as a convenience
+            run: () => setMonacoHotKey(MONACO_HOT_KEY_ACTIONS.sendQuery),
+        });
+        const canSendSelectedText = editor.createContextKey('canSendSelectedText', false);
+        editor.onDidChangeCursorSelection(({ selection, secondarySelections }) => {
+            const notEmpty = selection.selectionStartLineNumber !== selection.positionLineNumber ||
+                selection.selectionStartColumn !== selection.positionColumn;
+            const hasMultipleSelections = secondarySelections.length > 0;
+            canSendSelectedText.set(notEmpty && !hasMultipleSelections);
+        });
+        editor.addAction({
+            id: 'sendSelectedQuery',
+            label: 'Send selected query',
+            keybindings: [
+                // eslint-disable-next-line no-bitwise
+                monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.Enter,
+            ],
+            precondition: 'canSendSelectedText',
+            contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
+            contextMenuOrder: 1,
+            run: () => setMonacoHotKey(MONACO_HOT_KEY_ACTIONS.sendSelectedQuery),
         });
         editor.addAction({
             id: 'previous-query',
@@ -169,7 +239,9 @@ function QueryEditor(props) {
             ],
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 2,
-            run: handleKeyBinding(MONACO_HOT_KEY_ACTIONS.goPrev),
+            run: () => {
+                props.goToPreviousQuery();
+            },
         });
         editor.addAction({
             id: 'next-query',
@@ -180,47 +252,16 @@ function QueryEditor(props) {
             ],
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 3,
-            run: handleKeyBinding(MONACO_HOT_KEY_ACTIONS.goNext),
+            run: () => {
+                props.goToNextQuery();
+            },
         });
     };
     const onChange = (newValue) => {
         props.changeUserInput({ input: newValue });
     };
-    const handleSendExecuteClick = (mode) => {
-        const { path, executeQuery: { input, history }, sendExecuteQuery, saveQueryToHistory, setShowPreview, } = props;
-        const schema = useMultiSchema ? 'multi' : 'modern';
-        setLastUsedQueryAction(QUERY_ACTIONS.execute);
-        setResultType(RESULT_TYPES.EXECUTE);
-        sendExecuteQuery({
-            query: input,
-            database: path,
-            mode,
-            schema,
-        });
-        setIsResultLoaded(true);
-        setShowPreview(false);
-        const { queries, currentIndex } = history;
-        if (input !== queries[currentIndex]) {
-            saveQueryToHistory(input, mode);
-        }
-        dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
-    };
-    const handleGetExplainQueryClick = (mode) => {
-        const { path, executeQuery: { input }, getExplainQuery, setShowPreview, } = props;
-        setLastUsedQueryAction(QUERY_ACTIONS.explain);
-        setResultType(RESULT_TYPES.EXPLAIN);
-        getExplainQuery({
-            query: input,
-            database: path,
-            mode: mode,
-        });
-        setIsResultLoaded(true);
-        setShowPreview(false);
-        dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
-    };
     const handleAstQuery = () => {
-        const { path, executeQuery: { input }, getExplainQueryAst, } = props;
-        getExplainQueryAst({ query: input, database: path });
+        props.getExplainQueryAst({ query: executeQuery.input, database: path });
     };
     const onCollapseResultHandler = () => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
@@ -231,101 +272,31 @@ function QueryEditor(props) {
     const onSplitStartDragAdditional = () => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.clear);
     };
-    const renderExecuteQuery = () => {
-        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 (_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) {
-            case RESULT_TYPES.EXECUTE:
-                result = renderExecuteQuery();
-                break;
-            case RESULT_TYPES.EXPLAIN:
-                result = renderExplainQuery();
-                break;
-            default:
-                result = null;
-        }
-        return result;
-    };
-    const renderPreview = () => {
-        const { path, type } = props;
-        return _jsx(Preview, { database: path, type: type });
-    };
-    const handlePreviousHistoryClick = () => {
-        const { changeUserInput, executeQuery: { history }, goToPreviousQuery, } = props;
-        const { queries, currentIndex } = history;
-        if (previousButtonIsDisabled()) {
-            return;
-        }
-        goToPreviousQuery();
-        changeUserInput({ input: queries[currentIndex - 1] });
-    };
-    const handleNextHistoryClick = () => {
-        const { changeUserInput, executeQuery: { history }, goToNextQuery, } = props;
-        const { queries, currentIndex } = history;
-        if (nextButtonIsDisabled()) {
-            return;
-        }
-        goToNextQuery();
-        changeUserInput({ input: queries[currentIndex + 1] });
-    };
-    const previousButtonIsDisabled = () => {
-        const { history: { currentIndex }, } = props.executeQuery;
-        return currentIndex <= 0;
-    };
-    const nextButtonIsDisabled = () => {
-        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 { input } = executeQuery;
         const queryIndex = savedQueries.findIndex((el) => el.name.toLowerCase() === queryName.toLowerCase());
         const newSavedQueries = [...savedQueries];
         const newQuery = { name: queryName, body: input };
-        if (queryIndex !== -1) {
-            newSavedQueries[queryIndex] = newQuery;
+        if (queryIndex === -1) {
+            newSavedQueries.push(newQuery);
         }
         else {
-            newSavedQueries.push(newQuery);
+            newSavedQueries[queryIndex] = newQuery;
         }
         setSavedQueries(newSavedQueries);
     };
     const renderControls = () => {
-        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 }));
+        return (_jsx(QueryEditorControls, { onRunButtonClick: handleSendExecuteClick, runIsLoading: executeQuery.loading, onExplainButtonClick: handleGetExplainQueryClick, explainIsLoading: explainQuery.loading, onSaveQueryClick: onSaveQueryHandler, savedQueries: savedQueries, disabled: !executeQuery.input, onUpdateQueryMode: setQueryMode, queryMode: queryMode, highlightedAction: lastUsedQueryAction }));
     };
-    const result = renderResult();
     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,
-                    }) }, { 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 }))] })) })));
+                    }) }, { 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: _jsx(Result, { executeQuery: executeQuery, explainQuery: explainQuery, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, handleAstQuery: handleAstQuery, theme: theme, resultType: resultType, path: path, showPreview: showPreview }) }))] })) })));
 }
 const mapStateToProps = (state) => {
-    var _a;
     return {
         executeQuery: state.executeQuery,
         explainQuery: state.explainQuery,
         showPreview: state.schema.showPreview,
-        currentSchema: state.schema.currentSchema,
-        monacoHotKey: (_a = state.executeQuery) === null || _a === void 0 ? void 0 : _a.monacoHotKey,
     };
 };
 const mapDispatchToProps = {
@@ -336,8 +307,20 @@ const mapDispatchToProps = {
     getExplainQuery,
     getExplainQueryAst,
     setShowPreview,
-    setMonacoHotKey,
     setTenantPath,
 };
-QueryEditor.propTypes = propTypes;
 export default connect(mapStateToProps, mapDispatchToProps)(QueryEditor);
+function Result({ executeQuery, explainQuery, resultVisibilityState, onExpandResultHandler, onCollapseResultHandler, type, handleAstQuery, theme, resultType, path, showPreview, }) {
+    if (showPreview) {
+        return _jsx(Preview, { database: path, type: type });
+    }
+    if (resultType === RESULT_TYPES.EXECUTE) {
+        const { data, error, stats } = executeQuery;
+        return data || error ? (_jsx(ExecuteResult, { data: data, stats: stats, error: error, isResultsCollapsed: resultVisibilityState.collapsed, onExpandResults: onExpandResultHandler, onCollapseResults: onCollapseResultHandler })) : null;
+    }
+    if (resultType === RESULT_TYPES.EXPLAIN) {
+        const { data, dataAst, error, loading, loadingAst } = explainQuery;
+        return (_jsx(ExplainResult, { error: error, explain: data, astQuery: handleAstQuery, ast: dataAst, loading: loading, loadingAst: loadingAst, theme: theme, isResultsCollapsed: resultVisibilityState.collapsed, onExpandResults: onExpandResultHandler, onCollapseResults: onCollapseResultHandler }));
+    }
+    return null;
+}

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

@@ -10,7 +10,7 @@ interface QueryEditorControlsProps {
     disabled: boolean;
     onUpdateQueryMode: (mode: QueryMode) => void;
     queryMode: QueryMode;
-    highlitedAction: QueryAction;
+    highlightedAction: QueryAction;
 }
-export declare const QueryEditorControls: ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, onSaveQueryClick, savedQueries, disabled, onUpdateQueryMode, queryMode, highlitedAction, }: QueryEditorControlsProps) => JSX.Element;
+export declare const QueryEditorControls: ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, onSaveQueryClick, savedQueries, disabled, onUpdateQueryMode, queryMode, highlightedAction, }: QueryEditorControlsProps) => JSX.Element;
 export {};

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

@@ -33,7 +33,7 @@ const QueryModeSelectorOptions = {
         description: i18n('method-description.pg'),
     },
 };
-export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, onSaveQueryClick, savedQueries, disabled, onUpdateQueryMode, queryMode, highlitedAction, }) => {
+export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, onSaveQueryClick, savedQueries, disabled, onUpdateQueryMode, queryMode, highlightedAction, }) => {
     const querySelectorMenuItems = useMemo(() => {
         return Object.entries(QueryModeSelectorOptions).map(([mode, { title, description }]) => {
             return {
@@ -44,8 +44,8 @@ export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainB
             };
         });
     }, [onUpdateQueryMode]);
-    const runView = highlitedAction === 'execute' ? 'action' : undefined;
-    const explainView = highlitedAction === 'explain' ? 'action' : undefined;
+    const runView = highlightedAction === 'execute' ? 'action' : undefined;
+    const explainView = highlightedAction === '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: () => {

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

@@ -1,4 +1,14 @@
 import type { TenantQueryTab } from '../../../../store/reducers/tenant/types';
+export declare const queryEditorTabs: ({
+    id: "newQuery";
+    title: string;
+} | {
+    id: "history";
+    title: string;
+} | {
+    id: "saved";
+    title: string;
+})[];
 interface QueryEditorTabsProps {
     className?: string;
     activeTab?: TenantQueryTab;

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

@@ -18,7 +18,7 @@ const saved = {
     id: TENANT_QUERY_TABS_ID.saved,
     title: i18n('tabs.saved'),
 };
-const queryEditorTabs = [newQuery, history, saved];
+export const queryEditorTabs = [newQuery, history, saved];
 export const QueryTabs = ({ className, activeTab }) => {
     const location = useLocation();
     const queryParams = parseQuery(location);

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

@@ -1,2 +1,2 @@
 import type { KeyValueRow } from '../../../../types/api/query';
-export declare const getPreparedResult: (data: KeyValueRow[] | undefined) => string;
+export declare function getPreparedResult(data: KeyValueRow[] | undefined): string;

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

@@ -1,23 +1,25 @@
-export const getPreparedResult = (data) => {
+export function getPreparedResult(data) {
     const columnDivider = '\t';
     const rowDivider = '\n';
     if (!(data === null || data === void 0 ? void 0 : data.length)) {
         return '';
     }
     const columnHeaders = Object.keys(data[0]);
-    const rows = Array(columnHeaders).concat(data);
-    return rows
-        .map((item) => {
-        const row = [];
-        for (const field in item) {
-            if (typeof item[field] === 'object' || Array.isArray(item[field])) {
-                row.push(JSON.stringify(item[field]));
-            }
-            else {
-                row.push(item[field]);
-            }
+    const rows = [columnHeaders.map(escapeValue).join(columnDivider)];
+    for (const row of data) {
+        const value = [];
+        for (const column of columnHeaders) {
+            const v = row[column];
+            value.push(escapeValue(typeof v === 'object' ? JSON.stringify(v) : `${v}`));
         }
-        return row.join(columnDivider);
-    })
-        .join(rowDivider);
-};
+        rows.push(value.join(columnDivider));
+    }
+    return rows.join(rowDivider);
+}
+function escapeValue(value) {
+    return value
+        .replaceAll('\\', '\\\\')
+        .replaceAll('\n', '\\n')
+        .replaceAll('\r', '\\r')
+        .replaceAll('\t', '\\t');
+}

package/dist/containers/Tenant/Tenant.js

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import cn from 'bem-cn-lite';
 import { useLocation } from 'react-router';
 import qs from 'qs';
+import { Helmet } from 'react-helmet-async';
 import { DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY } from '../../utils/constants';
 import { useTypedSelector } from '../../utils/hooks';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
@@ -13,6 +14,7 @@ import { AccessDenied } from '../../components/Errors/403';
 import { ObjectSummary } from './ObjectSummary/ObjectSummary';
 import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
 import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from './utils/paneVisibilityToggleHelpers';
+import i18n from './i18n';
 import './Tenant.scss';
 const b = cn('tenant-page');
 const getTenantSummaryState = () => {
@@ -61,6 +63,7 @@ function Tenant(props) {
         dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.clear);
     };
     const showBlockingError = schemaStatus === 403;
-    return (_jsx("div", Object.assign({ className: b() }, { children: showBlockingError ? (_jsx(AccessDenied, {})) : (_jsxs(SplitPane, Object.assign({ defaultSizePaneKey: DEFAULT_SIZE_TENANT_KEY, defaultSizes: [25, 75], triggerCollapse: summaryVisibilityState.triggerCollapse, triggerExpand: summaryVisibilityState.triggerExpand, minSize: [36, 200], onSplitStartDragAdditional: onSplitStartDragAdditional }, { children: [_jsx(ObjectSummary, { type: preloadedPathType || currentPathType, subType: preloadedPathSubType || currentPathSubType, onCollapseSummary: onCollapseSummaryHandler, onExpandSummary: onExpandSummaryHandler, isCollapsed: summaryVisibilityState.collapsed }), _jsx(ObjectGeneral, { type: preloadedPathType || currentPathType, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps })] }))) })));
+    const title = currentSchemaPath || tenantName || i18n('page.title');
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Helmet, { defaultTitle: `${title} — YDB Monitoring`, titleTemplate: `%s — ${title} — YDB Monitoring` }), showBlockingError ? (_jsx(AccessDenied, {})) : (_jsxs(SplitPane, Object.assign({ defaultSizePaneKey: DEFAULT_SIZE_TENANT_KEY, defaultSizes: [25, 75], triggerCollapse: summaryVisibilityState.triggerCollapse, triggerExpand: summaryVisibilityState.triggerExpand, minSize: [36, 200], onSplitStartDragAdditional: onSplitStartDragAdditional }, { children: [_jsx(ObjectSummary, { type: preloadedPathType || currentPathType, subType: preloadedPathSubType || currentPathSubType, onCollapseSummary: onCollapseSummaryHandler, onExpandSummary: onExpandSummaryHandler, isCollapsed: summaryVisibilityState.collapsed }), _jsx(ObjectGeneral, { type: preloadedPathType || currentPathType, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps })] })))] })));
 }
 export default Tenant;

package/dist/containers/Tenant/i18n/en.json

@@ -1,4 +1,5 @@
 {
+    "page.title": "Database",
     "acl.owner": "Owner",
     "acl.empty": "No Acl data",
     "summary.navigation": "Navigation",

package/dist/containers/Tenant/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "page.title" | "acl.owner" | "acl.empty" | "summary.navigation" | "summary.showPreview" | "summary.copySchemaPath" | "actions.copied" | "actions.notCopied" | "actions.externalTableSelectUnavailable" | "actions.copyPath" | "actions.openPreview" | "actions.createTable" | "actions.createExternalTable" | "actions.createTopic" | "actions.dropTable" | "actions.dropTopic" | "actions.alterTable" | "actions.alterTopic" | "actions.selectQuery" | "actions.upsertQuery", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Tenant/i18n/index.js

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../../utils/i18n';
+import { registerKeysets } from '../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-tenant';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { en, ru });

package/dist/containers/Tenant/i18n/ru.json

@@ -1,4 +1,5 @@
 {
+    "page.title": "База данных",
     "acl.owner": "Владелец",
     "acl.empty": "Нет данных об Acl",
     "summary.navigation": "Навигация",

package/dist/containers/UserSettings/Setting.d.ts

@@ -3,6 +3,7 @@ export declare type SettingsElementType = 'switch' | 'radio';
 export interface SettingProps {
     type?: SettingsElementType;
     title: string;
+    description?: ReactNode;
     settingKey: string;
     helpPopoverContent?: ReactNode;
     options?: {
@@ -12,4 +13,4 @@ export interface SettingProps {
     defaultValue?: unknown;
     onValueUpdate?: VoidFunction;
 }
-export declare const Setting: ({ type, settingKey, title, helpPopoverContent, options, defaultValue, onValueUpdate, }: SettingProps) => JSX.Element;
+export declare const Setting: ({ type, settingKey, title, description, helpPopoverContent, options, defaultValue, onValueUpdate, }: SettingProps) => JSX.Element;