diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx index 55edeef9d0cb..4ec090470900 100644 --- a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx +++ b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx @@ -69,6 +69,21 @@ const PatchInitialValuesWithWidgetConfig: React.FC<{ return null; }; +/** + * Formik does not revalidate the form in case the validationSchema it's using changes. + * This component just forces a revalidation of the form whenever the validation schema changes. + */ +const RevalidateOnValidationSchemaChange: React.FC<{ validationSchema: unknown }> = ({ validationSchema }) => { + // The validationSchema is passed into this component instead of pulled from the FormikContext, since + // due to https://github.com/jaredpalmer/formik/issues/2092 the validationSchema from the formik context will + // always be undefined. + const { validateForm } = useFormikContext(); + useEffect(() => { + validateForm(); + }, [validateForm, validationSchema]); + return null; +}; + /** * A component that will observe whenever the serviceType (selected connector) * changes and set the name of the connector to match the connector definition name. @@ -252,6 +267,7 @@ const ServiceForm: React.FC = (props) => { isLoadingSchema={props.isLoading} > {!props.isEditMode && } + diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/useBuildForm.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/useBuildForm.tsx index 1dcd6660a50a..2bcb99677ea5 100644 --- a/airbyte-webapp/src/views/Connector/ServiceForm/useBuildForm.tsx +++ b/airbyte-webapp/src/views/Connector/ServiceForm/useBuildForm.tsx @@ -129,11 +129,7 @@ export const useConstructValidationSchema = (jsonSchema: JSONSchema7, uiWidgetsI useMemo(() => buildYupFormForJsonSchema(jsonSchema, uiWidgetsInfo), [uiWidgetsInfo, jsonSchema]); export const usePatchFormik = (): void => { - const { setFieldTouched, isSubmitting, isValidating, validationSchema, validateForm, errors } = useFormikContext(); - // Formik doesn't validate values again, when validationSchema was changed on the fly. - useEffect(() => { - validateForm(); - }, [validateForm, validationSchema]); + const { setFieldTouched, isSubmitting, isValidating, errors } = useFormikContext(); /* Fixes issue https://github.com/airbytehq/airbyte/issues/1978 Problem described here https://github.com/formium/formik/issues/445