ydb-embedded-ui 4.8.2 → 4.9.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [4.9.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.8.2...v4.9.0) (2023-06-30)
+
+
+### Features
+
+* **QueryEditor:** remove old controls, update setting ([#445](https://github.com/ydb-platform/ydb-embedded-ui/issues/445)) ([75efd44](https://github.com/ydb-platform/ydb-embedded-ui/commit/75efd444c8b8ba5213117ec9c33f6b9664855a2c))
+
+
+### Bug Fixes
+
+* **QueryEditor:** color last used query action, run on command ([#436](https://github.com/ydb-platform/ydb-embedded-ui/issues/436)) ([c4d3bb8](https://github.com/ydb-platform/ydb-embedded-ui/commit/c4d3bb81bc1cea8ec3fe2e5e7e18c997d94f5714))
+* **QueryEditor:** rename query modes ([#449](https://github.com/ydb-platform/ydb-embedded-ui/issues/449)) ([c93c9c1](https://github.com/ydb-platform/ydb-embedded-ui/commit/c93c9c17ba26e01c596009657cac02ecc9cc9ab0))
+* **StorageNodes:** sort by uptime ([#447](https://github.com/ydb-platform/ydb-embedded-ui/issues/447)) ([283cb81](https://github.com/ydb-platform/ydb-embedded-ui/commit/283cb81b3f4711ddc2bb991615729a9bda7e893c))
+* **Storage:** remove visible entities filter ([#448](https://github.com/ydb-platform/ydb-embedded-ui/issues/448)) ([b4d9489](https://github.com/ydb-platform/ydb-embedded-ui/commit/b4d948965cd349a54fe833a6b81ea3b087782735))
+
 ## [4.8.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.8.1...v4.8.2) (2023-06-27)
 
 

package/dist/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -2,7 +2,7 @@ import block from 'bem-cn-lite';
 
 import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
-import type {INodesPreparedEntity} from '../../types/store/nodes';
+import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import {getDefaultNodePath} from '../../containers/Node/NodePages';
 import {isUnavailableNode, NodeAddress} from '../../utils/nodes';
 
@@ -15,7 +15,7 @@ import './NodeHostWrapper.scss';
 const b = block('ydb-node-host-wrapper');
 
 interface NodeHostWrapperProps {
-    node: INodesPreparedEntity;
+    node: NodesPreparedEntity;
     getNodeRef?: (node?: NodeAddress) => string | null;
 }
 

package/dist/containers/Nodes/Nodes.tsx

@@ -26,7 +26,7 @@ import {
     setSearchValue,
     resetNodesState,
     getComputeNodes,
-} from '../../store/reducers/nodes';
+} from '../../store/reducers/nodes/nodes';
 import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
 
 import {isDatabaseEntityType} from '../Tenant/utils/schema';

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -9,7 +9,7 @@ import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper'
 import type {NodeAddress} from '../../utils/nodes';
 import {formatBytesToGigabyte} from '../../utils/index';
 
-import type {INodesPreparedEntity} from '../../types/store/nodes';
+import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 
 interface GetNodesColumnsProps {
     tabletsPath?: string;
@@ -17,7 +17,7 @@ interface GetNodesColumnsProps {
 }
 
 export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps) {
-    const columns: Column<INodesPreparedEntity>[] = [
+    const columns: Column<NodesPreparedEntity>[] = [
         {
             name: 'NodeId',
             header: '#',

package/dist/containers/Storage/PDisk/PDisk.tsx

@@ -5,7 +5,7 @@ import {InternalLink} from '../../../components/InternalLink';
 import {Stack} from '../../../components/Stack/Stack';
 
 import routes, {createHref} from '../../../routes';
-import {getVDisksForPDisk} from '../../../store/reducers/storage';
+import {getVDisksForPDisk} from '../../../store/reducers/storage/storage';
 import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
 import {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {stringifyVdiskId} from '../../../utils';

package/dist/containers/Storage/Storage.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import DataTable from '@gravity-ui/react-data-table';
-import {RadioButton} from '@gravity-ui/uikit';
 
 import {Search} from '../../components/Search';
 import {UsageFilter} from './UsageFilter';
@@ -18,33 +17,29 @@ import {
     getStorageInfo,
     setInitialState,
     getFilteredEntities,
-    VisibleEntities,
     setVisibleEntities,
     setStorageFilter,
     setUsageFilter,
-    StorageTypes,
     setStorageType,
     setNodesUptimeFilter,
     setDataWasNotLoaded,
-    VisibleEntitiesTitles,
     getStoragePoolsGroupsCount,
     getStorageNodesCount,
     getUsageFilterOptions,
-} from '../../store/reducers/storage';
+} from '../../store/reducers/storage/storage';
+import {VISIBLE_ENTITIES, STORAGE_TYPES} from '../../store/reducers/storage/constants';
 import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
 import StorageGroups from './StorageGroups/StorageGroups';
 import StorageNodes from './StorageNodes/StorageNodes';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 
+import {StorageTypeFilter} from './StorageTypeFilter/StorageTypeFilter';
+import {StorageVisibleEntityFilter} from './StorageVisibleEntityFilter/StorageVisibleEntityFilter';
+
 import './Storage.scss';
 
 const b = cn('global-storage');
 
-const FILTER_OPTIONS = {
-    Missing: 'missing',
-    Space: 'space',
-};
-
 const tableSettings = {
     ...DEFAULT_TABLE_SETTINGS,
     defaultOrder: DataTable.DESCENDING,
@@ -74,25 +69,23 @@ class Storage extends React.Component {
     };
 
     componentDidMount() {
-        const {tenant, nodeId, setVisibleEntities, storageType, getNodesList} =
-            this.props;
+        const {tenant, nodeId, setVisibleEntities, storageType, getNodesList} = this.props;
 
         this.autofetcher = new AutoFetcher();
         getNodesList();
         if (tenant || nodeId) {
-            setVisibleEntities(VisibleEntities.All);
+            setVisibleEntities(VISIBLE_ENTITIES.all);
             this.getStorageInfo({
-                filter: FILTER_OPTIONS.All,
                 type: storageType,
             });
         } else {
             this.getStorageInfo({
-                filter: FILTER_OPTIONS.Missing,
+                visibleEntities: VISIBLE_ENTITIES.missing,
                 type: storageType,
             });
             this.autofetcher.fetch(() =>
                 this.getStorageInfo({
-                    filter: FILTER_OPTIONS.Missing,
+                    visibleEntities: VISIBLE_ENTITIES.missing,
                     type: storageType,
                 }),
             );
@@ -105,7 +98,7 @@ class Storage extends React.Component {
 
         const startFetch = () => {
             this.getStorageInfo({
-                filter: FILTER_OPTIONS[visibleEntities],
+                visibleEntities,
                 type: storageType,
             });
         };
@@ -115,7 +108,7 @@ class Storage extends React.Component {
             this.autofetcher.start();
             this.autofetcher.fetch(() =>
                 this.getStorageInfo({
-                    filter: FILTER_OPTIONS[visibleEntities],
+                    visibleEntities,
                     type: storageType,
                 }),
             );
@@ -183,16 +176,16 @@ class Storage extends React.Component {
 
         return (
             <div className={b('table-wrapper')}>
-                {storageType === StorageTypes.groups && (
+                {storageType === STORAGE_TYPES.groups && (
                     <StorageGroups
                         visibleEntities={visibleEntities}
                         data={flatListStorageEntities}
                         tableSettings={tableSettings}
                         nodes={nodes}
-                        onShowAll={() => this.onGroupVisibilityChange(VisibleEntities.All)}
+                        onShowAll={() => this.onGroupVisibilityChange(VISIBLE_ENTITIES.all)}
                     />
                 )}
-                {storageType === StorageTypes.nodes && (
+                {storageType === STORAGE_TYPES.nodes && (
                     <StorageNodes
                         visibleEntities={visibleEntities}
                         nodesUptimeFilter={nodesUptimeFilter}
@@ -221,7 +214,7 @@ class Storage extends React.Component {
     };
 
     onShowAllNodes = () => {
-        this.onGroupVisibilityChange(VisibleEntities.All);
+        this.onGroupVisibilityChange(VISIBLE_ENTITIES.all);
         this.onUptimeFilterChange(NodesUptimeFilterValues.All);
     };
 
@@ -229,8 +222,8 @@ class Storage extends React.Component {
         const {storageType, groupsCount, nodesCount, flatListStorageEntities, loading, wasLoaded} =
             this.props;
 
-        const entityName = storageType === StorageTypes.groups ? 'Groups' : 'Nodes';
-        const count = storageType === StorageTypes.groups ? groupsCount : nodesCount;
+        const entityName = storageType === STORAGE_TYPES.groups ? 'Groups' : 'Nodes';
+        const count = storageType === STORAGE_TYPES.groups ? groupsCount : nodesCount;
 
         return (
             <EntitiesCount
@@ -259,7 +252,7 @@ class Storage extends React.Component {
                 <div className={b('search')}>
                     <Search
                         placeholder={
-                            storageType === StorageTypes.groups
+                            storageType === STORAGE_TYPES.groups
                                 ? 'Group ID, Pool name'
                                 : 'Node ID, FQDN'
                         }
@@ -268,32 +261,17 @@ class Storage extends React.Component {
                     />
                 </div>
 
-                <RadioButton value={storageType} onUpdate={this.onStorageTypeChange}>
-                    <RadioButton.Option value={StorageTypes.groups}>
-                        {StorageTypes.groups}
-                    </RadioButton.Option>
-                    <RadioButton.Option value={StorageTypes.nodes}>
-                        {StorageTypes.nodes}
-                    </RadioButton.Option>
-                </RadioButton>
-
-                <RadioButton value={visibleEntities} onUpdate={this.onGroupVisibilityChange}>
-                    <RadioButton.Option value={VisibleEntities.Missing}>
-                        {VisibleEntitiesTitles[VisibleEntities.Missing]}
-                    </RadioButton.Option>
-                    <RadioButton.Option value={VisibleEntities.Space}>
-                        {VisibleEntitiesTitles[VisibleEntities.Space]}
-                    </RadioButton.Option>
-                    <RadioButton.Option value={VisibleEntities.All}>
-                        {VisibleEntitiesTitles[VisibleEntities.All]}
-                    </RadioButton.Option>
-                </RadioButton>
-
-                {storageType === StorageTypes.nodes && (
+                <StorageTypeFilter value={storageType} onChange={this.onStorageTypeChange} />
+                <StorageVisibleEntityFilter
+                    value={visibleEntities}
+                    onChange={this.onGroupVisibilityChange}
+                />
+
+                {storageType === STORAGE_TYPES.nodes && (
                     <UptimeFilter value={nodesUptimeFilter} onChange={this.onUptimeFilterChange} />
                 )}
 
-                {storageType === StorageTypes.groups && (
+                {storageType === STORAGE_TYPES.groups && (
                     <UsageFilter
                         value={usageFilter}
                         onChange={setUsageFilter}

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -1,25 +1,22 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
+
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import type {NodesMap} from '../../../types/store/nodesList';
+import type {TVDiskStateInfo} from '../../../types/api/vdisk';
+import type {VisibleEntities} from '../../../store/reducers/storage/types';
 
-import shieldIcon from '../../../assets/icons/shield.svg';
-
-import {Stack} from '../../../components/Stack/Stack';
-//@ts-ignore
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-
-import {TVDiskStateInfo} from '../../../types/api/vdisk';
-//@ts-ignore
-import {VisibleEntities} from '../../../store/reducers/storage';
-//@ts-ignore
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
-//@ts-ignore
 import {stringifyVdiskId} from '../../../utils';
 import {getUsage, isFullVDiskData} from '../../../utils/storage';
 
+import shieldIcon from '../../../assets/icons/shield.svg';
+import {Stack} from '../../../components/Stack/Stack';
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import {VDisk} from '../VDisk';
 import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
@@ -49,7 +46,7 @@ interface StorageGroupsProps {
     data: any;
     nodes: NodesMap;
     tableSettings: Settings;
-    visibleEntities: keyof typeof VisibleEntities;
+    visibleEntities: VisibleEntities;
     onShowAll?: VoidFunction;
 }
 
@@ -70,21 +67,21 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
 
 const b = cn('global-storage-groups');
 
-function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder | undefined {
+function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
     switch (visibleEntities) {
-        case VisibleEntities.All: {
+        case VISIBLE_ENTITIES.all: {
             return {
                 columnId: TableColumnsIds.PoolName,
                 order: DataTable.ASCENDING,
             };
         }
-        case VisibleEntities.Missing: {
+        case VISIBLE_ENTITIES.missing: {
             return {
                 columnId: TableColumnsIds.Missing,
                 order: DataTable.DESCENDING,
             };
         }
-        case VisibleEntities.Space: {
+        case VISIBLE_ENTITIES.space: {
             return {
                 columnId: TableColumnsIds.UsedSpaceFlag,
                 order: DataTable.DESCENDING,
@@ -295,7 +292,7 @@ function StorageGroups({
 
     let columns = allColumns;
 
-    if (visibleEntities === VisibleEntities.All) {
+    if (visibleEntities === VISIBLE_ENTITIES.all) {
         columns = allColumns.filter((col) => {
             return (
                 col.name !== TableColumnsIds.Missing && col.name !== TableColumnsIds.UsedSpaceFlag
@@ -303,7 +300,7 @@ function StorageGroups({
         });
     }
 
-    if (visibleEntities === VisibleEntities.Space) {
+    if (visibleEntities === VISIBLE_ENTITIES.space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
 
         if (!data.length) {
@@ -317,7 +314,7 @@ function StorageGroups({
         }
     }
 
-    if (visibleEntities === VisibleEntities.Missing) {
+    if (visibleEntities === VISIBLE_ENTITIES.missing) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.UsedSpaceFlag);
 
         if (!data.length) {

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -3,7 +3,9 @@ import cn from 'bem-cn-lite';
 
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 
-import {VisibleEntities} from '../../../store/reducers/storage';
+import type {VisibleEntities} from '../../../store/reducers/storage/types';
+
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import {
     AdditionalNodesInfo,
     isUnavailableNode,
@@ -35,7 +37,7 @@ interface StorageNodesProps {
     data: any;
     nodes: any;
     tableSettings: Settings;
-    visibleEntities: keyof typeof VisibleEntities;
+    visibleEntities: VisibleEntities;
     nodesUptimeFilter: keyof typeof NodesUptimeFilterValues;
     onShowAll?: VoidFunction;
     additionalNodesInfo?: AdditionalNodesInfo;
@@ -53,15 +55,15 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
 
 const b = cn('global-storage-nodes');
 
-function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder | undefined {
+function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
     switch (visibleEntities) {
-        case VisibleEntities.All: {
+        case VISIBLE_ENTITIES.all: {
             return {
                 columnId: TableColumnsIds.NodeId,
                 order: DataTable.ASCENDING,
             };
         }
-        case VisibleEntities.Missing: {
+        case VISIBLE_ENTITIES.missing: {
             return {
                 columnId: TableColumnsIds.Missing,
                 order: DataTable.DESCENDING,
@@ -115,7 +117,7 @@ function StorageNodes({
             name: TableColumnsIds.uptime,
             header: tableColumnsNames[TableColumnsIds.uptime],
             width: 130,
-            sortAccessor: ({StartTime}) => -StartTime,
+            sortAccessor: ({StartTime}) => (StartTime ? -StartTime : 0),
             align: DataTable.RIGHT,
         },
         {
@@ -146,18 +148,18 @@ function StorageNodes({
 
     let columns = allColumns;
 
-    if (visibleEntities === VisibleEntities.Space) {
+    if (visibleEntities === VISIBLE_ENTITIES.space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
     }
 
     if (!data.length) {
         let message;
 
-        if (visibleEntities === VisibleEntities.Space) {
+        if (visibleEntities === VISIBLE_ENTITIES.space) {
             message = i18n('empty.out_of_space');
         }
 
-        if (visibleEntities === VisibleEntities.Missing) {
+        if (visibleEntities === VISIBLE_ENTITIES.missing) {
             message = i18n('empty.degraded');
         }
 
@@ -166,7 +168,7 @@ function StorageNodes({
         }
 
         if (
-            visibleEntities !== VisibleEntities.All &&
+            visibleEntities !== VISIBLE_ENTITIES.all &&
             nodesUptimeFilter !== NodesUptimeFilterValues.All
         ) {
             message = i18n('empty.several_filters');

package/dist/containers/Storage/StorageTypeFilter/StorageTypeFilter.tsx

@@ -0,0 +1,27 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import type {StorageType} from '../../../store/reducers/storage/types';
+import {STORAGE_TYPES} from '../../../store/reducers/storage/constants';
+
+const StorageTypesTitles = {
+    [STORAGE_TYPES.groups]: 'Groups',
+    [STORAGE_TYPES.nodes]: 'Nodes',
+};
+
+interface StorageTypeFilterProps {
+    value: StorageType;
+    onChange: (value: string) => void;
+}
+
+export const StorageTypeFilter = ({value, onChange}: StorageTypeFilterProps) => {
+    return (
+        <RadioButton value={value} onUpdate={onChange}>
+            <RadioButton.Option value={STORAGE_TYPES.groups}>
+                {StorageTypesTitles[STORAGE_TYPES.groups]}
+            </RadioButton.Option>
+            <RadioButton.Option value={STORAGE_TYPES.nodes}>
+                {StorageTypesTitles[STORAGE_TYPES.nodes]}
+            </RadioButton.Option>
+        </RadioButton>
+    );
+};

package/dist/containers/Storage/StorageVisibleEntityFilter/StorageVisibleEntityFilter.tsx

@@ -0,0 +1,31 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import type {VisibleEntities} from '../../../store/reducers/storage/types';
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
+
+export const VisibleEntitiesTitles = {
+    [VISIBLE_ENTITIES.all]: 'All',
+    [VISIBLE_ENTITIES.missing]: 'Degraded',
+    [VISIBLE_ENTITIES.space]: 'Out of Space',
+};
+
+interface StorageProblemFilterProps {
+    value: VisibleEntities;
+    onChange: (value: string) => void;
+}
+
+export const StorageVisibleEntityFilter = ({value, onChange}: StorageProblemFilterProps) => {
+    return (
+        <RadioButton value={value} onUpdate={onChange}>
+            <RadioButton.Option value={VISIBLE_ENTITIES.missing}>
+                {VisibleEntitiesTitles[VISIBLE_ENTITIES.missing]}
+            </RadioButton.Option>
+            <RadioButton.Option value={VISIBLE_ENTITIES.space}>
+                {VisibleEntitiesTitles[VISIBLE_ENTITIES.space]}
+            </RadioButton.Option>
+            <RadioButton.Option value={VISIBLE_ENTITIES.all}>
+                {VisibleEntitiesTitles[VISIBLE_ENTITIES.all]}
+            </RadioButton.Option>
+        </RadioButton>
+    );
+};

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

@@ -26,9 +26,10 @@ import {
     SAVED_QUERIES_KEY,
     QUERY_INITIAL_MODE_KEY,
     ENABLE_ADDITIONAL_QUERY_MODES,
+    LAST_USED_QUERY_ACTION_KEY,
 } from '../../../../utils/constants';
 import {useSetting} from '../../../../utils/hooks';
-import {QueryModes} from '../../../../types/store/query';
+import {QUERY_ACTIONS, QUERY_MODES} from '../../../../utils/query';
 
 import {
     PaneVisibilityActionTypes,
@@ -39,7 +40,6 @@ import Preview from '../../Preview/Preview';
 import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
 import {ExplainResult} from '../ExplainResult/ExplainResult';
 import {QueryEditorControls} from '../QueryEditorControls/QueryEditorControls';
-import {OldQueryEditorControls} from '../QueryEditorControls/OldQueryEditorControls';
 
 import {getPreparedResult} from '../utils/getPreparedResult';
 
@@ -93,11 +93,12 @@ function QueryEditor(props) {
     const [isResultLoaded, setIsResultLoaded] = useState(false);
     const [queryMode, setQueryMode] = useSetting(QUERY_INITIAL_MODE_KEY);
     const [enableAdditionalQueryModes] = useSetting(ENABLE_ADDITIONAL_QUERY_MODES);
+    const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
 
     useEffect(() => {
-        const isNewQueryMode = queryMode !== QueryModes.script && queryMode !== QueryModes.scan;
+        const isNewQueryMode = queryMode !== QUERY_MODES.script && queryMode !== QUERY_MODES.scan;
         if (!enableAdditionalQueryModes && isNewQueryMode) {
-            setQueryMode(QueryModes.script);
+            setQueryMode(QUERY_MODES.script);
         }
     }, [enableAdditionalQueryModes, queryMode, setQueryMode]);
 
@@ -170,7 +171,11 @@ function QueryEditor(props) {
         setMonacoHotKey(null);
         switch (monacoHotKey) {
             case MONACO_HOT_KEY_ACTIONS.sendQuery: {
-                return handleSendExecuteClick(queryMode);
+                if (lastUsedQueryAction === QUERY_ACTIONS.explain) {
+                    return handleGetExplainQueryClick(queryMode);
+                } else {
+                    return handleSendExecuteClick(queryMode);
+                }
             }
             case MONACO_HOT_KEY_ACTIONS.goPrev: {
                 return handlePreviousHistoryClick();
@@ -178,9 +183,6 @@ function QueryEditor(props) {
             case MONACO_HOT_KEY_ACTIONS.goNext: {
                 return handleNextHistoryClick();
             }
-            case MONACO_HOT_KEY_ACTIONS.getExplain: {
-                return handleGetExplainQueryClick();
-            }
             default: {
                 return;
             }
@@ -201,8 +203,8 @@ function QueryEditor(props) {
         editorRef.current = editor;
         editor.focus();
         editor.addAction({
-            id: 'run',
-            label: 'Run',
+            id: 'sendQuery',
+            label: 'Send query',
             keybindings: [
                 // eslint-disable-next-line no-bitwise
                 monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
@@ -240,22 +242,6 @@ function QueryEditor(props) {
             contextMenuOrder: 3,
             run: handleKeyBinding(MONACO_HOT_KEY_ACTIONS.goNext),
         });
-
-        editor.addAction({
-            id: 'explain',
-            label: 'Explain',
-            keybindings: [
-                // eslint-disable-next-line no-bitwise
-                monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_E,
-            ],
-            // A precondition for this action.
-            precondition: null,
-            // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
-            keybindingContext: null,
-            contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
-            contextMenuOrder: 4,
-            run: handleKeyBinding(MONACO_HOT_KEY_ACTIONS.getExplain),
-        });
     };
     const onChange = (newValue) => {
         props.changeUserInput({input: newValue});
@@ -270,6 +256,7 @@ function QueryEditor(props) {
             setShowPreview,
         } = props;
 
+        setLastUsedQueryAction(QUERY_ACTIONS.execute);
         setResultType(RESULT_TYPES.EXECUTE);
         sendExecuteQuery({query: input, database: path, mode});
         setIsResultLoaded(true);
@@ -290,6 +277,7 @@ function QueryEditor(props) {
             setShowPreview,
         } = props;
 
+        setLastUsedQueryAction(QUERY_ACTIONS.explain);
         setResultType(RESULT_TYPES.EXPLAIN);
         getExplainQuery({
             query: input,
@@ -488,24 +476,8 @@ function QueryEditor(props) {
     const renderControls = () => {
         const {executeQuery, explainQuery, savedQueries} = props;
 
-        if (enableAdditionalQueryModes) {
-            return (
-                <QueryEditorControls
-                    onRunButtonClick={handleSendExecuteClick}
-                    runIsLoading={executeQuery.loading}
-                    onExplainButtonClick={handleGetExplainQueryClick}
-                    explainIsLoading={explainQuery.loading}
-                    onSaveQueryClick={onSaveQueryHandler}
-                    savedQueries={savedQueries}
-                    disabled={!executeQuery.input}
-                    onUpdateQueryMode={setQueryMode}
-                    queryMode={queryMode}
-                />
-            );
-        }
-
         return (
-            <OldQueryEditorControls
+            <QueryEditorControls
                 onRunButtonClick={handleSendExecuteClick}
                 runIsLoading={executeQuery.loading}
                 onExplainButtonClick={handleGetExplainQueryClick}
@@ -515,6 +487,8 @@ function QueryEditor(props) {
                 disabled={!executeQuery.input}
                 onUpdateQueryMode={setQueryMode}
                 queryMode={queryMode}
+                enableAdditionalQueryModes={enableAdditionalQueryModes}
+                highlitedAction={lastUsedQueryAction}
             />
         );
     };