Fixed issue with validation on name field

TIER · Sep 1, 2022 · cf6f472 · cf6f472
1 parent 6ceb832
commit cf6f472
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 11 deletions.
diff --git a/backend/src/main/resources/i18n/messages.properties b/backend/src/main/resources/i18n/messages.properties
@@ -773,6 +773,7 @@ label.configuration-value=Value
 label.configuration-action=Action
 message.delete-property-title=Delete Configuration?
 message.delete-property-body=You are requesting to delete a configuration set. If you complete this process the set will be removed. This cannot be undone. Do you wish to continue?
+message.name-required=Name is required.
 
 label.external-description=Description
 

diff --git a/ui/src/app/admin/IdpConfiguration.js b/ui/src/app/admin/IdpConfiguration.js
@@ -20,10 +20,19 @@ export function IdpConfiguration() {
                     </ConfigurationsProvider>
                 } />
                 <Route path={`${path}/new`} render={() =>
-                    <NewConfiguration />
+                    <ConfigurationsProvider>
+                        {(configurations) =>
+                            <NewConfiguration configurations={configurations} />
+                        }
+                    </ConfigurationsProvider>
+
                 } />
                 <Route path={`${path}/:id/edit`} render={() =>
-                    <EditConfiguration />
+                    <ConfigurationsProvider>
+                        {(configurations) =>
+                            <EditConfiguration configurations={configurations} />
+                        }
+                    </ConfigurationsProvider>
                 } />
                 <Route path={`${path}`} exact render={() => 
                     <Redirect to={`${url}/list`} />

diff --git a/ui/src/app/admin/component/ConfigurationForm.js b/ui/src/app/admin/component/ConfigurationForm.js
@@ -14,12 +14,16 @@ import FloatingLabel from 'react-bootstrap/FloatingLabel';
 import { useTranslator } from '../../i18n/hooks';
 import { includes } from 'lodash';
 
-export function ConfigurationForm({ configuration = {}, loading, onSave, onCancel }) {
+export function ConfigurationForm({ configurations, configuration = {}, loading, onSave, onCancel }) {
 
-    const { control, register, getValues, watch, formState: { errors } } = useForm({
+    const [names, setNames] = React.useState([]);
+
+    const { control, register, getValues, watch, formState: { errors, isValid }, handleSubmit } = useForm({
         defaultValues: {
             ...configuration
-        }
+        },
+        reValidateMode: 'onChange',
+        mode: 'onChange',
     });
 
     const { fields, append, remove } = useFieldArray({
@@ -63,14 +67,24 @@ export function ConfigurationForm({ configuration = {}, loading, onSave, onCance
 
     const translator = useTranslator();
 
+    React.useEffect(() => {
+        setNames(configurations.map(p => p.name));
+    }, [configurations]);
+
+    React.useEffect(() => console.log(errors, names), [errors, names]);
+
+    const onNext = (data) => {
+        console.log(data);
+    };
+
     return (<>
         <div className="container-fluid">
             <div className="d-flex justify-content-end align-items-center">
                 <React.Fragment>
                     <Button variant="info" className="me-2"
                         type="button"
                         onClick={() => saveConfig(getValues())}
-                        disabled={errors.length > 0 || loading}
+                        disabled={ !isValid || loading}
                         aria-label="Save changes to the metadata source. You will return to the dashboard">
                         <FontAwesomeIcon icon={loading ? faSpinner : faSave} pulse={loading} />&nbsp;
                         <Translate value="action.save">Save</Translate>
@@ -85,12 +99,26 @@ export function ConfigurationForm({ configuration = {}, loading, onSave, onCance
                 </React.Fragment>
             </div>
             <hr />
-            <Form>
+            <Form onSubmit={handleSubmit(onNext)}>
                 <div className="row">
                     <div className="col-12 col-lg-5">
                         <Form.Group className="mb-3" controlId="formName">
                             <Form.Label><Translate value="label.configuration-name">Name</Translate></Form.Label>
-                            <Form.Control type="text" placeholder={translator('label.configuration-name-placeholder')} required {...register(`name`)} />
+                            <Form.Control
+                                type="text"
+                                required
+                                isInvalid={errors.name}
+                                placeholder={translator('label.configuration-name-placeholder')}
+                                {...register(`name`, {
+                                    required: true,
+                                    validate: {
+                                        unique: v => !includes(names, v)
+                                    }
+                                })} />
+                            <Form.Text className={errors.name ? 'text-danger' : 'text-muted'}>
+                                {errors?.name?.type === 'unique' && <Translate value={`message.must-be-unique`} />}
+                                {errors?.name?.type === 'required' && <Translate value={`message.name-required`} />}
+                            </Form.Text>
                         </Form.Group>
                     </div>
                 </div>

diff --git a/ui/src/app/admin/container/EditConfiguration.js b/ui/src/app/admin/container/EditConfiguration.js
@@ -11,7 +11,7 @@ import { PropertiesProvider } from '../hoc/PropertiesProvider';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
-export function EditConfiguration() {
+export function EditConfiguration({ configurations }) {
     const history = useHistory();
     const notifier = useNotificationDispatcher();
     const translator = useTranslator();
@@ -81,6 +81,7 @@ export function EditConfiguration() {
                     <PropertiesProvider>
                         {configuration && <ConfigurationForm
                             configuration={configuration}
+                            configurations={configurations}
                             loading={loading}
                             onSave={(data) => save(data)}
                             onCancel={() => cancel()} /> }

diff --git a/ui/src/app/admin/container/NewConfiguration.js b/ui/src/app/admin/container/NewConfiguration.js
@@ -11,7 +11,7 @@ import { useTranslator } from '../../i18n/hooks';
 import { BASE_PATH } from '../../App.constant';
 import { PropertiesProvider } from '../hoc/PropertiesProvider';
 
-export function NewConfiguration() {
+export function NewConfiguration({ configurations }) {
     const history = useHistory();
     const notifier = useNotificationDispatcher();
     const translator = useTranslator();
@@ -67,6 +67,7 @@ export function NewConfiguration() {
                             {(schema) =>
                                 <ConfigurationForm
                                     configuration={configuration}
+                                    configurations={configurations}
                                     schema={schema}
                                     loading={loading}
                                     onSave={(data) => save(data)}

diff --git a/ui/src/app/admin/hoc/ConfigurationsProvider.js b/ui/src/app/admin/hoc/ConfigurationsProvider.js
@@ -39,4 +39,4 @@ export function ConfigurationsProvider({ children, cache = 'no-cache' }) {
     React.useEffect(() => { loadConfigurations() }, []);
 
     return (<>{children(configurations, removeConfiguration, loading)}</>);
-}
+}