Skip to content

Commit f72690f

Browse files
astandrikastandrik
authored
Query settings dialog and settings usage in requests (#1053)
1 parent 248e57d commit f72690f

File tree

20 files changed

+665
-28
lines changed

20 files changed

+665
-28
lines changed

‎package-lock.json

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"qs": "^6.12.0",
3838
"react-error-boundary": "^4.0.13",
3939
"react-helmet-async": "^2.0.5",
40+
"react-hook-form": "^7.52.1",
4041
"react-json-inspector": "^7.1.1",
4142
"react-list": "^0.8.17",
4243
"react-monaco-editor": "^0.55.0",

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
4141
import {ExplainResult} from '../ExplainResult/ExplainResult';
4242
import {Preview} from '../Preview/Preview';
4343
import {QueryEditorControls} from '../QueryEditorControls/QueryEditorControls';
44+
import {QuerySettingsDialog} from '../QuerySettingsDialog/QuerySettingsDialog';
4445
import {SaveQueryDialog} from '../SaveQuery/SaveQuery';
4546
import i18n from '../i18n';
4647

@@ -212,6 +213,11 @@ function QueryEditor(props: QueryEditorProps) {
212213
dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
213214
};
214215

216+
const handleSettingsClick = () => {
217+
setQueryAction('settings');
218+
props.setShowPreview(false);
219+
};
220+
215221
const handleGetExplainQueryClick = (mode: QueryMode | undefined) => {
216222
const {input} = executeQuery;
217223

@@ -345,6 +351,7 @@ function QueryEditor(props: QueryEditorProps) {
345351
return (
346352
<QueryEditorControls
347353
onRunButtonClick={handleSendExecuteClick}
354+
onSettingsButtonClick={handleSettingsClick}
348355
runIsLoading={executeQueryResult.isLoading}
349356
onExplainButtonClick={handleGetExplainQueryClick}
350357
explainIsLoading={explainQueryResult.isLoading}
@@ -406,6 +413,7 @@ function QueryEditor(props: QueryEditorProps) {
406413
</div>
407414
</SplitPane>
408415
<SaveQueryDialog />
416+
<QuerySettingsDialog />
409417
</div>
410418
);
411419
}

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

Lines changed: 43 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from 'react';
22

3-
import {ChevronDown, PlayFill} from '@gravity-ui/icons';
3+
import {ChevronDown, Gear, PlayFill} from '@gravity-ui/icons';
44
import type {ButtonView} from '@gravity-ui/uikit';
55
import {Button, DropdownMenu, Icon} from '@gravity-ui/uikit';
66

77
import {LabelWithPopover} from '../../../../components/LabelWithPopover';
8+
import {QUERY_SETTINGS, useSetting} from '../../../../lib';
89
import type {QueryAction, QueryMode} from '../../../../types/store/query';
910
import {cn} from '../../../../utils/cn';
1011
import {QUERY_MODES, QUERY_MODES_TITLES} from '../../../../utils/query';
@@ -43,6 +44,7 @@ const QueryModeSelectorOptions = {
4344

4445
interface QueryEditorControlsProps {
4546
onRunButtonClick: (mode?: QueryMode) => void;
47+
onSettingsButtonClick: () => void;
4648
runIsLoading: boolean;
4749
onExplainButtonClick: (mode?: QueryMode) => void;
4850
explainIsLoading: boolean;
@@ -54,14 +56,20 @@ interface QueryEditorControlsProps {
5456

5557
export const QueryEditorControls = ({
5658
onRunButtonClick,
59+
onSettingsButtonClick,
60+
onUpdateQueryMode,
5761
runIsLoading,
5862
onExplainButtonClick,
5963
explainIsLoading,
6064
disabled,
61-
onUpdateQueryMode,
6265
queryMode,
6366
highlightedAction,
6467
}: QueryEditorControlsProps) => {
68+
const [useQuerySettings] = useSetting<boolean>(QUERY_SETTINGS);
69+
const runView: ButtonView | undefined = highlightedAction === 'execute' ? 'action' : undefined;
70+
const explainView: ButtonView | undefined =
71+
highlightedAction === 'explain' ? 'action' : undefined;
72+
6573
const querySelectorMenuItems = React.useMemo(() => {
6674
return Object.entries(QueryModeSelectorOptions).map(([mode, {title, description}]) => {
6775
return {
@@ -80,10 +88,6 @@ export const QueryEditorControls = ({
8088
});
8189
}, [onUpdateQueryMode]);
8290

83-
const runView: ButtonView | undefined = highlightedAction === 'execute' ? 'action' : undefined;
84-
const explainView: ButtonView | undefined =
85-
highlightedAction === 'explain' ? 'action' : undefined;
86-
8791
return (
8892
<div className={b()}>
8993
<div className={b('left')}>
@@ -94,6 +98,7 @@ export const QueryEditorControls = ({
9498
disabled={disabled}
9599
loading={runIsLoading}
96100
view={runView}
101+
className={b('run-button')}
97102
>
98103
<Icon data={PlayFill} size={14} />
99104
{'Run'}
@@ -108,25 +113,38 @@ export const QueryEditorControls = ({
108113
>
109114
Explain
110115
</Button>
111-
<div className={b('mode-selector')}>
112-
<DropdownMenu
113-
items={querySelectorMenuItems}
114-
popupProps={{
115-
className: b('mode-selector__popup'),
116-
qa: queryModeSelectorPopupQa,
117-
}}
118-
switcher={
119-
<Button className={b('mode-selector__button')} qa={queryModeSelectorQa}>
120-
<span className={b('mode-selector__button-content')}>
121-
{`${i18n('controls.query-mode-selector_type')} ${
122-
QueryModeSelectorOptions[queryMode].title
123-
}`}
124-
<Icon data={ChevronDown} />
125-
</span>
126-
</Button>
127-
}
128-
/>
129-
</div>
116+
{useQuerySettings ? (
117+
<Button
118+
onClick={onSettingsButtonClick}
119+
loading={runIsLoading}
120+
className={b('gear-button')}
121+
>
122+
<Icon data={Gear} size={16} />
123+
</Button>
124+
) : (
125+
<div className={b('mode-selector')}>
126+
<DropdownMenu
127+
items={querySelectorMenuItems}
128+
popupProps={{
129+
className: b('mode-selector__popup'),
130+
qa: queryModeSelectorPopupQa,
131+
}}
132+
switcher={
133+
<Button
134+
className={b('mode-selector__button')}
135+
qa={queryModeSelectorQa}
136+
>
137+
<span className={b('mode-selector__button-content')}>
138+
{`${i18n('controls.query-mode-selector_type')} ${
139+
QueryModeSelectorOptions[queryMode].title
140+
}`}
141+
<Icon data={ChevronDown} />
142+
</span>
143+
</Button>
144+
}
145+
/>
146+
</div>
147+
)}
130148
</div>
131149
<SaveQuery isSaveButtonDisabled={disabled} />
132150
</div>

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.ydb-query-settings-dialog {
2+
&__dialog-row {
3+
& + & {
4+
margin-top: var(--g-text-body-1-line-height);
5+
}
6+
}
7+
8+
&__field-title {
9+
flex: 4;
10+
11+
margin-right: var(--g-spacing-3);
12+
13+
font-weight: 500;
14+
line-height: var(--g-text-header-2-line-height);
15+
white-space: nowrap;
16+
}
17+
18+
.g-dialog-footer__bts-wrapper {
19+
width: 100%;
20+
}
21+
22+
&__dialog-body {
23+
padding-top: var(--g-spacing-6);
24+
}
25+
26+
&__control-wrapper {
27+
display: flex;
28+
flex: 6;
29+
}
30+
31+
&__timeout {
32+
width: 33.3%;
33+
margin-right: var(--g-spacing-2);
34+
}
35+
36+
&__timeout-suffix {
37+
display: flex;
38+
align-items: center;
39+
40+
color: var(--g-color-text-secondary);
41+
}
42+
43+
&__documentation-link {
44+
display: flex;
45+
align-items: center;
46+
47+
margin-left: var(--g-spacing-4);
48+
49+
color: var(--g-color-text-secondary);
50+
}
51+
52+
&__buttons-container {
53+
display: flex;
54+
justify-content: space-between;
55+
56+
width: 100%;
57+
}
58+
59+
&__main-buttons {
60+
display: flex;
61+
gap: 10px;
62+
}
63+
}

0 commit comments

Comments
 (0)