From 02c80964423c60cbe14f12be6a07c0217b57d243 Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Mon, 19 Dec 2022 18:15:58 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=F0=9F=8E=89=20Add=20copy=20stream?=
 =?UTF-8?q?=20button=20(#20577)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add copy stream button

* review comments
---
 .../Builder/AddStreamButton.tsx               | 28 ++++++++++++-------
 .../Builder/StreamConfigView.module.scss      | 15 +++++++---
 .../Builder/StreamConfigView.tsx              | 18 ++++++++++--
 3 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx
index 274ca47e84d0..6a368fa5b319 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx
+++ b/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,23 +20,29 @@ 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: "" }}
@@ -43,8 +50,6 @@ export const AddStreamButton: React.FC<AddStreamButtonProps> = ({ onAddStream })
             helpers.setValue([
               ...streamsField.value,
               {
-                name: values.streamName,
-                urlPath: values.urlPath,
                 fieldPointer: [],
                 httpMethod: "GET",
                 requestOptions: {
@@ -52,6 +57,9 @@ export const AddStreamButton: React.FC<AddStreamButtonProps> = ({ onAddStream })
                   requestHeaders: [],
                   requestBody: [],
                 },
+                ...initialValues,
+                name: values.streamName,
+                urlPath: values.urlPath,
               },
             ]);
             setIsOpen(false);
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/StreamConfigView.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/StreamConfigView.module.scss
index f59cc288f5b9..bfb25201dc5e 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/StreamConfigView.module.scss
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/StreamConfigView.module.scss
@@ -1,20 +1,21 @@
 @use "scss/variables";
 @use "scss/colors";
 
-$deleteButtonWidth: 24px;
+$controlButtonWidth: 24px;
 
 .controls {
   display: flex;
   justify-content: center;
+  gap: variables.$spacing-sm;
 }
 
-.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;
@@ -22,6 +23,12 @@ $deleteButtonWidth: 24px;
 
   &:hover {
     color: colors.$white;
+    background-color: colors.$grey-800;
+  }
+}
+
+.deleteButton {
+  &:hover {
     background-color: colors.$red;
   }
 }
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/StreamConfigView.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/StreamConfigView.tsx
index d212d530f20e..372c730c3f05 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/StreamConfigView.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/StreamConfigView.tsx
@@ -1,5 +1,6 @@
-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";
 
@@ -7,6 +8,7 @@ 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">
+              <FontAwesomeIcon icon={faCopy} />
+            </button>
+          }
+        />
+        <button className={classNames(styles.deleteButton, styles.controlButton)} type="button" onClick={handleDelete}>
           <FontAwesomeIcon icon={faTrashCan} />
         </button>
       </div>