feat: turn streaming on by default

src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx

@@ -48,7 +48,7 @@ export function SchemaTree(props: SchemaTreeProps) {
         {currentData: actionsSchemaData, isFetching: isActionsDataFetching},
     ] = tableSchemaDataApi.useLazyGetTableSchemaDataQuery();
 
-    const [querySettings, setQueryExecutionSettings] = useQueryExecutionSettings();
+    const [querySettings] = useQueryExecutionSettings();
     const [createDirectoryOpen, setCreateDirectoryOpen] = React.useState(false);
     const [parentPath, setParentPath] = React.useState('');
     const setSchemaTreeKey = useDispatchTreeKey();
@@ -128,8 +128,6 @@ export function SchemaTree(props: SchemaTreeProps) {
             dispatch,
             {
                 setActivePath: onActivePathUpdate,
-                updateQueryExecutionSettings: (settings) =>
-                    setQueryExecutionSettings({...querySettings, ...settings}),
                 showCreateDirectoryDialog: createDirectoryFeatureAvailable
                     ? handleOpenCreateDirectoryDialog
                     : undefined,
@@ -149,7 +147,6 @@ export function SchemaTree(props: SchemaTreeProps) {
         onActivePathUpdate,
         querySettings,
         rootPath,
-        setQueryExecutionSettings,
     ]);
 
     return (

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

@@ -28,24 +28,13 @@
         flex: 6;
     }
 
-    &__limit-rows,
-    &__timeout {
-        width: 33.3%;
+    &__limit-rows {
+        width: 50%;
         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);
+    &__postfix {
+        margin-right: var(--g-spacing-2);
 
         color: var(--g-color-text-secondary);
     }

src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsDialog.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Dialog, Link as ExternalLink, Flex, TextInput, Tooltip} from '@gravity-ui/uikit';
+import {Button, Dialog, Flex, TextInput, Tooltip} from '@gravity-ui/uikit';
 import {zodResolver} from '@hookform/resolvers/zod';
 import {Controller, useForm} from 'react-hook-form';
 
@@ -18,9 +18,10 @@ import {
     useTypedDispatch,
     useTypedSelector,
 } from '../../../../utils/hooks';
-import {querySettingsValidationSchema} from '../../../../utils/query';
+import {QUERY_MODES, querySettingsValidationSchema} from '../../../../utils/query';
 
 import {QuerySettingsSelect} from './QuerySettingsSelect';
+import {QuerySettingsTimeout} from './QuerySettingsTimeout';
 import {QUERY_SETTINGS_FIELD_SETTINGS} from './constants';
 import i18n from './i18n';
 
@@ -73,6 +74,8 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
     const {
         control,
         handleSubmit,
+        setValue,
+        watch,
         formState: {errors},
     } = useForm<QuerySettings>({
         defaultValues: initialValues,
@@ -82,6 +85,9 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
     const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
     const enableTracingLevel = useTracingLevelOptionAvailable();
 
+    const timeout = watch('timeout');
+    const queryMode = watch('queryMode');
+
     return (
         <form onSubmit={handleSubmit(onSubmit)}>
             <Dialog.Body className={b('dialog-body')}>
@@ -97,42 +103,21 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                                 <QuerySettingsSelect
                                     id="queryMode"
                                     setting={field.value}
-                                    onUpdateSetting={field.onChange}
+                                    onUpdateSetting={(mode) => {
+                                        field.onChange(mode);
+
+                                        if (mode !== 'query' && timeout === null) {
+                                            setValue('timeout', '');
+                                        } else if (mode === 'query') {
+                                            setValue('timeout', null);
+                                        }
+                                    }}
                                     settingOptions={QUERY_SETTINGS_FIELD_SETTINGS.queryMode.options}
                                 />
                             )}
                         />
                     </div>
                 </Flex>
-                <Flex direction="row" alignItems="flex-start" className={b('dialog-row')}>
-                    <label htmlFor="timeout" className={b('field-title')}>
-                        {QUERY_SETTINGS_FIELD_SETTINGS.timeout.title}
-                    </label>
-                    <div className={b('control-wrapper')}>
-                        <Controller
-                            name="timeout"
-                            control={control}
-                            render={({field}) => (
-                                <React.Fragment>
-                                    <TextInput
-                                        id="timeout"
-                                        type="number"
-                                        {...field}
-                                        value={field.value?.toString()}
-                                        className={b('timeout')}
-                                        placeholder="60"
-                                        validationState={errors.timeout ? 'invalid' : undefined}
-                                        errorMessage={errors.timeout?.message}
-                                        errorPlacement="inside"
-                                    />
-                                    <span className={b('timeout-suffix')}>
-                                        {i18n('form.timeout.seconds')}
-                                    </span>
-                                </React.Fragment>
-                            )}
-                        />
-                    </div>
-                </Flex>
                 {enableTracingLevel && (
                     <Flex direction="row" alignItems="flex-start" className={b('dialog-row')}>
                         <label htmlFor="tracingLevel" className={b('field-title')}>
@@ -225,11 +210,33 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                                     validationState={errors.limitRows ? 'invalid' : undefined}
                                     errorMessage={errors.limitRows?.message}
                                     errorPlacement="inside"
+                                    endContent={
+                                        <span className={b('postfix')}>
+                                            {i18n('form.limit.rows')}
+                                        </span>
+                                    }
                                 />
                             )}
                         />
                     </div>
                 </Flex>
+                <Flex direction="row" alignItems="flex-start" className={b('dialog-row')}>
+                    <Controller
+                        name="timeout"
+                        control={control}
+                        render={({field}) => (
+                            <QuerySettingsTimeout
+                                id="timeout"
+                                value={typeof field.value === 'string' ? undefined : field.value}
+                                onChange={field.onChange}
+                                onToggle={(enabled) => field.onChange(enabled ? '' : null)}
+                                validationState={errors.timeout ? 'invalid' : undefined}
+                                errorMessage={errors.timeout?.message}
+                                isDisabled={queryMode !== QUERY_MODES.query}
+                            />
+                        )}
+                    />
+                </Flex>
             </Dialog.Body>
             <Dialog.Footer
                 textButtonApply={i18n('button-done')}
@@ -240,13 +247,14 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                 }}
                 renderButtons={(buttonApply, buttonCancel) => (
                     <div className={b('buttons-container')}>
-                        <ExternalLink
+                        <Button
                             href="https://ydb.tech/docs"
                             target="_blank"
-                            className={b('documentation-link')}
+                            view="outlined"
+                            size="l"
                         >
                             {i18n('docs')}
-                        </ExternalLink>
+                        </Button>
                         <div className={b('main-buttons')}>
                             {buttonCancel}
                             {buttonApply}

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

@@ -0,0 +1,17 @@
+.ydb-query-settings-timeout {
+    &__control-wrapper {
+        display: flex;
+        flex: 6;
+        align-items: center;
+    }
+
+    &__input {
+        width: 50%;
+    }
+
+    &__postfix {
+        margin-right: var(--g-spacing-2);
+
+        color: var(--g-color-text-secondary);
+    }
+}

src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsTimeout.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import {TextInput} from '@gravity-ui/uikit';
+
+import {cn} from '../../../../utils/cn';
+
+import {TimeoutLabel} from './TimeoutLabel';
+import i18n from './i18n';
+
+import './QuerySettingsTimeout.scss';
+
+const b = cn('ydb-query-settings-timeout');
+
+interface QuerySettingsTimeoutProps {
+    id?: string;
+    value: number | null | undefined;
+    onChange: (value: number | undefined) => void;
+    onToggle: (enabled: boolean) => void;
+    validationState?: 'invalid';
+    errorMessage?: string;
+    isDisabled?: boolean;
+}
+
+export function QuerySettingsTimeout({
+    id,
+    value,
+    onChange,
+    onToggle,
+    validationState,
+    errorMessage,
+    isDisabled,
+}: QuerySettingsTimeoutProps) {
+    const handleValueChange = React.useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            const newValue = event.target.value ? Number(event.target.value) : undefined;
+            onChange(newValue);
+        },
+        [onChange],
+    );
+
+    const isChecked = value !== null;
+
+    return (
+        <React.Fragment>
+            <TimeoutLabel isDisabled={isDisabled} isChecked={isChecked} onToggle={onToggle} />
+            {isChecked && (
+                <div className={b('control-wrapper')}>
+                    <TextInput
+                        id={id}
+                        type="number"
+                        value={value?.toString() || ''}
+                        onChange={handleValueChange}
+                        className={b('input')}
+                        placeholder="60"
+                        validationState={validationState}
+                        errorMessage={errorMessage}
+                        errorPlacement="inside"
+                        endContent={
+                            <span className={b('postfix')}>{i18n('form.timeout.seconds')}</span>
+                        }
+                    />
+                </div>
+            )}
+        </React.Fragment>
+    );
+}

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

@@ -0,0 +1,23 @@
+.ydb-timeout-label {
+    &__switch {
+        align-items: center;
+
+        height: var(--g-text-header-2-line-height);
+        margin-right: var(--g-spacing-1);
+    }
+
+    &__label-title,
+    &__switch-title {
+        flex: 4;
+        align-items: center;
+
+        margin-right: var(--g-spacing-3);
+
+        font-weight: 500;
+        white-space: nowrap;
+    }
+
+    &__label-title {
+        line-height: var(--g-text-header-2-line-height);
+    }
+}

src/containers/Tenant/Query/QuerySettingsDialog/TimeoutLabel.tsx

@@ -0,0 +1,47 @@
+import {HelpMark, Switch} from '@gravity-ui/uikit';
+
+import {cn} from '../../../../utils/cn';
+import {ENABLE_QUERY_STREAMING} from '../../../../utils/constants';
+import {useSetting} from '../../../../utils/hooks';
+
+import {QUERY_SETTINGS_FIELD_SETTINGS} from './constants';
+import i18n from './i18n';
+
+import './TimeoutLabel.scss';
+
+const b = cn('ydb-timeout-label');
+
+interface TimeoutLabelProps {
+    isDisabled?: boolean;
+    isChecked: boolean;
+    onToggle: (enabled: boolean) => void;
+}
+
+export function TimeoutLabel({isDisabled, isChecked, onToggle}: TimeoutLabelProps) {
+    const [isQueryStreamingEnabled] = useSetting<boolean>(ENABLE_QUERY_STREAMING);
+
+    if (isQueryStreamingEnabled) {
+        return (
+            <div className={b('switch-title')}>
+                <Switch
+                    disabled={isDisabled}
+                    checked={isChecked}
+                    onUpdate={onToggle}
+                    className={b('switch')}
+                    content={QUERY_SETTINGS_FIELD_SETTINGS.timeout.title}
+                />
+                {isDisabled && (
+                    <HelpMark className={b('question-icon')} placement="bottom-start">
+                        {i18n('form.timeout.disabled')}
+                    </HelpMark>
+                )}
+            </div>
+        );
+    }
+
+    return (
+        <label htmlFor="timeout" className={b('label-title')}>
+            {QUERY_SETTINGS_FIELD_SETTINGS.timeout.title}
+        </label>
+    );
+}

src/containers/Tenant/Query/QuerySettingsDialog/i18n/en.json

@@ -10,6 +10,8 @@
   "tooltip_plan-to-svg-statistics": "Statistics option is set to \"Full\" due to the enabled \"Execution plan\" experiment.\n To disable it, go to the \"Experiments\" section in the user settings.",
   "button-cancel": "Cancel",
   "form.timeout.seconds": "sec",
+  "form.limit.rows": "rows",
+  "form.timeout.disabled": "Not available to turn off in this query type",
   "form.validation.timeout": "Must be positive",
   "form.validation.limitRows": "Must be between 1 and 100000",
   "description.default": " (default)",

src/containers/Tenant/Query/QuerySettingsDialog/i18n/ru.json

@@ -10,6 +10,8 @@
   "button-done": "Готово",
   "button-cancel": "Отменить",
   "form.timeout.seconds": "сек",
+  "form.limit.rows": "строк",
+  "form.timeout.disabled": "Невозможно выключить для текущего типа запроса",
   "form.validation.timeout": "Таймаут должен быть положительным",
   "form.validation.limitRows": "Лимит строк должен быть между 1 и 100000",
   "description.default": " (default)",

src/containers/Tenant/utils/schemaActions.tsx

@@ -7,7 +7,6 @@ import type {SnippetParams} from '../../../components/ConnectToDB/types';
 import type {AppDispatch} from '../../../store';
 import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
-import type {QuerySettings} from '../../../types/store/query';
 import createToast from '../../../utils/createToast';
 import {insertSnippetToEditor} from '../../../utils/monaco/insertSnippet';
 import {transformPath} from '../ObjectSummary/transformPath';
@@ -42,7 +41,6 @@ import {
 } from './schemaQueryTemplates';
 
 interface ActionsAdditionalParams {
-    updateQueryExecutionSettings: (settings?: Partial<QuerySettings>) => void;
     setActivePath: (path: string) => void;
     showCreateDirectoryDialog?: (path: string) => void;
     getConfirmation?: () => Promise<boolean>;