feat: turn streaming on by default

Author: astandrik

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 {DEFAULT_QUERY_SETTINGS, querySettingsValidationSchema} from '../../../../utils/query';
 
 import {QuerySettingsSelect} from './QuerySettingsSelect';
+import {QuerySettingsTimeout} from './QuerySettingsTimeout';
 import {QUERY_SETTINGS_FIELD_SETTINGS} from './constants';
 import i18n from './i18n';
 
@@ -104,35 +105,6 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                         />
                     </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 +197,35 @@ 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={field.value}
+                                onChange={field.onChange}
+                                isEnabled={Boolean(field.value)}
+                                onToggle={(enabled) =>
+                                    field.onChange(enabled ? DEFAULT_QUERY_SETTINGS.timeout : '')
+                                }
+                                validationState={errors.timeout ? 'invalid' : undefined}
+                                errorMessage={errors.timeout?.message}
+                            />
+                        )}
+                    />
+                </Flex>
             </Dialog.Body>
             <Dialog.Footer
                 textButtonApply={i18n('button-done')}
@@ -240,13 +236,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,27 @@
+.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);
+    }
+
+    &__title {
+        flex: 4;
+
+        margin-right: var(--g-spacing-3);
+
+        font-weight: 500;
+        align-items: center;
+        height: var(--g-text-header-2-line-height);
+        white-space: nowrap;
+    }
+}

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

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import {Switch, TextInput} from '@gravity-ui/uikit';
+
+import {cn} from '../../../../utils/cn';
+
+import {QUERY_SETTINGS_FIELD_SETTINGS} from './constants';
+import i18n from './i18n';
+
+import './QuerySettingsTimeout.scss';
+
+const b = cn('ydb-query-settings-timeout');
+
+interface QuerySettingsTimeoutProps {
+    id?: string;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
+    isEnabled: boolean;
+    onToggle: (enabled: boolean) => void;
+    validationState?: 'invalid';
+    errorMessage?: string;
+}
+
+export function QuerySettingsTimeout({
+    id,
+    value,
+    onChange,
+    isEnabled,
+    onToggle,
+    validationState,
+    errorMessage,
+}: QuerySettingsTimeoutProps) {
+    const handleValueChange = React.useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            const newValue = event.target.value ? Number(event.target.value) : undefined;
+            onChange(newValue);
+        },
+        [onChange],
+    );
+
+    return (
+        <React.Fragment>
+            <Switch checked={isEnabled} onUpdate={onToggle} className={b('title')}>
+                {QUERY_SETTINGS_FIELD_SETTINGS.timeout.title}
+            </Switch>
+            {isEnabled ? (
+                <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>
+            ) : null}
+        </React.Fragment>
+    );
+}

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

@@ -10,6 +10,7 @@
   "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.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,7 @@
   "button-done": "Готово",
   "button-cancel": "Отменить",
   "form.timeout.seconds": "сек",
+  "form.limit.rows": "строк",
   "form.validation.timeout": "Таймаут должен быть положительным",
   "form.validation.limitRows": "Лимит строк должен быть между 1 и 100000",
   "description.default": " (default)",

src/services/settings.ts

@@ -46,7 +46,7 @@ export const DEFAULT_USER_SETTINGS = {
     [USE_CLUSTER_BALANCER_AS_BACKEND_KEY]: true,
     [ENABLE_AUTOCOMPLETE]: true,
     [ENABLE_CODE_ASSISTANT]: true,
-    [ENABLE_QUERY_STREAMING]: false,
+    [ENABLE_QUERY_STREAMING]: true,
     [AUTOCOMPLETE_ON_ENTER]: true,
     [IS_HOTKEYS_HELP_HIDDEN_KEY]: false,
     [AUTO_REFRESH_INTERVAL]: 0,

src/store/reducers/capabilities/hooks.ts

@@ -71,7 +71,7 @@ export const useClusterDashboardAvailable = () => {
 };
 
 export const useStreamingAvailable = () => {
-    return useGetFeatureVersion('/viewer/query') >= 7;
+    return useGetFeatureVersion('/viewer/query') >= 8;
 };
 
 const useGetSecuritySetting = (feature: SecuritySetting) => {

src/utils/query.ts

@@ -329,7 +329,7 @@ export const querySettingsRestoreSchema = z
     .object({
         timeout: z.preprocess(
             (val) => (val === '' ? undefined : val),
-            z.coerce.number().positive().optional().catch(DEFAULT_QUERY_SETTINGS.timeout),
+            z.coerce.number().positive().optional(),
         ),
         limitRows: z.preprocess(
             (val) => (val === '' ? undefined : val),