🪟 🎨 Move Add button into the line of Connector Builder key value li…

…st fields (#20699)

* move add button into line

* add stories for empty with control, and content + control

* change button name to Control

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 {

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}

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";
@@ -73,3 +74,21 @@ WithContent.args = {
     </>
   ),
 };
+
+export const EmptyWithControl = Template.bind({});
+EmptyWithControl.args = {
+  label,
+  control: <Button variant="secondary">Control</Button>,
+};
+
+export const ControlAndContent = Template.bind({});
+ControlAndContent.args = {
+  label,
+  control: <Button variant="secondary">Control</Button>,
+  children: (
+    <>
+      <SectionContainer>Content part 1</SectionContainer>
+      <SectionContainer>Content part 2</SectionContainer>
+    </>
+  ),
+};

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>
   );
 };

airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.module.scss

@@ -0,0 +1,3 @@
+.dropdown {
+  min-width: calc(50% - 100px);
+}

airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.tsx

@@ -9,6 +9,7 @@ import { FormBlock, FormConditionItem } from "core/form/types";
 import { isDefined } from "utils/common";
 
 import { ConnectorFormValues } from "../../types";
+import styles from "./ConditionSection.module.scss";
 import { FormSection } from "./FormSection";
 import { GroupLabel } from "./GroupLabel";
 import { SectionContainer } from "./SectionContainer";
@@ -70,7 +71,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}
@@ -80,6 +81,7 @@ export const ConditionSection: React.FC<ConditionSectionProps> = ({ formField, p
             error={typeof meta.error === "string" && !!meta.error}
           />
         }
+        controlClassName={styles.dropdown}
       >
         {/* currentlySelectedCondition is only falsy if a malformed config is loaded which doesn't have a valid value for the const selection key. In this case, render the selection group as empty. */}
         {typeof currentlySelectedCondition !== "undefined" && (