🪟🐛 Connector form: Remove empty strings from form values for optional…

… properties (#20808)

Remove empty strings from form values for properties without default

airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/Control.tsx

@@ -1,5 +1,5 @@
 import { Field, useField } from "formik";
-import React from "react";
+import React, { useCallback } from "react";
 
 import { DatePicker } from "components/ui/DatePicker";
 import { DropDown } from "components/ui/DropDown";
@@ -25,6 +25,19 @@ export const Control: React.FC<ControlProps> = ({ property, name, disabled, erro
   const [field, meta, helpers] = useField(name);
   const useDatepickerExperiment = useExperiment("connector.form.useDatepicker", true);
 
+  const onChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      field.onChange(e);
+      if (!property.default && e.target.value === "") {
+        // in case the input is not required and the user deleted their value, reset to undefined to avoid sending
+        // an empty string which might fail connector validation.
+        // Do not do this if there's a default value, formik will fill it in when casting.
+        helpers.setValue(undefined);
+      }
+    },
+    [field, helpers, property.default]
+  );
+
   if (property.type === "array" && !property.enum) {
     return (
       <Field name={name} defaultValue={property.default || []}>
@@ -68,7 +81,14 @@ export const Control: React.FC<ControlProps> = ({ property, name, disabled, erro
         withTime={property.format === "date-time"}
         onChange={(value) => {
           helpers.setTouched(true);
-          helpers.setValue(value);
+          if (!property.default && value === "") {
+            // in case the input is not required and the user deleted their value, reset to undefined to avoid sending
+            // an empty string which might fail connector validation.
+            // Do not do this if there's a default value, formik will fill it in when casting.
+            helpers.setValue(undefined);
+          } else {
+            helpers.setValue(value);
+          }
         }}
         value={field.value}
         disabled={disabled}
@@ -93,7 +113,17 @@ export const Control: React.FC<ControlProps> = ({ property, name, disabled, erro
       />
     );
   } else if (property.multiline && !property.isSecret) {
-    return <TextArea {...field} autoComplete="off" value={value ?? ""} rows={3} disabled={disabled} error={error} />;
+    return (
+      <TextArea
+        {...field}
+        onChange={onChange}
+        autoComplete="off"
+        value={value ?? ""}
+        rows={3}
+        disabled={disabled}
+        error={error}
+      />
+    );
   } else if (property.isSecret) {
     const isFormInEditMode = isDefined(meta.initialValue);
     return (
@@ -103,6 +133,7 @@ export const Control: React.FC<ControlProps> = ({ property, name, disabled, erro
         showButtons={isFormInEditMode}
         disabled={disabled}
         error={error}
+        onChange={onChange}
       />
     );
   }
@@ -111,6 +142,7 @@ export const Control: React.FC<ControlProps> = ({ property, name, disabled, erro
   return (
     <Input
       {...field}
+      onChange={onChange}
       placeholder={inputType === "number" ? property.default?.toString() : undefined}
       autoComplete="off"
       type={inputType}

airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/SecretConfirmationControl.tsx

@@ -14,6 +14,7 @@ interface SecretConfirmationControlProps {
   multiline: boolean;
   disabled?: boolean;
   error?: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 }
 
 const SecretConfirmationControl: React.FC<SecretConfirmationControlProps> = ({
@@ -22,6 +23,7 @@ const SecretConfirmationControl: React.FC<SecretConfirmationControlProps> = ({
   multiline,
   name,
   error,
+  onChange,
 }) => {
   const [field, , helpers] = useField(name);
   const [previousValue, setPreviousValue] = useState<unknown>(undefined);
@@ -34,6 +36,7 @@ const SecretConfirmationControl: React.FC<SecretConfirmationControlProps> = ({
     multiline && (isEditInProgress || !showButtons) ? (
       <SecretTextArea
         {...field}
+        onChange={onChange}
         autoComplete="off"
         value={field.value ?? ""}
         rows={3}
@@ -45,6 +48,7 @@ const SecretConfirmationControl: React.FC<SecretConfirmationControlProps> = ({
     ) : (
       <Input
         {...field}
+        onChange={onChange}
         autoComplete="off"
         value={field.value ?? ""}
         type="password"