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 20, 2023 · 74812d6 · 74812d6
1 parent b814077
commit 74812d6
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 21 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}
@@ -734,6 +744,7 @@ export function FormInner({
                       errors={errors}
                       onChange={onChange}
                       readonly={readonly}
+                      resetField={resetField}
                     />
                   );
                 }
@@ -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"
             ]