ydb-embedded-ui 6.11.0 → 6.13.0

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

@@ -7,7 +7,7 @@ import { QueryResultTable } from '../../../../components/QueryResultTable';
 import { previewApi } from '../../../../store/reducers/preview';
 import { setShowPreview } from '../../../../store/reducers/schema/schema';
 import { cn } from '../../../../utils/cn';
-import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { useAutoRefreshInterval, useTypedDispatch } from '../../../../utils/hooks';
 import { parseQueryErrorToString } from '../../../../utils/query';
 import { isExternalTableType, isTableType } from '../../utils/schema';
 import i18n from '../i18n';
@@ -17,7 +17,6 @@ export const Preview = ({ database, path, type }) => {
     const dispatch = useTypedDispatch();
     const isPreviewAvailable = isTableType(type);
     const [autoRefreshInterval] = useAutoRefreshInterval();
-    const isFullscreen = useTypedSelector((state) => state.fullscreen);
     const query = `--!syntax_v1\nselect * from \`${path}\` limit 32`;
     const { currentData, isFetching, error } = previewApi.useSendQueryQuery({ database, query, action: isExternalTableType(type) ? 'execute-query' : 'execute-scan' }, { pollingInterval: autoRefreshInterval, skip: !isPreviewAvailable });
     const loading = isFetching && currentData === undefined;
@@ -39,5 +38,5 @@ export const Preview = ({ database, path, type }) => {
         message = (_jsx("div", { className: b('message-container', 'error'), children: parseQueryErrorToString(error) }));
     }
     const content = message !== null && message !== void 0 ? message : (_jsx("div", { className: b('result'), children: _jsx(QueryResultTable, { data: data.result, columns: data.columns }) }));
-    return (_jsxs("div", { className: b(), children: [renderHeader(), isFullscreen ? _jsx(Fullscreen, { children: content }) : content] }));
+    return (_jsxs("div", { className: b(), children: [renderHeader(), _jsx(Fullscreen, { children: content })] }));
 };

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

@@ -5,8 +5,7 @@ import { selectQueriesHistory } from '../../../../store/reducers/executeQuery';
 import { TENANT_QUERY_TABS_ID } from '../../../../store/reducers/tenant/constants';
 import { setQueryTab } from '../../../../store/reducers/tenant/tenant';
 import { cn } from '../../../../utils/cn';
-import { useQueryModes, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
-import { QUERY_MODES, QUERY_SYNTAX } from '../../../../utils/query';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS } from '../../utils/constants';
 import i18n from '../i18n';
 import './QueriesHistory.scss';
@@ -14,17 +13,9 @@ const b = cn('ydb-queries-history');
 const QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY = 'queriesHistoryTableColumnsWidth';
 function QueriesHistory({ changeUserInput }) {
     const dispatch = useTypedDispatch();
-    const [queryMode, setQueryMode] = useQueryModes();
     const queriesHistory = useTypedSelector(selectQueriesHistory);
     const reversedHistory = [...queriesHistory].reverse();
     const onQueryClick = (query) => {
-        if (query.syntax === QUERY_SYNTAX.pg && queryMode !== QUERY_MODES.pg) {
-            setQueryMode(QUERY_MODES.pg);
-        }
-        else if (query.syntax !== QUERY_SYNTAX.pg && queryMode === QUERY_MODES.pg) {
-            // Set query mode for queries with yql syntax
-            setQueryMode(QUERY_MODES.script);
-        }
         changeUserInput({ input: query.queryText });
         dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
     };
@@ -38,15 +29,6 @@ function QueriesHistory({ changeUserInput }) {
             sortable: false,
             width: 600,
         },
-        {
-            name: 'syntax',
-            header: 'Syntax',
-            render: ({ row }) => {
-                return row.syntax === QUERY_SYNTAX.pg ? 'PostgreSQL' : 'YQL';
-            },
-            sortable: false,
-            width: 200,
-        },
     ];
     return (_jsx("div", { className: b(), children: _jsx(ResizeableDataTable, { columnsWidthLSKey: QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY, columns: columns, data: reversedHistory, settings: QUERY_TABLE_SETTINGS, emptyDataMessage: i18n('history.empty'), onRowClick: (row) => onQueryClick(row), rowClassName: () => b('table-row') }) }));
 }

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

@@ -10,5 +10,5 @@ export const QueryDuration = ({ duration }) => {
         return null;
     }
     const parsedDuration = formatDurationToShortTimeFormat(parseUsToMs(duration), 1);
-    return (_jsx("span", { className: b(), children: _jsx(LabelWithPopover, { className: b('item-with-popover'), contentClassName: b('popover'), text: parsedDuration, popoverContent: i18n('query-duration.description') }) }));
+    return (_jsx("span", { className: b(), children: _jsx(LabelWithPopover, { className: b('item-with-popover'), contentClassName: b('popover-content'), text: parsedDuration, popoverClassName: b('popover'), popoverContent: i18n('query-duration.description'), buttonProps: { className: b('popover-button') } }) }));
 };

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

@@ -7,10 +7,21 @@
     color: var(--g-color-text-complementary);
 
     &__item-with-popover {
+        display: flex;
+
         white-space: nowrap;
     }
 
     &__popover {
+        display: flex;
+        align-items: center;
+    }
+
+    &__popover-content {
         max-width: 300px;
     }
+
+    &__popover-button {
+        display: flex;
+    }
 }

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

@@ -24,9 +24,9 @@ interface QueryEditorProps {
 }
 declare function QueryEditor(props: QueryEditorProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react-redux").ConnectedComponent<typeof QueryEditor, {
+    type?: EPathType;
     theme: string;
     path: string;
-    type?: EPathType;
     tenantName: string;
     changeUserInput: (arg: {
         input: string;

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,15 +10,18 @@ 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 { LANGUAGE_YQL_ID } from '../../../../utils/monaco/yql/constants';
+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';
 import { ExecuteResult } from '../ExecuteResult/ExecuteResult';
 import { ExplainResult } from '../ExplainResult/ExplainResult';
 import { Preview } from '../Preview/Preview';
 import { QueryEditorControls } from '../QueryEditorControls/QueryEditorControls';
+import { QuerySettingsDialog } from '../QuerySettingsDialog/QuerySettingsDialog';
 import { SaveQueryDialog } from '../SaveQuery/SaveQuery';
 import i18n from '../i18n';
 import { useEditorOptions } from './helpers';
@@ -28,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,
@@ -40,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(() => {
@@ -59,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);
     }, []);
@@ -86,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);
@@ -128,60 +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 = () => {
+        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',
@@ -195,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 }) => {
@@ -211,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',
@@ -238,7 +208,7 @@ function QueryEditor(props) {
             label: i18n('action.save-query'),
             keybindings: [keybindings.saveQuery],
             run: () => {
-                setQueryAction('save');
+                props.setQueryAction('save');
             },
         });
     };
@@ -255,11 +225,11 @@ function QueryEditor(props) {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.clear);
     };
     const renderControls = () => {
-        return (_jsx(QueryEditorControls, { onRunButtonClick: handleSendExecuteClick, 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,
-                        }), children: [_jsx("div", { className: b('monaco-wrapper'), children: _jsx("div", { className: b('monaco'), children: _jsx(MonacoEditor, { language: LANGUAGE_YQL_ID, value: executeQuery.input, options: editorOptions, onChange: onChange, editorDidMount: editorDidMount, theme: `vs-${theme}` }) }) }), renderControls()] }), _jsx("div", { className: b('pane-wrapper'), children: _jsx(Result, { executeQueryData: executeQueryResult.data, executeQueryError: executeQueryResult.error, explainQueryData: explainQueryResult.data, explainQueryError: explainQueryResult.error, explainQueryLoading: explainQueryResult.isLoading, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, theme: theme, resultType: resultType, tenantName: tenantName, path: path, showPreview: showPreview }) })] }), _jsx(SaveQueryDialog, {})] }));
+                        }), children: [_jsx("div", { className: b('monaco-wrapper'), children: _jsx("div", { className: b('monaco'), children: _jsx(MonacoEditor, { language: YQL_LANGUAGE_ID, value: executeQuery.input, options: editorOptions, onChange: onChange, editorDidMount: editorDidMount, theme: `vs-${theme}` }) }) }), renderControls()] }), _jsx("div", { className: b('pane-wrapper'), children: _jsx(Result, { executeQueryData: executeQueryResult.data, executeQueryError: executeQueryResult.error, explainQueryData: explainQueryResult.data, explainQueryError: explainQueryResult.error, explainQueryLoading: explainQueryResult.isLoading, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, theme: theme, resultType: resultType, tenantName: tenantName, path: path, showPreview: showPreview }) })] }), _jsx(SaveQueryDialog, {}), _jsx(QuerySettingsDialog, {})] }));
 }
 const mapStateToProps = (state) => {
     return {
@@ -282,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,14 +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, runIsLoading, onExplainButtonClick, explainIsLoading, disabled, onUpdateQueryMode, 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,57 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { ChevronDown, PlayFill } from '@gravity-ui/icons';
-import { Button, DropdownMenu, Icon } from '@gravity-ui/uikit';
-import { LabelWithPopover } from '../../../../components/LabelWithPopover';
+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, runIsLoading, onExplainButtonClick, explainIsLoading, disabled, onUpdateQueryMode, queryMode, highlightedAction, }) => {
-    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]);
+export const QueryEditorControls = ({ handleSendExecuteClick, onSettingsButtonClick, runIsLoading, handleGetExplainQueryClick, explainIsLoading, disabled, highlightedAction, }) => {
     const runView = highlightedAction === 'execute' ? 'action' : undefined;
     const explainView = highlightedAction === 'explain' ? 'action' : undefined;
-    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('left'), children: [_jsxs(Button, { onClick: () => {
-                            onRunButtonClick(queryMode);
-                        }, disabled: disabled, loading: runIsLoading, view: runView, children: [_jsx(Icon, { data: PlayFill, size: 14 }), 'Run'] }), _jsx(Button, { onClick: () => {
-                            onExplainButtonClick(queryMode);
-                        }, disabled: disabled, loading: explainIsLoading, view: explainView, children: "Explain" }), _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 {};