🪟🎉 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/Builder.tsx

@@ -1,19 +1,31 @@
 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 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(() => {
@@ -23,9 +35,7 @@ export const Builder: React.FC<BuilderProps> = ({ values, toggleYamlEditor }) =>
   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,12 @@ 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" | "integer" | "number" | "boolean" | "array" } | { type: "enum"; options: string[] });
 
 const EnumField: React.FC<EnumFieldProps> = ({ options, value, setValue, error, ...props }) => {
   return (
@@ -51,13 +55,36 @@ 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>}
+          </>
+        }
+      />
+    );
+  }
+
   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} type={props.type} value={field.value ?? ""} error={hasError} readOnly={readOnly} />
+      )}
       {props.type === "array" && (
         <ArrayField name={path} value={field.value ?? []} setValue={helpers.setValue} error={hasError} />
       )}

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

@@ -31,6 +31,7 @@
 .connectorNameText {
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: variables.$spacing-lg;
 }
 
 .streamsHeader {
@@ -83,7 +84,7 @@
 }
 
 .globalConfigButton {
-  margin-top: variables.$spacing-xl;
+  margin-top: variables.$spacing-sm;
 }
 
 .streamList {

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

@@ -1,4 +1,4 @@
-import { faSliders } from "@fortawesome/free-solid-svg-icons";
+import { faSliders, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
 import { useFormikContext } from "formik";
@@ -76,7 +76,7 @@ export const BuilderSidebar: React.FC<BuilderSidebarProps> = ({ className, toggl
   };
   const handleViewSelect = (selectedView: BuilderView) => {
     setSelectedView(selectedView);
-    if (selectedView !== "global") {
+    if (selectedView !== "global" && selectedView !== "inputs") {
       setTestStreamIndex(selectedView);
     }
   };
@@ -108,6 +108,16 @@ export const BuilderSidebar: React.FC<BuilderSidebarProps> = ({ className, toggl
         <FormattedMessage id="connectorBuilder.globalConfiguration" />
       </ViewSelectButton>
 
+      <ViewSelectButton
+        showErrorIndicator={false}
+        className={styles.globalConfigButton}
+        selected={selectedView === "inputs"}
+        onClick={() => handleViewSelect("inputs")}
+      >
+        <FontAwesomeIcon icon={faUser} />
+        <FormattedMessage id="connectorBuilder.userInputs" values={{ number: values.inputs.length }} />
+      </ViewSelectButton>
+
       <div className={styles.streamsHeader}>
         <Text className={styles.streamsHeading} size="xs" bold>
           <FormattedMessage id="connectorBuilder.streamsHeading" values={{ number: values.streams.length }} />

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

@@ -14,7 +14,7 @@ export const GlobalConfigView: React.FC = () => {
       {/* Not using intl for the labels and tooltips in this component in order to keep maintainence simple */}
       <BuilderTitle path="global.connectorName" label="Connector Name" size="lg" />
       <BuilderCard className={styles.content}>
-        <BuilderField type="text" path="global.urlBase" label="API URL" tooltip="Base URL of the source API" />
+        <BuilderField type="string" path="global.urlBase" label="API URL" tooltip="Base URL of the source API" />
       </BuilderCard>
     </BuilderConfigView>
   );

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

@@ -0,0 +1,51 @@
+@use "scss/variables";
+@use "scss/colors";
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-md;
+  list-style-type: none;
+  padding: 0;
+  align-items: stretch;
+  margin: 0;
+}
+
+.listItem {
+  display: flex;
+  align-items: center;
+}
+
+.itemLabel {
+  flex-grow: 1;
+  font-size: 16px;
+}
+
+.itemButton {
+  background: none !important;
+  border: none !important;
+  padding: variables.$spacing-xs;
+}
+
+.inputForm {
+  gap: variables.$spacing-lg;
+  display: flex;
+  flex-direction: column;
+}
+
+.inputsDescription {
+  margin-top: variables.$spacing-xl;
+  margin-bottom: variables.$spacing-lg;
+}
+
+.addInputButton {
+  align-self: center;
+}
+
+.inputsCard {
+  align-self: stretch;
+}
+
+.deleteButtonContainer {
+  flex-grow: 1;
+}