feat(QueryEditor): add explain query modes

Author: artemmufazalov

src/containers/Tenant/QueryEditor/QueryEditor.js

@@ -4,41 +4,36 @@ import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import MonacoEditor from 'react-monaco-editor';
-import {Button, DropdownMenu} from '@gravity-ui/uikit';
 
 import SplitPane from '../../../components/SplitPane';
 import {QueryResultTable} from '../../../components/QueryResultTable';
 
-import SaveQuery from './SaveQuery/SaveQuery';
 import SavedQueries from './SavedQueries/SavedQueries';
-import {Icon} from '../../../components/Icon';
 import QueryResult from './QueryResult/QueryResult';
 import QueryExplain from './QueryExplain/QueryExplain';
+import {QueryEditorControls} from './QueryEditorControls/QueryEditorControls';
+import {OldQueryEditorControls} from './QueryEditorControls/OldQueryEditorControls';
 
 import {
-    sendQuery,
+    sendExecuteQuery,
     changeUserInput,
     saveQueryToHistory,
     goToPreviousQuery,
     goToNextQuery,
-    selectRunAction,
-    RUN_ACTIONS_VALUES,
     MONACO_HOT_KEY_ACTIONS,
     setMonacoHotKey,
 } from '../../../store/reducers/executeQuery';
 import {getExplainQuery, getExplainQueryAst} from '../../../store/reducers/explainQuery';
-import {getSettingValue, setSettingValue} from '../../../store/reducers/settings';
+import {getParsedSettingValue, setSettingValue} from '../../../store/reducers/settings';
 import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
     DEFAULT_SIZE_RESULT_PANE_KEY,
     SAVED_QUERIES_KEY,
-    QUERY_INITIAL_RUN_ACTION_KEY,
+    QUERY_INITIAL_MODE_KEY,
+    ENABLE_QUERY_MODES_FOR_EXPLAIN,
 } from '../../../utils/constants';
 
-import {parseJson} from '../../../utils/utils';
-
 import './QueryEditor.scss';
-import Divider from '../../../components/Divider/Divider';
 import QueriesHistory from './QueriesHistory/QueriesHistory';
 import {
     PaneVisibilityActionTypes,
@@ -47,11 +42,6 @@ import {
 import Preview from '../Preview/Preview';
 import {setShowPreview} from '../../../store/reducers/schema';
 
-export const RUN_ACTIONS = [
-    {value: RUN_ACTIONS_VALUES.script, content: 'Run Script'},
-    {value: RUN_ACTIONS_VALUES.scan, content: 'Run Scan'},
-];
-
 const TABLE_SETTINGS = {
     sortable: false,
 };
@@ -73,14 +63,15 @@ const RESULT_TYPES = {
 const b = cn('query-editor');
 
 const propTypes = {
-    sendQuery: PropTypes.func,
+    sendExecuteQuery: 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,
 };
 
 const initialTenantCommonInfoState = {
@@ -92,6 +83,7 @@ function QueryEditor(props) {
     const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
 
     const [isResultLoaded, setIsResultLoaded] = useState(false);
+    const [queryMode, setQueryMode] = useState(props.initialQueryMode);
 
     const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(
         paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED),
@@ -155,7 +147,7 @@ function QueryEditor(props) {
         setMonacoHotKey(null);
         switch (monacoHotKey) {
             case MONACO_HOT_KEY_ACTIONS.sendQuery: {
-                return handleSendClick();
+                return handleSendExecuteClick(queryMode);
             }
             case MONACO_HOT_KEY_ACTIONS.goPrev: {
                 return handlePreviousHistoryClick();
@@ -246,17 +238,17 @@ function QueryEditor(props) {
         props.changeUserInput({input: newValue});
     };
 
-    const handleSendClick = () => {
+    const handleSendExecuteClick = (mode) => {
         const {
             path,
-            executeQuery: {input, history, runAction},
-            sendQuery,
+            executeQuery: {input, history},
+            sendExecuteQuery,
             saveQueryToHistory,
             setShowPreview,
         } = props;
 
         setResultType(RESULT_TYPES.EXECUTE);
-        sendQuery({query: input, database: path, action: runAction});
+        sendExecuteQuery({query: input, database: path, mode});
         setIsResultLoaded(true);
         setShowPreview(false);
 
@@ -267,15 +259,20 @@ function QueryEditor(props) {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
 
-    const handleGetExplainQueryClick = () => {
+    const handleGetExplainQueryClick = (mode) => {
         const {
             path,
             executeQuery: {input},
             getExplainQuery,
             setShowPreview,
         } = props;
+
         setResultType(RESULT_TYPES.EXPLAIN);
-        getExplainQuery({query: input, database: path});
+        getExplainQuery({
+            query: input,
+            database: path,
+            mode: mode,
+        });
         setIsResultLoaded(true);
         setShowPreview(false);
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
@@ -513,65 +510,42 @@ function QueryEditor(props) {
         setSettingValue(SAVED_QUERIES_KEY, JSON.stringify(newSavedQueries));
     };
 
-    const renderControls = () => {
-        const {executeQuery, explainQuery, savedQueries, selectRunAction, setSettingValue} = props;
-        const {runAction} = executeQuery;
-        const runIsDisabled = !executeQuery.input || executeQuery.loading;
-        const runText = _.find(RUN_ACTIONS, {value: runAction}).content;
-
-        const menuItems = RUN_ACTIONS.map((action) => {
-            return {
-                text: action.content,
-                action: () => {
-                    selectRunAction(action.value);
-                    setSettingValue(QUERY_INITIAL_RUN_ACTION_KEY, action.value);
-                },
-            };
-        });
+    const onUpdateQueryMode = (mode) => {
+        setQueryMode(mode);
+        props.setSettingValue(QUERY_INITIAL_MODE_KEY, mode);
+    };
 
-        return (
-            <div className={b('controls')}>
-                <div className={b('control-run')}>
-                    <Button
-                        onClick={handleSendClick}
-                        view="action"
-                        pin="round-brick"
-                        disabled={runIsDisabled}
-                        loading={executeQuery.loading}
-                    >
-                        <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
-                        {runText}
-                    </Button>
-                    <DropdownMenu
-                        items={menuItems}
-                        popupClassName={b('select-query-action-popup')}
-                        switcher={
-                            <Button
-                                view="action"
-                                pin="brick-round"
-                                disabled={runIsDisabled}
-                                loading={executeQuery.loading}
-                                className={b('select-query-action')}
-                            >
-                                <Icon name="chevron-down" width={16} height={16} />
-                            </Button>
-                        }
-                    />
-                </div>
-                <Button
-                    onClick={handleGetExplainQueryClick}
-                    disabled={!executeQuery.input}
-                    loading={explainQuery.loading}
-                >
-                    Explain
-                </Button>
-                <Divider />
-                <SaveQuery
+    const renderControls = () => {
+        const {executeQuery, explainQuery, savedQueries, enableQueryModesForExplain} = props;
+
+        if (enableQueryModesForExplain) {
+            return (
+                <QueryEditorControls
+                    onRunButtonClick={handleSendExecuteClick}
+                    runIsLoading={executeQuery.loading}
+                    onExplainButtonClick={handleGetExplainQueryClick}
+                    explainIsLoading={explainQuery.loading}
+                    onSaveQueryClick={onSaveQueryHandler}
                     savedQueries={savedQueries}
-                    onSaveQuery={onSaveQueryHandler}
-                    saveButtonDisabled={runIsDisabled}
+                    disabled={!executeQuery.input}
+                    onUpdateQueryMode={onUpdateQueryMode}
+                    queryMode={queryMode}
                 />
-            </div>
+            );
+        }
+
+        return (
+            <OldQueryEditorControls
+                onRunButtonClick={handleSendExecuteClick}
+                runIsLoading={executeQuery.loading}
+                onExplainButtonClick={handleGetExplainQueryClick}
+                explainIsLoading={explainQuery.loading}
+                onSaveQueryClick={onSaveQueryHandler}
+                savedQueries={savedQueries}
+                disabled={!executeQuery.input}
+                onUpdateQueryMode={onUpdateQueryMode}
+                queryMode={queryMode}
+            />
         );
     };
 
@@ -632,23 +606,24 @@ const mapStateToProps = (state) => {
     return {
         executeQuery: state.executeQuery,
         explainQuery: state.explainQuery,
-        savedQueries: parseJson(getSettingValue(state, SAVED_QUERIES_KEY)),
+        savedQueries: getParsedSettingValue(state, SAVED_QUERIES_KEY),
+        initialQueryMode: getParsedSettingValue(state, QUERY_INITIAL_MODE_KEY),
+        enableQueryModesForExplain: getParsedSettingValue(state, ENABLE_QUERY_MODES_FOR_EXPLAIN),
         showPreview: state.schema.showPreview,
         currentSchema: state.schema.currentSchema,
         monacoHotKey: state.executeQuery?.monacoHotKey,
     };
 };
 
 const mapDispatchToProps = {
-    sendQuery,
+    sendExecuteQuery,
     changeUserInput,
     saveQueryToHistory,
     goToPreviousQuery,
     goToNextQuery,
     getExplainQuery,
     getExplainQueryAst,
     setSettingValue,
-    selectRunAction,
     setShowPreview,
     setMonacoHotKey,
 };

src/containers/Tenant/QueryEditor/QueryEditor.scss

@@ -54,35 +54,6 @@
         align-items: center;
     }
 
-    &__controls {
-        display: flex;
-        flex: 0 0 40px;
-        align-items: flex-end;
-
-        min-height: 40px;
-        padding: 5px 20px;
-
-        border-top: 1px solid var(--yc-color-line-generic);
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        background-color: var(--yc-color-base-background);
-        gap: 12px;
-    }
-
-    &__control-run {
-        display: flex;
-        align-items: center;
-        .yc-select__option-text {
-            display: none;
-        }
-
-        .yc-button__text {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 8px;
-        }
-    }
-
     &__history-controls {
         display: flex;
         align-items: center;
@@ -93,8 +64,4 @@
 
         color: var(--yc-color-text-secondary);
     }
-
-    &__select-query-action {
-        margin-left: 2px;
-    }
 }

src/containers/Tenant/QueryEditor/QueryEditorControls/OldQueryEditorControls.tsx

@@ -0,0 +1,83 @@
+import {Button, DropdownMenu} from '@gravity-ui/uikit';
+import {useMemo} from 'react';
+
+import {QueryModes} from '../../../../types/store/query';
+import {Icon} from '../../../../components/Icon';
+
+import SaveQuery from '../SaveQuery/SaveQuery';
+
+import {b, QueryEditorControlsProps, QueryModeSelectorTitles} from './shared';
+
+import './QueryEditorControls.scss';
+
+export const OldQueryEditorControls = ({
+    onRunButtonClick,
+    runIsLoading,
+    onExplainButtonClick,
+    explainIsLoading,
+    onSaveQueryClick,
+    savedQueries,
+    disabled,
+    onUpdateQueryMode,
+    queryMode,
+}: QueryEditorControlsProps) => {
+    const runModeSelectorMenuItems = useMemo(() => {
+        return Object.entries(QueryModeSelectorTitles).map(([mode, title]) => {
+            return {
+                text: `Run ${title}`,
+                action: () => {
+                    onUpdateQueryMode(mode as QueryModes);
+                },
+            };
+        });
+    }, [onUpdateQueryMode]);
+
+    return (
+        <div className={b()}>
+            <div className={b('left')}>
+                <div className={b('run')}>
+                    <Button
+                        onClick={() => onRunButtonClick(queryMode)}
+                        view="action"
+                        pin="round-brick"
+                        disabled={disabled}
+                        loading={runIsLoading}
+                    >
+                        <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
+                        {`Run ${QueryModeSelectorTitles[queryMode]}`}
+                    </Button>
+                    <DropdownMenu
+                        items={runModeSelectorMenuItems}
+                        popupClassName={b('select-query-action-popup')}
+                        switcher={
+                            <Button
+                                view="action"
+                                pin="brick-round"
+                                disabled={disabled}
+                                loading={runIsLoading}
+                                className={b('select-query-action')}
+                            >
+                                <Icon name="chevron-down" width={16} height={16} />
+                            </Button>
+                        }
+                    />
+                </div>
+                <Button
+                    onClick={() => {
+                        // Without defined query mode it sends 'explain' action
+                        onExplainButtonClick();
+                    }}
+                    disabled={disabled}
+                    loading={explainIsLoading}
+                >
+                    Explain
+                </Button>
+            </div>
+            <SaveQuery
+                savedQueries={savedQueries}
+                onSaveQuery={onSaveQueryClick}
+                saveButtonDisabled={disabled}
+            />
+        </div>
+    );
+};