From 4a9b3bb046e8a9b8e94d006fb01d92f7d38f523e Mon Sep 17 00:00:00 2001
From: lmossman <lake@airbyte.io>
Date: Mon, 19 Dec 2022 18:27:30 -0800
Subject: [PATCH 1/3] move add button into line

---
 .../GroupControls/GroupControls.module.scss        |  3 +--
 .../src/components/GroupControls/GroupControls.tsx | 14 +++++++++++---
 .../connectorBuilder/Builder/KeyValueListField.tsx | 14 ++++++++------
 .../Sections/ConditionSection.module.scss          |  3 +++
 .../components/Sections/ConditionSection.tsx       |  4 +++-
 5 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.module.scss

diff --git a/airbyte-webapp/src/components/GroupControls/GroupControls.module.scss b/airbyte-webapp/src/components/GroupControls/GroupControls.module.scss
index 7da33c2358ef9..dd0761d0e766c 100644
--- a/airbyte-webapp/src/components/GroupControls/GroupControls.module.scss
+++ b/airbyte-webapp/src/components/GroupControls/GroupControls.module.scss
@@ -36,11 +36,10 @@ $border-width: variables.$border-thick;
   white-space: nowrap;
 }
 
-.dropdown {
+.control {
   margin-left: auto;
   padding: 0 variables.$spacing-xs;
   background-color: colors.$white;
-  min-width: calc(50% - 100px);
 }
 
 .content {
diff --git a/airbyte-webapp/src/components/GroupControls/GroupControls.tsx b/airbyte-webapp/src/components/GroupControls/GroupControls.tsx
index 580e8c1fad1d9..c69eb8bcbf6dc 100644
--- a/airbyte-webapp/src/components/GroupControls/GroupControls.tsx
+++ b/airbyte-webapp/src/components/GroupControls/GroupControls.tsx
@@ -1,21 +1,29 @@
+import classNames from "classnames";
 import React from "react";
 
 import styles from "./GroupControls.module.scss";
 
 interface GroupControlsProps {
   label: React.ReactNode;
-  dropdown?: React.ReactNode;
+  control?: React.ReactNode;
+  controlClassName?: string;
   name?: string;
 }
 
-const GroupControls: React.FC<React.PropsWithChildren<GroupControlsProps>> = ({ label, dropdown, children, name }) => {
+const GroupControls: React.FC<React.PropsWithChildren<GroupControlsProps>> = ({
+  label,
+  control,
+  children,
+  name,
+  controlClassName,
+}) => {
   return (
     // This outer div is necessary for .content > :first-child padding to be properly applied in the case of nested GroupControls
     <div>
       <div className={styles.container}>
         <div className={styles.title}>
           <div className={styles.label}>{label}</div>
-          <div className={styles.dropdown}>{dropdown}</div>
+          <div className={classNames(styles.control, controlClassName)}>{control}</div>
         </div>
         <div className={styles.content} data-testid={name}>
           {children}
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/KeyValueListField.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/KeyValueListField.tsx
index d66655fe1981f..04c7b77f3619e 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/KeyValueListField.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/KeyValueListField.tsx
@@ -49,7 +49,14 @@ export const KeyValueListField: React.FC<KeyValueListFieldProps> = ({ path, labe
   const [{ value: keyValueList }, , { setValue: setKeyValueList }] = useField<Array<[string, string]>>(path);
 
   return (
-    <GroupControls label={<ControlLabels label={label} infoTooltipContent={tooltip} />}>
+    <GroupControls
+      label={<ControlLabels label={label} infoTooltipContent={tooltip} />}
+      control={
+        <Button variant="secondary" onClick={() => setKeyValueList([...keyValueList, ["", ""]])}>
+          <FormattedMessage id="connectorBuilder.addKeyValue" />
+        </Button>
+      }
+    >
       {keyValueList.map((keyValue, keyValueIndex) => (
         <KeyValueInput
           key={keyValueIndex}
@@ -64,11 +71,6 @@ export const KeyValueListField: React.FC<KeyValueListFieldProps> = ({ path, labe
           }}
         />
       ))}
-      <div>
-        <Button variant="secondary" onClick={() => setKeyValueList([...keyValueList, ["", ""]])}>
-          <FormattedMessage id="connectorBuilder.addKeyValue" />
-        </Button>
-      </div>
     </GroupControls>
   );
 };
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.module.scss b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.module.scss
new file mode 100644
index 0000000000000..c9c2ad453ba27
--- /dev/null
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.module.scss
@@ -0,0 +1,3 @@
+.dropdown {
+  min-width: calc(50% - 100px);
+}
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.tsx
index 6550a2602b59f..2799695fb93c9 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.tsx
@@ -9,6 +9,7 @@ import { isDefined } from "utils/common";
 
 import { useConnectorForm } from "../../connectorFormContext";
 import { ConnectorFormValues } from "../../types";
+import styles from "./ConditionSection.module.scss";
 import { FormSection } from "./FormSection";
 import { GroupLabel } from "./GroupLabel";
 import { SectionContainer } from "./SectionContainer";
@@ -67,7 +68,7 @@ export const ConditionSection: React.FC<ConditionSectionProps> = ({ formField, p
       <GroupControls
         key={`form-field-group-${formField.fieldKey}`}
         label={<GroupLabel formField={formField} />}
-        dropdown={
+        control={
           <DropDown
             options={options}
             onChange={onOptionChange}
@@ -77,6 +78,7 @@ export const ConditionSection: React.FC<ConditionSectionProps> = ({ formField, p
             error={typeof meta.error === "string" && !!meta.error}
           />
         }
+        controlClassName={styles.dropdown}
       >
         <FormSection
           blocks={formField.conditions[currentlySelectedCondition]}

From 81181f7768ca07af5161b771efe953c40ddfc8d3 Mon Sep 17 00:00:00 2001
From: lmossman <lake@airbyte.io>
Date: Tue, 20 Dec 2022 16:47:23 -0800
Subject: [PATCH 2/3] add stories for empty with control, and content + control

---
 .../GroupControls/index.stories.tsx           | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/airbyte-webapp/src/components/GroupControls/index.stories.tsx b/airbyte-webapp/src/components/GroupControls/index.stories.tsx
index 414aec31cac69..fe817787710ff 100644
--- a/airbyte-webapp/src/components/GroupControls/index.stories.tsx
+++ b/airbyte-webapp/src/components/GroupControls/index.stories.tsx
@@ -1,5 +1,6 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
+import { Button } from "components/ui/Button";
 import { Card } from "components/ui/Card";
 
 import { FormBlock, FormConditionItem } from "core/form/types";
@@ -71,3 +72,21 @@ WithContent.args = {
     </>
   ),
 };
+
+export const EmptyWithControl = Template.bind({});
+EmptyWithControl.args = {
+  label,
+  control: <Button variant="secondary">Test</Button>,
+};
+
+export const ControlAndContent = Template.bind({});
+ControlAndContent.args = {
+  label,
+  control: <Button variant="secondary">Test</Button>,
+  children: (
+    <>
+      <SectionContainer>Content part 1</SectionContainer>
+      <SectionContainer>Content part 2</SectionContainer>
+    </>
+  ),
+};

From 6b04586c9163095e821db7d73db6b240b54b8847 Mon Sep 17 00:00:00 2001
From: lmossman <lake@airbyte.io>
Date: Tue, 20 Dec 2022 16:47:55 -0800
Subject: [PATCH 3/3] change button name to Control

---
 airbyte-webapp/src/components/GroupControls/index.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/airbyte-webapp/src/components/GroupControls/index.stories.tsx b/airbyte-webapp/src/components/GroupControls/index.stories.tsx
index fe817787710ff..973172136f478 100644
--- a/airbyte-webapp/src/components/GroupControls/index.stories.tsx
+++ b/airbyte-webapp/src/components/GroupControls/index.stories.tsx
@@ -76,13 +76,13 @@ WithContent.args = {
 export const EmptyWithControl = Template.bind({});
 EmptyWithControl.args = {
   label,
-  control: <Button variant="secondary">Test</Button>,
+  control: <Button variant="secondary">Control</Button>,
 };
 
 export const ControlAndContent = Template.bind({});
 ControlAndContent.args = {
   label,
-  control: <Button variant="secondary">Test</Button>,
+  control: <Button variant="secondary">Control</Button>,
   children: (
     <>
       <SectionContainer>Content part 1</SectionContainer>