🪟🎉 Connector builder: Available inputs dropdown

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

@@ -1,5 +1,6 @@
 import { BuilderCard } from "./BuilderCard";
 import { BuilderField } from "./BuilderField";
+import { BuilderFieldWithInputs } from "./BuilderFieldWithInputs";
 import { BuilderOneOf } from "./BuilderOneOf";
 import { BuilderOptional } from "./BuilderOptional";
 import { KeyValueListField } from "./KeyValueListField";
@@ -23,7 +24,7 @@ export const AuthenticationSection: React.FC = () => {
             },
             children: (
               <>
-                <BuilderField
+                <BuilderFieldWithInputs
                   type="string"
                   path="global.authenticator.header"
                   label="Header"
@@ -75,7 +76,7 @@ export const AuthenticationSection: React.FC = () => {
             },
             children: (
               <>
-                <BuilderField
+                <BuilderFieldWithInputs
                   type="string"
                   path="global.authenticator.token_refresh_endpoint"
                   label="Token refresh endpoint"
@@ -92,28 +93,28 @@ export const AuthenticationSection: React.FC = () => {
                     label="Scopes"
                     tooltip="Scopes to request"
                   />
-                  <BuilderField
+                  <BuilderFieldWithInputs
                     type="string"
                     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
+                  <BuilderFieldWithInputs
                     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
+                  <BuilderFieldWithInputs
                     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
+                  <BuilderFieldWithInputs
                     type="string"
                     path="global.authenticator.grant_type"
                     optional
@@ -139,25 +140,25 @@ export const AuthenticationSection: React.FC = () => {
             },
             children: (
               <>
-                <BuilderField
+                <BuilderFieldWithInputs
                   type="string"
                   path="global.authenticator.header"
                   label="Header"
                   tooltip="Specific HTTP header of source API for providing session token"
                 />
-                <BuilderField
+                <BuilderFieldWithInputs
                   type="string"
                   path="global.authenticator.session_token_response_key"
                   label="Session token response key"
                   tooltip="Key for retrieving session token from api response"
                 />
-                <BuilderField
+                <BuilderFieldWithInputs
                   type="string"
                   path="global.authenticator.login_url"
                   label="Login url"
                   tooltip="Url for getting a specific session token"
                 />
-                <BuilderField
+                <BuilderFieldWithInputs
                   type="string"
                   path="global.authenticator.validate_session_url"
                   label="Validate session url"

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

@@ -1,4 +1,5 @@
 import { useField } from "formik";
+import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { ControlLabels } from "components/LabeledControl";
@@ -33,9 +34,11 @@ interface BaseFieldProps {
   readOnly?: boolean;
   optional?: boolean;
   pattern?: RegExp;
+  adornment?: ReactNode;
+  className?: string;
 }
 
-type BuilderFieldProps = BaseFieldProps &
+export type BuilderFieldProps = BaseFieldProps &
   (
     | { type: "string" | "number" | "integer"; onChange?: (newValue: string) => void }
     | { type: "boolean"; onChange?: (newValue: boolean) => void }
@@ -68,6 +71,7 @@ export const BuilderField: React.FC<BuilderFieldProps> = ({
   optional = false,
   readOnly,
   pattern,
+  adornment,
   ...props
 }) => {
   const [field, meta, helpers] = useField(path);
@@ -104,10 +108,12 @@ export const BuilderField: React.FC<BuilderFieldProps> = ({
             }
             props.onChange?.(e.target.value);
           }}
+          className={props.className}
           type={props.type}
           value={field.value ?? ""}
           error={hasError}
           readOnly={readOnly}
+          adornment={adornment}
         />
       )}
       {props.type === "array" && (

airbyte-webapp/src/components/connectorBuilder/Builder/BuilderFieldWithInputs.module.scss

@@ -0,0 +1,63 @@
+@use "scss/variables";
+@use "scss/colors";
+
+.button {
+  align-self: flex-end;
+  width: auto;
+  border: none;
+  background: none;
+  color: colors.$grey-300;
+
+  &:hover {
+    background: none;
+    border: none;
+    color: colors.$blue-500;
+  }
+}
+
+.selectedOption {
+  margin-top: variables.$spacing-lg;
+  background: none;
+  font-size: 12px;
+  color: colors.$blue-500;
+
+  &:hover {
+    color: colors.$blue-900;
+  }
+
+  & > span {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+.container {
+  position: absolute;
+  right: variables.$spacing-sm;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  max-width: 400px;
+  width: 100%;
+
+  // make the element click through, but all children should behave as normal so the input can be clicked as normal
+  pointer-events: none;
+
+  & > * {
+    pointer-events: all;
+  }
+}
+
+.buttonContent {
+  background: none;
+  border: none;
+  display: flex;
+  gap: variables.$spacing-xs;
+  color: inherit;
+  align-items: center;
+  cursor: pointer;
+}
+
+.inputWithHelper {
+  padding-right: 55px;
+}

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

@@ -0,0 +1,108 @@
+import { faPlus, faUser } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useField } from "formik";
+import { useMemo, useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { ListBox, ListBoxControlButtonProps, Option } from "components/ui/ListBox";
+import { Tooltip } from "components/ui/Tooltip";
+
+import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
+
+import { getInferredInputs } from "../types";
+import { BuilderField, BuilderFieldProps } from "./BuilderField";
+import styles from "./BuilderFieldWithInputs.module.scss";
+import { InputForm, newInputInEditing } from "./InputsForm";
+
+export const BuilderFieldWithInputs: React.FC<BuilderFieldProps> = (props) => {
+  const [field, , helpers] = useField(props.path);
+
+  return (
+    <BuilderField
+      {...props}
+      adornment={<UserInputHelper setValue={helpers.setValue} currentValue={field.value} />}
+      className={styles.inputWithHelper}
+    />
+  );
+};
+
+export const UserInputHelper = ({
+  setValue,
+  currentValue,
+}: {
+  setValue: (value: string) => void;
+  currentValue: string;
+}) => {
+  const { formatMessage } = useIntl();
+  const [modalOpen, setModalOpen] = useState(false);
+  const { builderFormValues } = useConnectorBuilderFormState();
+  const listOptions = useMemo(() => {
+    const options: Array<Option<string | undefined>> = [
+      ...builderFormValues.inputs,
+      ...getInferredInputs(builderFormValues),
+    ].map((input) => ({
+      label: input.definition.title || input.key,
+      value: input.key,
+    }));
+    options.push({
+      value: undefined,
+      label: formatMessage({ id: "connectorBuilder.inputModal.newTitle" }),
+      icon: <FontAwesomeIcon icon={faPlus} />,
+    });
+    return options;
+  }, [builderFormValues, formatMessage]);
+  return (
+    <>
+      <ListBox<string | undefined>
+        buttonClassName={styles.button}
+        optionClassName={styles.option}
+        className={styles.container}
+        selectedOptionClassName={styles.selectedOption}
+        controlButton={UserInputHelperControlButton}
+        selectedValue={undefined}
+        onSelect={(selectedValue) => {
+          if (selectedValue) {
+            setValue(`${currentValue || ""}{{ config['${selectedValue}'] }}`);
+          } else {
+            // This hack is necessary because listbox will put the focus back when the option list gets hidden, which conflicts with the auto-focus setting of the modal.
+            // As it's not possible to prevent listbox from forcing the focus back on the button component, this will wait until the focus went to the button, then opens the modal
+            // so it can move it to the first input
+            setTimeout(() => {
+              setModalOpen(true);
+            }, 50);
+          }
+        }}
+        options={listOptions}
+      />
+      {modalOpen && (
+        <InputForm
+          inputInEditing={newInputInEditing()}
+          onClose={(newInput) => {
+            setModalOpen(false);
+            if (!newInput) {
+              return;
+            }
+            setValue(`${currentValue}{{ config['${newInput.key}'] }}`);
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+const UserInputHelperControlButton: React.FC<ListBoxControlButtonProps<string | undefined>> = () => {
+  return (
+    <Tooltip
+      control={
+        <div className={styles.buttonContent}>
+          {"{{"}
+          <FontAwesomeIcon icon={faUser} />
+          {"}}"}
+        </div>
+      }
+      placement="top"
+    >
+      <FormattedMessage id="connectorBuilder.interUserInputValue" />
+    </Tooltip>
+  );
+};

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

@@ -4,6 +4,7 @@ import { RequestOption } from "core/request/ConnectorManifest";
 
 import { injectIntoValues } from "../types";
 import { BuilderField } from "./BuilderField";
+import { BuilderFieldWithInputs } from "./BuilderFieldWithInputs";
 
 interface InjectRequestOptionFieldsProps {
   path: string;
@@ -37,7 +38,7 @@ export const InjectRequestOptionFields: React.FC<InjectRequestOptionFieldsProps>
         tooltip={`Configures where the ${descriptor} should be set on the HTTP requests`}
       />
       {field.value.inject_into !== "path" && (
-        <BuilderField
+        <BuilderFieldWithInputs
           type="string"
           path={`${path}.field_name`}
           label="Field name"

airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.module.scss

@@ -0,0 +1,12 @@
+@use "scss/variables";
+@use "scss/colors";
+
+.inputForm {
+  gap: variables.$spacing-lg;
+  display: flex;
+  flex-direction: column;
+}
+
+.deleteButtonContainer {
+  flex-grow: 1;
+}