🪟🎉 Connector builder: Substream slicer and cartesian slicer

airbyte-webapp/package.json

@@ -40,6 +40,7 @@
     "@sentry/tracing": "^6.19.6",
     "@tanstack/react-table": "^8.7.0",
     "@types/segment-analytics": "^0.0.34",
+    "@types/uuid": "^9.0.0",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.3",
     "firebase": "^9.8.2",
@@ -80,6 +81,7 @@
     "styled-components": "^5.3.5",
     "typesafe-actions": "^5.1.0",
     "unist-util-visit": "^4.1.0",
+    "uuid": "^9.0.0",
     "yup": "^0.32.11"
   },
   "devDependencies": {

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

@@ -3,6 +3,7 @@ import merge from "lodash/merge";
 import { useState } from "react";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { v4 as uuid } from "uuid";
 import * as yup from "yup";
 
 import { Button } from "components/ui/Button";
@@ -55,6 +56,7 @@ export const AddStreamButton: React.FC<AddStreamButtonProps> = ({ onAddStream, b
                 ...initialValues,
                 name: values.streamName,
                 urlPath: values.urlPath,
+                id: uuid(),
               }),
             ]);
             setIsOpen(false);

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

@@ -0,0 +1,13 @@
+@use "scss/variables";
+@use "scss/colors";
+
+$removeButtonWidth: 20px;
+
+.itemWrapper {
+  display: flex;
+  gap: variables.$spacing-md;
+}
+
+.itemContainer {
+  flex-grow: 1;
+}

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

@@ -0,0 +1,55 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useField } from "formik";
+import React, { ReactElement, useMemo } from "react";
+import { FormattedMessage } from "react-intl";
+
+import { Button } from "components/ui/Button";
+
+import styles from "./BuilderList.module.scss";
+import { RemoveButton } from "./RemoveButton";
+
+interface BuilderListProps {
+  children: (props: { buildPath: (path: string) => string }) => ReactElement;
+  basePath: string;
+  emptyItem: object;
+}
+
+export const BuilderList: React.FC<BuilderListProps> = ({ children, emptyItem, basePath }) => {
+  const [list, , helpers] = useField<object[]>(basePath);
+
+  const buildPathFunctions = useMemo(
+    () =>
+      new Array(list.value.length).fill(undefined).map((_value, index) => {
+        return (path: string) => `${basePath}[${index}]${path !== "" ? "." : ""}${path}`;
+      }),
+    [basePath, list.value.length]
+  );
+
+  return (
+    <>
+      {buildPathFunctions.map((buildPath, currentItemIndex) => (
+        <div className={styles.itemWrapper} key={currentItemIndex}>
+          <div className={styles.itemContainer}>{children({ buildPath })}</div>
+          <RemoveButton
+            onClick={() => {
+              const updatedItems = list.value.filter((_, index) => index !== currentItemIndex);
+              helpers.setValue(updatedItems);
+            }}
+          />
+        </div>
+      ))}
+      <div>
+        <Button
+          variant="secondary"
+          icon={<FontAwesomeIcon icon={faPlus} />}
+          onClick={() => {
+            helpers.setValue([...list.value, { ...emptyItem }]);
+          }}
+        >
+          <FormattedMessage id="connectorBuilder.addNewSlicer" />
+        </Button>
+      </div>
+    </>
+  );
+};

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

@@ -11,7 +11,7 @@ interface Option {
   default?: object;
 }
 
-interface OneOfOption {
+export interface OneOfOption {
   label: string; // label shown in the dropdown menu
   typeValue: string; // value to set on the `type` field for this component - should match the oneOf type definition
   default?: object; // default values for the path

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

@@ -21,19 +21,3 @@ $removeButtonWidth: 20px;
 .kvLabel {
   color: colors.$grey-400;
 }
-
-.removeButton {
-  border: none;
-  background-color: transparent;
-  color: colors.$grey;
-  cursor: pointer;
-  padding: 0;
-  width: $removeButtonWidth;
-  height: $removeButtonWidth;
-  font-size: 18px;
-  transition: variables.$transition;
-
-  &:hover {
-    color: colors.$red;
-  }
-}

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

@@ -1,5 +1,3 @@
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useField } from "formik";
 import { FormattedMessage } from "react-intl";
 
@@ -10,6 +8,7 @@ import { Input } from "components/ui/Input";
 import { Text } from "components/ui/Text";
 
 import styles from "./KeyValueListField.module.scss";
+import { RemoveButton } from "./RemoveButton";
 
 interface KeyValueInputProps {
   keyValue: [string, string];
@@ -32,9 +31,7 @@ const KeyValueInput: React.FC<KeyValueInputProps> = ({ keyValue, onChange, onRem
         </Text>
         <Input value={keyValue[1]} onChange={(e) => onChange([keyValue[0], e.target.value])} />
       </div>
-      <button type="button" className={styles.removeButton} onClick={onRemove}>
-        <FontAwesomeIcon icon={faXmark} size="1x" />
-      </button>
+      <RemoveButton onClick={onRemove} />
     </div>
   );
 };

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

@@ -0,0 +1,20 @@
+@use "scss/variables";
+@use "scss/colors";
+
+$removeButtonWidth: 20px;
+
+.removeButton {
+  border: none;
+  background-color: transparent;
+  color: colors.$grey;
+  cursor: pointer;
+  padding: 0;
+  width: $removeButtonWidth;
+  height: $removeButtonWidth;
+  font-size: 18px;
+  transition: variables.$transition;
+
+  &:hover {
+    color: colors.$red;
+  }
+}

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

@@ -0,0 +1,12 @@
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import styles from "./RemoveButton.module.scss";
+
+export const RemoveButton = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <button className={styles.removeButton} onClick={onClick}>
+      <FontAwesomeIcon icon={faXmark} />
+    </button>
+  );
+};

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

@@ -0,0 +1,58 @@
+import { useField } from "formik";
+import { useMemo } from "react";
+import { FormattedMessage } from "react-intl";
+
+import { ControlLabels } from "components/LabeledControl";
+import { DropDown } from "components/ui/DropDown";
+import { Text } from "components/ui/Text";
+
+import { BuilderStream } from "../types";
+import styles from "./BuilderField.module.scss";
+
+interface StreamReferenceFieldProps {
+  // path to the location in the Connector Manifest schema which should be set by this component
+  path: string;
+  label: string;
+  tooltip?: string;
+  optional?: boolean;
+  currentStreamIndex: number;
+}
+
+export const StreamReferenceField: React.FC<StreamReferenceFieldProps> = ({
+  path,
+  label,
+  tooltip,
+  optional,
+  currentStreamIndex,
+  ...props
+}) => {
+  const [streams] = useField<BuilderStream[]>("streams");
+  const [field, meta, helpers] = useField(path);
+  const hasError = !!meta.error && meta.touched;
+
+  const options = useMemo(() => {
+    return streams.value
+      .filter((_value, index) => index !== currentStreamIndex)
+      .map((stream) => ({
+        value: stream.id,
+        label: stream.name,
+      }));
+  }, [currentStreamIndex, streams.value]);
+
+  return (
+    <ControlLabels className={styles.container} label={label} infoTooltipContent={tooltip} optional={optional}>
+      <DropDown
+        {...props}
+        options={options}
+        onChange={(selected) => selected && helpers.setValue(selected.value)}
+        value={field.value}
+        error={hasError}
+      />
+      {hasError && (
+        <Text className={styles.error}>
+          <FormattedMessage id={meta.error} />
+        </Text>
+      )}
+    </ControlLabels>
+  );
+};