fix: switch conditions

Author: astandrik

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.tsx

@@ -18,7 +18,7 @@ import {
     useTypedDispatch,
     useTypedSelector,
 } from '../../../../utils/hooks';
-import {DEFAULT_QUERY_SETTINGS, querySettingsValidationSchema} from '../../../../utils/query';
+import {QUERY_MODES, querySettingsValidationSchema} from '../../../../utils/query';
 
 import {QuerySettingsSelect} from './QuerySettingsSelect';
 import {QuerySettingsTimeout} from './QuerySettingsTimeout';
@@ -74,6 +74,8 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
     const {
         control,
         handleSubmit,
+        setValue,
+        watch,
         formState: {errors},
     } = useForm<QuerySettings>({
         defaultValues: initialValues,
@@ -83,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')}>
@@ -98,7 +103,15 @@ 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}
                                 />
                             )}
@@ -214,14 +227,12 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                         render={({field}) => (
                             <QuerySettingsTimeout
                                 id="timeout"
-                                value={field.value}
+                                value={typeof field.value === 'string' ? undefined : field.value}
                                 onChange={field.onChange}
-                                isEnabled={Boolean(field.value)}
-                                onToggle={(enabled) =>
-                                    field.onChange(enabled ? DEFAULT_QUERY_SETTINGS.timeout : '')
-                                }
+                                onToggle={(enabled) => field.onChange(enabled ? '' : null)}
                                 validationState={errors.timeout ? 'invalid' : undefined}
                                 errorMessage={errors.timeout?.message}
+                                isDisabled={queryMode !== QUERY_MODES.query}
                             />
                         )}
                     />

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

@@ -15,14 +15,24 @@
         color: var(--g-color-text-secondary);
     }
 
+    &__switch {
+        align-items: center;
+
+        height: var(--g-text-header-2-line-height);
+        margin-right: var(--g-spacing-1);
+    }
+
     &__title {
         flex: 4;
         align-items: center;
 
-        height: var(--g-text-header-2-line-height);
         margin-right: var(--g-spacing-3);
 
         font-weight: 500;
         white-space: nowrap;
     }
+
+    &__question-icon {
+        color: var(--g-color-text-secondary);
+    }
 }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import {Switch, TextInput} from '@gravity-ui/uikit';
+import {CircleQuestion} from '@gravity-ui/icons';
+import {Icon, Popover, Switch, TextInput} from '@gravity-ui/uikit';
 
 import {cn} from '../../../../utils/cn';
 
@@ -13,22 +14,22 @@ const b = cn('ydb-query-settings-timeout');
 
 interface QuerySettingsTimeoutProps {
     id?: string;
-    value: number | undefined;
+    value: number | null | undefined;
     onChange: (value: number | undefined) => void;
-    isEnabled: boolean;
     onToggle: (enabled: boolean) => void;
     validationState?: 'invalid';
     errorMessage?: string;
+    isDisabled?: boolean;
 }
 
 export function QuerySettingsTimeout({
     id,
     value,
     onChange,
-    isEnabled,
     onToggle,
     validationState,
     errorMessage,
+    isDisabled,
 }: QuerySettingsTimeoutProps) {
     const handleValueChange = React.useCallback(
         (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -38,12 +39,30 @@ export function QuerySettingsTimeout({
         [onChange],
     );
 
+    const isChecked = value !== null;
+
     return (
         <React.Fragment>
-            <Switch checked={isEnabled} onUpdate={onToggle} className={b('title')}>
-                {QUERY_SETTINGS_FIELD_SETTINGS.timeout.title}
-            </Switch>
-            {isEnabled ? (
+            <div className={b('title')}>
+                <Switch
+                    disabled={isDisabled}
+                    checked={isChecked}
+                    onUpdate={onToggle}
+                    className={b('switch')}
+                    content={QUERY_SETTINGS_FIELD_SETTINGS.timeout.title}
+                />
+                {isDisabled ? (
+                    <Popover
+                        content={i18n('form.timeout.disabled')}
+                        placement={'bottom-start'}
+                        hasArrow={false}
+                        size="s"
+                    >
+                        <Icon className={b('question-icon')} data={CircleQuestion} />
+                    </Popover>
+                ) : null}
+            </div>
+            {isChecked && (
                 <div className={b('control-wrapper')}>
                     <TextInput
                         id={id}
@@ -60,7 +79,7 @@ export function QuerySettingsTimeout({
                         }
                     />
                 </div>
-            ) : null}
+            )}
         </React.Fragment>
     );
 }

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

@@ -11,6 +11,7 @@
   "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

@@ -11,6 +11,7 @@
   "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>;

src/utils/hooks/useQueryExecutionSettings.ts

@@ -2,8 +2,17 @@ import React from 'react';
 
 import {useTracingLevelOptionAvailable} from '../../store/reducers/capabilities/hooks';
 import type {QuerySettings} from '../../types/store/query';
-import {QUERY_EXECUTION_SETTINGS_KEY, USE_SHOW_PLAN_SVG_KEY} from '../constants';
-import {DEFAULT_QUERY_SETTINGS, STATISTICS_MODES, querySettingsRestoreSchema} from '../query';
+import {
+    ENABLE_QUERY_STREAMING,
+    QUERY_EXECUTION_SETTINGS_KEY,
+    USE_SHOW_PLAN_SVG_KEY,
+} from '../constants';
+import {
+    DEFAULT_QUERY_SETTINGS,
+    QUERY_MODES,
+    STATISTICS_MODES,
+    querySettingsRestoreSchema,
+} from '../query';
 
 import {useSetting} from './useSetting';
 
@@ -13,6 +22,7 @@ export const useQueryExecutionSettings = () => {
 
     const validatedSettings = querySettingsRestoreSchema.parse(storageSettings);
     const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
+    const [enableQueryStreaming] = useSetting<boolean>(ENABLE_QUERY_STREAMING);
 
     const setQueryExecutionSettings = React.useCallback(
         (settings: QuerySettings) => {
@@ -28,6 +38,10 @@ export const useQueryExecutionSettings = () => {
 
     const settings: QuerySettings = {
         ...validatedSettings,
+        timeout:
+            enableQueryStreaming && validatedSettings.queryMode === QUERY_MODES.query
+                ? validatedSettings.timeout || null
+                : validatedSettings.timeout || undefined,
         statisticsMode: useShowPlanToSvg ? STATISTICS_MODES.full : validatedSettings.statisticsMode,
         tracingLevel: enableTracingLevel
             ? validatedSettings.tracingLevel

src/utils/query.ts

@@ -300,7 +300,7 @@ export const parseQueryErrorToString = (error: unknown) => {
 export const DEFAULT_QUERY_SETTINGS = {
     queryMode: QUERY_MODES.query,
     transactionMode: TRANSACTION_MODES.implicit,
-    timeout: 60,
+    timeout: null,
     limitRows: 10000,
     statisticsMode: STATISTICS_MODES.none,
     tracingLevel: TRACING_LEVELS.off,
@@ -311,10 +311,12 @@ export const transactionModeSchema = z.nativeEnum(TRANSACTION_MODES);
 export const statisticsModeSchema = z.nativeEnum(STATISTICS_MODES);
 export const tracingLevelSchema = z.nativeEnum(TRACING_LEVELS);
 export const querySettingsValidationSchema = z.object({
-    timeout: z.preprocess(
-        (val) => (val === '' ? undefined : val),
-        z.coerce.number().positive().or(z.undefined()),
-    ),
+    timeout: z
+        .preprocess(
+            (val) => (val === '' ? undefined : val),
+            z.coerce.number().positive().or(z.undefined()).or(z.null()),
+        )
+        .or(z.string()),
     limitRows: z.preprocess(
         (val) => (val === '' ? undefined : val),
         z.coerce.number().gt(0).lte(100_000).or(z.undefined()),
@@ -329,7 +331,7 @@ export const querySettingsRestoreSchema = z
     .object({
         timeout: z.preprocess(
             (val) => (val === '' ? undefined : val),
-            z.coerce.number().positive().optional(),
+            z.coerce.number().positive().or(z.null()).optional(),
         ),
         limitRows: z.preprocess(
             (val) => (val === '' ? undefined : val),