Improve JSON form empty strings and dependent fields

In the StringWidget component, if the string is empty then reset the field to undefined. This prevents validation false positives. Also use the JSON schema 'dependentRequired' keyword in the Confluent schema, and surface object-level formik errors.
ArroyoSystems · Dec 21, 2023 · 82b986e · 82b986e
1 parent b814077
commit 82b986e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 23 deletions.
diff --git a/arroyo-console/src/routes/connections/JsonForm.tsx b/arroyo-console/src/routes/connections/JsonForm.tsx
@@ -43,6 +43,7 @@ function StringWidget({
   errors,
   onChange,
   readonly,
+  resetField,
 }: {
   path: string;
   title: string;
@@ -56,7 +57,16 @@ function StringWidget({
   errors: any;
   onChange: (e: React.ChangeEvent<any>) => void;
   readonly?: boolean;
+  resetField?: (field: string) => any;
 }) {
+  const onChangeWrapper = (e: React.ChangeEvent<any>) => {
+    onChange(e);
+
+    if (resetField && e.target.value == '') {
+      resetField(path);
+    }
+  };
+
   return (
     <FormControl isRequired={required} isInvalid={errors[path]}>
       <FormLabel>{title}</FormLabel>
@@ -66,15 +76,15 @@ function StringWidget({
           type={password ? 'password' : 'text'}
           placeholder={readonly ? undefined : placeholder}
           value={value || ''}
-          onChange={e => onChange(e)}
+          onChange={onChangeWrapper}
           readOnly={readonly}
         />
       ) : (
         <Textarea
           name={path}
           placeholder={placeholder}
           value={value || ''}
-          onChange={e => onChange(e)}
+          onChange={onChangeWrapper}
           resize={'vertical'}
           size={'md'}
           readOnly={readonly}
@@ -659,7 +669,7 @@ export function FormInner({
       // @ts-ignore
       onChange({ target: { name: path, value: {} } });
     }
-  }, [schema]);
+  }, []);
 
   function traversePath(values: any, typeKey: string): any {
     let value = values;
@@ -734,6 +744,7 @@ export function FormInner({
                       errors={errors}
                       onChange={onChange}
                       readonly={readonly}
+                      resetField={resetField}
                     />
                   );
                 }
@@ -811,7 +822,7 @@ export function FormInner({
                           <Box p={4}>
                             <FormInner
                               path={nextPath}
-                              key={key}
+                              key={value}
                               // @ts-ignore
                               schema={inSchema}
                               errors={errors}
@@ -827,25 +838,28 @@ export function FormInner({
                   );
                 } else if (property.properties != undefined) {
                   return (
-                    <fieldset key={key} style={{ border: '1px solid #888', borderRadius: '8px' }}>
-                      <legend
-                        style={{ marginLeft: '8px', paddingLeft: '16px', paddingRight: '16px' }}
-                      >
-                        {property.title || key}
-                      </legend>
-                      <Box p={4}>
-                        <FormInner
-                          path={nextPath}
-                          // @ts-ignore
-                          schema={property}
-                          errors={errors}
-                          onChange={onChange}
-                          values={values}
-                          resetField={resetField}
-                          readonly={readonly}
-                        />
-                      </Box>
-                    </fieldset>
+                    <FormControl isInvalid={errors[nextPath]}>
+                      <fieldset key={key} style={{ border: '1px solid #888', borderRadius: '8px' }}>
+                        <legend
+                          style={{ marginLeft: '8px', paddingLeft: '16px', paddingRight: '16px' }}
+                        >
+                          {property.title || key}
+                        </legend>
+                        <Box p={4}>
+                          <FormInner
+                            path={nextPath}
+                            // @ts-ignore
+                            schema={property}
+                            errors={errors}
+                            onChange={onChange}
+                            values={values}
+                            resetField={resetField}
+                            readonly={readonly}
+                          />
+                        </Box>
+                      </fieldset>
+                      <FormErrorMessage>{errors[nextPath] ?? ''}</FormErrorMessage>
+                    </FormControl>
                   );
                 } else if (property.additionalProperties) {
                   return (

diff --git a/connector-schemas/confluent/connection.json b/connector-schemas/confluent/connection.json
@@ -53,6 +53,14 @@
                     ]
                 }
             },
+            "dependentRequired": {
+                "apiKey": [
+                    "endpoint"
+                ],
+                "apiSecret": [
+                    "endpoint"
+                ]
+            },
             "sensitive": [
                 "apiSecret"
             ]