ydb-embedded-ui 3.5.0 → 4.1.0

package/dist/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,7 +63,7 @@ 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,
@@ -81,6 +71,7 @@ const propTypes = {
     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,7 +606,9 @@ 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,
@@ -640,7 +616,7 @@ const mapStateToProps = (state) => {
 };
 
 const mapDispatchToProps = {
-    sendQuery,
+    sendExecuteQuery,
     changeUserInput,
     saveQueryToHistory,
     goToPreviousQuery,
@@ -648,7 +624,6 @@ const mapDispatchToProps = {
     getExplainQuery,
     getExplainQueryAst,
     setSettingValue,
-    selectRunAction,
     setShowPreview,
     setMonacoHotKey,
 };

package/dist/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;
-    }
 }

package/dist/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>
+    );
+};

package/dist/containers/Tenant/QueryEditor/QueryEditorControls/QueryEditorControls.scss

@@ -0,0 +1,57 @@
+.ydb-query-editor-controls {
+    display: flex;
+    flex: 0 0 40px;
+    justify-content: space-between;
+    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: 24px;
+
+    &__left {
+        display: flex;
+        gap: 12px;
+    }
+
+    &__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;
+        }
+    }
+
+    &__select-query-action {
+        margin-left: 2px;
+    }
+
+    &__mode-selector {
+        &__popup {
+            width: 120px;
+        }
+
+        &__button {
+            width: 120px;
+            margin-left: 2px;
+        }
+
+        &__button-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            width: 100px;
+        }
+    }
+}

package/dist/containers/Tenant/QueryEditor/QueryEditorControls/QueryEditorControls.tsx

@@ -0,0 +1,84 @@
+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 i18n from '../i18n';
+
+import {b, QueryEditorControlsProps, QueryModeSelectorTitles} from './shared';
+
+import './QueryEditorControls.scss';
+
+export const QueryEditorControls = ({
+    onRunButtonClick,
+    runIsLoading,
+    onExplainButtonClick,
+    explainIsLoading,
+    onSaveQueryClick,
+    savedQueries,
+    disabled,
+    onUpdateQueryMode,
+    queryMode,
+}: QueryEditorControlsProps) => {
+    const querySelectorMenuItems = useMemo(() => {
+        return Object.entries(QueryModeSelectorTitles).map(([mode, title]) => {
+            return {
+                text: 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"
+                        disabled={disabled}
+                        loading={runIsLoading}
+                    >
+                        <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
+                        {'Run'}
+                    </Button>
+                </div>
+                <Button
+                    onClick={() => {
+                        onExplainButtonClick(queryMode);
+                    }}
+                    disabled={disabled}
+                    loading={explainIsLoading}
+                >
+                    Explain
+                </Button>
+                <DropdownMenu
+                    items={querySelectorMenuItems}
+                    popupClassName={b('mode-selector__popup')}
+                    switcher={
+                        <Button className={b('mode-selector__button')}>
+                            <span className={b('mode-selector__button-content')}>
+                                {`${i18n('controls.query-mode-selector_type')} ${
+                                    QueryModeSelectorTitles[queryMode]
+                                }`}
+                                <Icon name="chevron-down" width={16} height={16} />
+                            </span>
+                        </Button>
+                    }
+                />
+            </div>
+            <SaveQuery
+                savedQueries={savedQueries}
+                onSaveQuery={onSaveQueryClick}
+                saveButtonDisabled={disabled}
+            />
+        </div>
+    );
+};

package/dist/containers/Tenant/QueryEditor/QueryEditorControls/shared.ts

@@ -0,0 +1,23 @@
+import block from 'bem-cn-lite';
+
+import {QueryModes} from '../../../../types/store/query';
+
+export const b = block('ydb-query-editor-controls');
+
+export const QueryModeSelectorTitles = {
+    [QueryModes.script]: 'Script',
+    [QueryModes.scan]: 'Scan',
+} as const;
+
+export interface QueryEditorControlsProps {
+    onRunButtonClick: (mode?: QueryModes) => void;
+    runIsLoading: boolean;
+    onExplainButtonClick: (mode?: QueryModes) => void;
+    explainIsLoading: boolean;
+    onSaveQueryClick: (queryName: string) => void;
+    savedQueries: unknown;
+    disabled: boolean;
+    onUpdateQueryMode: (mode: QueryModes) => void;
+    queryMode: QueryModes;
+    enableQueryModesForExplain: boolean;
+}

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

@@ -5,12 +5,7 @@ import MonacoEditor from 'react-monaco-editor';
 import JSONTree from 'react-json-inspector';
 import 'react-json-inspector/json-inspector.css';
 
-import {
-    TextOverflow,
-    getYdbPlanNodeShape,
-    getCompactTopology,
-    getTopology,
-} from '@gravity-ui/paranoid';
+import {TextOverflow, getYdbPlanNodeShape, getTopology} from '@gravity-ui/paranoid';
 import {Loader, RadioButton} from '@gravity-ui/uikit';
 
 import Divider from '../../../../components/Divider/Divider';
@@ -55,7 +50,7 @@ const explainOptions = [
 function GraphRoot(props) {
     const paranoid = useRef();
 
-    const {data, opts, shapes, version, theme} = props;
+    const {data, opts, shapes, theme} = props;
 
     const [componentTheme, updateComponentTheme] = useState(theme);
 
@@ -64,13 +59,8 @@ function GraphRoot(props) {
     }, [theme]);
 
     const render = () => {
-        if (version === explainVersions.v2) {
-            paranoid.current = getTopology('graphRoot', data, opts, shapes);
-            paranoid.current.render();
-        } else if (version === explainVersions.v1) {
-            paranoid.current = getCompactTopology('graphRoot', data, opts);
-            paranoid.current.renderCompactTopology();
-        }
+        paranoid.current = getTopology('graphRoot', data, opts, shapes);
+        paranoid.current.render();
     };
 
     useEffect(() => {
@@ -112,12 +102,6 @@ function QueryExplain(props) {
         };
     }, []);
 
-    useEffect(() => {
-        if (!props.ast && activeOption === ExplainOptionIds.ast) {
-            props.astQuery();
-        }
-    }, [activeOption]);
-
     const onSelectOption = (tabId) => {
         setActiveOption(tabId);
     };
@@ -131,7 +115,9 @@ function QueryExplain(props) {
     };
 
     const renderStub = () => {
-        return <div className={b('text-message')}>There is no explanation for the request</div>;
+        return (
+            <div className={b('text-message')}>{`There is no ${activeOption} for the request`}</div>
+        );
     };
 
     const hasContent = () => {
@@ -189,8 +175,12 @@ function QueryExplain(props) {
     const renderGraph = () => {
         const {explain = {}, theme} = props;
         const {links, nodes, version} = explain;
+
+        const isSupportedVersion = version === explainVersions.v2;
+        const isEnoughDataForGraph = links && nodes && nodes.length;
+
         const content =
-            links && nodes && nodes.length ? (
+            isSupportedVersion && isEnoughDataForGraph ? (
                 <div
                     className={b('explain-canvas-container', {
                         hidden: activeOption !== ExplainOptionIds.schema,
@@ -198,7 +188,6 @@ function QueryExplain(props) {
                 >
                     <GraphRoot
                         theme={theme}
-                        version={version}
                         data={{links, nodes}}
                         opts={{
                             renderNodeTitle: renderExplainNode,

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

@@ -18,6 +18,7 @@ import {prepareQueryError} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 
 import ResultIssues from '../Issues/Issues';
+import {QueryDuration} from '../QueryDuration/QueryDuration';
 
 import './QueryResult.scss';
 
@@ -116,15 +117,11 @@ function QueryResult(props) {
                         </Fullscreen>
                     )}
                 </React.Fragment>
-            )
+            );
         }
 
         if (error) {
-            return (
-                <div className={b('error')}>
-                    {prepareQueryError(error)}
-                </div>
-            );
+            return <div className={b('error')}>{prepareQueryError(error)}</div>;
         }
     };
 
@@ -136,6 +133,7 @@ function QueryResult(props) {
 
                     {props.stats && !props.error && (
                         <React.Fragment>
+                            <QueryDuration duration={props.stats?.DurationUs} />
                             <Divider />
                             <RadioButton
                                 options={resultOptions}

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

@@ -0,0 +1,3 @@
+{
+  "controls.query-mode-selector_type": "Type:"
+}