🪟🎉 Connector builder: Allow defining inputs

airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx

@@ -79,13 +79,13 @@ export const AddStreamButton: React.FC<AddStreamButtonProps> = ({ onAddStream, b
                 <ModalBody className={styles.body}>
                   <BuilderField
                     path="streamName"
-                    type="text"
+                    type="string"
                     label={formatMessage({ id: "connectorBuilder.addStreamModal.streamNameLabel" })}
                     tooltip={formatMessage({ id: "connectorBuilder.addStreamModal.streamNameTooltip" })}
                   />
                   <BuilderField
                     path="urlPath"
-                    type="text"
+                    type="string"
                     label={formatMessage({ id: "connectorBuilder.addStreamModal.urlPathLabel" })}
                     tooltip={formatMessage({ id: "connectorBuilder.addStreamModal.urlPathTooltip" })}
                   />

airbyte-webapp/src/components/connectorBuilder/Builder/AuthenticationSection.tsx

@@ -0,0 +1,179 @@
+import { BuilderCard } from "./BuilderCard";
+import { BuilderField } from "./BuilderField";
+import { BuilderOneOf } from "./BuilderOneOf";
+import { BuilderOptional } from "./BuilderOptional";
+import { KeyValueListField } from "./KeyValueListField";
+import { UserInputField } from "./UserInputField";
+
+export const AuthenticationSection: React.FC = () => {
+  return (
+    <BuilderCard>
+      <BuilderOneOf
+        path="global.authenticator"
+        label="Authentication"
+        tooltip="Authentication method to use for requests sent to the API"
+        options={[
+          { label: "No Auth", typeValue: "NoAuth" },
+          {
+            label: "API Key",
+            typeValue: "ApiKeyAuthenticator",
+            default: {
+              api_token: "{{ config['api_key'] }}",
+              header: "",
+            },
+            children: (
+              <>
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.header"
+                  label="Header"
+                  tooltip="HTTP header which should be set to the API Key"
+                />
+                <UserInputField
+                  label="API Key"
+                  tooltip="The API key issued by the service. Fill it in in the user inputs"
+                />
+              </>
+            ),
+          },
+          {
+            label: "Bearer",
+            typeValue: "BearerAuthenticator",
+            default: {
+              api_token: "{{ config['api_key'] }}",
+            },
+            children: (
+              <UserInputField
+                label="API Key"
+                tooltip="The API key issued by the service. Fill it in in the user inputs"
+              />
+            ),
+          },
+          {
+            label: "Basic HTTP",
+            typeValue: "BasicHttpAuthenticator",
+            default: {
+              username: "{{ config['username'] }}",
+              password: "{{ config['password'] }}",
+            },
+            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" />
+              </>
+            ),
+          },
+          {
+            label: "OAuth",
+            typeValue: "OAuthAuthenticator",
+            default: {
+              client_id: "{{ config['client_id'] }}",
+              client_secret: "{{ config['client_secret'] }}",
+              refresh_token: "{{ config['client_refresh_token'] }}",
+              refresh_request_body: [],
+              token_refresh_endpoint: "",
+            },
+            children: (
+              <>
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.token_refresh_endpoint"
+                  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" />
+                <BuilderOptional>
+                  <BuilderField
+                    type="array"
+                    path="global.authenticator.scopes"
+                    optional
+                    label="Scopes"
+                    tooltip="Scopes to request"
+                  />
+                  <BuilderField
+                    type="array"
+                    path="global.authenticator.token_expiry_date_format"
+                    optional
+                    label="Token expiry date format"
+                    tooltip="The format of the expiry date of the access token as obtained from the refresh endpoint"
+                  />
+                  <BuilderField
+                    type="string"
+                    path="global.authenticator.expires_in_name"
+                    optional
+                    label="Token expiry property name"
+                    tooltip="The name of the property which contains the token exipiry date in the response from the token refresh endpoint"
+                  />
+                  <BuilderField
+                    type="string"
+                    path="global.authenticator.access_token_name"
+                    optional
+                    label="Access token property name"
+                    tooltip="The name of the property which contains the access token in the response from the token refresh endpoint"
+                  />
+                  <BuilderField
+                    type="string"
+                    path="global.authenticator.grant_type"
+                    optional
+                    label="Grant type"
+                    tooltip="The grant type to request for access_token"
+                  />
+                  <KeyValueListField
+                    path="global.authenticator.refresh_request_body"
+                    label="Request Parameters"
+                    tooltip="The request body to send in the refresh request"
+                  />
+                </BuilderOptional>
+              </>
+            ),
+          },
+          {
+            label: "Session token",
+            typeValue: "SessionTokenAuthenticator",
+            default: {
+              username: "{{ config['username'] }}",
+              password: "{{ config['password'] }}",
+              session_token: "{{ config['session_token'] }}",
+            },
+            children: (
+              <>
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.header"
+                  label="Header"
+                  tooltip="Specific HTTP header of source API for providing session token"
+                />
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.session_token_response_key"
+                  label="Session token response key"
+                  tooltip="Key for retrieving session token from api response"
+                />
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.login_url"
+                  label="Login url"
+                  tooltip="Url for getting a specific session token"
+                />
+                <BuilderField
+                  type="string"
+                  path="global.authenticator.validate_session_url"
+                  label="Validate session url"
+                  tooltip="Url to validate passed session token"
+                />
+                <UserInputField label="Username" tooltip="The username" />
+                <UserInputField label="Password" tooltip="The password" />
+                <UserInputField
+                  label="Session token"
+                  tooltip="Session token generated by user (if provided username and password are not required)"
+                />
+              </>
+            ),
+          },
+        ]}
+      />
+    </BuilderCard>
+  );
+};

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

@@ -1,31 +1,41 @@
 import { Form } from "formik";
 import { useEffect } from "react";
 
-import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import { BuilderView, useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
-import { BuilderFormValues } from "../types";
+import { builderFormValidationSchema, BuilderFormValues } from "../types";
 import styles from "./Builder.module.scss";
 import { BuilderSidebar } from "./BuilderSidebar";
 import { GlobalConfigView } from "./GlobalConfigView";
+import { InputsView } from "./InputsView";
 import { StreamConfigView } from "./StreamConfigView";
 
 interface BuilderProps {
   values: BuilderFormValues;
   toggleYamlEditor: () => void;
 }
 
+function getView(selectedView: BuilderView) {
+  switch (selectedView) {
+    case "global":
+      return <GlobalConfigView />;
+    case "inputs":
+      return <InputsView />;
+    default:
+      return <StreamConfigView streamNum={selectedView} />;
+  }
+}
+
 export const Builder: React.FC<BuilderProps> = ({ values, toggleYamlEditor }) => {
   const { setBuilderFormValues, selectedView } = useConnectorBuilderState();
   useEffect(() => {
-    setBuilderFormValues(values);
+    setBuilderFormValues(values, builderFormValidationSchema.isValidSync(values));
   }, [values, setBuilderFormValues]);
 
   return (
     <div className={styles.container}>
       <BuilderSidebar className={styles.sidebar} toggleYamlEditor={toggleYamlEditor} />
-      <Form className={styles.form}>
-        {selectedView === "global" ? <GlobalConfigView /> : <StreamConfigView streamNum={selectedView} />}
-      </Form>
+      <Form className={styles.form}>{getView(selectedView)}</Form>
     </div>
   );
 };

airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx

@@ -2,10 +2,12 @@ import { useField } from "formik";
 import { FormattedMessage } from "react-intl";
 
 import { ControlLabels } from "components/LabeledControl";
+import { LabeledSwitch } from "components/LabeledSwitch";
 import { DropDown } from "components/ui/DropDown";
 import { Input } from "components/ui/Input";
 import { TagInput } from "components/ui/TagInput";
 import { Text } from "components/ui/Text";
+import { InfoTooltip } from "components/ui/Tooltip/InfoTooltip";
 
 import styles from "./BuilderField.module.scss";
 
@@ -28,10 +30,17 @@ interface BaseFieldProps {
   path: string;
   label: string;
   tooltip?: string;
+  readOnly?: boolean;
   optional?: boolean;
 }
 
-type BuilderFieldProps = BaseFieldProps & ({ type: "text" | "array" } | { type: "enum"; options: string[] });
+type BuilderFieldProps = BaseFieldProps &
+  (
+    | { type: "string" | "number" | "integer"; onChange?: (newValue: string) => void }
+    | { type: "boolean"; onChange?: (newValue: boolean) => void }
+    | { type: "array"; onChange?: (newValue: string[]) => void }
+    | { type: "enum"; onChange?: (newValue: string) => void; options: string[] }
+  );
 
 const EnumField: React.FC<EnumFieldProps> = ({ options, value, setValue, error, ...props }) => {
   return (
@@ -51,23 +60,56 @@ const ArrayField: React.FC<ArrayFieldProps> = ({ name, value, setValue, error })
   return <TagInput name={name} fieldValue={value} onChange={(value) => setValue(value)} error={error} />;
 };
 
-export const BuilderField: React.FC<BuilderFieldProps> = ({ path, label, tooltip, optional = false, ...props }) => {
+export const BuilderField: React.FC<BuilderFieldProps> = ({
+  path,
+  label,
+  tooltip,
+  optional = false,
+  readOnly,
+  ...props
+}) => {
   const [field, meta, helpers] = useField(path);
   const hasError = !!meta.error && meta.touched;
 
+  if (props.type === "boolean") {
+    return (
+      <LabeledSwitch
+        {...field}
+        checked={field.value}
+        label={
+          <>
+            {label} {tooltip && <InfoTooltip placement="top-start">{tooltip}</InfoTooltip>}
+          </>
+        }
+      />
+    );
+  }
+
+  const setValue = (newValue: unknown) => {
+    props.onChange?.(newValue as string & string[]);
+    helpers.setValue(newValue);
+  };
+
   return (
     <ControlLabels className={styles.container} label={label} infoTooltipContent={tooltip} optional={optional}>
-      {props.type === "text" && <Input {...field} type={props.type} value={field.value ?? ""} error={hasError} />}
+      {(props.type === "number" || props.type === "string" || props.type === "integer") && (
+        <Input
+          {...field}
+          onChange={(e) => {
+            field.onChange(e);
+            props.onChange?.(e.target.value);
+          }}
+          type={props.type}
+          value={field.value ?? ""}
+          error={hasError}
+          readOnly={readOnly}
+        />
+      )}
       {props.type === "array" && (
-        <ArrayField name={path} value={field.value ?? []} setValue={helpers.setValue} error={hasError} />
+        <ArrayField name={path} value={field.value ?? []} setValue={setValue} error={hasError} />
       )}
       {props.type === "enum" && (
-        <EnumField
-          options={props.options}
-          value={field.value ?? props.options[0]}
-          setValue={helpers.setValue}
-          error={hasError}
-        />
+        <EnumField options={props.options} value={field.value} setValue={setValue} error={hasError} />
       )}
       {hasError && (
         <Text className={styles.error}>