Skip to content

Commit c142f03

Browse files
artemmufazalovartemmufazalov
authored
feat(QueryEditor): add data and query modes (#422)
1 parent ccaafe4 commit c142f03

File tree

13 files changed

+144
-95
lines changed

13 files changed

+144
-95
lines changed

‎src/containers/Tenant/QueryEditor/QueryEditor.js‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,6 @@ import MonacoEditor from 'react-monaco-editor';
88
import SplitPane from '../../../components/SplitPane';
99
import {QueryResultTable} from '../../../components/QueryResultTable';
1010

11-
import SavedQueries from './SavedQueries/SavedQueries';
12-
import QueryResult from './QueryResult/QueryResult';
13-
import QueryExplain from './QueryExplain/QueryExplain';
14-
import {QueryEditorControls} from './QueryEditorControls/QueryEditorControls';
15-
import {OldQueryEditorControls} from './QueryEditorControls/OldQueryEditorControls';
16-
1711
import {
1812
sendExecuteQuery,
1913
changeUserInput,
@@ -25,22 +19,31 @@ import {
2519
} from '../../../store/reducers/executeQuery';
2620
import {getExplainQuery, getExplainQueryAst} from '../../../store/reducers/explainQuery';
2721
import {getParsedSettingValue, setSettingValue} from '../../../store/reducers/settings/settings';
22+
import {setShowPreview} from '../../../store/reducers/schema/schema';
2823
import {
2924
DEFAULT_IS_QUERY_RESULT_COLLAPSED,
3025
DEFAULT_SIZE_RESULT_PANE_KEY,
3126
SAVED_QUERIES_KEY,
3227
QUERY_INITIAL_MODE_KEY,
33-
ENABLE_QUERY_MODES_FOR_EXPLAIN,
28+
ENABLE_ADDITIONAL_QUERY_MODES,
3429
} from '../../../utils/constants';
30+
import {useSetting} from '../../../utils/hooks';
31+
import {QueryModes} from '../../../types/store/query';
3532

36-
import './QueryEditor.scss';
37-
import QueriesHistory from './QueriesHistory/QueriesHistory';
3833
import {
3934
PaneVisibilityActionTypes,
4035
paneVisibilityToggleReducerCreator,
4136
} from '../utils/paneVisibilityToggleHelpers';
4237
import Preview from '../Preview/Preview';
43-
import {setShowPreview} from '../../../store/reducers/schema/schema';
38+
39+
import SavedQueries from './SavedQueries/SavedQueries';
40+
import QueryResult from './QueryResult/QueryResult';
41+
import QueryExplain from './QueryExplain/QueryExplain';
42+
import {QueryEditorControls} from './QueryEditorControls/QueryEditorControls';
43+
import {OldQueryEditorControls} from './QueryEditorControls/OldQueryEditorControls';
44+
import QueriesHistory from './QueriesHistory/QueriesHistory';
45+
46+
import './QueryEditor.scss';
4447

4548
const TABLE_SETTINGS = {
4649
sortable: false,
@@ -83,7 +86,15 @@ function QueryEditor(props) {
8386
const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
8487

8588
const [isResultLoaded, setIsResultLoaded] = useState(false);
86-
const [queryMode, setQueryMode] = useState(props.initialQueryMode);
89+
const [queryMode, setQueryMode] = useSetting(QUERY_INITIAL_MODE_KEY);
90+
const [enableAdditionalQueryModes] = useSetting(ENABLE_ADDITIONAL_QUERY_MODES);
91+
92+
useEffect(() => {
93+
const isNewQueryMode = queryMode !== QueryModes.script && queryMode !== QueryModes.scan;
94+
if (!enableAdditionalQueryModes && isNewQueryMode) {
95+
setQueryMode(QueryModes.script);
96+
}
97+
}, [enableAdditionalQueryModes, queryMode, setQueryMode]);
8798

8899
const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(
89100
paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED),
@@ -510,15 +521,10 @@ function QueryEditor(props) {
510521
setSettingValue(SAVED_QUERIES_KEY, JSON.stringify(newSavedQueries));
511522
};
512523

513-
const onUpdateQueryMode = (mode) => {
514-
setQueryMode(mode);
515-
props.setSettingValue(QUERY_INITIAL_MODE_KEY, mode);
516-
};
517-
518524
const renderControls = () => {
519-
const {executeQuery, explainQuery, savedQueries, enableQueryModesForExplain} = props;
525+
const {executeQuery, explainQuery, savedQueries} = props;
520526

521-
if (enableQueryModesForExplain) {
527+
if (enableAdditionalQueryModes) {
522528
return (
523529
<QueryEditorControls
524530
onRunButtonClick={handleSendExecuteClick}
@@ -528,7 +534,7 @@ function QueryEditor(props) {
528534
onSaveQueryClick={onSaveQueryHandler}
529535
savedQueries={savedQueries}
530536
disabled={!executeQuery.input}
531-
onUpdateQueryMode={onUpdateQueryMode}
537+
onUpdateQueryMode={setQueryMode}
532538
queryMode={queryMode}
533539
/>
534540
);
@@ -543,7 +549,7 @@ function QueryEditor(props) {
543549
onSaveQueryClick={onSaveQueryHandler}
544550
savedQueries={savedQueries}
545551
disabled={!executeQuery.input}
546-
onUpdateQueryMode={onUpdateQueryMode}
552+
onUpdateQueryMode={setQueryMode}
547553
queryMode={queryMode}
548554
/>
549555
);
@@ -607,8 +613,6 @@ const mapStateToProps = (state) => {
607613
executeQuery: state.executeQuery,
608614
explainQuery: state.explainQuery,
609615
savedQueries: getParsedSettingValue(state, SAVED_QUERIES_KEY),
610-
initialQueryMode: getParsedSettingValue(state, QUERY_INITIAL_MODE_KEY),
611-
enableQueryModesForExplain: getParsedSettingValue(state, ENABLE_QUERY_MODES_FOR_EXPLAIN),
612616
showPreview: state.schema.showPreview,
613617
currentSchema: state.schema.currentSchema,
614618
monacoHotKey: state.executeQuery?.monacoHotKey,

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,17 @@ import {Icon} from '../../../../components/Icon';
66

77
import SaveQuery from '../SaveQuery/SaveQuery';
88

9-
import {b, QueryEditorControlsProps, QueryModeSelectorTitles} from './shared';
9+
import {QueryEditorControlsProps, b} from './shared';
1010

1111
import './QueryEditorControls.scss';
1212

13+
type OldQueryModes = QueryModes.script | QueryModes.scan;
14+
15+
export const QueryModeSelectorTitles = {
16+
[QueryModes.script]: 'Script',
17+
[QueryModes.scan]: 'Scan',
18+
} as const;
19+
1320
export const OldQueryEditorControls = ({
1421
onRunButtonClick,
1522
runIsLoading,
@@ -26,7 +33,7 @@ export const OldQueryEditorControls = ({
2633
return {
2734
text: `Run ${title}`,
2835
action: () => {
29-
onUpdateQueryMode(mode as QueryModes);
36+
onUpdateQueryMode(mode as OldQueryModes);
3037
},
3138
};
3239
});
@@ -44,7 +51,7 @@ export const OldQueryEditorControls = ({
4451
loading={runIsLoading}
4552
>
4653
<Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
47-
{`Run ${QueryModeSelectorTitles[queryMode]}`}
54+
{`Run ${QueryModeSelectorTitles[queryMode as OldQueryModes]}`}
4855
</Button>
4956
<DropdownMenu
5057
items={runModeSelectorMenuItems}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,17 @@ import SaveQuery from '../SaveQuery/SaveQuery';
88

99
import i18n from '../i18n';
1010

11-
import {b, QueryEditorControlsProps, QueryModeSelectorTitles} from './shared';
11+
import {QueryEditorControlsProps, b} from './shared';
1212

1313
import './QueryEditorControls.scss';
1414

15+
export const QueryModeSelectorTitles = {
16+
[QueryModes.script]: 'Script',
17+
[QueryModes.scan]: 'Scan',
18+
[QueryModes.data]: 'Data',
19+
[QueryModes.query]: 'Query',
20+
} as const;
21+
1522
export const QueryEditorControls = ({
1623
onRunButtonClick,
1724
runIsLoading,

‎src/containers/Tenant/QueryEditor/QueryEditorControls/shared.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11
import block from 'bem-cn-lite';
22

3-
import {QueryModes} from '../../../../types/store/query';
3+
import type {QueryModes} from '../../../../types/store/query';
44

55
export const b = block('ydb-query-editor-controls');
66

7-
export const QueryModeSelectorTitles = {
8-
[QueryModes.script]: 'Script',
9-
[QueryModes.scan]: 'Scan',
10-
} as const;
11-
127
export interface QueryEditorControlsProps {
138
onRunButtonClick: (mode?: QueryModes) => void;
149
runIsLoading: boolean;

‎src/containers/UserSettings/i18n/en.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
"settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
1616
"settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on versions before 23-1",
1717

18-
"settings.enableQueryModesForExplain.title": "Enable query modes for explain",
19-
"settings.enableQueryModesForExplain.popover": "Enable script | scan query mode selector for both run and explain. May not work on versions before 23-2"
18+
"settings.enableAdditionalQueryModes.title": "Enable additional query modes",
19+
"settings.enableAdditionalQueryModes.popover": "Adds 'data' and 'query' modes for run. Enables query modes for explain. May not work on some versions"
2020
}

‎src/containers/UserSettings/i18n/ru.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
"settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
1616
"settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на версиях до 23-1",
1717

18-
"settings.enableQueryModesForExplain.title": "Включить режимы выполнения запроса для explain",
19-
"settings.enableQueryModesForExplain.popover": "Включить общий переключатель script | scan для run и explain. Может работать некорректно на версиях до 23-2"
18+
"settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
19+
"settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'data' и 'query' для run. Включает возможность выбрать режим выполнения запроса для explain. Может работать некорректно на некоторых версиях"
2020
}

‎src/containers/UserSettings/settings.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import favoriteFilledIcon from '../../assets/icons/star.svg';
44
import flaskIcon from '../../assets/icons/flask.svg';
55

66
import {
7-
ENABLE_QUERY_MODES_FOR_EXPLAIN,
7+
ENABLE_ADDITIONAL_QUERY_MODES,
88
INVERTED_DISKS_KEY,
99
THEME_KEY,
1010
USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
@@ -59,9 +59,9 @@ export const useNodesEndpointSetting: SettingProps = {
5959
helpPopoverContent: i18n('settings.useNodesEndpoint.popover'),
6060
};
6161
export const enableQueryModesForExplainSetting: SettingProps = {
62-
settingKey: ENABLE_QUERY_MODES_FOR_EXPLAIN,
63-
title: i18n('settings.enableQueryModesForExplain.title'),
64-
helpPopoverContent: i18n('settings.enableQueryModesForExplain.popover'),
62+
settingKey: ENABLE_ADDITIONAL_QUERY_MODES,
63+
title: i18n('settings.enableAdditionalQueryModes.title'),
64+
helpPopoverContent: i18n('settings.enableAdditionalQueryModes.popover'),
6565
};
6666

6767
export const generalSection: SettingsSection = {

‎src/store/reducers/settings/settings.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
1212
PARTITIONS_HIDDEN_COLUMNS_KEY,
1313
QUERY_INITIAL_MODE_KEY,
14-
ENABLE_QUERY_MODES_FOR_EXPLAIN,
14+
ENABLE_ADDITIONAL_QUERY_MODES,
1515
CLUSTER_INFO_HIDDEN_KEY,
1616
} from '../../../utils/constants';
1717
import '../../../services/api';
@@ -53,8 +53,8 @@ export const initialState = {
5353
USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
5454
'false',
5555
),
56-
[ENABLE_QUERY_MODES_FOR_EXPLAIN]: readSavedSettingsValue(
57-
ENABLE_QUERY_MODES_FOR_EXPLAIN,
56+
[ENABLE_ADDITIONAL_QUERY_MODES]: readSavedSettingsValue(
57+
ENABLE_ADDITIONAL_QUERY_MODES,
5858
'false',
5959
),
6060
[SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),

0 commit comments

Comments
 (0)