Skip to content

Commit

Permalink
🪟🐛 Connector form: Remove empty strings from form values for optional…
Browse files Browse the repository at this point in the history
… properties (#20808)

Remove empty strings from form values for properties without default
  • Loading branch information
Joe Reuter authored Jan 3, 2023
1 parent 6669637 commit d7f4f46
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 3 deletions.
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 || []}>
Expand Down Expand Up @@ -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}
Expand All @@ -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 (
Expand All @@ -103,6 +133,7 @@ export const Control: React.FC<ControlProps> = ({ property, name, disabled, erro
showButtons={isFormInEditMode}
disabled={disabled}
error={error}
onChange={onChange}
/>
);
}
Expand All @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ interface SecretConfirmationControlProps {
multiline: boolean;
disabled?: boolean;
error?: boolean;
onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
}

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

0 comments on commit d7f4f46

Please sign in to comment.