ydb-embedded-ui 6.12.0 → 6.13.0

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { isEqual } from 'lodash';
 import throttle from 'lodash/throttle';
 import { connect } from 'react-redux';
 import { MonacoEditor } from '../../../../components/MonacoEditor/MonacoEditor';
@@ -9,8 +10,10 @@ import { explainQueryApi } from '../../../../store/reducers/explainQuery/explain
 import { setQueryAction } from '../../../../store/reducers/queryActions/queryActions';
 import { setShowPreview } from '../../../../store/reducers/schema/schema';
 import { cn } from '../../../../utils/cn';
-import { DEFAULT_IS_QUERY_RESULT_COLLAPSED, DEFAULT_SIZE_RESULT_PANE_KEY, LAST_USED_QUERY_ACTION_KEY, QUERY_USE_MULTI_SCHEMA_KEY, } from '../../../../utils/constants';
-import { useQueryModes, useSetting } from '../../../../utils/hooks';
+import { DEFAULT_IS_QUERY_RESULT_COLLAPSED, DEFAULT_SIZE_RESULT_PANE_KEY, ENABLE_TRACING_LEVEL_KEY, LAST_USED_QUERY_ACTION_KEY, QUERY_USE_MULTI_SCHEMA_KEY, } from '../../../../utils/constants';
+import { useEventHandler, useQueryExecutionSettings, useSetting } from '../../../../utils/hooks';
+import { useChangedQuerySettings } from '../../../../utils/hooks/useChangedQuerySettings';
+import { useLastQueryExecutionSettings } from '../../../../utils/hooks/useLastQueryExecutionSettings';
 import { YQL_LANGUAGE_ID } from '../../../../utils/monaco/constats';
 import { QUERY_ACTIONS } from '../../../../utils/query';
 import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from '../../utils/paneVisibilityToggleHelpers';
@@ -29,10 +32,6 @@ const RESULT_TYPES = {
     EXECUTE: 'execute',
     EXPLAIN: 'explain',
 };
-const MONACO_HOT_KEY_ACTIONS = {
-    sendQuery: 'sendQuery',
-    sendSelectedQuery: 'sendSelectedQuery',
-};
 const b = cn('query-editor');
 const initialTenantCommonInfoState = {
     triggerExpand: false,
@@ -41,14 +40,16 @@ const initialTenantCommonInfoState = {
 };
 function QueryEditor(props) {
     const editorOptions = useEditorOptions();
-    const { tenantName, path, setTenantPath: setPath, setQueryAction, executeQuery, type, theme, changeUserInput, showPreview, } = props;
+    const { tenantName, path, setTenantPath: setPath, executeQuery, type, theme, changeUserInput, showPreview, } = props;
     const { tenantPath: savedPath } = executeQuery;
     const [resultType, setResultType] = React.useState(RESULT_TYPES.EXECUTE);
     const [isResultLoaded, setIsResultLoaded] = React.useState(false);
-    const [queryMode, setQueryMode] = useQueryModes();
+    const [querySettings] = useQueryExecutionSettings();
+    const [enableTracingLevel] = useSetting(ENABLE_TRACING_LEVEL_KEY);
+    const [lastQueryExecutionSettings, setLastQueryExecutionSettings] = useLastQueryExecutionSettings();
+    const { resetBanner } = useChangedQuerySettings();
     const [useMultiSchema] = useSetting(QUERY_USE_MULTI_SCHEMA_KEY);
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
-    const [monacoHotKey, setMonacoHotKey] = React.useState(null);
     const [sendExecuteQuery, executeQueryResult] = executeQueryApi.useExecuteQueryMutation();
     const [sendExplainQuery, explainQueryResult] = explainQueryApi.useExplainQueryMutation();
     React.useEffect(() => {
@@ -60,22 +61,6 @@ function QueryEditor(props) {
         }
     }, [changeUserInput, setPath, tenantName, savedPath]);
     const [resultVisibilityState, dispatchResultVisibilityState] = React.useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED), initialTenantCommonInfoState);
-    const editorRef = React.useRef();
-    React.useEffect(() => {
-        const updateEditor = () => {
-            if (editorRef.current) {
-                editorRef.current.layout();
-            }
-        };
-        const onChangeWindow = throttle(() => {
-            updateEditor();
-        }, 100);
-        updateEditor();
-        window.addEventListener('resize', onChangeWindow);
-        return () => {
-            window.removeEventListener('resize', onChangeWindow);
-        };
-    }, []);
     React.useEffect(() => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
     }, []);
@@ -87,41 +72,28 @@ function QueryEditor(props) {
             dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
         }
     }, [props.showPreview, isResultLoaded]);
-    React.useEffect(() => {
+    const getLastQueryText = useEventHandler(() => {
         var _a;
-        const { input, history } = executeQuery;
-        const hasUnsavedInput = input
-            ? input !== ((_a = history.queries[history.queries.length - 1]) === null || _a === void 0 ? void 0 : _a.queryText)
-            : false;
-        if (hasUnsavedInput) {
-            window.onbeforeunload = (e) => {
-                e.preventDefault();
-                // Chrome requires returnValue to be set
-                e.returnValue = '';
-            };
-        }
-        else {
-            window.onbeforeunload = null;
-        }
-        return () => {
-            window.onbeforeunload = null;
-        };
-    }, [executeQuery]);
-    const handleSendExecuteClick = (mode, text) => {
+        const { history } = executeQuery;
+        return ((_a = history.queries[history.queries.length - 1]) === null || _a === void 0 ? void 0 : _a.queryText) || '';
+    });
+    const handleSendExecuteClick = useEventHandler((text) => {
         var _a;
-        if (!mode) {
-            return;
-        }
         const { input, history } = executeQuery;
         const schema = useMultiSchema ? 'multi' : 'modern';
         const query = text !== null && text !== void 0 ? text : input;
         setLastUsedQueryAction(QUERY_ACTIONS.execute);
+        if (!isEqual(lastQueryExecutionSettings, querySettings)) {
+            resetBanner();
+            setLastQueryExecutionSettings(querySettings);
+        }
         setResultType(RESULT_TYPES.EXECUTE);
         sendExecuteQuery({
             query,
             database: tenantName,
-            mode,
+            querySettings,
             schema,
+            enableTracingLevel,
         });
         setIsResultLoaded(true);
         props.setShowPreview(false);
@@ -129,64 +101,45 @@ function QueryEditor(props) {
         if (!text) {
             const { queries, currentIndex } = history;
             if (query !== ((_a = queries[currentIndex]) === null || _a === void 0 ? void 0 : _a.queryText)) {
-                props.saveQueryToHistory(input, mode);
+                props.saveQueryToHistory(input);
             }
         }
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
-    };
+    });
     const handleSettingsClick = () => {
-        setQueryAction('settings');
+        props.setQueryAction('settings');
         props.setShowPreview(false);
     };
-    const handleGetExplainQueryClick = (mode) => {
+    const handleGetExplainQueryClick = useEventHandler(() => {
         const { input } = executeQuery;
         setLastUsedQueryAction(QUERY_ACTIONS.explain);
+        if (!isEqual(lastQueryExecutionSettings, querySettings)) {
+            resetBanner();
+            setLastQueryExecutionSettings(querySettings);
+        }
         setResultType(RESULT_TYPES.EXPLAIN);
         sendExplainQuery({
             query: input,
             database: tenantName,
-            mode: mode,
+            querySettings,
+            enableTracingLevel,
         });
         setIsResultLoaded(true);
         props.setShowPreview(false);
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
-    };
-    React.useEffect(() => {
-        var _a, _b;
-        if (monacoHotKey === null) {
-            return;
+    });
+    const handleSendQuery = useEventHandler(() => {
+        if (lastUsedQueryAction === QUERY_ACTIONS.explain) {
+            handleGetExplainQueryClick();
         }
-        setMonacoHotKey(null);
-        switch (monacoHotKey) {
-            case MONACO_HOT_KEY_ACTIONS.sendQuery: {
-                if (lastUsedQueryAction === QUERY_ACTIONS.explain) {
-                    handleGetExplainQueryClick(queryMode);
-                }
-                else {
-                    handleSendExecuteClick(queryMode);
-                }
-                break;
-            }
-            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;
-            }
+        else {
+            handleSendExecuteClick();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [monacoHotKey]);
+    });
     const editorDidMount = (editor, monaco) => {
         const keybindings = getKeyBindings(monaco);
-        editorRef.current = editor;
+        initResizeHandler(editor);
+        initUserPrompt(editor, getLastQueryText);
         editor.focus();
         editor.addAction({
             id: 'sendQuery',
@@ -200,7 +153,7 @@ function QueryEditor(props) {
             contextMenuOrder: 1,
             // Method that will be executed when the action is triggered.
             // @param editor The editor instance is passed in as a convenience
-            run: () => setMonacoHotKey(MONACO_HOT_KEY_ACTIONS.sendQuery),
+            run: () => handleSendQuery(),
         });
         const canSendSelectedText = editor.createContextKey('canSendSelectedText', false);
         editor.onDidChangeCursorSelection(({ selection, secondarySelections }) => {
@@ -216,7 +169,19 @@ function QueryEditor(props) {
             precondition: 'canSendSelectedText',
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 1,
-            run: () => setMonacoHotKey(MONACO_HOT_KEY_ACTIONS.sendSelectedQuery),
+            run: (e) => {
+                const selection = e.getSelection();
+                const model = e.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(text);
+                }
+            },
         });
         editor.addAction({
             id: 'previous-query',
@@ -243,7 +208,7 @@ function QueryEditor(props) {
             label: i18n('action.save-query'),
             keybindings: [keybindings.saveQuery],
             run: () => {
-                setQueryAction('save');
+                props.setQueryAction('save');
             },
         });
     };
@@ -260,7 +225,7 @@ function QueryEditor(props) {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.clear);
     };
     const renderControls = () => {
-        return (_jsx(QueryEditorControls, { onRunButtonClick: handleSendExecuteClick, onSettingsButtonClick: handleSettingsClick, runIsLoading: executeQueryResult.isLoading, onExplainButtonClick: handleGetExplainQueryClick, explainIsLoading: explainQueryResult.isLoading, disabled: !executeQuery.input, onUpdateQueryMode: setQueryMode, queryMode: queryMode, highlightedAction: lastUsedQueryAction }));
+        return (_jsx(QueryEditorControls, { handleSendExecuteClick: handleSendExecuteClick, onSettingsButtonClick: handleSettingsClick, runIsLoading: executeQueryResult.isLoading, handleGetExplainQueryClick: handleGetExplainQueryClick, explainIsLoading: explainQueryResult.isLoading, disabled: !executeQuery.input, highlightedAction: lastUsedQueryAction }));
     };
     return (_jsxs("div", { className: b(), children: [_jsxs(SplitPane, { 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", { className: b('pane-wrapper', {
                             top: true,
@@ -287,14 +252,45 @@ function Result({ executeQueryData, executeQueryError, explainQueryData, explain
     }
     if (resultType === RESULT_TYPES.EXECUTE) {
         if (executeQueryData || executeQueryError) {
-            const { stats, ...data } = executeQueryData || {};
-            return (_jsx(ExecuteResult, { data: data, stats: stats, error: executeQueryError, isResultsCollapsed: resultVisibilityState.collapsed, onExpandResults: onExpandResultHandler, onCollapseResults: onCollapseResultHandler }));
+            return (_jsx(ExecuteResult, { data: executeQueryData, error: executeQueryError, isResultsCollapsed: resultVisibilityState.collapsed, onExpandResults: onExpandResultHandler, onCollapseResults: onCollapseResultHandler, theme: theme }));
         }
         return null;
     }
     if (resultType === RESULT_TYPES.EXPLAIN) {
-        const { plan, ast } = explainQueryData || {};
-        return (_jsx(ExplainResult, { error: explainQueryError, explain: plan, ast: ast, loading: explainQueryLoading, theme: theme, isResultsCollapsed: resultVisibilityState.collapsed, onExpandResults: onExpandResultHandler, onCollapseResults: onCollapseResultHandler }));
+        const { plan, ast, simplifiedPlan } = explainQueryData || {};
+        return (_jsx(ExplainResult, { error: explainQueryError, explain: plan, simplifiedPlan: simplifiedPlan, ast: ast, loading: explainQueryLoading, theme: theme, isResultsCollapsed: resultVisibilityState.collapsed, onExpandResults: onExpandResultHandler, onCollapseResults: onCollapseResultHandler }));
     }
     return null;
 }
+function initResizeHandler(editor) {
+    const layoutEditor = throttle(() => {
+        editor.layout();
+    }, 100);
+    editor.layout();
+    window.addEventListener('resize', layoutEditor);
+    editor.onDidDispose(() => {
+        window.removeEventListener('resize', layoutEditor);
+    });
+}
+function initUserPrompt(editor, getInitialText) {
+    setUserPrompt(editor.getValue(), getInitialText());
+    editor.onDidChangeModelContent(() => {
+        setUserPrompt(editor.getValue(), getInitialText());
+    });
+    editor.onDidDispose(() => {
+        window.onbeforeunload = null;
+    });
+}
+function setUserPrompt(text, initialText) {
+    const hasUnsavedInput = text ? text !== initialText : false;
+    if (hasUnsavedInput) {
+        window.onbeforeunload = (e) => {
+            e.preventDefault();
+            // Chrome requires returnValue to be set
+            e.returnValue = '';
+        };
+    }
+    else {
+        window.onbeforeunload = null;
+    }
+}

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

@@ -1,15 +1,13 @@
-import type { QueryAction, QueryMode } from '../../../../types/store/query';
+import type { QueryAction } from '../../../../types/store/query';
 import './QueryEditorControls.scss';
 interface QueryEditorControlsProps {
-    onRunButtonClick: (mode?: QueryMode) => void;
+    handleSendExecuteClick: () => void;
     onSettingsButtonClick: () => void;
     runIsLoading: boolean;
-    onExplainButtonClick: (mode?: QueryMode) => void;
+    handleGetExplainQueryClick: () => void;
     explainIsLoading: boolean;
     disabled: boolean;
-    onUpdateQueryMode: (mode: QueryMode) => void;
-    queryMode: QueryMode;
     highlightedAction: QueryAction;
 }
-export declare const QueryEditorControls: ({ onRunButtonClick, onSettingsButtonClick, onUpdateQueryMode, runIsLoading, onExplainButtonClick, explainIsLoading, disabled, queryMode, highlightedAction, }: QueryEditorControlsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QueryEditorControls: ({ handleSendExecuteClick, onSettingsButtonClick, runIsLoading, handleGetExplainQueryClick, explainIsLoading, disabled, highlightedAction, }: QueryEditorControlsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,59 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { ChevronDown, Gear, PlayFill } from '@gravity-ui/icons';
-import { Button, DropdownMenu, Icon } from '@gravity-ui/uikit';
-import { LabelWithPopover } from '../../../../components/LabelWithPopover';
-import { QUERY_SETTINGS, useSetting } from '../../../../lib';
+import { Gear, PlayFill } from '@gravity-ui/icons';
+import { Button, Icon, Tooltip } from '@gravity-ui/uikit';
+import QuerySettingsDescription from '../../../../components/QuerySettingsDescription/QuerySettingsDescription';
 import { cn } from '../../../../utils/cn';
-import { QUERY_MODES, QUERY_MODES_TITLES } from '../../../../utils/query';
+import { useChangedQuerySettings } from '../../../../utils/hooks/useChangedQuerySettings';
 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 = cn('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'),
-    },
+const SettingsButton = ({ onClick, runIsLoading }) => {
+    const { changedCurrentSettings, changedCurrentSettingsDescriptions } = useChangedQuerySettings();
+    const extraGearProps = changedCurrentSettings.length > 0
+        ? { view: 'outlined-info', selected: true }
+        : null;
+    return (_jsx(Tooltip, { disabled: changedCurrentSettings.length === 0, content: _jsx(QuerySettingsDescription, { prefix: i18n('gear.tooltip'), querySettings: changedCurrentSettingsDescriptions }), openDelay: 0, placement: ['top-start'], children: _jsxs(Button, { onClick: onClick, loading: runIsLoading, className: b('gear-button'), ...extraGearProps, children: [_jsx(Icon, { data: Gear, size: 16 }), extraGearProps ? (_jsxs("div", { className: b('changed-settings'), children: ["(", changedCurrentSettings.length, ")"] })) : null] }) }));
 };
-export const QueryEditorControls = ({ onRunButtonClick, onSettingsButtonClick, onUpdateQueryMode, runIsLoading, onExplainButtonClick, explainIsLoading, disabled, queryMode, highlightedAction, }) => {
-    const [useQuerySettings] = useSetting(QUERY_SETTINGS);
+export const QueryEditorControls = ({ handleSendExecuteClick, onSettingsButtonClick, runIsLoading, handleGetExplainQueryClick, explainIsLoading, disabled, highlightedAction, }) => {
     const runView = highlightedAction === 'execute' ? 'action' : undefined;
     const explainView = highlightedAction === 'explain' ? 'action' : undefined;
-    const querySelectorMenuItems = React.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]);
-    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('left'), children: [_jsxs(Button, { onClick: () => {
-                            onRunButtonClick(queryMode);
-                        }, disabled: disabled, loading: runIsLoading, view: runView, className: b('run-button'), children: [_jsx(Icon, { data: PlayFill, size: 14 }), 'Run'] }), _jsx(Button, { onClick: () => {
-                            onExplainButtonClick(queryMode);
-                        }, disabled: disabled, loading: explainIsLoading, view: explainView, children: "Explain" }), useQuerySettings ? (_jsx(Button, { onClick: onSettingsButtonClick, loading: runIsLoading, className: b('gear-button'), children: _jsx(Icon, { data: Gear, size: 16 }) })) : (_jsx("div", { className: b('mode-selector'), children: _jsx(DropdownMenu, { items: querySelectorMenuItems, popupProps: {
-                                className: b('mode-selector__popup'),
-                                qa: queryModeSelectorPopupQa,
-                            }, switcher: _jsx(Button, { className: b('mode-selector__button'), qa: queryModeSelectorQa, children: _jsxs("span", { className: b('mode-selector__button-content'), children: [`${i18n('controls.query-mode-selector_type')} ${QueryModeSelectorOptions[queryMode].title}`, _jsx(Icon, { data: ChevronDown })] }) }) }) }))] }), _jsx(SaveQuery, { isSaveButtonDisabled: disabled })] }));
+    const onRunButtonClick = () => {
+        handleSendExecuteClick();
+    };
+    const onExplainButtonClick = () => {
+        handleGetExplainQueryClick();
+    };
+    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('left'), children: [_jsxs(Button, { onClick: onRunButtonClick, disabled: disabled, loading: runIsLoading, view: runView, className: b('run-button'), children: [_jsx(Icon, { data: PlayFill, size: 14 }), 'Run'] }), _jsx(Button, { onClick: onExplainButtonClick, disabled: disabled, loading: explainIsLoading, view: explainView, children: "Explain" }), _jsx(SettingsButton, { onClick: onSettingsButtonClick, runIsLoading: runIsLoading })] }), _jsx(SaveQuery, { isSaveButtonDisabled: disabled })] }));
 };

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

@@ -0,0 +1,2 @@
+import type { QuerySettings } from '../../../../../types/store/query';
+export default function getChangedQueryExecutionSettings(currentSettings: QuerySettings, defaultSettings: QuerySettings): (keyof QuerySettings)[];

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

@@ -0,0 +1,5 @@
+export default function getChangedQueryExecutionSettings(currentSettings, defaultSettings) {
+    const currentMap = new Map(Object.entries(currentSettings));
+    const defaultMap = new Map(Object.entries(defaultSettings));
+    return Array.from(currentMap.keys()).filter((key) => currentMap.get(key) !== defaultMap.get(key));
+}

package/dist/containers/Tenant/Query/QueryEditorControls/utils/getChangedQueryExecutionSettings.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/containers/Tenant/Query/QueryEditorControls/utils/getChangedQueryExecutionSettings.test.js

@@ -0,0 +1,42 @@
+import { ISOLATION_LEVELS, QUERY_MODES, STATISTICS_MODES, TRACING_LEVELS, } from '../../../../../utils/query';
+const DEFAULT_QUERY_SETTINGS = {
+    queryMode: QUERY_MODES.script,
+    isolationLevel: ISOLATION_LEVELS.serializable,
+    timeout: '60',
+    statisticsMode: STATISTICS_MODES.none,
+    tracingLevel: TRACING_LEVELS.detailed,
+};
+import getChangedQueryExecutionSettings from './getChangedQueryExecutionSettings';
+describe('getChangedQueryExecutionSettings', () => {
+    it('should return an empty array if no settings have changed', () => {
+        const currentSettings = { ...DEFAULT_QUERY_SETTINGS };
+        const result = getChangedQueryExecutionSettings(currentSettings, DEFAULT_QUERY_SETTINGS);
+        expect(result).toEqual([]);
+    });
+    it('should return the keys of settings that have changed', () => {
+        const currentSettings = {
+            ...DEFAULT_QUERY_SETTINGS,
+            queryMode: QUERY_MODES.data,
+            timeout: '30',
+        };
+        const result = getChangedQueryExecutionSettings(currentSettings, DEFAULT_QUERY_SETTINGS);
+        expect(result).toEqual(['queryMode', 'timeout']);
+    });
+    it('should return all keys if all settings have changed', () => {
+        const currentSettings = {
+            queryMode: QUERY_MODES.data,
+            isolationLevel: ISOLATION_LEVELS.onlinero,
+            timeout: '90',
+            statisticsMode: STATISTICS_MODES.basic,
+            tracingLevel: TRACING_LEVELS.basic,
+        };
+        const result = getChangedQueryExecutionSettings(currentSettings, DEFAULT_QUERY_SETTINGS);
+        expect(result).toEqual([
+            'queryMode',
+            'isolationLevel',
+            'timeout',
+            'statisticsMode',
+            'tracingLevel',
+        ]);
+    });
+});

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

@@ -0,0 +1,5 @@
+import type { QuerySettings } from '../../../../../types/store/query';
+export default function getChangedQueryExecutionSettingsDescription({ currentSettings, defaultSettings, }: {
+    currentSettings: QuerySettings;
+    defaultSettings: QuerySettings;
+}): Record<string, string>;

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

@@ -0,0 +1,19 @@
+import { QUERY_SETTINGS_FIELD_SETTINGS } from '../../QuerySettingsDialog/constants';
+import getChangedQueryExecutionSettings from './getChangedQueryExecutionSettings';
+export default function getChangedQueryExecutionSettingsDescription({ currentSettings, defaultSettings, }) {
+    const keys = getChangedQueryExecutionSettings(currentSettings, defaultSettings);
+    const result = {};
+    keys.forEach((key) => {
+        var _a;
+        const settings = QUERY_SETTINGS_FIELD_SETTINGS[key];
+        const currentValue = currentSettings[key];
+        if ('options' in settings) {
+            const content = (_a = settings.options.find((option) => option.value === currentValue)) === null || _a === void 0 ? void 0 : _a.content;
+            result[settings.title] = content;
+        }
+        else {
+            result[settings.title] = currentValue;
+        }
+    });
+    return result;
+}

package/dist/containers/Tenant/Query/QueryEditorControls/utils/getChangedQueryExecutionSettingsDescription.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/containers/Tenant/Query/QueryEditorControls/utils/getChangedQueryExecutionSettingsDescription.test.js

@@ -0,0 +1,56 @@
+import { ISOLATION_LEVELS, ISOLATION_LEVELS_TITLES, QUERY_MODES, QUERY_MODES_TITLES, STATISTICS_MODES, STATISTICS_MODES_TITLES, TRACING_LEVELS, TRACING_LEVELS_TITLES, } from '../../../../../utils/query';
+import { QUERY_SETTINGS_FIELD_SETTINGS } from '../../QuerySettingsDialog/constants';
+import getChangedQueryExecutionSettingsDescription from './getChangedQueryExecutionSettingsDescription';
+const DEFAULT_QUERY_SETTINGS = {
+    queryMode: QUERY_MODES.script,
+    isolationLevel: ISOLATION_LEVELS.serializable,
+    timeout: '60',
+    statisticsMode: STATISTICS_MODES.none,
+    tracingLevel: TRACING_LEVELS.detailed,
+};
+describe('getChangedQueryExecutionSettingsDescription', () => {
+    it('should return an empty object if no settings changed', () => {
+        const currentSettings = { ...DEFAULT_QUERY_SETTINGS };
+        const result = getChangedQueryExecutionSettingsDescription({
+            currentSettings,
+            defaultSettings: DEFAULT_QUERY_SETTINGS,
+        });
+        expect(result).toEqual({});
+    });
+    it('should return the description for changed settings', () => {
+        var _a;
+        const currentSettings = {
+            ...DEFAULT_QUERY_SETTINGS,
+            queryMode: QUERY_MODES.pg,
+            timeout: '63',
+        };
+        const result = getChangedQueryExecutionSettingsDescription({
+            currentSettings,
+            defaultSettings: DEFAULT_QUERY_SETTINGS,
+        });
+        expect(result).toEqual({
+            [QUERY_SETTINGS_FIELD_SETTINGS.queryMode.title]: (_a = QUERY_SETTINGS_FIELD_SETTINGS.queryMode.options.find((option) => option.value === QUERY_MODES.pg)) === null || _a === void 0 ? void 0 : _a.content,
+            [QUERY_SETTINGS_FIELD_SETTINGS.timeout.title]: '63',
+        });
+    });
+    it('should return the correct description for all changed settings', () => {
+        const currentSettings = {
+            queryMode: QUERY_MODES.data,
+            isolationLevel: ISOLATION_LEVELS.snapshot,
+            timeout: '120',
+            statisticsMode: STATISTICS_MODES.profile,
+            tracingLevel: TRACING_LEVELS.diagnostic,
+        };
+        const result = getChangedQueryExecutionSettingsDescription({
+            currentSettings,
+            defaultSettings: DEFAULT_QUERY_SETTINGS,
+        });
+        expect(result).toEqual({
+            [QUERY_SETTINGS_FIELD_SETTINGS.queryMode.title]: QUERY_MODES_TITLES.data,
+            [QUERY_SETTINGS_FIELD_SETTINGS.isolationLevel.title]: ISOLATION_LEVELS_TITLES['snapshot-read-only'],
+            [QUERY_SETTINGS_FIELD_SETTINGS.timeout.title]: '120',
+            [QUERY_SETTINGS_FIELD_SETTINGS.statisticsMode.title]: STATISTICS_MODES_TITLES.profile,
+            [QUERY_SETTINGS_FIELD_SETTINGS.tracingLevel.title]: TRACING_LEVELS_TITLES.diagnostic,
+        });
+    });
+});

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

@@ -0,0 +1,2 @@
+import './QuerySettingsBanner.scss';
+export declare function QuerySettingsBanner(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from '@gravity-ui/uikit';
+import QuerySettingsDescription from '../../../../components/QuerySettingsDescription/QuerySettingsDescription';
+import { cn } from '../../../../utils/cn';
+import { useChangedQuerySettings } from '../../../../utils/hooks/useChangedQuerySettings';
+import i18n from '../i18n';
+const b = cn('ydb-query-settings-banner');
+import './QuerySettingsBanner.scss';
+export function QuerySettingsBanner() {
+    const { isBannerShown, changedLastExecutionSettingsDescriptions, closeBanner } = useChangedQuerySettings();
+    return isBannerShown ? (_jsx(Alert, { className: b(), theme: "info", align: "baseline", message: _jsx(QuerySettingsDescription, { prefix: i18n('banner.query-settings.message'), querySettings: changedLastExecutionSettingsDescriptions }), onClose: closeBanner })) : null;
+}

package/dist/containers/Tenant/Query/QuerySettingsBanner/QuerySettingsBanner.scss

@@ -0,0 +1,3 @@
+.ydb-query-settings-banner {
+    margin: var(--g-spacing-1) var(--g-spacing-5);
+}