🪟🚨 Refactor connector form code

airbyte-webapp/src/components/GroupControls/index.stories.tsx

@@ -38,16 +38,18 @@ const propTwoFormBlock: FormBlock = {
 };
 
 const conditionFormField: FormConditionItem = {
-  conditions: {
-    ChoiceOne: {
+  conditions: [
+    {
       isRequired: true,
       _type: "formGroup",
       fieldKey: "choice_one_key",
       path: "section.conditional.choice_one",
-      jsonSchema: {},
       properties: [propOneFormBlock, propTwoFormBlock],
     },
-  },
+  ],
+  selectionPath: "section.conditional.choice_one.type",
+  selectionKey: "type",
+  selectionConstValues: ["one"],
   isRequired: true,
   _type: "formCondition",
   fieldKey: "field_key",

airbyte-webapp/src/components/common/ApiErrorBoundary/ApiErrorBoundary.tsx

@@ -5,7 +5,9 @@ import { NavigateFunction, useNavigate } from "react-router-dom";
 import { useLocation } from "react-use";
 import { LocationSensorState } from "react-use/lib/useLocation";
 
+import { isFormBuildError } from "core/form/FormBuildError";
 import { isVersionError } from "core/request/VersionError";
+import { TrackErrorFn, useAppMonitoringService } from "hooks/services/AppMonitoringService";
 import { ErrorOccurredView } from "views/common/ErrorOccurredView";
 import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary";
 import { StartOverErrorView } from "views/common/StartOverErrorView";
@@ -21,6 +23,7 @@ interface ApiErrorBoundaryState {
 
 enum ErrorId {
   VersionMismatch = "version.mismatch",
+  FormBuild = "form.build",
   ServerUnavailable = "server.unavailable",
   UnknownError = "unknown",
 }
@@ -29,6 +32,7 @@ interface ApiErrorBoundaryHookProps {
   location: LocationSensorState;
   onRetry?: () => void;
   navigate: NavigateFunction;
+  trackError: TrackErrorFn;
 }
 
 interface ApiErrorBoundaryProps {
@@ -51,6 +55,10 @@ class ApiErrorBoundaryComponent extends React.Component<
       return { errorId: ErrorId.VersionMismatch, message: error.message };
     }
 
+    if (isFormBuildError(error)) {
+      return { errorId: ErrorId.FormBuild, message: error.message };
+    }
+
     const isNetworkBoundaryMessage = error.message === "Failed to fetch";
     const is502 = error.status === 502;
 
@@ -72,6 +80,15 @@ class ApiErrorBoundaryComponent extends React.Component<
     }
   }
 
+  componentDidCatch(error: { message: string; status?: number; __type?: string }) {
+    if (isFormBuildError(error)) {
+      this.props.trackError(error, {
+        id: "formBuildError",
+        connector: error.connectorId,
+      });
+    }
+  }
+
   retry = () => {
     this.setState((state) => ({
       didRetry: true,
@@ -89,6 +106,21 @@ class ApiErrorBoundaryComponent extends React.Component<
       return <ErrorOccurredView message={message} />;
     }
 
+    if (errorId === ErrorId.FormBuild) {
+      return (
+        <ErrorOccurredView
+          message={
+            <>
+              <FormattedMessage id={message} />
+              <br />
+              <FormattedMessage id="errorView.upgradeConnectors" />
+            </>
+          }
+          docLink="https://docs.airbyte.com/connector-development/connector-specification-reference/#airbyte-modifications-to-jsonschema"
+        />
+      );
+    }
+
     if (errorId === ErrorId.ServerUnavailable && !didRetry) {
       return <ServerUnavailableView retryDelay={retryDelay || RETRY_DELAY} onRetryClick={this.retry} />;
     }
@@ -111,9 +143,16 @@ export const ApiErrorBoundary: React.FC<React.PropsWithChildren<ApiErrorBoundary
   const { reset } = useQueryErrorResetBoundary();
   const location = useLocation();
   const navigate = useNavigate();
+  const { trackError } = useAppMonitoringService();
 
   return (
-    <ApiErrorBoundaryComponent {...props} location={location} navigate={navigate} onRetry={reset}>
+    <ApiErrorBoundaryComponent
+      {...props}
+      location={location}
+      navigate={navigate}
+      onRetry={reset}
+      trackError={trackError}
+    >
       {children}
     </ApiErrorBoundaryComponent>
   );

airbyte-webapp/src/core/domain/catalog/traverseSchemaToField.test.ts

@@ -1,4 +1,4 @@
-import { AirbyteJSONSchema } from "core/jsonSchema";
+import { AirbyteJSONSchema } from "core/jsonSchema/types";
 
 import { traverseSchemaToField } from "./traverseSchemaToField";
 

airbyte-webapp/src/core/domain/connection/types.ts

@@ -1,4 +1,4 @@
-import { AirbyteJSONSchema } from "core/jsonSchema";
+import { AirbyteJSONSchema } from "core/jsonSchema/types";
 
 type ConnectionConfiguration = unknown;
 

airbyte-webapp/src/core/form/FormBuildError.ts

@@ -0,0 +1,11 @@
+export class FormBuildError extends Error {
+  __type = "form.build";
+
+  constructor(public message: string, public connectorId?: string) {
+    super(message);
+  }
+}
+
+export function isFormBuildError(error: { __type?: string }): error is FormBuildError {
+  return error.__type === "form.build";
+}

airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.test.ts → airbyte-webapp/src/core/form/schemaToFormBlock.test.ts

@@ -1,7 +1,7 @@
 import { FormGroupItem } from "core/form/types";
+import { AirbyteJSONSchemaDefinition } from "core/jsonSchema/types";
 
-import { jsonSchemaToUiWidget } from "./schemaToUiWidget";
-import { AirbyteJSONSchemaDefinition } from "./types";
+import { jsonSchemaToFormBlock } from "./schemaToFormBlock";
 
 it("should reformat jsonSchema to internal widget representation", () => {
   const schema: AirbyteJSONSchemaDefinition = {
@@ -26,40 +26,13 @@ it("should reformat jsonSchema to internal widget representation", () => {
     },
   };
 
-  const builtSchema = jsonSchemaToUiWidget(schema, "key");
+  const builtSchema = jsonSchemaToFormBlock(schema, "key");
 
   const expected = {
     _type: "formGroup",
     path: "key",
     fieldKey: "key",
     isRequired: false,
-    jsonSchema: {
-      properties: {
-        dbname: {
-          description: "Name of the database.",
-          type: "string",
-        },
-        host: {
-          description: "Hostname of the database.",
-          type: "string",
-        },
-        password: {
-          airbyte_secret: true,
-          description: "Password associated with the username.",
-          type: "string",
-        },
-        port: {
-          description: "Port of the database.",
-          type: "integer",
-        },
-        user: {
-          description: "Username to use to access the database.",
-          type: "string",
-        },
-      },
-      required: ["host", "port", "user", "dbname"],
-      type: "object",
-    },
     properties: [
       {
         _type: "formItem",
@@ -128,7 +101,7 @@ it("should turn single enum into const but keep multi value enum", () => {
     },
   };
 
-  const builtSchema = jsonSchemaToUiWidget(schema, "key");
+  const builtSchema = jsonSchemaToFormBlock(schema, "key");
 
   const expectedProperties = [
     {
@@ -176,7 +149,7 @@ it("should reformat jsonSchema to internal widget representation with parent sch
     },
   };
 
-  const builtSchema = jsonSchemaToUiWidget(schema, "key", undefined, {
+  const builtSchema = jsonSchemaToFormBlock(schema, "key", undefined, {
     required: ["key"],
   });
 
@@ -185,17 +158,6 @@ it("should reformat jsonSchema to internal widget representation with parent sch
     fieldKey: "key",
     path: "key",
     isRequired: true,
-    jsonSchema: {
-      properties: {
-        host: {
-          description: "Hostname of the database.",
-          type: "string",
-        },
-      },
-      required: ["host", "port", "user", "dbname"],
-      title: "Postgres Source Spec",
-      type: "object",
-    },
     properties: [
       {
         _type: "formItem",
@@ -235,6 +197,11 @@ it("should reformat jsonSchema to internal widget representation when has oneOf"
               api_key: {
                 type: "string",
               },
+              type: {
+                type: "string",
+                const: "api",
+                default: "api",
+              },
             },
           },
           {
@@ -245,49 +212,24 @@ it("should reformat jsonSchema to internal widget representation when has oneOf"
                 type: "string",
                 examples: ["https://api.hubspot.com/"],
               },
+              type: {
+                type: "string",
+                const: "oauth",
+                default: "oauth",
+              },
             },
           },
         ],
       },
     },
   };
 
-  const builtSchema = jsonSchemaToUiWidget(schema, "key", undefined, {
+  const builtSchema = jsonSchemaToFormBlock(schema, "key", undefined, {
     required: ["key"],
   });
 
   const expected = {
     _type: "formGroup",
-    jsonSchema: {
-      type: "object",
-      required: ["start_date", "credentials"],
-      properties: {
-        start_date: { type: "string" },
-        credentials: {
-          type: "object",
-          description: "Credentials Condition Description",
-          title: "Credentials Condition",
-          order: 0,
-          oneOf: [
-            {
-              title: "api key",
-              required: ["api_key"],
-              properties: { api_key: { type: "string" } },
-            },
-            {
-              title: "oauth",
-              required: ["redirect_uri"],
-              properties: {
-                redirect_uri: {
-                  type: "string",
-                  examples: ["https://api.hubspot.com/"],
-                },
-              },
-            },
-          ],
-        },
-      },
-    },
     path: "key",
     fieldKey: "key",
     properties: [
@@ -307,16 +249,13 @@ it("should reformat jsonSchema to internal widget representation when has oneOf"
         title: "Credentials Condition",
         order: 0,
         fieldKey: "credentials",
-        conditions: {
-          "api key": {
+        selectionConstValues: ["api", "oauth"],
+        selectionKey: "type",
+        selectionPath: "key.credentials.type",
+        conditions: [
+          {
             title: "api key",
             _type: "formGroup",
-            jsonSchema: {
-              title: "api key",
-              required: ["api_key"],
-              type: "object",
-              properties: { api_key: { type: "string" } },
-            },
             path: "key.credentials",
             fieldKey: "credentials",
             properties: [
@@ -329,23 +268,24 @@ it("should reformat jsonSchema to internal widget representation when has oneOf"
                 multiline: false,
                 type: "string",
               },
+              {
+                _type: "formItem",
+                const: "api",
+                default: "api",
+                fieldKey: "type",
+                format: undefined,
+                isRequired: false,
+                isSecret: false,
+                multiline: false,
+                path: "key.credentials.type",
+                type: "string",
+              },
             ],
             isRequired: false,
           },
-          oauth: {
+          {
             title: "oauth",
             _type: "formGroup",
-            jsonSchema: {
-              title: "oauth",
-              required: ["redirect_uri"],
-              type: "object",
-              properties: {
-                redirect_uri: {
-                  type: "string",
-                  examples: ["https://api.hubspot.com/"],
-                },
-              },
-            },
             path: "key.credentials",
             fieldKey: "credentials",
             properties: [
@@ -359,10 +299,22 @@ it("should reformat jsonSchema to internal widget representation when has oneOf"
                 multiline: false,
                 type: "string",
               },
+              {
+                _type: "formItem",
+                const: "oauth",
+                default: "oauth",
+                fieldKey: "type",
+                format: undefined,
+                isRequired: false,
+                isSecret: false,
+                multiline: false,
+                path: "key.credentials.type",
+                type: "string",
+              },
             ],
             isRequired: false,
           },
-        },
+        ],
         isRequired: true,
       },
     ],