🪟 🐛 Correctly revalidate form when validationSchema changes (#15109)

* Correctly revalidate form when validationSchema changes

* Remove old validation logic

Author: Tim Roes

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<ServiceFormProps> = (props) => {
           isLoadingSchema={props.isLoading}
         >
           {!props.isEditMode && <SetDefaultName />}
+          <RevalidateOnValidationSchemaChange validationSchema={validationSchema} />
           <FormikPatch />
           <FormChangeTracker changed={dirty} formId={formId} />
           <PatchInitialValuesWithWidgetConfig schema={jsonSchema} initialValues={initialValues} />

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