🪟 🐛 Hotfix getValues failures in connector form (#19400)

* Hotfix getValues failures in connector form

* Fix jest tests

* Fix jest tests

* Show errors somewhat properly

* Fix jest tests

Author: Tim Roes

airbyte-webapp/src/core/jsonSchema/schemaToYup.test.ts

@@ -46,19 +46,19 @@ it("should build schema for simple case", () => {
   const yupSchema = buildYupFormForJsonSchema(schema);
 
   const expectedSchema = yup.object().shape({
-    host: yup.string().trim().required("form.empty.error"),
+    host: yup.string().trim().required("form.empty.error").transform(String),
     port: yup
       .number()
       .min(0)
       .max(65536)
       .required("form.empty.error")
       .transform((val) => (isNaN(val) ? undefined : val)),
-    user: yup.string().trim().required("form.empty.error"),
+    user: yup.string().trim().required("form.empty.error").transform(String),
     is_sandbox: yup.boolean().default(false),
     is_field_no_default: yup.boolean().required("form.empty.error"),
-    dbname: yup.string().trim().required("form.empty.error"),
-    password: yup.string().trim(),
-    reports: yup.array().of(yup.string().trim()),
+    dbname: yup.string().trim().required("form.empty.error").transform(String),
+    password: yup.string().trim().transform(String),
+    reports: yup.array().of(yup.string().trim().transform(String)),
   });
 
   expect(JSON.stringify(yupSchema)).toEqual(JSON.stringify(expectedSchema));
@@ -103,9 +103,9 @@ it("should build schema for conditional case", () => {
   );
 
   const expectedSchema = yup.object().shape({
-    start_date: yup.string().trim().required("form.empty.error"),
+    start_date: yup.string().trim().required("form.empty.error").transform(String),
     credentials: yup.object().shape({
-      api_key: yup.string().trim().required("form.empty.error"),
+      api_key: yup.string().trim().required("form.empty.error").transform(String),
     }),
   });
 
@@ -151,7 +151,7 @@ it("should build schema for conditional case with inner schema and selected uiwi
 
   const expectedSchema = yup.object().shape({
     credentials: yup.object().shape({
-      redirect_uri: yup.string().trim().required("form.empty.error"),
+      redirect_uri: yup.string().trim().required("form.empty.error").transform(String),
     }),
   });
 

airbyte-webapp/src/core/jsonSchema/schemaToYup.ts

@@ -54,7 +54,10 @@ export const buildYupFormForJsonSchema = (
 
   switch (jsonSchema.type) {
     case "string":
-      schema = yup.string().trim();
+      schema = yup
+        .string()
+        .transform((val) => String(val))
+        .trim();
 
       if (jsonSchema?.pattern !== undefined) {
         schema = schema.matches(new RegExp(jsonSchema.pattern), "form.pattern.error");

airbyte-webapp/src/hooks/services/AppMonitoringService/__mocks__/AppMonitoringService.tsx

@@ -0,0 +1,6 @@
+export const useAppMonitoringService = () => {
+  return {
+    trackError: jest.fn(),
+    trackAction: jest.fn(),
+  };
+};

airbyte-webapp/src/hooks/services/AppMonitoringService/__mocks__/index.ts

@@ -0,0 +1 @@
+export * from "./AppMonitoringService";

airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.test.tsx

@@ -142,6 +142,7 @@ const schema: AirbyteJSONSchema = {
   },
 };
 
+jest.mock("hooks/services/AppMonitoringService");
 jest.mock("hooks/services/Analytics");
 
 jest.mock("hooks/services/useWorkspace", () => ({

airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.tsx

@@ -1,4 +1,4 @@
-import { useFormikContext, setIn } from "formik";
+import { useFormikContext, setIn, useField } from "formik";
 import React, { useCallback, useMemo } from "react";
 
 import GroupControls from "components/GroupControls";
@@ -15,7 +15,7 @@ import { GroupLabel } from "./GroupLabel";
 
 interface ConditionSectionProps {
   formField: FormConditionItem;
-  path?: string;
+  path: string;
   disabled?: boolean;
 }
 
@@ -26,6 +26,8 @@ export const ConditionSection: React.FC<ConditionSectionProps> = ({ formField, p
   const { widgetsInfo, setUiWidgetsInfo } = useConnectorForm();
   const { values, setValues } = useFormikContext<ConnectorFormValues>();
 
+  const [, meta] = useField(path);
+
   const currentlySelectedCondition = widgetsInfo[formField.path]?.selectedItem;
 
   const onOptionChange = useCallback(
@@ -73,6 +75,7 @@ export const ConditionSection: React.FC<ConditionSectionProps> = ({ formField, p
             value={currentlySelectedCondition}
             name={formField.path}
             isDisabled={disabled}
+            error={typeof meta.error === "string" && !!meta.error}
           />
         </>
       }

airbyte-webapp/src/views/Connector/ConnectorForm/useAuthentication.test.tsx

@@ -9,6 +9,7 @@ import { useAuthentication as useAuthenticationHook } from "./useAuthentication"
 import { noPredicateAdvancedAuth, predicateInsideConditional } from "./useAuthentication.mocks";
 import { makeConnectionConfigurationPath } from "./utils";
 
+jest.mock("hooks/services/AppMonitoringService");
 jest.mock("./connectorFormContext");
 jest.mock("formik", () => ({
   ...jest.requireActual("formik"),

airbyte-webapp/src/views/Connector/ConnectorForm/useAuthentication.tsx

@@ -2,6 +2,8 @@ import { getIn, useFormikContext } from "formik";
 import { JSONSchema7 } from "json-schema";
 import { useCallback, useMemo } from "react";
 
+import { ConnectorSpecification } from "core/domain/connector";
+import { useAppMonitoringService } from "hooks/services/AppMonitoringService";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
 
 import { useConnectorForm } from "./connectorFormContext";
@@ -130,6 +132,7 @@ interface AuthenticationHook {
 }
 
 export const useAuthentication = (): AuthenticationHook => {
+  const { trackError } = useAppMonitoringService();
   const { values, getFieldMeta, submitCount } = useFormikContext<ConnectorFormValues>();
   const { getValues, selectedConnectorDefinitionSpecification: connectorSpec } = useConnectorForm();
 
@@ -140,7 +143,27 @@ export const useAuthentication = (): AuthenticationHook => {
 
   const spec = connectorSpec?.connectionSpecification as JSONSchema7;
 
-  const valuesWithDefaults = useMemo(() => getValues(values), [getValues, values]);
+  const getValuesSafe = useCallback(
+    (values: ConnectorFormValues<unknown>) => {
+      try {
+        // We still see cases where calling `getValues` which will eventually use the yupSchema.cast method
+        // crashes based on the passed in values. To temporarily make sure we're not crashing the form, we're
+        // falling back to `values` in case the cast fails. This is a temporary patch, and we need to investigate
+        // all the failures happening here properly.
+        return getValues(values);
+      } catch (e) {
+        console.error(`getValues in useAuthentication failed.`, e);
+        trackError(e, {
+          id: "useAuthentication.getValues",
+          connector: connectorSpec ? ConnectorSpecification.id(connectorSpec) : null,
+        });
+        return values;
+      }
+    },
+    [connectorSpec, getValues, trackError]
+  );
+
+  const valuesWithDefaults = useMemo(() => getValuesSafe(values), [getValuesSafe, values]);
 
   const isAuthButtonVisible = useMemo(() => {
     const shouldShowAdvancedAuth =