🪟🎉 Connector builder: Add manual schema

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

@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: variables.$spacing-md;
+  height: 100%;
 }
 
 .heading {

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

@@ -11,6 +11,7 @@ export const BuilderOptional: React.FC<React.PropsWithChildren<unknown>> = ({ ch
   return (
     <div className={styles.wrapper}>
       <button
+        type="button"
         onClick={() => {
           setIsOpen(!isOpen);
         }}

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

@@ -6,7 +6,8 @@ $controlButtonWidth: 24px;
 .controls {
   display: flex;
   justify-content: center;
-  gap: variables.$spacing-sm;
+  align-items: center;
+  gap: variables.$spacing-md;
 }
 
 .controlButton {
@@ -32,3 +33,28 @@ $controlButtonWidth: 24px;
     background-color: colors.$red;
   }
 }
+
+.tab {
+  background: none;
+  border: none;
+  padding: variables.$spacing-md;
+  border-bottom: variables.$border-thick solid transparent;
+  color: colors.$grey-400;
+  cursor: pointer;
+  display: flex;
+  gap: variables.$spacing-md;
+  align-items: center;
+}
+
+.selectedTab {
+  color: colors.$black;
+  border-bottom-color: colors.$yellow-900;
+}
+
+.errorMessage {
+  color: colors.$red;
+}
+
+.schemaEditor {
+  height: 100%;
+}

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

@@ -1,8 +1,13 @@
 import { faTrashCan, faCopy } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
-import { useField } from "formik";
-import { useIntl } from "react-intl";
+import { FormikErrors, useField } from "formik";
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import Indicator from "components/Indicator";
+import { CodeEditor } from "components/ui/CodeEditor";
+import { Text } from "components/ui/Text";
 
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
 import { BuilderView, useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
@@ -23,14 +28,22 @@ interface StreamConfigViewProps {
 }
 
 export const StreamConfigView: React.FC<StreamConfigViewProps> = ({ streamNum }) => {
+  const streamPath = `streams[${streamNum}]`;
+  const streamFieldPath = (fieldPath: string) => `${streamPath}.${fieldPath}`;
+
   const { formatMessage } = useIntl();
-  const [field, , helpers] = useField<BuilderStream[]>("streams");
+  const [field, meta, helpers] = useField<BuilderStream[]>("streams");
+  const currentStreamErrors = meta.error?.[streamNum] as FormikErrors<BuilderStream>;
+  const hasSchemaErrors = Boolean(currentStreamErrors?.schema);
+  const hasConfigErrors = Boolean(
+    Object.keys(currentStreamErrors || {}).filter((errorKey) => errorKey !== "schema").length > 0
+  );
+  const [selectedTab, setSelectedTab] = useState<"configuration" | "schema">(
+    hasSchemaErrors && !hasConfigErrors ? "schema" : "configuration"
+  );
   const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
   const { setSelectedView, setTestStreamIndex } = useConnectorBuilderState();
 
-  const streamPath = `streams[${streamNum}]`;
-  const streamFieldPath = (fieldPath: string) => `${streamPath}.${fieldPath}`;
-
   const handleDelete = () => {
     openConfirmationModal({
       text: "connectorBuilder.deleteStreamModal.text",
@@ -53,6 +66,18 @@ export const StreamConfigView: React.FC<StreamConfigViewProps> = ({ streamNum })
       {/* Not using intl for the labels and tooltips in this component in order to keep maintainence simple */}
       <BuilderTitle path={streamFieldPath("name")} label="Stream Name" size="md" />
       <div className={styles.controls}>
+        <StreamTab
+          label={formatMessage({ id: "connectorBuilder.streamConfiguration" })}
+          selected={selectedTab === "configuration"}
+          onSelect={() => setSelectedTab("configuration")}
+          showErrorIndicator={hasConfigErrors}
+        />
+        <StreamTab
+          label={formatMessage({ id: "connectorBuilder.streamSchema" })}
+          selected={selectedTab === "schema"}
+          onSelect={() => setSelectedTab("schema")}
+          showErrorIndicator={hasSchemaErrors}
+        />
         <AddStreamButton
           onAddStream={(addedStreamNum) => {
             setSelectedView(addedStreamNum);
@@ -69,53 +94,100 @@ export const StreamConfigView: React.FC<StreamConfigViewProps> = ({ streamNum })
           <FontAwesomeIcon icon={faTrashCan} />
         </button>
       </div>
-      <BuilderCard>
-        <BuilderField
-          type="string"
-          path={streamFieldPath("urlPath")}
-          label="Path URL"
-          tooltip="Path of the endpoint that this stream represents."
-        />
-        <BuilderField
-          type="enum"
-          path={streamFieldPath("httpMethod")}
-          options={["GET", "POST"]}
-          label="HTTP Method"
-          tooltip="HTTP method to use for requests sent to the API"
-        />
-        <BuilderField
-          type="array"
-          path={streamFieldPath("fieldPointer")}
-          label="Record selector"
-          tooltip="Pointer into the response that should be extracted as the final record"
-        />
-        <BuilderField
-          type="array"
-          path={streamFieldPath("primaryKey")}
-          label="Primary key"
-          tooltip="Pointer into the response that should be used as the primary key when deduplicating records in the destination"
-          optional
-        />
-      </BuilderCard>
-      <PaginationSection streamFieldPath={streamFieldPath} />
-      <StreamSlicerSection streamFieldPath={streamFieldPath} />
-      <BuilderCard>
-        <KeyValueListField
-          path={streamFieldPath("requestOptions.requestParameters")}
-          label="Request Parameters"
-          tooltip="Parameters to attach to API requests"
-        />
-        <KeyValueListField
-          path={streamFieldPath("requestOptions.requestHeaders")}
-          label="Request Headers"
-          tooltip="Headers to attach to API requests"
-        />
-        <KeyValueListField
-          path={streamFieldPath("requestOptions.requestBody")}
-          label="Request Body"
-          tooltip="Body to attach to API requests as url-encoded form values"
-        />
-      </BuilderCard>
+      {selectedTab === "configuration" ? (
+        <>
+          <BuilderCard>
+            <BuilderField
+              type="string"
+              path={streamFieldPath("urlPath")}
+              label="Path URL"
+              tooltip="Path of the endpoint that this stream represents."
+            />
+            <BuilderField
+              type="enum"
+              path={streamFieldPath("httpMethod")}
+              options={["GET", "POST"]}
+              label="HTTP Method"
+              tooltip="HTTP method to use for requests sent to the API"
+            />
+            <BuilderField
+              type="array"
+              path={streamFieldPath("fieldPointer")}
+              label="Record selector"
+              tooltip="Pointer into the response that should be extracted as the final record"
+            />
+            <BuilderField
+              type="array"
+              path={streamFieldPath("primaryKey")}
+              label="Primary key"
+              tooltip="Pointer into the response that should be used as the primary key when deduplicating records in the destination"
+              optional
+            />
+          </BuilderCard>
+          <PaginationSection streamFieldPath={streamFieldPath} />
+          <StreamSlicerSection streamFieldPath={streamFieldPath} />
+          <BuilderCard>
+            <KeyValueListField
+              path={streamFieldPath("requestOptions.requestParameters")}
+              label="Request Parameters"
+              tooltip="Parameters to attach to API requests"
+            />
+            <KeyValueListField
+              path={streamFieldPath("requestOptions.requestHeaders")}
+              label="Request Headers"
+              tooltip="Headers to attach to API requests"
+            />
+            <KeyValueListField
+              path={streamFieldPath("requestOptions.requestBody")}
+              label="Request Body"
+              tooltip="Body to attach to API requests as url-encoded form values"
+            />
+          </BuilderCard>
+        </>
+      ) : (
+        <BuilderCard className={styles.schemaEditor}>
+          <SchemaEditor streamFieldPath={streamFieldPath} />
+        </BuilderCard>
+      )}
     </BuilderConfigView>
   );
 };
+
+const StreamTab = ({
+  selected,
+  label,
+  onSelect,
+  showErrorIndicator,
+}: {
+  selected: boolean;
+  label: string;
+  onSelect: () => void;
+  showErrorIndicator?: boolean;
+}) => (
+  <button type="button" className={classNames(styles.tab, { [styles.selectedTab]: selected })} onClick={onSelect}>
+    {label}
+    {showErrorIndicator && <Indicator />}
+  </button>
+);
+
+const SchemaEditor = ({ streamFieldPath }: { streamFieldPath: (fieldPath: string) => string }) => {
+  const [field, meta, helpers] = useField<string | undefined>(streamFieldPath("schema"));
+
+  return (
+    <>
+      <CodeEditor
+        value={field.value || ""}
+        language="json"
+        theme="airbyte-light"
+        onChange={(val: string | undefined) => {
+          helpers.setValue(val);
+        }}
+      />
+      {meta.error && (
+        <Text className={styles.errorMessage}>
+          <FormattedMessage id={meta.error} />
+        </Text>
+      )}
+    </>
+  );
+};

airbyte-webapp/src/components/connectorBuilder/types.ts

@@ -66,6 +66,7 @@ export interface BuilderStream {
   };
   paginator?: BuilderPaginator;
   streamSlicer?: SimpleRetrieverStreamSlicer;
+  schema?: string;
 }
 
 export const DEFAULT_BUILDER_FORM_VALUES: BuilderFormValues = {
@@ -274,6 +275,20 @@ export const builderFormValidationSchema = yup.object().shape({
         requestHeaders: yup.array().of(yup.array().of(yup.string())),
         requestBody: yup.array().of(yup.array().of(yup.string())),
       }),
+      schema: yup.string().test({
+        test: (val: string | undefined) => {
+          if (!val) {
+            return true;
+          }
+          try {
+            JSON.parse(val);
+            return true;
+          } catch {
+            return false;
+          }
+        },
+        message: "connectorBuilder.invalidSchema",
+      }),
       paginator: yup
         .object()
         .shape({
@@ -394,12 +409,24 @@ function builderFormAuthenticatorToAuthenticator(
   return globalSettings.authenticator as HttpRequesterAuthenticator;
 }
 
+function parseSchemaString(schema?: string) {
+  if (!schema) {
+    return undefined;
+  }
+  try {
+    return { type: "InlineSchemaLoader", schema: JSON.parse(schema) };
+  } catch {
+    return undefined;
+  }
+}
+
 export const convertToManifest = (values: BuilderFormValues): ConnectorManifest => {
   const manifestStreams: DeclarativeStream[] = values.streams.map((stream) => {
     return {
       type: "DeclarativeStream",
       name: stream.name,
       primary_key: stream.primaryKey,
+      schema_loader: parseSchemaString(stream.schema),
       retriever: {
         type: "SimpleRetriever",
         name: stream.name,

airbyte-webapp/src/locales/en.json

@@ -721,6 +721,9 @@
   "connectorBuilder.inputsButton": "Inputs",
   "connectorBuilder.optionalFieldsLabel": "Optional fields",
   "connectorBuilder.duplicateFieldID": "Make sure no field ID is used multiple times",
+  "connectorBuilder.streamConfiguration": "Configuration",
+  "connectorBuilder.streamSchema": "Schema",
+  "connectorBuilder.invalidSchema": "Invalid JSON - please fix schema to have it applied",
 
   "jobs.noAttemptsFailure": "Failed to start job.",