fix: review fixes

Author: astandrik

package-lock.json

@@ -24,6 +24,7 @@
     "@gravity-ui/table": "^0.5.0",
     "@gravity-ui/uikit": "^6.20.1",
     "@gravity-ui/websql-autocomplete": "^9.1.0",
+    "@hookform/resolvers": "^3.9.0",
     "@reduxjs/toolkit": "^2.2.3",
     "@tanstack/react-table": "^8.19.3",
     "axios": "^1.7.3",
@@ -52,6 +53,7 @@
     "uuid": "^10.0.0",
     "web-vitals": "^1.1.2",
     "ydb-ui-components": "^4.2.0",
+    "yup": "^1.4.0",
     "zod": "^3.23.8"
   },
   "scripts": {

package.json

@@ -21,8 +21,10 @@ export default function getChangedQueryExecutionSettingsDescription({
             const content = settings.options.find((option) => option.value === currentValue)
                 ?.content as string;
 
-            result[settings.title] = content;
-        } else {
+            if (content) {
+                result[settings.title] = content;
+            }
+        } else if (currentValue) {
             result[settings.title] = currentValue;
         }
     });

src/containers/Tenant/Query/QueryEditorControls/utils/getChangedQueryExecutionSettingsDescription.ts

@@ -1,14 +1,22 @@
 import React from 'react';
 
 import {Dialog, Link as ExternalLink, Flex, TextInput} from '@gravity-ui/uikit';
+import {yupResolver} from '@hookform/resolvers/yup';
 import {Controller, useForm} from 'react-hook-form';
+import * as yup from 'yup';
 
 import {useTracingLevelOptionAvailable} from '../../../../store/reducers/capabilities/hooks';
 import {
     selectQueryAction,
     setQueryAction,
 } from '../../../../store/reducers/queryActions/queryActions';
-import type {QuerySettings} from '../../../../types/store/query';
+import type {
+    QueryMode,
+    QuerySettings,
+    StatisticsMode,
+    TracingLevel,
+    TransactionMode,
+} from '../../../../types/store/query';
 import {cn} from '../../../../utils/cn';
 import {
     useQueryExecutionSettings,
@@ -24,6 +32,27 @@ import './QuerySettingsDialog.scss';
 
 const b = cn('ydb-query-settings-dialog');
 
+const validationSchema = yup.object().shape({
+    timeout: yup.string().test('is-within-range', i18n('form.validation.timeout'), (value) => {
+        if (!value) {
+            return true;
+        }
+        const num = Number(value);
+        return !isNaN(num) && num > 0;
+    }),
+    limitRows: yup.string().test('is-within-range', i18n('form.validation.limitRows'), (value) => {
+        if (!value) {
+            return true;
+        }
+        const num = Number(value);
+        return !isNaN(num) && num > 0 && num <= 100000;
+    }),
+    queryMode: yup.mixed<QueryMode>().required(),
+    transactionMode: yup.mixed<TransactionMode>().required(),
+    statisticsMode: yup.mixed<StatisticsMode>(),
+    tracingLevel: yup.mixed<TracingLevel>(),
+});
+
 export function QuerySettingsDialog() {
     const dispatch = useTypedDispatch();
     const queryAction = useTypedSelector(selectQueryAction);
@@ -66,8 +95,13 @@ interface QuerySettingsFormProps {
 }
 
 function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsFormProps) {
-    const {control, handleSubmit} = useForm<QuerySettings>({
+    const {
+        control,
+        handleSubmit,
+        formState: {errors},
+    } = useForm<QuerySettings>({
         defaultValues: initialValues,
+        resolver: yupResolver<QuerySettings>(validationSchema),
     });
 
     const enableTracingLevel = useTracingLevelOptionAvailable();
@@ -85,6 +119,7 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                             control={control}
                             render={({field}) => (
                                 <QuerySettingsSelect
+                                    id="queryMode"
                                     setting={field.value}
                                     onUpdateSetting={field.onChange}
                                     settingOptions={QUERY_SETTINGS_FIELD_SETTINGS.queryMode.options}
@@ -104,10 +139,14 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                             render={({field}) => (
                                 <React.Fragment>
                                     <TextInput
+                                        id="timeout"
                                         type="number"
                                         {...field}
                                         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')}
@@ -128,6 +167,7 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                                 control={control}
                                 render={({field}) => (
                                     <QuerySettingsSelect
+                                        id="tracingLevel"
                                         setting={field.value}
                                         onUpdateSetting={field.onChange}
                                         settingOptions={
@@ -149,6 +189,7 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                             control={control}
                             render={({field}) => (
                                 <QuerySettingsSelect
+                                    id="transactionMode"
                                     setting={field.value}
                                     onUpdateSetting={field.onChange}
                                     settingOptions={
@@ -169,6 +210,7 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                             control={control}
                             render={({field}) => (
                                 <QuerySettingsSelect
+                                    id="statisticsMode"
                                     setting={field.value}
                                     onUpdateSetting={field.onChange}
                                     settingOptions={
@@ -188,14 +230,16 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                             name="limitRows"
                             control={control}
                             render={({field}) => (
-                                <React.Fragment>
-                                    <TextInput
-                                        type="number"
-                                        {...field}
-                                        className={b('limit-rows')}
-                                        placeholder="10000"
-                                    />
-                                </React.Fragment>
+                                <TextInput
+                                    id="limitRows"
+                                    type="number"
+                                    {...field}
+                                    className={b('limit-rows')}
+                                    placeholder="10000"
+                                    validationState={errors.limitRows ? 'invalid' : undefined}
+                                    errorMessage={errors.limitRows?.message}
+                                    errorPlacement="inside"
+                                />
                             )}
                         />
                     </div>

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

@@ -23,6 +23,7 @@ type SelectType = QueryMode | TransactionMode | StatisticsMode | TracingLevel;
 type QuerySettingSelectOption<T> = SelectOption<T> & {isDefault?: boolean};
 
 interface QuerySettingsSelectProps<T extends SelectType> {
+    id?: string;
     setting: T;
     settingOptions: QuerySettingSelectOption<T>[];
     onUpdateSetting: (mode: T) => void;
@@ -32,6 +33,7 @@ export function QuerySettingsSelect<T extends SelectType>(props: QuerySettingsSe
     return (
         <div className={b('selector')}>
             <Select<T>
+                id={props.id}
                 options={props.settingOptions}
                 value={[props.setting]}
                 onUpdate={(value) => {

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

@@ -9,6 +9,8 @@
   "button-done": "Save",
   "button-cancel": "Cancel",
   "form.timeout.seconds": "sec",
+  "form.validation.timeout": "Must be positive",
+  "form.validation.limitRows": "Must be between 1 and 100000",
   "description.default": " (default)",
   "docs": "Documentation"
 }

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

@@ -9,6 +9,8 @@
   "button-done": "Готово",
   "button-cancel": "Отменить",
   "form.timeout.seconds": "сек",
+  "form.validation.timeout": "Таймаут должен быть положительным",
+  "form.validation.limitRows": "Лимит строк должен быть между 1 и 100000",
   "description.default": " (default)",
   "docs": "Документация"
 }