fix: handle existing feature name (#641)

* fix: handle existing feature name

* refactor: change feature input order

frontend/src/component/feature/CreateFeature/CreateFeature/CreateFeature.tsx

@@ -27,8 +27,8 @@ const CreateFeature = () => {
         setProject,
         description,
         setDescription,
+        validateToggleName,
         getTogglePayload,
-        validateName,
         clearErrors,
         errors,
     } = useFeatureForm();
@@ -38,20 +38,23 @@ const CreateFeature = () => {
     const handleSubmit = async (e: Event) => {
         e.preventDefault();
         clearErrors();
-        await validateName(name);
-        const payload = getTogglePayload();
-        try {
-            await createFeatureToggle(project, payload);
-            history.push(`/projects/${project}/features2/${name}`);
-            setToastData({
-                title: 'Toggle created successfully',
-                text: 'Now you can start using your toggle.',
-                confetti: true,
-                type: 'success',
-            });
-            setShowFeedback(true);
-        } catch (e: any) {
-            setToastApiError(e.toString());
+        const validToggleName = await validateToggleName();
+
+        if (validToggleName) {
+            const payload = getTogglePayload();
+            try {
+                await createFeatureToggle(project, payload);
+                history.push(`/projects/${project}/features2/${name}`);
+                setToastData({
+                    title: 'Toggle created successfully',
+                    text: 'Now you can start using your toggle.',
+                    confetti: true,
+                    type: 'success',
+                });
+                setShowFeedback(true);
+            } catch (e: any) {
+                setToastApiError(e.toString());
+            }
         }
     };
 
@@ -86,6 +89,7 @@ const CreateFeature = () => {
                 setName={setName}
                 setProject={setProject}
                 setDescription={setDescription}
+                validateToggleName={validateToggleName}
                 errors={errors}
                 handleSubmit={handleSubmit}
                 handleCancel={handleCancel}

frontend/src/component/feature/CreateFeature/FeatureForm/FeatureForm.tsx

@@ -3,11 +3,7 @@ import Input from '../../../common/Input/Input';
 import { Button } from '@material-ui/core';
 import { useStyles } from './FeatureForm.styles';
 import FeatureTypeSelect from '../../FeatureView2/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect';
-import {
-    CF_DESC_ID,
-    CF_NAME_ID,
-    CF_TYPE_ID,
-} from '../../../../testIds';
+import { CF_DESC_ID, CF_NAME_ID, CF_TYPE_ID } from '../../../../testIds';
 import useFeatureTypes from '../../../../hooks/api/getters/useFeatureTypes/useFeatureTypes';
 import { KeyboardArrowDownOutlined } from '@material-ui/icons';
 import useUser from '../../../../hooks/api/getters/useUser/useUser';
@@ -25,6 +21,7 @@ interface IFeatureToggleForm {
     setName: React.Dispatch<React.SetStateAction<string>>;
     setDescription: React.Dispatch<React.SetStateAction<string>>;
     setProject: React.Dispatch<React.SetStateAction<string>>;
+    validateToggleName: () => void;
     handleSubmit: (e: any) => void;
     handleCancel: () => void;
     errors: { [key: string]: string };
@@ -42,6 +39,7 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
     setName,
     setDescription,
     setProject,
+    validateToggleName,
     handleSubmit,
     handleCancel,
     errors,
@@ -60,6 +58,23 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
     return (
         <form onSubmit={handleSubmit} className={styles.form}>
             <div className={styles.container}>
+                <p className={styles.inputDescription}>
+                    What would you like to call your toggle?
+                </p>
+                <Input
+                    disabled={mode === 'Edit'}
+                    className={styles.input}
+                    label="Name"
+                    error={Boolean(errors.name)}
+                    errorText={errors.name}
+                    onFocus={() => clearErrors()}
+                    value={name}
+                    onChange={e => setName(trim(e.target.value))}
+                    inputProps={{
+                        'data-test': CF_NAME_ID,
+                    }}
+                    onBlur={validateToggleName}
+                />
                 <p className={styles.inputDescription}>
                     What kind of feature toggle do you want to create?
                 </p>
@@ -80,23 +95,6 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
                 <p className={styles.typeDescription}>
                     {renderToggleDescription()}
                 </p>
-
-                <p className={styles.inputDescription}>
-                    What would you like to call your toggle?
-                </p>
-                <Input
-                    disabled={mode === 'Edit'}
-                    className={styles.input}
-                    label="Name"
-                    error={Boolean(errors.name)}
-                    errorText={errors.name}
-                    onFocus={() => clearErrors()}
-                    value={name}
-                    onChange={e => setName(trim(e.target.value))}
-                    inputProps={{
-                        'data-test': CF_NAME_ID,
-                    }}
-                />
                 <ConditionallyRender
                     condition={editable}
                     show={

frontend/src/component/feature/CreateFeature/hooks/useFeatureForm.ts

@@ -47,23 +47,24 @@ const useFeatureForm = (
         };
     };
 
-    const validateName = async (name: string) => {
+    const NAME_EXISTS_ERROR = 'Error: A toggle with that name already exists';
+
+    const validateToggleName = async () => {
         if (name.length === 0) {
             setErrors(prev => ({ ...prev, name: 'Name can not be empty.' }));
             return false;
         }
-        if (name.length > 0) {
-            try {
-                await validateFeatureToggleName(name);
-            } catch (err: any) {
+        try {
+            await validateFeatureToggleName(name);
+            return true;
+        } catch (e: any) {
+            if (e.toString().includes(NAME_EXISTS_ERROR)) {
                 setErrors(prev => ({
                     ...prev,
-                    name:
-                        err && err.message
-                            ? err.message
-                            : 'Could not check name',
+                    name: 'A feature with this name already exists',
                 }));
             }
+            return false;
         }
     };
 
@@ -81,7 +82,7 @@ const useFeatureForm = (
         description,
         setDescription,
         getTogglePayload,
-        validateName,
+        validateToggleName,
         clearErrors,
         errors,
     };

frontend/src/component/project/Project/hooks/useProjectForm.ts

@@ -56,6 +56,7 @@ const useProjectForm = (
             return false;
         }
     };
+    
     const validateProjectId = () => {
         if (projectId.length === 0) {
             setErrors(prev => ({ ...prev, id: 'id can not be empty.' }));