Skip to content

Commit 75efd44

Browse files
artemmufazalovartemmufazalov
authored
feat(QueryEditor): remove old controls, update setting (#445)
1 parent 4368140 commit 75efd44

File tree

10 files changed

+76
-170
lines changed

10 files changed

+76
-170
lines changed

‎playwright.config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const config: PlaywrightTestConfig = {
1414
},
1515
use: {
1616
baseURL: baseUrl || 'http://localhost:3000/',
17+
testIdAttribute: 'data-qa',
1718
},
1819
projects: [
1920
{

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

+2-18
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ import Preview from '../../Preview/Preview';
3939
import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
4040
import {ExplainResult} from '../ExplainResult/ExplainResult';
4141
import {QueryEditorControls} from '../QueryEditorControls/QueryEditorControls';
42-
import {OldQueryEditorControls} from '../QueryEditorControls/OldQueryEditorControls';
4342

4443
import {getPreparedResult} from '../utils/getPreparedResult';
4544

@@ -488,24 +487,8 @@ function QueryEditor(props) {
488487
const renderControls = () => {
489488
const {executeQuery, explainQuery, savedQueries} = props;
490489

491-
if (enableAdditionalQueryModes) {
492-
return (
493-
<QueryEditorControls
494-
onRunButtonClick={handleSendExecuteClick}
495-
runIsLoading={executeQuery.loading}
496-
onExplainButtonClick={handleGetExplainQueryClick}
497-
explainIsLoading={explainQuery.loading}
498-
onSaveQueryClick={onSaveQueryHandler}
499-
savedQueries={savedQueries}
500-
disabled={!executeQuery.input}
501-
onUpdateQueryMode={setQueryMode}
502-
queryMode={queryMode}
503-
/>
504-
);
505-
}
506-
507490
return (
508-
<OldQueryEditorControls
491+
<QueryEditorControls
509492
onRunButtonClick={handleSendExecuteClick}
510493
runIsLoading={executeQuery.loading}
511494
onExplainButtonClick={handleGetExplainQueryClick}
@@ -515,6 +498,7 @@ function QueryEditor(props) {
515498
disabled={!executeQuery.input}
516499
onUpdateQueryMode={setQueryMode}
517500
queryMode={queryMode}
501+
enableAdditionalQueryModes={enableAdditionalQueryModes}
518502
/>
519503
);
520504
};

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

-90
This file was deleted.

‎src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss

-10
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,6 @@
1515
}
1616

1717
&__run {
18-
display: flex;
19-
align-items: center;
20-
.yc-select__option-text {
21-
display: none;
22-
}
23-
2418
.yc-button__text {
2519
display: flex;
2620
justify-content: center;
@@ -29,10 +23,6 @@
2923
}
3024
}
3125

32-
&__select-query-action {
33-
margin-left: 2px;
34-
}
35-
3626
&__mode-selector {
3727
&__popup {
3828
width: 120px;

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

+38-7
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import block from 'bem-cn-lite';
2+
13
import {Button, DropdownMenu} from '@gravity-ui/uikit';
24
import {useMemo} from 'react';
35

@@ -8,17 +10,38 @@ import SaveQuery from '../SaveQuery/SaveQuery';
810

911
import i18n from '../i18n';
1012

11-
import {QueryEditorControlsProps, b} from './shared';
12-
1313
import './QueryEditorControls.scss';
1414

15-
export const QueryModeSelectorTitles = {
15+
const queryModeSelectorQa = 'query-mode-selector';
16+
const queryModeSelectorPopupQa = 'query-mode-selector-popup';
17+
18+
const b = block('ydb-query-editor-controls');
19+
20+
const OldQueryModeSelectorTitles = {
21+
[QueryModes.script]: 'Script',
22+
[QueryModes.scan]: 'Scan',
23+
} as const;
24+
25+
const QueryModeSelectorTitles = {
1626
[QueryModes.script]: 'Script',
1727
[QueryModes.scan]: 'Scan',
1828
[QueryModes.data]: 'Data',
1929
[QueryModes.query]: 'Query',
2030
} as const;
2131

32+
interface QueryEditorControlsProps {
33+
onRunButtonClick: (mode?: QueryModes) => void;
34+
runIsLoading: boolean;
35+
onExplainButtonClick: (mode?: QueryModes) => void;
36+
explainIsLoading: boolean;
37+
onSaveQueryClick: (queryName: string) => void;
38+
savedQueries: unknown;
39+
disabled: boolean;
40+
onUpdateQueryMode: (mode: QueryModes) => void;
41+
queryMode: QueryModes;
42+
enableAdditionalQueryModes: boolean;
43+
}
44+
2245
export const QueryEditorControls = ({
2346
onRunButtonClick,
2447
runIsLoading,
@@ -29,17 +52,22 @@ export const QueryEditorControls = ({
2952
disabled,
3053
onUpdateQueryMode,
3154
queryMode,
55+
enableAdditionalQueryModes,
3256
}: QueryEditorControlsProps) => {
3357
const querySelectorMenuItems = useMemo(() => {
34-
return Object.entries(QueryModeSelectorTitles).map(([mode, title]) => {
58+
const titles = enableAdditionalQueryModes
59+
? QueryModeSelectorTitles
60+
: OldQueryModeSelectorTitles;
61+
62+
return Object.entries(titles).map(([mode, title]) => {
3563
return {
3664
text: title,
3765
action: () => {
3866
onUpdateQueryMode(mode as QueryModes);
3967
},
4068
};
4169
});
42-
}, [onUpdateQueryMode]);
70+
}, [onUpdateQueryMode, enableAdditionalQueryModes]);
4371

4472
return (
4573
<div className={b()}>
@@ -68,9 +96,12 @@ export const QueryEditorControls = ({
6896
</Button>
6997
<DropdownMenu
7098
items={querySelectorMenuItems}
71-
popupProps={{className: b('mode-selector__popup')}}
99+
popupProps={{
100+
className: b('mode-selector__popup'),
101+
qa: queryModeSelectorPopupQa,
102+
}}
72103
switcher={
73-
<Button className={b('mode-selector__button')}>
104+
<Button className={b('mode-selector__button')} qa={queryModeSelectorQa}>
74105
<span className={b('mode-selector__button-content')}>
75106
{`${i18n('controls.query-mode-selector_type')} ${
76107
QueryModeSelectorTitles[queryMode]

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

-18
This file was deleted.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,5 @@
1616
"settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on versions before 23-1",
1717

1818
"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"
19+
"settings.enableAdditionalQueryModes.popover": "Adds 'Data' and 'Query' modes. May not work on some versions"
2020
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,5 @@
1616
"settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на версиях до 23-1",
1717

1818
"settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
19-
"settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'data' и 'query' для run. Включает возможность выбрать режим выполнения запроса для explain. Может работать некорректно на некоторых версиях"
19+
"settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data' и 'Query'. Может работать некорректно на некоторых версиях"
2020
}

‎tests/suites/tenant/queryEditor/QueryEditor.ts

+18-21
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@ import {Locator, Page} from '@playwright/test';
33
import {BaseModel} from '../../../models/BaseModel';
44
import {selectContentTable} from '../../../utils/selectContentTable';
55

6-
type ButtonType = 'Run Script' | 'Run Scan';
6+
type QueryMode = 'Script' | 'Scan';
77
type ExplainResultType = 'Schema' | 'JSON' | 'AST';
88

9+
const queryModeSelectorQa = 'query-mode-selector';
10+
const queryModeSelectorPopupQa = 'query-mode-selector-popup';
11+
912
export class QueryEditor extends BaseModel {
1013
protected readonly editorTextArea: Locator;
1114
protected readonly runButton: Locator;
@@ -19,18 +22,14 @@ export class QueryEditor extends BaseModel {
1922
this.runButton = this.selector.getByRole('button', {name: /Run/});
2023
this.explainButton = this.selector.getByRole('button', {name: /Explain/});
2124
}
22-
23-
async runScript(query: string) {
24-
await this.editorTextArea.fill(query);
25-
await this.selectRunButtonType('Run Script');
26-
await this.runButton.click();
27-
}
28-
async runScan(query: string) {
25+
async run(query: string, mode: QueryMode) {
26+
await this.selectQueryMode(mode);
2927
await this.editorTextArea.fill(query);
30-
await this.selectRunButtonType('Run Scan');
3128
await this.runButton.click();
3229
}
33-
async explain(query: string) {
30+
31+
async explain(query: string, mode: QueryMode) {
32+
await this.selectQueryMode(mode);
3433
await this.editorTextArea.fill(query);
3534
await this.explainButton.click();
3635
}
@@ -68,16 +67,14 @@ export class QueryEditor extends BaseModel {
6867
await radio.getByLabel(type).click();
6968
}
7069

71-
protected async selectRunButtonType(type: ButtonType) {
72-
const selectRunModeButton = this.selector.locator(
73-
'.ydb-query-editor-controls__select-query-action',
74-
);
75-
await selectRunModeButton.click();
76-
77-
const runModeSelect = this.page.locator(
78-
'.ydb-query-editor-controls__select-query-action-popup',
79-
);
80-
await runModeSelect.waitFor({state: 'visible'});
81-
await runModeSelect.getByText(type).click();
70+
protected async selectQueryMode(type: QueryMode) {
71+
const queryModeSelector = this.selector.getByTestId(queryModeSelectorQa);
72+
73+
await queryModeSelector.click();
74+
75+
const queryModeSelectorPopup = this.page.getByTestId(queryModeSelectorPopupQa);
76+
77+
await queryModeSelectorPopup.waitFor({state: 'visible'});
78+
await queryModeSelectorPopup.getByText(type).click();
8279
}
8380
}

‎tests/suites/tenant/queryEditor/queryEditor.test.ts

+15-4
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,32 @@ test.describe('Test Query Editor', async () => {
2121

2222
test('Can run scipt', async ({page}) => {
2323
const queryEditor = new QueryEditor(page);
24-
await queryEditor.runScript(testQuery);
24+
await queryEditor.run(testQuery, 'Script');
2525

2626
await expect(queryEditor.getRunResultTable()).toBeVisible();
2727
});
2828

2929
test('Can run scan', async ({page}) => {
3030
const queryEditor = new QueryEditor(page);
31-
await queryEditor.runScan(testQuery);
31+
await queryEditor.run(testQuery, 'Scan');
3232

3333
await expect(queryEditor.getRunResultTable()).toBeVisible();
3434
});
3535

36-
test('Can get explain', async ({page}) => {
36+
test('Can get explain script', async ({page}) => {
3737
const queryEditor = new QueryEditor(page);
38-
await queryEditor.explain(testQuery);
38+
await queryEditor.explain(testQuery, 'Script');
39+
40+
const explainSchema = await queryEditor.getExplainResult('Schema');
41+
await expect(explainSchema).toBeVisible();
42+
43+
const explainJSON = await queryEditor.getExplainResult('JSON');
44+
await expect(explainJSON).toBeVisible();
45+
});
46+
47+
test('Can get explain scan', async ({page}) => {
48+
const queryEditor = new QueryEditor(page);
49+
await queryEditor.explain(testQuery, 'Scan');
3950

4051
const explainSchema = await queryEditor.getExplainResult('Schema');
4152
await expect(explainSchema).toBeVisible();

0 commit comments

Comments
 (0)