Query settings dialog and settings usage in requests (#1053)

ydb-platform · Jul 25, 2024 · f72690f · f72690f
1 parent 248e57d
commit f72690f
Show file tree

Hide file tree

Showing 20 changed files with 665 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "qs": "^6.12.0",
     "react-error-boundary": "^4.0.13",
     "react-helmet-async": "^2.0.5",
+    "react-hook-form": "^7.52.1",
     "react-json-inspector": "^7.1.1",
     "react-list": "^0.8.17",
     "react-monaco-editor": "^0.55.0",

diff --git a/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx b/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx
@@ -41,6 +41,7 @@ import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
 import {ExplainResult} from '../ExplainResult/ExplainResult';
 import {Preview} from '../Preview/Preview';
 import {QueryEditorControls} from '../QueryEditorControls/QueryEditorControls';
+import {QuerySettingsDialog} from '../QuerySettingsDialog/QuerySettingsDialog';
 import {SaveQueryDialog} from '../SaveQuery/SaveQuery';
 import i18n from '../i18n';
 
@@ -212,6 +213,11 @@ function QueryEditor(props: QueryEditorProps) {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
 
+    const handleSettingsClick = () => {
+        setQueryAction('settings');
+        props.setShowPreview(false);
+    };
+
     const handleGetExplainQueryClick = (mode: QueryMode | undefined) => {
         const {input} = executeQuery;
 
@@ -345,6 +351,7 @@ function QueryEditor(props: QueryEditorProps) {
         return (
             <QueryEditorControls
                 onRunButtonClick={handleSendExecuteClick}
+                onSettingsButtonClick={handleSettingsClick}
                 runIsLoading={executeQueryResult.isLoading}
                 onExplainButtonClick={handleGetExplainQueryClick}
                 explainIsLoading={explainQueryResult.isLoading}
@@ -406,6 +413,7 @@ function QueryEditor(props: QueryEditorProps) {
                 </div>
             </SplitPane>
             <SaveQueryDialog />
+            <QuerySettingsDialog />
         </div>
     );
 }

diff --git a/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx b/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
-import {ChevronDown, PlayFill} from '@gravity-ui/icons';
+import {ChevronDown, Gear, PlayFill} from '@gravity-ui/icons';
 import type {ButtonView} from '@gravity-ui/uikit';
 import {Button, DropdownMenu, Icon} from '@gravity-ui/uikit';
 
 import {LabelWithPopover} from '../../../../components/LabelWithPopover';
+import {QUERY_SETTINGS, useSetting} from '../../../../lib';
 import type {QueryAction, QueryMode} from '../../../../types/store/query';
 import {cn} from '../../../../utils/cn';
 import {QUERY_MODES, QUERY_MODES_TITLES} from '../../../../utils/query';
@@ -43,6 +44,7 @@ const QueryModeSelectorOptions = {
 
 interface QueryEditorControlsProps {
     onRunButtonClick: (mode?: QueryMode) => void;
+    onSettingsButtonClick: () => void;
     runIsLoading: boolean;
     onExplainButtonClick: (mode?: QueryMode) => void;
     explainIsLoading: boolean;
@@ -54,14 +56,20 @@ interface QueryEditorControlsProps {
 
 export const QueryEditorControls = ({
     onRunButtonClick,
+    onSettingsButtonClick,
+    onUpdateQueryMode,
     runIsLoading,
     onExplainButtonClick,
     explainIsLoading,
     disabled,
-    onUpdateQueryMode,
     queryMode,
     highlightedAction,
 }: QueryEditorControlsProps) => {
+    const [useQuerySettings] = useSetting<boolean>(QUERY_SETTINGS);
+    const runView: ButtonView | undefined = highlightedAction === 'execute' ? 'action' : undefined;
+    const explainView: ButtonView | undefined =
+        highlightedAction === 'explain' ? 'action' : undefined;
+
     const querySelectorMenuItems = React.useMemo(() => {
         return Object.entries(QueryModeSelectorOptions).map(([mode, {title, description}]) => {
             return {
@@ -80,10 +88,6 @@ export const QueryEditorControls = ({
         });
     }, [onUpdateQueryMode]);
 
-    const runView: ButtonView | undefined = highlightedAction === 'execute' ? 'action' : undefined;
-    const explainView: ButtonView | undefined =
-        highlightedAction === 'explain' ? 'action' : undefined;
-
     return (
         <div className={b()}>
             <div className={b('left')}>
@@ -94,6 +98,7 @@ export const QueryEditorControls = ({
                     disabled={disabled}
                     loading={runIsLoading}
                     view={runView}
+                    className={b('run-button')}
                 >
                     <Icon data={PlayFill} size={14} />
                     {'Run'}
@@ -108,25 +113,38 @@ export const QueryEditorControls = ({
                 >
                     Explain
                 </Button>
-                <div className={b('mode-selector')}>
-                    <DropdownMenu
-                        items={querySelectorMenuItems}
-                        popupProps={{
-                            className: b('mode-selector__popup'),
-                            qa: queryModeSelectorPopupQa,
-                        }}
-                        switcher={
-                            <Button className={b('mode-selector__button')} qa={queryModeSelectorQa}>
-                                <span className={b('mode-selector__button-content')}>
-                                    {`${i18n('controls.query-mode-selector_type')} ${
-                                        QueryModeSelectorOptions[queryMode].title
-                                    }`}
-                                    <Icon data={ChevronDown} />
-                                </span>
-                            </Button>
-                        }
-                    />
-                </div>
+                {useQuerySettings ? (
+                    <Button
+                        onClick={onSettingsButtonClick}
+                        loading={runIsLoading}
+                        className={b('gear-button')}
+                    >
+                        <Icon data={Gear} size={16} />
+                    </Button>
+                ) : (
+                    <div className={b('mode-selector')}>
+                        <DropdownMenu
+                            items={querySelectorMenuItems}
+                            popupProps={{
+                                className: b('mode-selector__popup'),
+                                qa: queryModeSelectorPopupQa,
+                            }}
+                            switcher={
+                                <Button
+                                    className={b('mode-selector__button')}
+                                    qa={queryModeSelectorQa}
+                                >
+                                    <span className={b('mode-selector__button-content')}>
+                                        {`${i18n('controls.query-mode-selector_type')} ${
+                                            QueryModeSelectorOptions[queryMode].title
+                                        }`}
+                                        <Icon data={ChevronDown} />
+                                    </span>
+                                </Button>
+                            }
+                        />
+                    </div>
+                )}
             </div>
             <SaveQuery isSaveButtonDisabled={disabled} />
         </div>

diff --git a/src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsDialog.scss b/src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsDialog.scss
@@ -0,0 +1,63 @@
+.ydb-query-settings-dialog {
+    &__dialog-row {
+        & + & {
+            margin-top: var(--g-text-body-1-line-height);
+        }
+    }
+
+    &__field-title {
+        flex: 4;
+
+        margin-right: var(--g-spacing-3);
+
+        font-weight: 500;
+        line-height: var(--g-text-header-2-line-height);
+        white-space: nowrap;
+    }
+
+    .g-dialog-footer__bts-wrapper {
+        width: 100%;
+    }
+
+    &__dialog-body {
+        padding-top: var(--g-spacing-6);
+    }
+
+    &__control-wrapper {
+        display: flex;
+        flex: 6;
+    }
+
+    &__timeout {
+        width: 33.3%;
+        margin-right: var(--g-spacing-2);
+    }
+
+    &__timeout-suffix {
+        display: flex;
+        align-items: center;
+
+        color: var(--g-color-text-secondary);
+    }
+
+    &__documentation-link {
+        display: flex;
+        align-items: center;
+
+        margin-left: var(--g-spacing-4);
+
+        color: var(--g-color-text-secondary);
+    }
+
+    &__buttons-container {
+        display: flex;
+        justify-content: space-between;
+
+        width: 100%;
+    }
+
+    &__main-buttons {
+        display: flex;
+        gap: 10px;
+    }
+}