fix: code-review

ydb-platform · Jul 4, 2024 · 976342d · 976342d
1 parent d1d06fa
commit 976342d
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 46 deletions.
diff --git a/src/containers/Tenant/Query/SaveQuery/SaveQuery.scss b/src/containers/Tenant/Query/SaveQuery/SaveQuery.scss
@@ -25,13 +25,7 @@
     &__control-wrapper {
         display: flex;
         flex-grow: 1;
-        flex-direction: column;
-    }
-    &__error {
-        display: inline-block;
-
-        height: 17px;
 
-        color: var(--g-color-text-danger);
+        min-height: 48px;
     }
 }
diff --git a/src/containers/Tenant/Query/SaveQuery/SaveQuery.tsx b/src/containers/Tenant/Query/SaveQuery/SaveQuery.tsx
@@ -77,31 +77,30 @@ export function SaveQueryDialog() {
     const dispatch = useTypedDispatch();
     const queryAction = useTypedSelector(selectQueryAction);
     const [queryName, setQueryName] = React.useState('');
-    const [validationError, setValidationError] = React.useState<string | null>(null);
+    const [validationError, setValidationError] = React.useState<string>();
 
     const validateQueryName = (value: string) => {
+        if (!value) {
+            return i18n('error.name-not-empty');
+        }
         if (savedQueries.some((q) => q.name.toLowerCase() === value.trim().toLowerCase())) {
             return i18n('error.name-exists');
         }
-        return null;
+        return undefined;
     };
 
     const onCloseDialog = () => {
         dispatch(setQueryAction('idle'));
         setQueryName('');
-        setValidationError(null);
+        setValidationError(undefined);
     };
 
     const handleQueryNameChange = (value: string) => {
         setQueryName(value);
-        setValidationError(validateQueryName(value));
+        setValidationError(undefined);
     };
 
     const onSaveClick = () => {
-        if (!queryName || validationError) {
-            return;
-        }
-
         dispatch(saveQuery(queryName));
         onCloseDialog();
     };
@@ -112,39 +111,48 @@ export function SaveQueryDialog() {
             hasCloseButton={false}
             size="s"
             onClose={onCloseDialog}
-            onEnterKeyDown={onSaveClick}
         >
             <Dialog.Header caption={i18n('action.save')} />
-            <Dialog.Body className={b('dialog-body')}>
-                <div className={b('dialog-row')}>{i18n('description')}</div>
-                <div className={b('dialog-row')}>
-                    <label htmlFor="queryName" className={b('field-title', 'required')}>
-                        {i18n('input-label')}
-                    </label>
-                    <div className={b('control-wrapper')}>
-                        <TextInput
-                            id="queryName"
-                            placeholder={i18n('input-placeholder')}
-                            value={queryName}
-                            onUpdate={handleQueryNameChange}
-                            hasClear
-                            autoFocus
-                            error={Boolean(validationError)}
-                            autoComplete={false}
-                        />
-                        <span className={b('error')}>{validationError}</span>
-                    </div>
-                </div>
-            </Dialog.Body>
-            <Dialog.Footer
-                textButtonApply={i18n('button-apply')}
-                textButtonCancel={i18n('button-cancel')}
-                onClickButtonCancel={onCloseDialog}
-                onClickButtonApply={onSaveClick}
-                propsButtonApply={{
-                    disabled: !queryName || Boolean(validationError),
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    const validationError = validateQueryName(queryName);
+                    setValidationError(validationError);
+                    if (!validationError) {
+                        onSaveClick();
+                    }
                 }}
-            />
+            >
+                <Dialog.Body className={b('dialog-body')}>
+                    <div className={b('dialog-row')}>{i18n('description')}</div>
+                    <div className={b('dialog-row')}>
+                        <label htmlFor="queryName" className={b('field-title', 'required')}>
+                            {i18n('input-label')}
+                        </label>
+                        <div className={b('control-wrapper')}>
+                            <TextInput
+                                id="queryName"
+                                placeholder={i18n('input-placeholder')}
+                                value={queryName}
+                                onUpdate={handleQueryNameChange}
+                                hasClear
+                                autoFocus
+                                autoComplete={false}
+                                validationState={validationError ? 'invalid' : undefined}
+                                errorMessage={validationError}
+                            />
+                        </div>
+                    </div>
+                </Dialog.Body>
+                <Dialog.Footer
+                    textButtonApply={i18n('button-apply')}
+                    textButtonCancel={i18n('button-cancel')}
+                    onClickButtonCancel={onCloseDialog}
+                    propsButtonApply={{
+                        type: 'submit',
+                    }}
+                />
+            </form>
         </Dialog>
     );
 }
diff --git a/src/containers/Tenant/Query/SaveQuery/i18n/en.json b/src/containers/Tenant/Query/SaveQuery/i18n/en.json
@@ -8,5 +8,6 @@
   "input-placeholder": "Enter query name",
   "button-apply": "Save",
   "button-cancel": "Cancel",
-  "error.name-exists": "This name already exists"
+  "error.name-exists": "This name already exists",
+  "error.name-not-empty": "Name should not be empty"
 }