ydb-embedded-ui 4.33.0 → 5.1.0

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

@@ -1,45 +1,23 @@
-import {useEffect, useReducer, useRef, useState} from 'react';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useReducer, useRef, useState } from 'react';
+import { connect } from 'react-redux';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import MonacoEditor from 'react-monaco-editor';
-
 import SplitPane from '../../../../components/SplitPane';
-
-import {
-    sendExecuteQuery,
-    saveQueryToHistory,
-    goToPreviousQuery,
-    goToNextQuery,
-    MONACO_HOT_KEY_ACTIONS,
-    setMonacoHotKey,
-    setTenantPath,
-} from '../../../../store/reducers/executeQuery';
-import {getExplainQuery, getExplainQueryAst} from '../../../../store/reducers/explainQuery';
-import {setShowPreview} from '../../../../store/reducers/schema/schema';
-import {
-    DEFAULT_IS_QUERY_RESULT_COLLAPSED,
-    DEFAULT_SIZE_RESULT_PANE_KEY,
-    SAVED_QUERIES_KEY,
-    LAST_USED_QUERY_ACTION_KEY,
-    QUERY_USE_MULTI_SCHEMA_KEY,
-} from '../../../../utils/constants';
-import {useSetting, useQueryModes} from '../../../../utils/hooks';
-import {QUERY_ACTIONS} from '../../../../utils/query';
-
-import {
-    PaneVisibilityActionTypes,
-    paneVisibilityToggleReducerCreator,
-} from '../../utils/paneVisibilityToggleHelpers';
-import {Preview} from '../Preview/Preview';
-
-import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
-import {ExplainResult} from '../ExplainResult/ExplainResult';
-import {QueryEditorControls} from '../QueryEditorControls/QueryEditorControls';
-
+import { sendExecuteQuery, saveQueryToHistory, goToPreviousQuery, goToNextQuery, 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';
+import { ExplainResult } from '../ExplainResult/ExplainResult';
+import { QueryEditorControls } from '../QueryEditorControls/QueryEditorControls';
 import './QueryEditor.scss';
-
 const EDITOR_OPTIONS = {
     automaticLayout: true,
     selectOnLineNumbers: true,
@@ -47,111 +25,141 @@ const EDITOR_OPTIONS = {
         enabled: false,
     },
 };
-
 const CONTEXT_MENU_GROUP_ID = 'navigation';
 const RESULT_TYPES = {
     EXECUTE: 'execute',
     EXPLAIN: 'explain',
 };
-
-const b = cn('query-editor');
-
-const propTypes = {
-    sendExecuteQuery: PropTypes.func,
-    changeUserInput: PropTypes.func,
-    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 {tenantPath: savedPath} = executeQuery;
-
+    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);
     const [queryMode, setQueryMode] = useQueryModes();
     const [useMultiSchema] = useSetting(QUERY_USE_MULTI_SCHEMA_KEY);
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
     const [savedQueries, setSavedQueries] = useSetting(SAVED_QUERIES_KEY);
-
+    const [monacoHotKey, setMonacoHotKey] = useState(null);
     useEffect(() => {
         if (savedPath !== path) {
             if (savedPath) {
-                changeUserInput({input: ''});
+                changeUserInput({ input: '' });
             }
-            setTenantPath(path);
+            setPath(path);
         }
-    }, [changeUserInput, setTenantPath, path, savedPath]);
-
-    const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(
-        paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED),
-        initialTenantCommonInfoState,
-    );
-
-    const editorRef = useRef(null);
-
+    }, [changeUserInput, setPath, path, savedPath]);
+    const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED), initialTenantCommonInfoState);
+    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);
     }, []);
-
     useEffect(() => {
         if (props.showPreview || isResultLoaded) {
             dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
-        } else {
+        }
+        else {
             dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
         }
     }, [props.showPreview, isResultLoaded]);
-
     useEffect(() => {
-        const {
-            explainQuery: {data},
-            executeQuery: {input, history},
-        } = props;
-
+        var _a;
+        const { input, history } = executeQuery;
         const hasUnsavedInput = input
-            ? input !== history.queries[history.queries?.length - 1]
+            ? input !== ((_a = history.queries[history.queries.length - 1]) === null || _a === void 0 ? void 0 : _a.queryText)
             : false;
-
         if (hasUnsavedInput) {
-            window.onbeforeunload = checkIfHasUnsavedInput;
-        } else {
-            window.onbeforeunload = undefined;
+            window.onbeforeunload = (e) => {
+                e.preventDefault();
+                // Chrome requires returnValue to be set
+                e.returnValue = '';
+            };
+        }
+        else {
+            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;
         }
@@ -159,33 +167,30 @@ function QueryEditor(props) {
         switch (monacoHotKey) {
             case MONACO_HOT_KEY_ACTIONS.sendQuery: {
                 if (lastUsedQueryAction === QUERY_ACTIONS.explain) {
-                    return handleGetExplainQueryClick(queryMode);
-                } else {
-                    return handleSendExecuteClick(queryMode);
+                    handleGetExplainQueryClick(queryMode);
                 }
+                else {
+                    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();
@@ -197,16 +202,34 @@ 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',
             label: 'Previous query',
@@ -216,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',
@@ -227,294 +252,53 @@ 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});
+        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);
     };
     const onExpandResultHandler = () => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
-
     const onSplitStartDragAdditional = () => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.clear);
     };
-
-    const renderExecuteQuery = () => {
-        const {
-            executeQuery: {data, error, stats},
-        } = props;
-
-        return data || error ? (
-            <ExecuteResult
-                data={data}
-                stats={stats}
-                error={error}
-                isResultsCollapsed={resultVisibilityState.collapsed}
-                onExpandResults={onExpandResultHandler}
-                onCollapseResults={onCollapseResultHandler}
-            />
-        ) : null;
-    };
-
-    const renderExplainQuery = () => {
-        const {
-            explainQuery: {data, dataAst, error, loading, loadingAst},
-            theme,
-        } = props;
-
-        return (
-            <ExplainResult
-                error={error}
-                explain={data}
-                astQuery={handleAstQuery}
-                ast={dataAst}
-                loading={loading}
-                loadingAst={loadingAst}
-                theme={theme}
-                isResultsCollapsed={resultVisibilityState.collapsed}
-                onExpandResults={onExpandResultHandler}
-                onCollapseResults={onCollapseResultHandler}
-            />
-        );
-    };
-
-    const 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 <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 queryIndex = savedQueries.findIndex(
-            (el) => el.name.toLowerCase() === queryName.toLowerCase(),
-        );
+        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;
-        } else {
+        const newQuery = { name: queryName, body: input };
+        if (queryIndex === -1) {
             newSavedQueries.push(newQuery);
         }
-
+        else {
+            newSavedQueries[queryIndex] = newQuery;
+        }
         setSavedQueries(newSavedQueries);
     };
-
     const renderControls = () => {
-        const {executeQuery, explainQuery} = props;
-
-        return (
-            <QueryEditorControls
-                onRunButtonClick={handleSendExecuteClick}
-                runIsLoading={executeQuery.loading}
-                onExplainButtonClick={handleGetExplainQueryClick}
-                explainIsLoading={explainQuery.loading}
-                onSaveQueryClick={onSaveQueryHandler}
-                savedQueries={savedQueries}
-                disabled={!executeQuery.input}
-                onUpdateQueryMode={setQueryMode}
-                queryMode={queryMode}
-                highlitedAction={lastUsedQueryAction}
-            />
-        );
+        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 (
-        <div className={b()}>
-            <SplitPane
-                direction="vertical"
-                defaultSizePaneKey={DEFAULT_SIZE_RESULT_PANE_KEY}
-                triggerCollapse={resultVisibilityState.triggerCollapse}
-                triggerExpand={resultVisibilityState.triggerExpand}
-                minSize={[0, 52]}
-                collapsedSizes={[100, 0]}
-                onSplitStartDragAdditional={onSplitStartDragAdditional}
-            >
-                <div
-                    className={b('pane-wrapper', {
+    return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs(SplitPane, Object.assign({ direction: "vertical", defaultSizePaneKey: DEFAULT_SIZE_RESULT_PANE_KEY, triggerCollapse: resultVisibilityState.triggerCollapse, triggerExpand: resultVisibilityState.triggerExpand, minSize: [0, 52], collapsedSizes: [100, 0], onSplitStartDragAdditional: onSplitStartDragAdditional }, { children: [_jsxs("div", Object.assign({ className: b('pane-wrapper', {
                         top: true,
-                    })}
-                >
-                    <div className={b('monaco-wrapper')}>
-                        <div className={b('monaco')}>
-                            <MonacoEditor
-                                language="sql"
-                                value={executeQuery.input}
-                                options={EDITOR_OPTIONS}
-                                onChange={onChange}
-                                editorDidMount={editorDidMount}
-                                theme={`vs-${theme}`}
-                            />
-                        </div>
-                    </div>
-                    {renderControls()}
-                </div>
-                <div className={b('pane-wrapper')}>
-                    {props.showPreview ? renderPreview() : result}
-                </div>
-            </SplitPane>
-        </div>
-    );
+                    }) }, { children: [_jsx("div", Object.assign({ className: b('monaco-wrapper') }, { children: _jsx("div", Object.assign({ className: b('monaco') }, { children: _jsx(MonacoEditor, { language: "sql", value: executeQuery.input, options: EDITOR_OPTIONS, onChange: onChange, editorDidMount: editorDidMount, theme: `vs-${theme}` }) })) })), renderControls()] })), _jsx("div", Object.assign({ className: b('pane-wrapper') }, { children: _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) => {
     return {
         executeQuery: state.executeQuery,
         explainQuery: state.explainQuery,
         showPreview: state.schema.showPreview,
-        currentSchema: state.schema.currentSchema,
-        monacoHotKey: state.executeQuery?.monacoHotKey,
     };
 };
-
 const mapDispatchToProps = {
     sendExecuteQuery,
     saveQueryToHistory,
@@ -523,10 +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;
+}