From d7f4f46d3637bced56104c83526a501b4224cc8c Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Tue, 3 Jan 2023 15:23:02 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=F0=9F=90=9B=20Connector=20form:=20?=
 =?UTF-8?q?Remove=20empty=20strings=20from=20form=20values=20for=20optiona?=
 =?UTF-8?q?l=20properties=20(#20808)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove empty strings from form values for properties without default
---
 .../components/Property/Control.tsx           | 38 +++++++++++++++++--
 .../Property/SecretConfirmationControl.tsx    |  4 ++
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/Control.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/Control.tsx
index ba147eab8972e..11a1c3a1502dc 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/Control.tsx
+++ b/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}
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/SecretConfirmationControl.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/SecretConfirmationControl.tsx
index 2504726e20148..56d4ec346c91a 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/SecretConfirmationControl.tsx
+++ b/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"