[Connector Builder]Add ability to convert from YAML manifest to UI

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,36 +44,48 @@ 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
               />
             ),
           },
           {
             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
+                />
               </>
             ),
           },
           {
             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
                 />
               </>
             ),

airbyte-webapp/src/components/connectorBuilder/YamlEditor/YamlEditor.tsx

@@ -1,4 +1,5 @@
 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";
@@ -8,20 +9,21 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { CodeEditor } from "components/ui/CodeEditor";
 
 import { ConnectorManifest } from "core/request/ConnectorManifest";
-import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
+// import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
 import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { UiYamlToggleButton } from "../Builder/UiYamlToggleButton";
 import { DownloadYamlButton } from "../DownloadYamlButton";
-import { convertToManifest } from "../types";
+import { convertToBuilderFormValues, convertToManifest } from "../types";
 import styles from "./YamlEditor.module.scss";
 
 interface YamlEditorProps {
   toggleYamlEditor: () => void;
 }
 
 export const YamlEditor: React.FC<YamlEditorProps> = ({ toggleYamlEditor }) => {
-  const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
+  const { setValues } = useFormikContext();
+  // const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
   const yamlEditorRef = useRef<editor.IStandaloneCodeEditor>();
   const {
     yamlManifest,
@@ -82,16 +84,23 @@ export const YamlEditor: React.FC<YamlEditorProps> = ({ toggleYamlEditor }) => {
 
   const handleToggleYamlEditor = () => {
     if (yamlIsDirty) {
-      openConfirmationModal({
-        text: "connectorBuilder.toggleModal.text",
-        title: "connectorBuilder.toggleModal.title",
-        submitButtonText: "connectorBuilder.toggleModal.submitButton",
-        onSubmit: () => {
-          setYamlIsValid(true);
-          toggleYamlEditor();
-          closeConfirmationModal();
-        },
-      });
+      // openConfirmationModal({
+      //   text: "connectorBuilder.toggleModal.text",
+      //   title: "connectorBuilder.toggleModal.title",
+      //   submitButtonText: "connectorBuilder.toggleModal.submitButton",
+      //   onSubmit: () => {
+      //     setYamlIsValid(true);
+      //     toggleYamlEditor();
+      //     closeConfirmationModal();
+      //   },
+      // });
+      // setBuilderFormValues(convertToBuilderFormValues(jsonManifest), false);
+      try {
+        setValues(convertToBuilderFormValues(jsonManifest, builderFormValues));
+        toggleYamlEditor();
+      } catch (e) {
+        alert(e.message);
+      }
     } else {
       setYamlIsValid(true);
       toggleYamlEditor();