add copy stream button

Author: Joe Reuter

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

@@ -1,5 +1,6 @@
 import { Form, Formik, useField } from "formik";
 import { useState } from "react";
+import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { Button } from "components/ui/Button";
@@ -19,39 +20,46 @@ interface AddStreamValues {
 
 interface AddStreamButtonProps {
  onAddStream: (addedStreamNum: number) => void;
+ button?: React.ReactElement;
+ initialValues?: Partial<BuilderStream>;
 }
 
-export const AddStreamButton: React.FC<AddStreamButtonProps> = ({ onAddStream }) => {
+export const AddStreamButton: React.FC<AddStreamButtonProps> = ({ onAddStream, button, initialValues }) => {
  const { formatMessage } = useIntl();
  const [isOpen, setIsOpen] = useState(false);
  const [streamsField, , helpers] = useField<BuilderStream[]>("streams");
  const numStreams = streamsField.value.length;
 
+ const buttonClickHandler = () => {
+ setIsOpen(true);
+ };
+
  return (
  <>
- <Button
- className={styles.addButton}
- onClick={() => {
-  setIsOpen(true);
-  }}
- icon={<PlusIcon />}
- />
+ {button ? (
+ React.cloneElement(button, {
+  onClick: buttonClickHandler,
+ })
+ ) : (
+ <Button className={styles.addButton} onClick={buttonClickHandler} icon={<PlusIcon />} />
+ )}
  {isOpen && (
  <Formik
  initialValues={{ streamName: "", urlPath: "" }}
  onSubmit={(values: AddStreamValues) => {
  helpers.setValue([
  ...streamsField.value,
  {
- name: values.streamName,
- urlPath: values.urlPath,
  fieldPointer: [],
  httpMethod: "GET",
  requestOptions: {
  requestParameters: [],
  requestHeaders: [],
  requestBody: [],
  },
+ ...initialValues,
+ name: values.streamName,
+ urlPath: values.urlPath,
  },
  ]);
  setIsOpen(false);

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

@@ -1,27 +1,33 @@
 @use "scss/variables";
 @use "scss/colors";
 
-$deleteButtonWidth: 24px;
+$controlButtonWidth: 24px;
 
 .controls {
  display: flex;
  justify-content: center;
 }
 
-.deleteButton {
+.controlButton {
  border: none;
  background-color: transparent;
  color: colors.$grey-400;
  border-radius: variables.$border-radius-xs;
- width: $deleteButtonWidth;
- height: $deleteButtonWidth;
+ width: $controlButtonWidth;
+ height: $controlButtonWidth;
  padding: variables.$spacing-xs;
  padding: 0;
  cursor: pointer;
  transition: variables.$transition;
 
  &:hover {
  color: colors.$white;
+ background-color: colors.$grey-800;
+ }
+}
+
+.deleteButton {
+ &:hover {
  background-color: colors.$red;
  }
 }

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

@@ -1,12 +1,14 @@
-import { faTrashCan } from "@fortawesome/free-regular-svg-icons";
+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 { useConfirmationModalService } from "hooks/services/ConfirmationModal";
 import { BuilderView, useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { BuilderStream } from "../types";
+import { AddStreamButton } from "./AddStreamButton";
 import { BuilderCard } from "./BuilderCard";
 import { BuilderConfigView } from "./BuilderConfigView";
 import { BuilderField } from "./BuilderField";
@@ -49,7 +51,19 @@ 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}>
- <button className={styles.deleteButton} type="button" onClick={handleDelete}>
+ <AddStreamButton
+ onAddStream={(addedStreamNum) => {
+ setSelectedView(addedStreamNum);
+ setTestStreamIndex(addedStreamNum);
+ }}
+ initialValues={field.value[streamNum]}
+ button={
+ <button className={styles.controlButton} type="button" onClick={handleDelete}>
+ <FontAwesomeIcon icon={faCopy} />
+ </button>
+ }
+ />
+ <button className={classNames(styles.deleteButton, styles.controlButton)} type="button" onClick={handleDelete}>
  <FontAwesomeIcon icon={faTrashCan} />
  </button>
  </div>