edit-workflow: Fix validation on first edit

scality · Apr 14, 2022 · 33f61f1 · 33f61f1
1 parent a30a6fc
commit 33f61f1
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 17 deletions.
diff --git a/src/react/workflow/ConfigurationTab.tsx b/src/react/workflow/ConfigurationTab.tsx
@@ -290,7 +290,6 @@ function EditForm({
   bucketList: S3BucketList;
   locations: Locations;
 }) {
-  const history = useHistory();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
   const schema =

diff --git a/src/react/workflow/ExpirationForm.tsx b/src/react/workflow/ExpirationForm.tsx
@@ -86,7 +86,7 @@ export const expirationSchema = Joi.object({
 );
 
 export function ExpirationForm({ bucketList, locations, prefix = '' }: Props) {
-  const { register, control, watch, getValues, setValue, formState } =
+  const { register, control, watch, getValues, setValue, formState, trigger } =
     useFormContext();
 
   const { errors: formErrors } = formState;
@@ -140,7 +140,10 @@ export function ExpirationForm({ bucketList, locations, prefix = '' }: Props) {
                           id="enabled"
                           toggle={enabled}
                           label={enabled ? 'Active' : 'Inactive'}
-                          onChange={() => onChange(!enabled)}
+                          onChange={() => {
+                            onChange(!enabled);
+                            trigger(`${prefix}enabled`);
+                          }}
                         />
                       );
                     }}
@@ -210,6 +213,10 @@ export function ExpirationForm({ bucketList, locations, prefix = '' }: Props) {
                   <Input
                     id="prefix"
                     {...register(`${prefix}filter.objectKeyPrefix`)}
+                    onChange={(evt) => {
+                      register(`${prefix}filter.objectKeyPrefix`).onChange(evt);
+                      trigger(`${prefix}filter.objectKeyPrefix`);
+                    }}
                     aria-invalid={!!errors[`${prefix}filter.objectKeyPrefix`]}
                     aria-describedby="error-prefix"
                     autoComplete="off"

diff --git a/src/react/workflow/ReplicationForm.tsx b/src/react/workflow/ReplicationForm.tsx
@@ -74,7 +74,7 @@ function ReplicationComponent({
     register,
     control,
     getValues,
-
+    trigger,
     formState: { errors: formErrors },
   } = useFormContext();
   const errors = flattenFormErrors(formErrors);
@@ -134,7 +134,10 @@ function ReplicationComponent({
                         toggle={enabled}
                         id="enabled"
                         label={enabled ? 'Active' : 'Inactive'}
-                        onChange={() => onChange(!enabled)}
+                        onChange={() => {
+                          onChange(!enabled);
+                          trigger(`${prefix}enabled`);
+                        }}
                       />
                     );
                   }}
@@ -264,12 +267,15 @@ function ReplicationComponent({
                       <Select
                         id="destinationLocation"
                         onChange={onChange}
-                        options={options}
-                        formatOptionLabel={renderDestination(locations)}
-                        value={options.find(
-                          (l) => l.value === destinationLocation?.value,
-                        )}
-                      />
+                        value={destinationLocation}
+                      >
+                        {options &&
+                          options.map((o, i) => (
+                            <Option key={i} value={o.value}>
+                              {renderDestination(locations)(o)}
+                            </Option>
+                          ))}
+                      </Select>
                     );
                   }}
                 />

diff --git a/src/react/workflow/utils.tsx b/src/react/workflow/utils.tsx
@@ -63,12 +63,10 @@ export const renderSource = (locations: Locations) => {
 };
 export const renderDestination = (locations: Locations) => {
   return function does(option: SelectOption) {
-    return (
-      <div>
-        <span> {option.label} </span>
-        <small> ({getLocationTypeShort(option.value, locations)}) </small>
-      </div>
-    );
+    return `${option.label} (${getLocationTypeShort(
+      option.value,
+      locations,
+    )})`
   };
 };
 export function newExpiration(bucketName?: string): Expiration {