From e501c9ce3c28abe04f81a57adedfe2f859958a12 Mon Sep 17 00:00:00 2001
From: Lake Mossman <lake@airbyte.io>
Date: Thu, 19 Jan 2023 09:57:15 -0800
Subject: [PATCH] [Connector Builder]Add ability to convert from YAML manifest
 to UI (#21142)

* save

* save more progress

* try setting values directly

* toggle editor

* fix primary key

* enforce consistency in name and primary key

* refactor conversion method to be more readable

* save progress

* allow custom input keys to be used for inferred auth values

* fix isMatch bug and remove console logs

* fix type issues with reflect

* properly handle undefined

* format schema and gracefully handle non-inline schemas

* verify no custom components

* refactor and fix request options type

* rest of refactor

* move manifest to builder form conversion logic into its own file, and handle inferred input overrides properly

* convert substream slicers

* restore warning modal for switching back to UI

* remove console logs

* remove unneeded traceback filtering

* set http method when converting to manifest

* remove commented import

* add unsupported fields to builder form values

* save check stream values from manifest

* save progress

* add more tests

* save record filter in unsupported fields

* use type coersion instead of yaml strings
---
 .../ConfirmationModal/ConfirmationModal.tsx   |   4 +-
 .../Builder/AuthenticationSection.tsx         |  90 +++-
 .../YamlEditor/YamlEditor.tsx                 |  39 +-
 .../manifestToBuilderForm.test.ts             | 457 ++++++++++++++++++
 .../connectorBuilder/manifestToBuilderForm.ts | 408 ++++++++++++++++
 .../src/components/connectorBuilder/types.ts  | 284 ++++++-----
 .../ConfirmationModalService.tsx              |   1 +
 airbyte-webapp/src/locales/en.json            |   4 +-
 8 files changed, 1129 insertions(+), 158 deletions(-)
 create mode 100644 airbyte-webapp/src/components/connectorBuilder/manifestToBuilderForm.test.ts
 create mode 100644 airbyte-webapp/src/components/connectorBuilder/manifestToBuilderForm.ts

diff --git a/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx b/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx
index 90c3d3f27b880..ee1bcd8312118 100644
--- a/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx
+++ b/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx
@@ -11,6 +11,7 @@ export interface ConfirmationModalProps {
   onClose: () => void;
   title: string;
   text: string;
+  textValues?: Record<string, string>;
   submitButtonText: string;
   onSubmit: () => void;
   submitButtonDataId?: string;
@@ -21,6 +22,7 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   onClose,
   title,
   text,
+  textValues,
   onSubmit,
   submitButtonText,
   submitButtonDataId,
@@ -32,7 +34,7 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   return (
     <Modal onClose={onClose} title={<FormattedMessage id={title} />} testId="confirmationModal">
       <div className={styles.content}>
-        <FormattedMessage id={text} />
+        <FormattedMessage id={text} values={textValues} />
         <div className={styles.buttonContent}>
           <Button
             className={styles.buttonWithMargin}
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/AuthenticationSection.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/AuthenticationSection.tsx
index 03ad98fbc1988..5abfe0d0a85d6 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/AuthenticationSection.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/AuthenticationSection.tsx
@@ -1,10 +1,10 @@
+import { inferredAuthValues } from "../types";
 import { BuilderCard } from "./BuilderCard";
 import { BuilderField } from "./BuilderField";
 import { BuilderFieldWithInputs } from "./BuilderFieldWithInputs";
 import { BuilderOneOf } from "./BuilderOneOf";
 import { BuilderOptional } from "./BuilderOptional";
 import { KeyValueListField } from "./KeyValueListField";
-import { UserInputField } from "./UserInputField";
 
 export const AuthenticationSection: React.FC = () => {
   return (
@@ -19,7 +19,7 @@ export const AuthenticationSection: React.FC = () => {
             label: "API Key",
             typeValue: "ApiKeyAuthenticator",
             default: {
-              api_token: "{{ config['api_key'] }}",
+              ...inferredAuthValues("ApiKeyAuthenticator"),
               header: "",
             },
             children: (
@@ -30,9 +30,12 @@ export const AuthenticationSection: React.FC = () => {
                   label="Header"
                   tooltip="HTTP header which should be set to the API Key"
                 />
-                <UserInputField
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.api_token"
                   label="API Key"
                   tooltip="The API key issued by the service. Fill it in in the user inputs"
+                  readOnly
                 />
               </>
             ),
@@ -41,12 +44,15 @@ export const AuthenticationSection: React.FC = () => {
             label: "Bearer",
             typeValue: "BearerAuthenticator",
             default: {
-              api_token: "{{ config['api_key'] }}",
+              ...inferredAuthValues("BearerAuthenticator"),
             },
             children: (
-              <UserInputField
+              <BuilderField
+                type="string"
+                path="global.authenticator.api_token"
                 label="API Key"
                 tooltip="The API key issued by the service. Fill it in in the user inputs"
+                readOnly
               />
             ),
           },
@@ -54,13 +60,24 @@ export const AuthenticationSection: React.FC = () => {
             label: "Basic HTTP",
             typeValue: "BasicHttpAuthenticator",
             default: {
-              username: "{{ config['username'] }}",
-              password: "{{ config['password'] }}",
+              ...inferredAuthValues("BasicHttpAuthenticator"),
             },
             children: (
               <>
-                <UserInputField label="Username" tooltip="The username for the login. Fill it in in the user inputs" />
-                <UserInputField label="Password" tooltip="The password for the login. Fill it in in the user inputs" />
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.username"
+                  label="Username"
+                  tooltip="The username for the login. Fill it in in the user inputs"
+                  readOnly
+                />
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.password"
+                  label="Password"
+                  tooltip="The password for the login. Fill it in in the user inputs"
+                  readOnly
+                />
               </>
             ),
           },
@@ -68,9 +85,7 @@ export const AuthenticationSection: React.FC = () => {
             label: "OAuth",
             typeValue: "OAuthAuthenticator",
             default: {
-              client_id: "{{ config['client_id'] }}",
-              client_secret: "{{ config['client_secret'] }}",
-              refresh_token: "{{ config['client_refresh_token'] }}",
+              ...inferredAuthValues("OAuthAuthenticator"),
               refresh_request_body: [],
               token_refresh_endpoint: "",
             },
@@ -82,9 +97,27 @@ export const AuthenticationSection: React.FC = () => {
                   label="Token refresh endpoint"
                   tooltip="The URL to call to obtain a new access token"
                 />
-                <UserInputField label="Client ID" tooltip="The OAuth client ID" />
-                <UserInputField label="Client secret" tooltip="The OAuth client secret" />
-                <UserInputField label="Refresh token" tooltip="The OAuth refresh token" />
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.client_id"
+                  label="Client ID"
+                  tooltip="The OAuth client ID. Fill it in in the user inputs"
+                  readOnly
+                />
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.client_secret"
+                  label="Client secret"
+                  tooltip="The OAuth client secret. Fill it in in the user inputs"
+                  readOnly
+                />
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.refresh_token"
+                  label="Refresh token"
+                  tooltip="The OAuth refresh token. Fill it in in the user inputs"
+                  readOnly
+                />
                 <BuilderOptional>
                   <BuilderField
                     type="array"
@@ -134,9 +167,7 @@ export const AuthenticationSection: React.FC = () => {
             label: "Session token",
             typeValue: "SessionTokenAuthenticator",
             default: {
-              username: "{{ config['username'] }}",
-              password: "{{ config['password'] }}",
-              session_token: "{{ config['session_token'] }}",
+              ...inferredAuthValues("SessionTokenAuthenticator"),
             },
             children: (
               <>
@@ -164,11 +195,26 @@ export const AuthenticationSection: React.FC = () => {
                   label="Validate session url"
                   tooltip="Url to validate passed session token"
                 />
-                <UserInputField label="Username" tooltip="The username" />
-                <UserInputField label="Password" tooltip="The password" />
-                <UserInputField
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.username"
+                  label="Username"
+                  tooltip="The username for the login. Fill it in in the user inputs"
+                  readOnly
+                />
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.password"
+                  label="Password"
+                  tooltip="The password for the login. Fill it in in the user inputs"
+                  readOnly
+                />
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.session_token"
                   label="Session token"
-                  tooltip="Session token generated by user (if provided username and password are not required)"
+                  tooltip="Session token generated by user (if provided, username and password are not required). Fill it in in the user inputs"
+                  readOnly
                 />
               </>
             ),
diff --git a/airbyte-webapp/src/components/connectorBuilder/YamlEditor/YamlEditor.tsx b/airbyte-webapp/src/components/connectorBuilder/YamlEditor/YamlEditor.tsx
index f62b0c1a2514e..48aec965a78d5 100644
--- a/airbyte-webapp/src/components/connectorBuilder/YamlEditor/YamlEditor.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/YamlEditor/YamlEditor.tsx
@@ -1,7 +1,8 @@
 import { useMonaco } from "@monaco-editor/react";
+import { useFormikContext } from "formik";
 import { load, YAMLException } from "js-yaml";
 import debounce from "lodash/debounce";
-import isMatch from "lodash/isMatch";
+import isEqual from "lodash/isEqual";
 import { editor } from "monaco-editor/esm/vs/editor/editor.api";
 import { useEffect, useMemo, useRef, useState } from "react";
 
@@ -9,10 +10,14 @@ import { CodeEditor } from "components/ui/CodeEditor";
 
 import { ConnectorManifest } from "core/request/ConnectorManifest";
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
-import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import {
+  useConnectorBuilderFormState,
+  useConnectorBuilderTestState,
+} from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { UiYamlToggleButton } from "../Builder/UiYamlToggleButton";
 import { DownloadYamlButton } from "../DownloadYamlButton";
+import { convertToBuilderFormValues } from "../manifestToBuilderForm";
 import { convertToManifest } from "../types";
 import styles from "./YamlEditor.module.scss";
 
@@ -21,6 +26,7 @@ interface YamlEditorProps {
 }
 
 export const YamlEditor: React.FC<YamlEditorProps> = ({ toggleYamlEditor }) => {
+  const { setValues } = useFormikContext();
   const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
   const yamlEditorRef = useRef<editor.IStandaloneCodeEditor>();
   const {
@@ -32,6 +38,7 @@ export const YamlEditor: React.FC<YamlEditorProps> = ({ toggleYamlEditor }) => {
     setYamlIsValid,
     setJsonManifest,
   } = useConnectorBuilderFormState();
+  const { streamListErrorMessage } = useConnectorBuilderTestState();
   const [yamlValue, setYamlValue] = useState(yamlManifest);
 
   // debounce the setJsonManifest calls so that it doesnt result in a network call for every keystroke
@@ -77,21 +84,27 @@ export const YamlEditor: React.FC<YamlEditorProps> = ({ toggleYamlEditor }) => {
   }, [yamlValue, monaco, debouncedSetJsonManifest, setYamlIsValid]);
 
   const yamlIsDirty = useMemo(() => {
-    return !isMatch(convertToManifest(builderFormValues), jsonManifest);
+    return !isEqual(convertToManifest(builderFormValues), jsonManifest);
   }, [jsonManifest, builderFormValues]);
 
   const handleToggleYamlEditor = () => {
     if (yamlIsDirty) {
-      openConfirmationModal({
-        text: "connectorBuilder.toggleModal.text",
-        title: "connectorBuilder.toggleModal.title",
-        submitButtonText: "connectorBuilder.toggleModal.submitButton",
-        onSubmit: () => {
-          setYamlIsValid(true);
-          toggleYamlEditor();
-          closeConfirmationModal();
-        },
-      });
+      try {
+        setValues(convertToBuilderFormValues(jsonManifest, builderFormValues, streamListErrorMessage));
+        toggleYamlEditor();
+      } catch (e) {
+        openConfirmationModal({
+          text: "connectorBuilder.toggleModal.text",
+          textValues: { error: e.message as string },
+          title: "connectorBuilder.toggleModal.title",
+          submitButtonText: "connectorBuilder.toggleModal.submitButton",
+          onSubmit: () => {
+            setYamlIsValid(true);
+            toggleYamlEditor();
+            closeConfirmationModal();
+          },
+        });
+      }
     } else {
       setYamlIsValid(true);
       toggleYamlEditor();
diff --git a/airbyte-webapp/src/components/connectorBuilder/manifestToBuilderForm.test.ts b/airbyte-webapp/src/components/connectorBuilder/manifestToBuilderForm.test.ts
new file mode 100644
index 0000000000000..a7c5c854238f8
--- /dev/null
+++ b/airbyte-webapp/src/components/connectorBuilder/manifestToBuilderForm.test.ts
@@ -0,0 +1,457 @@
+import merge from "lodash/merge";
+
+import {
+  ConnectorManifest,
+  DeclarativeStream,
+  DeclarativeStreamRetriever,
+  HttpRequester,
+} from "core/request/ConnectorManifest";
+
+import { convertToBuilderFormValues } from "./manifestToBuilderForm";
+import { DEFAULT_BUILDER_FORM_VALUES } from "./types";
+
+const baseManifest: ConnectorManifest = {
+  type: "DeclarativeSource",
+  version: "0.1.0",
+  check: {
+    type: "CheckStream",
+    stream_names: [],
+  },
+  streams: [],
+};
+
+const stream1: DeclarativeStream = {
+  type: "DeclarativeStream",
+  name: "stream1",
+  retriever: {
+    type: "SimpleRetriever",
+    name: "stream1",
+    record_selector: {
+      type: "RecordSelector",
+      extractor: {
+        type: "DpathExtractor",
+        field_pointer: [],
+      },
+    },
+    requester: {
+      type: "HttpRequester",
+      name: "stream1",
+      url_base: "https://url.com",
+      path: "/stream-1-path",
+    },
+  },
+};
+
+const stream2: DeclarativeStream = merge({}, stream1, {
+  name: "stream2",
+  retriever: {
+    name: "stream2",
+    requester: {
+      name: "stream2",
+      path: "/stream-2-path",
+    },
+  },
+});
+
+describe("Conversion throws error when", () => {
+  it("streamListErrorMessage is present", () => {
+    const streamListErrorMessage = "Some error message";
+    const convert = () => {
+      convertToBuilderFormValues({} as ConnectorManifest, DEFAULT_BUILDER_FORM_VALUES, streamListErrorMessage);
+    };
+    expect(convert).toThrow(streamListErrorMessage);
+  });
+
+  it("manifest contains refs", () => {
+    const convert = () => {
+      const manifest: ConnectorManifest = {
+        ...baseManifest,
+        definitions: {
+          retriever: {
+            name: "pokemon",
+            primary_key: "id",
+            requester: {
+              name: "pokemon",
+              path: "/pokemon/{{config['pokemon_name']}}",
+              url_base: "https://pokeapi.co/api/v2",
+              http_method: "GET",
+            },
+            record_selector: {
+              extractor: {
+                type: "DpathExtractor",
+                field_pointer: [],
+              },
+            },
+          },
+        },
+        streams: [
+          {
+            type: "DeclarativeStream",
+            name: "pokemon",
+            retriever: {
+              $ref: "*ref(definitions.retriever)",
+            } as unknown as DeclarativeStreamRetriever,
+          },
+        ],
+      };
+      convertToBuilderFormValues(manifest, DEFAULT_BUILDER_FORM_VALUES);
+    };
+    expect(convert).toThrow("contains refs");
+  });
+
+  it("manifest contains options", () => {
+    const convert = () => {
+      const manifest: ConnectorManifest = {
+        ...baseManifest,
+        streams: [
+          {
+            type: "DeclarativeStream",
+            $options: {
+              name: "pokemon",
+              primary_key: "id",
+              path: "/pokemon/{{config['pokemon_name']}}",
+            },
+            retriever: {
+              type: "SimpleRetriever",
+              requester: {
+                type: "HttpRequester",
+                url_base: "https://pokeapi.co/api/v2",
+                http_method: "GET",
+              } as unknown as HttpRequester,
+              record_selector: {
+                type: "RecordSelector",
+                extractor: {
+                  type: "DpathExtractor",
+                  field_pointer: [],
+                },
+              },
+            },
+          },
+        ],
+      };
+      convertToBuilderFormValues(manifest, DEFAULT_BUILDER_FORM_VALUES);
+    };
+    expect(convert).toThrow("contains refs");
+  });
+
+  it("manifests has incorrect retriever type", () => {
+    const convert = () => {
+      const manifest: ConnectorManifest = {
+        ...baseManifest,
+        streams: [
+          {
+            type: "DeclarativeStream",
+            name: "firstStream",
+            retriever: {
+              type: "CustomRetriever",
+              class_name: "some_python_class",
+            },
+          },
+        ],
+      };
+      convertToBuilderFormValues(manifest, DEFAULT_BUILDER_FORM_VALUES);
+    };
+    expect(convert).toThrow("doesn't use a SimpleRetriever");
+  });
+
+  it("manifest has incorrect requester type", () => {
+    const convert = () => {
+      const manifest: ConnectorManifest = {
+        ...baseManifest,
+        streams: [
+          merge({}, stream1, {
+            retriever: {
+              requester: {
+                type: "CustomRequester",
+                class_name: "some_python_class",
+              },
+            },
+          }),
+        ],
+      };
+      convertToBuilderFormValues(manifest, DEFAULT_BUILDER_FORM_VALUES);
+    };
+    expect(convert).toThrow("doesn't use a HttpRequester");
+  });
+
+  it("manifest has an authenticator with a non-interpolated secret key", () => {
+    const convert = () => {
+      const manifest: ConnectorManifest = {
+        ...baseManifest,
+        streams: [
+          merge({}, stream1, {
+            retriever: {
+              requester: {
+                authenticator: {
+                  type: "ApiKeyAuthenticator",
+                  api_token: "abcd1234",
+                  header: "API_KEY",
+                },
+              },
+            },
+          }),
+        ],
+      };
+      convertToBuilderFormValues(manifest, DEFAULT_BUILDER_FORM_VALUES);
+    };
+    expect(convert).toThrow("api_token value must be of the form {{ config[");
+  });
+});
+
+describe("Conversion successfully results in", () => {
+  it("default values if manifest is empty", () => {
+    const formValues = convertToBuilderFormValues(baseManifest, DEFAULT_BUILDER_FORM_VALUES);
+    expect(formValues).toEqual(DEFAULT_BUILDER_FORM_VALUES);
+  });
+
+  it("spec properties converted to inputs if no streams present", () => {
+    const manifest: ConnectorManifest = {
+      ...baseManifest,
+      spec: {
+        type: "Spec",
+        connection_specification: {
+          $schema: "http://json-schema.org/draft-07/schema#",
+          type: "object",
+          required: ["api_key"],
+          properties: {
+            api_key: {
+              type: "string",
+              title: "API Key",
+              airbyte_secret: true,
+            },
+          },
+        },
+      },
+    };
+    const formValues = convertToBuilderFormValues(manifest, DEFAULT_BUILDER_FORM_VALUES);
+    expect(formValues.inferredInputOverrides).toEqual({});
+    expect(formValues.inputs).toEqual([
+      {
+        key: "api_key",
+        required: true,
+        definition: manifest.spec?.connection_specification.properties.api_key,
+      },
+    ]);
+  });
+
+  it("spec properties converted to input overrides on matching auth keys", () => {
+    const manifest: ConnectorManifest = {
+      ...baseManifest,
+      streams: [
+        merge({}, stream1, {
+          retriever: {
+            requester: {
+              authenticator: {
+                type: "ApiKeyAuthenticator",
+                api_token: "{{ config['api_key'] }}",
+                header: "API_KEY",
+              },
+            },
+          },
+        }),
+      ],
+      spec: {
+        type: "Spec",
+        connection_specification: {
+          $schema: "http://json-schema.org/draft-07/schema#",
+          type: "object",
+          required: ["api_key"],
+          properties: {
+            api_key: {
+              type: "string",
+              title: "API Key",
+              airbyte_secret: true,
+            },
+            numeric_key: {
+              type: "number",
+              title: "Numeric key",
+            },
+          },
+        },
+      },
+    };
+    const formValues = convertToBuilderFormValues(manifest, DEFAULT_BUILDER_FORM_VALUES);
+    expect(formValues.inputs).toEqual([
+      {
+        key: "numeric_key",
+        required: false,
+        definition: manifest.spec?.connection_specification.properties.numeric_key,
+      },
+    ]);
+    expect(formValues.inferredInputOverrides).toEqual({
+      api_key: manifest.spec?.connection_specification.properties.api_key,
+    });
+  });
+
+  it("request options converted to key-value list", () => {
+    const manifest: ConnectorManifest = {
+      ...baseManifest,
+      streams: [
+        merge({}, stream1, {
+          retriever: {
+            requester: {
+              request_options_provider: {
+                type: "InterpolatedRequestOptionsProvider",
+                request_parameters: {
+                  k1: "v1",
+                  k2: "v2",
+                },
+              },
+            },
+          },
+        }),
+      ],
+    };
+    const formValues = convertToBuilderFormValues(manifest, DEFAULT_BUILDER_FORM_VALUES);
+    expect(formValues.streams[0].requestOptions.requestParameters).toEqual([
+      ["k1", "v1"],
+      ["k2", "v2"],
+    ]);
+  });
+
+  it("primary key string converted to array", () => {
+    const manifest: ConnectorManifest = {
+      ...baseManifest,
+      streams: [
+        merge({}, stream1, {
+          primary_key: "id",
+          retriever: {
+            primary_key: "id",
+          },
+        }),
+      ],
+    };
+    const formValues = convertToBuilderFormValues(manifest, DEFAULT_BUILDER_FORM_VALUES);
+    expect(formValues.streams[0].primaryKey).toEqual(["id"]);
+  });
+
+  it("cartesian product stream slicer converted to builder cartesian product slicer", () => {
+    const manifest: ConnectorManifest = {
+      ...baseManifest,
+      streams: [
+        merge({}, stream1, {
+          retriever: {
+            stream_slicer: {
+              type: "CartesianProductStreamSlicer",
+              stream_slicers: [
+                {
+                  type: "ListStreamSlicer",
+                  cursor_field: "id",
+                  slice_values: ["slice1", "slice2"],
+                },
+                {
+                  type: "DatetimeStreamSlicer",
+                  cursor_field: "id",
+                  datetime_format: "%Y-%m-%d",
+                  cursor_granularity: "P1D",
+                  end_datetime: "2017-01-25",
+                  start_datetime: "2017-01-30",
+                  step: "P1D",
+                },
+              ],
+            },
+          },
+        }),
+      ],
+    };
+    const formValues = convertToBuilderFormValues(manifest, DEFAULT_BUILDER_FORM_VALUES);
+    expect(formValues.streams[0].streamSlicer).toEqual(manifest.streams[0].retriever.stream_slicer);
+  });
+
+  it("substream stream slicer converted to builder substream slicer", () => {
+    const manifest: ConnectorManifest = {
+      ...baseManifest,
+      streams: [
+        stream1,
+        merge({}, stream2, {
+          retriever: {
+            stream_slicer: {
+              type: "SubstreamSlicer",
+              parent_stream_configs: [
+                {
+                  type: "ParentStreamConfig",
+                  parent_key: "key",
+                  stream: stream1,
+                  stream_slice_field: "field",
+                },
+              ],
+            },
+          },
+        }),
+      ],
+    };
+    const formValues = convertToBuilderFormValues(manifest, DEFAULT_BUILDER_FORM_VALUES);
+    expect(formValues.streams[1].streamSlicer).toEqual({
+      type: "SubstreamSlicer",
+      parent_key: "key",
+      stream_slice_field: "field",
+      parentStreamReference: "0",
+    });
+  });
+
+  it("schema loader converted to schema", () => {
+    const manifest: ConnectorManifest = {
+      ...baseManifest,
+      streams: [
+        merge({}, stream1, {
+          schema_loader: {
+            type: "InlineSchemaLoader",
+            schema: {
+              key: "value",
+            },
+          },
+        }),
+      ],
+    };
+    const formValues = convertToBuilderFormValues(manifest, DEFAULT_BUILDER_FORM_VALUES);
+    expect(formValues.streams[0].schema).toEqual(
+      `{
+  "key": "value"
+}`
+    );
+  });
+
+  it("stores unsupported fields", () => {
+    const manifest: ConnectorManifest = {
+      ...baseManifest,
+      streams: [
+        merge({}, stream1, {
+          transformations: [
+            {
+              type: "AddFields",
+              fields: ["id"],
+            },
+          ],
+          checkpoint_interval: 123,
+          retriever: {
+            requester: {
+              error_handler: {
+                type: "DefaultErrorHandler",
+                max_retries: 3,
+              },
+            },
+            record_selector: {
+              record_filter: {
+                type: "RecordFilter",
+                condition: "true",
+              },
+            },
+          },
+        }),
+      ],
+    };
+    const formValues = convertToBuilderFormValues(manifest, DEFAULT_BUILDER_FORM_VALUES);
+    expect(formValues.streams[0].unsupportedFields).toEqual({
+      transformations: manifest.streams[0].transformations,
+      checkpoint_interval: manifest.streams[0].checkpoint_interval,
+      retriever: {
+        requester: {
+          error_handler: manifest.streams[0].retriever.requester.error_handler,
+        },
+        record_selector: {
+          record_filter: manifest.streams[0].retriever.record_selector.record_filter,
+        },
+      },
+    });
+  });
+});
diff --git a/airbyte-webapp/src/components/connectorBuilder/manifestToBuilderForm.ts b/airbyte-webapp/src/components/connectorBuilder/manifestToBuilderForm.ts
new file mode 100644
index 0000000000000..3c8d5d8b487a8
--- /dev/null
+++ b/airbyte-webapp/src/components/connectorBuilder/manifestToBuilderForm.ts
@@ -0,0 +1,408 @@
+import isEqual from "lodash/isEqual";
+
+import { AirbyteJSONSchema } from "core/jsonSchema/types";
+import {
+  CartesianProductStreamSlicer,
+  ConnectorManifest,
+  DatetimeStreamSlicer,
+  DeclarativeStream,
+  DeclarativeStreamSchemaLoader,
+  DpathExtractor,
+  HttpRequester,
+  HttpRequesterAuthenticator,
+  InlineSchemaLoader,
+  InterpolatedRequestOptionsProvider,
+  ListStreamSlicer,
+  SimpleRetriever,
+  SimpleRetrieverPaginator,
+  SimpleRetrieverStreamSlicer,
+  Spec,
+  SubstreamSlicer,
+} from "core/request/ConnectorManifest";
+
+import {
+  authTypeToKeyToInferredInput,
+  BuilderFormAuthenticator,
+  BuilderFormValues,
+  BuilderPaginator,
+  BuilderStream,
+  BuilderSubstreamSlicer,
+  DEFAULT_BUILDER_FORM_VALUES,
+  DEFAULT_BUILDER_STREAM_VALUES,
+  isInterpolatedConfigKey,
+} from "./types";
+import { formatJson } from "./utils";
+
+export const convertToBuilderFormValues = (
+  manifest: ConnectorManifest,
+  currentBuilderFormValues: BuilderFormValues,
+  streamListErrorMessage?: string
+) => {
+  // TODO: replace these checks with a call to the soon-to-be /manifest/resolve endpoint, to resolve refs, options, and validate the manifest against the schema
+  if (streamListErrorMessage) {
+    let errorMessage = streamListErrorMessage;
+    if (errorMessage[0] === '"') {
+      errorMessage = errorMessage.substring(1, errorMessage.length);
+    }
+    if (errorMessage.slice(-1) === '"') {
+      errorMessage = errorMessage.substring(0, errorMessage.length - 1);
+    }
+    throw new ManifestCompatibilityError(undefined, errorMessage.trim());
+  }
+  const manifestString = JSON.stringify(manifest);
+  if (manifestString.includes("*ref") || manifestString.includes("$ref") || manifestString.includes("$options")) {
+    throw new ManifestCompatibilityError(undefined, "Manifest contains refs or $options, which are unsupported");
+  }
+
+  const builderFormValues = DEFAULT_BUILDER_FORM_VALUES;
+  builderFormValues.global.connectorName = currentBuilderFormValues.global.connectorName;
+  builderFormValues.checkStreams = manifest.check.stream_names;
+
+  const streams = manifest.streams;
+  if (streams === undefined || streams.length === 0) {
+    const { inputs, inferredInputOverrides } = manifestSpecAndAuthToBuilder(manifest.spec, undefined);
+    builderFormValues.inputs = inputs;
+    builderFormValues.inferredInputOverrides = inferredInputOverrides;
+
+    return builderFormValues;
+  }
+
+  assertType<SimpleRetriever>(streams[0].retriever, "SimpleRetriever", streams[0].name);
+  assertType<HttpRequester>(streams[0].retriever.requester, "HttpRequester", streams[0].name);
+  builderFormValues.global.urlBase = streams[0].retriever.requester.url_base;
+
+  const { inputs, inferredInputOverrides, auth } = manifestSpecAndAuthToBuilder(
+    manifest.spec,
+    streams[0].retriever.requester.authenticator
+  );
+  builderFormValues.inputs = inputs;
+  builderFormValues.inferredInputOverrides = inferredInputOverrides;
+  builderFormValues.global.authenticator = auth;
+
+  const serializedStreamToIndex = Object.fromEntries(streams.map((stream, index) => [JSON.stringify(stream), index]));
+  builderFormValues.streams = streams.map((stream, index) =>
+    manifestStreamToBuilder(stream, index, serializedStreamToIndex, builderFormValues.global)
+  );
+
+  return builderFormValues;
+};
+
+const manifestStreamToBuilder = (
+  stream: DeclarativeStream,
+  index: number,
+  serializedStreamToIndex: Record<string, number>,
+  builderFormGlobal: BuilderFormValues["global"]
+): BuilderStream => {
+  assertType<SimpleRetriever>(stream.retriever, "SimpleRetriever", stream.name);
+  const retriever = stream.retriever;
+
+  assertType<HttpRequester>(retriever.requester, "HttpRequester", stream.name);
+  const requester = retriever.requester;
+
+  if (
+    builderFormGlobal.authenticator.type === "NoAuth"
+      ? requester.authenticator && requester.authenticator.type !== "NoAuth"
+      : !isEqual(retriever.requester.authenticator, builderFormGlobal.authenticator)
+  ) {
+    throw new ManifestCompatibilityError(stream.name, "authenticator does not match the first stream's");
+  }
+
+  if (retriever.requester.url_base !== builderFormGlobal.urlBase) {
+    throw new ManifestCompatibilityError(stream.name, "url_base does not match the first stream's");
+  }
+
+  if (retriever.name !== stream.name || requester.name !== stream.name) {
+    throw new ManifestCompatibilityError(
+      stream.name,
+      "name is not consistent across stream, retriever, and requester levels"
+    );
+  }
+
+  if (![undefined, "GET", "POST"].includes(requester.http_method)) {
+    throw new ManifestCompatibilityError(stream.name, "http_method is not GET or POST");
+  }
+
+  assertType<DpathExtractor>(retriever.record_selector.extractor, "DpathExtractor", stream.name);
+
+  if (requester.request_options_provider) {
+    assertType<InterpolatedRequestOptionsProvider>(
+      requester.request_options_provider,
+      "InterpolatedRequestOptionsProvider",
+      stream.name
+    );
+  }
+
+  return {
+    ...DEFAULT_BUILDER_STREAM_VALUES,
+    id: index.toString(),
+    name: stream.name ?? "",
+    urlPath: requester.path,
+    httpMethod: (requester.http_method as "GET" | "POST" | undefined) ?? "GET",
+    fieldPointer: retriever.record_selector.extractor.field_pointer as string[],
+    requestOptions: {
+      requestParameters: Object.entries(requester.request_options_provider?.request_parameters ?? {}),
+      requestHeaders: Object.entries(requester.request_options_provider?.request_headers ?? {}),
+      // try getting this from request_body_data first, and if not set then pull from request_body_json
+      requestBody: Object.entries(
+        requester.request_options_provider?.request_body_data ??
+          requester.request_options_provider?.request_body_json ??
+          {}
+      ),
+    },
+    primaryKey: manifestPrimaryKeyToBuilder(stream),
+    paginator: manifestPaginatorToBuilder(retriever.paginator, stream.name, builderFormGlobal.urlBase),
+    streamSlicer: manifestStreamSlicerToBuilder(retriever.stream_slicer, serializedStreamToIndex, stream.name),
+    schema: manifestSchemaLoaderToBuilderSchema(stream.schema_loader),
+    unsupportedFields: {
+      transformations: stream.transformations,
+      checkpoint_interval: stream.checkpoint_interval,
+      retriever: {
+        requester: {
+          error_handler: stream.retriever.requester.error_handler,
+        },
+        record_selector: {
+          record_filter: stream.retriever.record_selector.record_filter,
+        },
+      },
+    },
+  };
+};
+
+function manifestStreamSlicerToBuilder(
+  manifestStreamSlicer: SimpleRetrieverStreamSlicer | undefined,
+  serializedStreamToIndex: Record<string, number>,
+  streamName?: string
+): BuilderStream["streamSlicer"] {
+  if (manifestStreamSlicer === undefined) {
+    return undefined;
+  }
+
+  if (manifestStreamSlicer.type === undefined) {
+    throw new ManifestCompatibilityError(streamName, "stream_slicer has no type");
+  }
+
+  if (manifestStreamSlicer.type === "CustomStreamSlicer") {
+    throw new ManifestCompatibilityError(streamName, "stream_slicer contains a CustomStreamSlicer");
+  }
+
+  if (manifestStreamSlicer.type === "SingleSlice") {
+    throw new ManifestCompatibilityError(streamName, "stream_slicer contains a SingleSlice");
+  }
+
+  if (manifestStreamSlicer.type === "DatetimeStreamSlicer") {
+    const datetimeStreamSlicer = manifestStreamSlicer as DatetimeStreamSlicer;
+    if (
+      typeof datetimeStreamSlicer.start_datetime !== "string" ||
+      typeof datetimeStreamSlicer.end_datetime !== "string"
+    ) {
+      throw new ManifestCompatibilityError(streamName, "start_datetime or end_datetime are not set to a string value");
+    }
+    return manifestStreamSlicer as DatetimeStreamSlicer;
+  }
+
+  if (manifestStreamSlicer.type === "ListStreamSlicer") {
+    return manifestStreamSlicer as ListStreamSlicer;
+  }
+
+  if (manifestStreamSlicer.type === "CartesianProductStreamSlicer") {
+    return {
+      type: "CartesianProductStreamSlicer",
+      stream_slicers: manifestStreamSlicer.stream_slicers.map((subSlicer) => {
+        return manifestStreamSlicerToBuilder(subSlicer, serializedStreamToIndex, streamName) as
+          | Exclude<SimpleRetrieverStreamSlicer, SubstreamSlicer | CartesianProductStreamSlicer>
+          | BuilderSubstreamSlicer;
+      }),
+    };
+  }
+
+  if (manifestStreamSlicer.type === "SubstreamSlicer") {
+    const manifestSubstreamSlicer = manifestStreamSlicer as SubstreamSlicer;
+
+    if (manifestSubstreamSlicer.parent_stream_configs.length > 1) {
+      throw new ManifestCompatibilityError(streamName, "SubstreamSlicer has more than one parent stream");
+    }
+    const parentStreamConfig = manifestSubstreamSlicer.parent_stream_configs[0];
+
+    const matchingStreamIndex = serializedStreamToIndex[JSON.stringify(parentStreamConfig.stream)];
+    if (matchingStreamIndex === undefined) {
+      throw new ManifestCompatibilityError(
+        streamName,
+        "SubstreamSlicer's parent stream doesn't match any other stream"
+      );
+    }
+
+    return {
+      type: "SubstreamSlicer",
+      parent_key: parentStreamConfig.parent_key,
+      stream_slice_field: parentStreamConfig.stream_slice_field,
+      parentStreamReference: matchingStreamIndex.toString(),
+    };
+  }
+
+  throw new ManifestCompatibilityError(streamName, "stream_slicer type is unsupported");
+}
+
+function manifestPrimaryKeyToBuilder(manifestStream: DeclarativeStream): BuilderStream["primaryKey"] {
+  if (!isEqual(manifestStream.primary_key, manifestStream.retriever.primary_key)) {
+    throw new ManifestCompatibilityError(
+      manifestStream.name,
+      "primary_key is not consistent across stream and retriever levels"
+    );
+  }
+  if (manifestStream.primary_key === undefined) {
+    return [];
+  } else if (Array.isArray(manifestStream.retriever.primary_key)) {
+    if (manifestStream.retriever.primary_key.length > 0 && Array.isArray(manifestStream.retriever.primary_key[0])) {
+      throw new ManifestCompatibilityError(manifestStream.name, "primary_key contains nested arrays");
+    } else {
+      return manifestStream.retriever.primary_key as string[];
+    }
+  } else {
+    return [manifestStream.retriever.primary_key];
+  }
+}
+
+function manifestPaginatorToBuilder(
+  manifestPaginator: SimpleRetrieverPaginator | undefined,
+  streamName: string | undefined,
+  globalUrlBase: string
+): BuilderPaginator | undefined {
+  if (manifestPaginator === undefined || manifestPaginator.type === "NoPagination") {
+    return undefined;
+  }
+
+  if (manifestPaginator.page_token_option === undefined) {
+    throw new ManifestCompatibilityError(streamName, "paginator does not define a page_token_option");
+  }
+
+  if (manifestPaginator.url_base !== globalUrlBase) {
+    throw new ManifestCompatibilityError(streamName, "paginator.url_base does not match the first stream's url_base");
+  }
+
+  if (manifestPaginator.pagination_strategy.type === "CustomPaginationStrategy") {
+    throw new ManifestCompatibilityError(streamName, "paginator.pagination_strategy uses a CustomPaginationStrategy");
+  }
+
+  return {
+    strategy: manifestPaginator.pagination_strategy,
+    pageTokenOption: manifestPaginator.page_token_option,
+    pageSizeOption: manifestPaginator.page_size_option,
+  };
+}
+
+function manifestSchemaLoaderToBuilderSchema(
+  manifestSchemaLoader: DeclarativeStreamSchemaLoader | undefined
+): BuilderStream["schema"] {
+  if (manifestSchemaLoader === undefined) {
+    return undefined;
+  }
+
+  if (manifestSchemaLoader.type === "InlineSchemaLoader") {
+    const inlineSchemaLoader = manifestSchemaLoader as InlineSchemaLoader;
+    return inlineSchemaLoader.schema ? formatJson(inlineSchemaLoader.schema) : undefined;
+  }
+
+  // Return undefined if schema loader is not inline.
+  // In this case, users can copy-paste the schema into the Builder, or they can re-infer it
+  return undefined;
+}
+
+function manifestAuthenticatorToBuilder(
+  manifestAuthenticator: HttpRequesterAuthenticator | undefined,
+  streamName?: string
+): BuilderFormAuthenticator {
+  let builderAuthenticator: BuilderFormAuthenticator;
+  if (manifestAuthenticator === undefined) {
+    builderAuthenticator = {
+      type: "NoAuth",
+    };
+  } else if (manifestAuthenticator.type === "CustomAuthenticator") {
+    throw new ManifestCompatibilityError(streamName, "uses a CustomAuthenticator");
+  } else if (manifestAuthenticator.type === "OAuthAuthenticator") {
+    builderAuthenticator = {
+      ...manifestAuthenticator,
+      refresh_request_body: Object.entries(manifestAuthenticator.refresh_request_body ?? {}),
+    };
+  } else {
+    builderAuthenticator = manifestAuthenticator;
+  }
+
+  // verify that all auth keys which require a user input have a {{config[]}} value
+
+  const userInputAuthKeys = Object.keys(authTypeToKeyToInferredInput[builderAuthenticator.type]);
+
+  for (const userInputAuthKey of userInputAuthKeys) {
+    if (!isInterpolatedConfigKey(Reflect.get(builderAuthenticator, userInputAuthKey))) {
+      throw new ManifestCompatibilityError(
+        undefined,
+        `Authenticator's ${userInputAuthKey} value must be of the form {{ config['key'] }}`
+      );
+    }
+  }
+
+  return builderAuthenticator;
+}
+
+function manifestSpecAndAuthToBuilder(
+  manifestSpec: Spec | undefined,
+  manifestAuthenticator: HttpRequesterAuthenticator | undefined
+) {
+  const result: {
+    inputs: BuilderFormValues["inputs"];
+    inferredInputOverrides: BuilderFormValues["inferredInputOverrides"];
+    auth: BuilderFormAuthenticator;
+  } = {
+    inputs: [],
+    inferredInputOverrides: {},
+    auth: manifestAuthenticatorToBuilder(manifestAuthenticator),
+  };
+
+  if (manifestSpec === undefined) {
+    return result;
+  }
+
+  const required = manifestSpec.connection_specification.required as string[];
+
+  Object.entries(manifestSpec.connection_specification.properties as Record<string, AirbyteJSONSchema>).forEach(
+    ([specKey, specDefinition]) => {
+      const matchingInferredInput = Object.values(authTypeToKeyToInferredInput[result.auth.type]).find(
+        (input) => input.key === specKey
+      );
+      if (matchingInferredInput) {
+        result.inferredInputOverrides[matchingInferredInput.key] = specDefinition;
+      } else {
+        result.inputs.push({
+          key: specKey,
+          definition: specDefinition,
+          required: required.includes(specKey),
+        });
+      }
+    }
+  );
+
+  return result;
+}
+
+function assertType<T extends { type: string }>(
+  object: { type: string },
+  typeString: string,
+  streamName: string | undefined
+): asserts object is T {
+  if (object.type !== typeString) {
+    throw new ManifestCompatibilityError(streamName, `doesn't use a ${typeString}`);
+  }
+}
+
+export class ManifestCompatibilityError extends Error {
+  __type = "connectorBuilder.manifestCompatibility";
+
+  constructor(public streamName: string | undefined, public message: string) {
+    const errorMessage = `${streamName ? `Stream ${streamName}: ` : ""}${message}`;
+    super(errorMessage);
+    this.message = errorMessage;
+  }
+}
+
+export function isManifestCompatibilityError(error: { __type?: string }): error is ManifestCompatibilityError {
+  return error.__type === "connectorBuilder.manifestCompatibility";
+}
diff --git a/airbyte-webapp/src/components/connectorBuilder/types.ts b/airbyte-webapp/src/components/connectorBuilder/types.ts
index 50462f4853456..c430d2896a1d0 100644
--- a/airbyte-webapp/src/components/connectorBuilder/types.ts
+++ b/airbyte-webapp/src/components/connectorBuilder/types.ts
@@ -1,10 +1,10 @@
 import { JSONSchema7 } from "json-schema";
+import merge from "lodash/merge";
 import * as yup from "yup";
 
 import { AirbyteJSONSchema } from "core/jsonSchema/types";
 import {
   ConnectorManifest,
-  InterpolatedRequestOptionsProvider,
   Spec,
   ApiKeyAuthenticator,
   BasicHttpAuthenticator,
@@ -14,13 +14,15 @@ import {
   SessionTokenAuthenticator,
   RequestOption,
   OAuthAuthenticator,
-  DefaultPaginatorPaginationStrategy,
   SimpleRetrieverStreamSlicer,
   HttpRequesterAuthenticator,
   SubstreamSlicer,
   SubstreamSlicerType,
   CartesianProductStreamSlicer,
   DeclarativeStreamSchemaLoader,
+  PageIncrement,
+  OffsetIncrement,
+  CursorPagination,
 } from "core/request/ConnectorManifest";
 
 export interface BuilderFormInput {
@@ -29,7 +31,7 @@ export interface BuilderFormInput {
   definition: AirbyteJSONSchema;
 }
 
-type BuilderFormAuthenticator = (
+export type BuilderFormAuthenticator = (
   | NoAuth
   | (Omit<OAuthAuthenticator, "refresh_request_body"> & {
       refresh_request_body: Array<[string, string]>;
@@ -49,10 +51,12 @@ export interface BuilderFormValues {
   inputs: BuilderFormInput[];
   inferredInputOverrides: Record<string, Partial<AirbyteJSONSchema>>;
   streams: BuilderStream[];
+  checkStreams: string[];
+  version: string;
 }
 
 export interface BuilderPaginator {
-  strategy: DefaultPaginatorPaginationStrategy;
+  strategy: PageIncrement | OffsetIncrement | CursorPagination;
   pageTokenOption: RequestOption;
   pageSizeOption?: RequestOption;
 }
@@ -90,6 +94,7 @@ export interface BuilderStream {
     | BuilderSubstreamSlicer
     | BuilderCartesianProductSlicer;
   schema?: string;
+  unsupportedFields?: Record<string, unknown>;
 }
 
 export const DEFAULT_BUILDER_FORM_VALUES: BuilderFormValues = {
@@ -101,6 +106,8 @@ export const DEFAULT_BUILDER_FORM_VALUES: BuilderFormValues = {
   inputs: [],
   inferredInputOverrides: {},
   streams: [],
+  checkStreams: [],
+  version: "0.1.0",
 };
 
 export const DEFAULT_BUILDER_STREAM_VALUES: Omit<BuilderStream, "id"> = {
@@ -116,117 +123,128 @@ export const DEFAULT_BUILDER_STREAM_VALUES: Omit<BuilderStream, "id"> = {
   },
 };
 
-function getInferredInputList(global: BuilderFormValues["global"]): BuilderFormInput[] {
-  if (global.authenticator.type === "ApiKeyAuthenticator") {
-    return [
-      {
-        key: "api_key",
-        required: true,
-        definition: {
-          type: "string",
-          title: "API Key",
-          airbyte_secret: true,
-        },
+export const authTypeToKeyToInferredInput: Record<string, Record<string, BuilderFormInput>> = {
+  NoAuth: {},
+  ApiKeyAuthenticator: {
+    api_token: {
+      key: "api_key",
+      required: true,
+      definition: {
+        type: "string",
+        title: "API Key",
+        airbyte_secret: true,
       },
-    ];
-  }
-  if (global.authenticator.type === "BearerAuthenticator") {
-    return [
-      {
-        key: "api_key",
-        required: true,
-        definition: {
-          type: "string",
-          title: "API Key",
-          airbyte_secret: true,
-        },
+    },
+  },
+  BearerAuthenticator: {
+    api_token: {
+      key: "api_key",
+      required: true,
+      definition: {
+        type: "string",
+        title: "API Key",
+        airbyte_secret: true,
       },
-    ];
-  }
-  if (global.authenticator.type === "BasicHttpAuthenticator") {
-    return [
-      {
-        key: "username",
-        required: true,
-        definition: {
-          type: "string",
-          title: "Username",
-        },
+    },
+  },
+  BasicHttpAuthenticator: {
+    username: {
+      key: "username",
+      required: true,
+      definition: {
+        type: "string",
+        title: "Username",
       },
-      {
-        key: "password",
-        required: true,
-        definition: {
-          type: "string",
-          title: "Password",
-          airbyte_secret: true,
-        },
+    },
+    password: {
+      key: "password",
+      required: true,
+      definition: {
+        type: "string",
+        title: "Password",
+        airbyte_secret: true,
       },
-    ];
-  }
-  if (global.authenticator.type === "OAuthAuthenticator") {
-    return [
-      {
-        key: "client_id",
-        required: true,
-        definition: {
-          type: "string",
-          title: "Client ID",
-          airbyte_secret: true,
-        },
+    },
+  },
+  OAuthAuthenticator: {
+    client_id: {
+      key: "client_id",
+      required: true,
+      definition: {
+        type: "string",
+        title: "Client ID",
+        airbyte_secret: true,
       },
-      {
-        key: "client_secret",
-        required: true,
-        definition: {
-          type: "string",
-          title: "Client secret",
-          airbyte_secret: true,
-        },
+    },
+    client_secret: {
+      key: "client_secret",
+      required: true,
+      definition: {
+        type: "string",
+        title: "Client secret",
+        airbyte_secret: true,
       },
-      {
-        key: "refresh_token",
-        required: true,
-        definition: {
-          type: "string",
-          title: "Refresh token",
-          airbyte_secret: true,
-        },
+    },
+    refresh_token: {
+      key: "client_refresh_token",
+      required: true,
+      definition: {
+        type: "string",
+        title: "Refresh token",
+        airbyte_secret: true,
       },
-    ];
-  }
-  if (global.authenticator.type === "SessionTokenAuthenticator") {
-    return [
-      {
-        key: "username",
-        required: false,
-        definition: {
-          type: "string",
-          title: "Username",
-        },
+    },
+  },
+  SessionTokenAuthenticator: {
+    username: {
+      key: "username",
+      required: false,
+      definition: {
+        type: "string",
+        title: "Username",
       },
-      {
-        key: "password",
-        required: false,
-        definition: {
-          type: "string",
-          title: "Password",
-          airbyte_secret: true,
-        },
+    },
+    password: {
+      key: "password",
+      required: false,
+      definition: {
+        type: "string",
+        title: "Password",
+        airbyte_secret: true,
       },
-      {
-        key: "session_token",
-        required: false,
-        definition: {
-          type: "string",
-          title: "Session token",
-          description: "Session token generated by user (if provided username and password are not required)",
-          airbyte_secret: true,
-        },
+    },
+    session_token: {
+      key: "session_token",
+      required: false,
+      definition: {
+        type: "string",
+        title: "Session token",
+        description: "Session token generated by user (if provided username and password are not required)",
+        airbyte_secret: true,
       },
-    ];
-  }
-  return [];
+    },
+  },
+};
+
+export const inferredAuthValues = (type: BuilderFormAuthenticator["type"]): Record<string, string> => {
+  return Object.fromEntries(
+    Object.entries(authTypeToKeyToInferredInput[type]).map(([authKey, inferredInput]) => {
+      return [authKey, interpolateConfigKey(inferredInput.key)];
+    })
+  );
+};
+
+function getInferredInputList(global: BuilderFormValues["global"]): BuilderFormInput[] {
+  const authKeyToInferredInput = authTypeToKeyToInferredInput[global.authenticator.type];
+  const authKeys = Object.keys(authKeyToInferredInput);
+  return authKeys.flatMap((authKey) => {
+    if (
+      extractInterpolatedConfigKey(Reflect.get(global.authenticator, authKey)) === authKeyToInferredInput[authKey].key
+    ) {
+      return [authKeyToInferredInput[authKey]];
+    }
+    return [];
+  });
 }
 
 export function getInferredInputs(
@@ -244,6 +262,32 @@ export function getInferredInputs(
   );
 }
 
+const interpolateConfigKey = (key: string): string => {
+  return `{{ config['${key}'] }}`;
+};
+
+const interpolatedConfigValueRegex = /^{{config\[('|"+)(.+)('|"+)\]}}$/;
+
+export function isInterpolatedConfigKey(str: string | undefined): boolean {
+  if (str === undefined) {
+    return false;
+  }
+  const noWhitespaceString = str.replace(/\s/g, "");
+  return interpolatedConfigValueRegex.test(noWhitespaceString);
+}
+
+function extractInterpolatedConfigKey(str: string | undefined): string | undefined {
+  if (str === undefined) {
+    return undefined;
+  }
+  const noWhitespaceString = str.replace(/\s/g, "");
+  const regexResult = interpolatedConfigValueRegex.exec(noWhitespaceString);
+  if (regexResult === null) {
+    return undefined;
+  }
+  return regexResult[2];
+}
+
 export const injectIntoValues = ["request_parameter", "header", "path", "body_data", "body_json"];
 const nonPathRequestOptionSchema = yup
   .object()
@@ -442,9 +486,7 @@ export const builderFormValidationSchema = yup.object().shape({
   ),
 });
 
-function builderFormAuthenticatorToAuthenticator(
-  globalSettings: BuilderFormValues["global"]
-): HttpRequesterAuthenticator {
+function builderAuthenticatorToManifest(globalSettings: BuilderFormValues["global"]): HttpRequesterAuthenticator {
   if (globalSettings.authenticator.type === "OAuthAuthenticator") {
     return {
       ...globalSettings.authenticator,
@@ -460,7 +502,7 @@ function builderFormAuthenticatorToAuthenticator(
   return globalSettings.authenticator as HttpRequesterAuthenticator;
 }
 
-function builderFormStreamSlicerToStreamSlicer(
+function builderStreamSlicerToManifest(
   values: BuilderFormValues,
   slicer: BuilderStream["streamSlicer"],
   visitedStreams: string[]
@@ -475,7 +517,7 @@ function builderFormStreamSlicerToStreamSlicer(
     return {
       type: "CartesianProductStreamSlicer",
       stream_slicers: slicer.stream_slicers.map((subSlicer) => {
-        return builderFormStreamSlicerToStreamSlicer(values, subSlicer, visitedStreams);
+        return builderStreamSlicerToManifest(values, subSlicer, visitedStreams);
       }),
     } as unknown as CartesianProductStreamSlicer;
   }
@@ -525,7 +567,7 @@ function builderStreamToDeclarativeSteam(
   stream: BuilderStream,
   visitedStreams: string[]
 ): DeclarativeStream {
-  return {
+  const declarativeStream: DeclarativeStream = {
     type: "DeclarativeStream",
     name: stream.name,
     primary_key: stream.primaryKey,
@@ -539,14 +581,14 @@ function builderStreamToDeclarativeSteam(
         name: stream.name,
         url_base: values.global?.urlBase,
         path: stream.urlPath,
+        http_method: stream.httpMethod,
         request_options_provider: {
-          // TODO can't declare type here because the server will error out, but the types dictate it is needed. Fix here once server is fixed.
-          // type: "InterpolatedRequestOptionsProvider",
+          type: "InterpolatedRequestOptionsProvider",
           request_parameters: Object.fromEntries(stream.requestOptions.requestParameters),
           request_headers: Object.fromEntries(stream.requestOptions.requestHeaders),
           request_body_json: Object.fromEntries(stream.requestOptions.requestBody),
-        } as InterpolatedRequestOptionsProvider,
-        authenticator: builderFormAuthenticatorToAuthenticator(values.global),
+        },
+        authenticator: builderAuthenticatorToManifest(values.global),
       },
       record_selector: {
         type: "RecordSelector",
@@ -570,9 +612,11 @@ function builderStreamToDeclarativeSteam(
             url_base: values.global?.urlBase,
           }
         : { type: "NoPagination" },
-      stream_slicer: builderFormStreamSlicerToStreamSlicer(values, stream.streamSlicer, [...visitedStreams, stream.id]),
+      stream_slicer: builderStreamSlicerToManifest(values, stream.streamSlicer, [...visitedStreams, stream.id]),
     },
   };
+
+  return merge({}, declarativeStream, stream.unsupportedFields);
 }
 
 export const convertToManifest = (values: BuilderFormValues): ConnectorManifest => {
@@ -596,14 +640,14 @@ export const convertToManifest = (values: BuilderFormValues): ConnectorManifest
     type: "Spec",
   };
 
-  return {
-    version: "0.1.0",
+  return merge({
+    version: values.version,
     type: "DeclarativeSource",
     check: {
       type: "CheckStream",
-      stream_names: [],
+      stream_names: values.checkStreams,
     },
     streams: manifestStreams,
     spec,
-  };
+  });
 };
diff --git a/airbyte-webapp/src/hooks/services/ConfirmationModal/ConfirmationModalService.tsx b/airbyte-webapp/src/hooks/services/ConfirmationModal/ConfirmationModalService.tsx
index a52657089f255..b7175769ebb15 100644
--- a/airbyte-webapp/src/hooks/services/ConfirmationModal/ConfirmationModalService.tsx
+++ b/airbyte-webapp/src/hooks/services/ConfirmationModal/ConfirmationModalService.tsx
@@ -62,6 +62,7 @@ export const ConfirmationModalService = ({ children }: { children: React.ReactNo
           onClose={closeConfirmationModal}
           title={state.confirmationModal.title}
           text={state.confirmationModal.text}
+          textValues={state.confirmationModal.textValues}
           onSubmit={state.confirmationModal.onSubmit}
           submitButtonText={state.confirmationModal.submitButtonText}
           submitButtonDataId={state.confirmationModal.submitButtonDataId}
diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
index 31ca280b39bc9..8df0ab275732c 100644
--- a/airbyte-webapp/src/locales/en.json
+++ b/airbyte-webapp/src/locales/en.json
@@ -680,8 +680,8 @@
   "connectorBuilder.globalConfiguration": "Global Configuration",
   "connectorBuilder.userInputs": "User inputs ({number})",
   "connectorBuilder.noStreamsMessage": "Add a stream to test it here",
-  "connectorBuilder.toggleModal.text": "<b>Toggling back to the UI will erase any changes you have made in the YAML editor.</b>\n\nIn order to export your current yaml, click the Download Config button.",
-  "connectorBuilder.toggleModal.title": "Warning",
+  "connectorBuilder.toggleModal.text": "Your YAML manifest is not compatible with the Connector Builder UI, due to the following error:\n\n<b>{error}</b>\n\nClicking confirm will erase any changes you have made in the YAML editor before swiching back to the Builder UI.\n\nIn order to save your current YAML, cancel and click the Download Config button.",
+  "connectorBuilder.toggleModal.title": "Incompatible YAML",
   "connectorBuilder.toggleModal.submitButton": "Confirm",
   "connectorBuilder.configErrorsDownload": "Cannot download while there are form errors",
   "connectorBuilder.configErrorsTest": "Cannot test while there are form errors",