From 94477e4db952428218fc185b83cadd7bc36f6f80 Mon Sep 17 00:00:00 2001
From: Lake Mossman <lake@airbyte.io>
Date: Mon, 5 Dec 2022 16:39:07 -0800
Subject: [PATCH] :window: :wrench: Generify GroupControls to make it more
 reusable (#20004)

* generify GroupControls more

* undo radius change

* use spacing variable
---
 .../GroupControls/GroupControls.module.scss   | 22 +++++-
 .../GroupControls/GroupControls.tsx           | 10 ++-
 .../GroupControls/index.stories.tsx           |  6 +-
 .../components/Sections/ArraySection.tsx      | 79 ++++++++++---------
 .../Sections/ConditionSection.module.scss     |  8 --
 .../components/Sections/ConditionSection.tsx  | 33 ++++----
 .../Sections/GroupLabel.module.scss           | 12 ---
 .../components/Sections/GroupLabel.tsx        | 10 +--
 8 files changed, 87 insertions(+), 93 deletions(-)
 delete mode 100644 airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.module.scss
 delete mode 100644 airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/GroupLabel.module.scss

diff --git a/airbyte-webapp/src/components/GroupControls/GroupControls.module.scss b/airbyte-webapp/src/components/GroupControls/GroupControls.module.scss
index ee2ad793203b..7da33c2358ef 100644
--- a/airbyte-webapp/src/components/GroupControls/GroupControls.module.scss
+++ b/airbyte-webapp/src/components/GroupControls/GroupControls.module.scss
@@ -1,12 +1,11 @@
-@use "../../scss/colors";
-@use "../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 
 $title-height: 34px;
 $group-spacing: variables.$spacing-xl;
 $border-width: variables.$border-thick;
 
 .container {
-  margin-bottom: 27px;
   min-height: $title-height;
   position: relative;
   padding-top: calc($title-height / 2);
@@ -27,6 +26,23 @@ $border-width: variables.$border-thick;
   }
 }
 
+.label {
+  width: auto;
+  height: 100%;
+  padding-right: variables.$spacing-md;
+  display: flex;
+  align-items: center;
+  background-color: colors.$white;
+  white-space: nowrap;
+}
+
+.dropdown {
+  margin-left: auto;
+  padding: 0 variables.$spacing-xs;
+  background-color: colors.$white;
+  min-width: calc(50% - 100px);
+}
+
 .content {
   border-color: colors.$grey-100;
   border-style: solid;
diff --git a/airbyte-webapp/src/components/GroupControls/GroupControls.tsx b/airbyte-webapp/src/components/GroupControls/GroupControls.tsx
index 23eecb0f79e5..580e8c1fad1d 100644
--- a/airbyte-webapp/src/components/GroupControls/GroupControls.tsx
+++ b/airbyte-webapp/src/components/GroupControls/GroupControls.tsx
@@ -3,16 +3,20 @@ import React from "react";
 import styles from "./GroupControls.module.scss";
 
 interface GroupControlsProps {
-  title: React.ReactNode;
+  label: React.ReactNode;
+  dropdown?: React.ReactNode;
   name?: string;
 }
 
-const GroupControls: React.FC<React.PropsWithChildren<GroupControlsProps>> = ({ title, children, name }) => {
+const GroupControls: React.FC<React.PropsWithChildren<GroupControlsProps>> = ({ label, dropdown, children, name }) => {
   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}>{title}</div>
+        <div className={styles.title}>
+          <div className={styles.label}>{label}</div>
+          <div className={styles.dropdown}>{dropdown}</div>
+        </div>
         <div className={styles.content} data-testid={name}>
           {children}
         </div>
diff --git a/airbyte-webapp/src/components/GroupControls/index.stories.tsx b/airbyte-webapp/src/components/GroupControls/index.stories.tsx
index 0ac049aa5e08..414aec31cac6 100644
--- a/airbyte-webapp/src/components/GroupControls/index.stories.tsx
+++ b/airbyte-webapp/src/components/GroupControls/index.stories.tsx
@@ -54,16 +54,16 @@ const conditionFormField: FormConditionItem = {
   path: "section.conditional",
 };
 
-const title = <GroupLabel formField={conditionFormField} />;
+const label = <GroupLabel formField={conditionFormField} />;
 
 export const Empty = Template.bind({});
 Empty.args = {
-  title,
+  label,
 };
 
 export const WithContent = Template.bind({});
 WithContent.args = {
-  title,
+  label,
   children: (
     <>
       <SectionContainer>Content part 1</SectionContainer>
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ArraySection.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ArraySection.tsx
index 16643306d7a0..655adbbce883 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ArraySection.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ArraySection.tsx
@@ -8,6 +8,7 @@ import { TooltipTable } from "components/ui/Tooltip";
 import { FormBlock, FormGroupItem, FormObjectArrayItem } from "core/form/types";
 
 import { GroupLabel } from "./GroupLabel";
+import { SectionContainer } from "./SectionContainer";
 import { VariableInputFieldForm } from "./VariableInputFieldForm";
 
 interface ArraySectionProps {
@@ -67,45 +68,47 @@ export const ArraySection: React.FC<ArraySectionProps> = ({ formField, path, dis
   const clearEditIndex = () => setEditIndex(undefined);
 
   return (
-    <GroupControls
-      name={path}
-      key={`form-variable-fields-${formField?.fieldKey}`}
-      title={<GroupLabel formField={formField} />}
-    >
-      <FieldArray
+    <SectionContainer>
+      <GroupControls
         name={path}
-        render={(arrayHelpers) => (
-          <ArrayOfObjectsEditor
-            editableItemIndex={editIndex}
-            onStartEdit={setEditIndex}
-            onRemove={arrayHelpers.remove}
-            onCancel={clearEditIndex}
-            items={items}
-            renderItemName={renderItemName}
-            renderItemDescription={renderItemDescription}
-            disabled={disabled}
-            editModalSize="sm"
-            renderItemEditorForm={(item) => (
-              <VariableInputFieldForm
-                formField={formField}
-                path={`${path}[${editIndex ?? 0}]`}
-                disabled={disabled}
-                item={item}
-                onDone={(updatedItem) => {
-                  const updatedValue =
-                    editIndex !== undefined && editIndex < items.length
-                      ? items.map((item: unknown, index: number) => (index === editIndex ? updatedItem : item))
-                      : [...items, updatedItem];
+        key={`form-variable-fields-${formField?.fieldKey}`}
+        label={<GroupLabel formField={formField} />}
+      >
+        <FieldArray
+          name={path}
+          render={(arrayHelpers) => (
+            <ArrayOfObjectsEditor
+              editableItemIndex={editIndex}
+              onStartEdit={setEditIndex}
+              onRemove={arrayHelpers.remove}
+              onCancel={clearEditIndex}
+              items={items}
+              renderItemName={renderItemName}
+              renderItemDescription={renderItemDescription}
+              disabled={disabled}
+              editModalSize="sm"
+              renderItemEditorForm={(item) => (
+                <VariableInputFieldForm
+                  formField={formField}
+                  path={`${path}[${editIndex ?? 0}]`}
+                  disabled={disabled}
+                  item={item}
+                  onDone={(updatedItem) => {
+                    const updatedValue =
+                      editIndex !== undefined && editIndex < items.length
+                        ? items.map((item: unknown, index: number) => (index === editIndex ? updatedItem : item))
+                        : [...items, updatedItem];
 
-                  fieldHelper.setValue(updatedValue);
-                  clearEditIndex();
-                }}
-                onCancel={clearEditIndex}
-              />
-            )}
-          />
-        )}
-      />
-    </GroupControls>
+                    fieldHelper.setValue(updatedValue);
+                    clearEditIndex();
+                  }}
+                  onCancel={clearEditIndex}
+                />
+              )}
+            />
+          )}
+        />
+      </GroupControls>
+    </SectionContainer>
   );
 };
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
deleted file mode 100644
index abd86c78739e..000000000000
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use "scss/colors";
-
-.groupDropdown {
-  margin-left: auto;
-  padding: 0 2px;
-  background-color: colors.$white;
-  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 39aa98598b9a..6550a2602b59 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.tsx
@@ -9,9 +9,9 @@ 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";
 
 interface ConditionSectionProps {
   formField: FormConditionItem;
@@ -63,13 +63,12 @@ export const ConditionSection: React.FC<ConditionSectionProps> = ({ formField, p
   );
 
   return (
-    <GroupControls
-      key={`form-field-group-${formField.fieldKey}`}
-      title={
-        <>
-          <GroupLabel formField={formField} />
+    <SectionContainer>
+      <GroupControls
+        key={`form-field-group-${formField.fieldKey}`}
+        label={<GroupLabel formField={formField} />}
+        dropdown={
           <DropDown
-            className={styles.groupDropdown}
             options={options}
             onChange={onOptionChange}
             value={currentlySelectedCondition}
@@ -77,15 +76,15 @@ export const ConditionSection: React.FC<ConditionSectionProps> = ({ formField, p
             isDisabled={disabled}
             error={typeof meta.error === "string" && !!meta.error}
           />
-        </>
-      }
-    >
-      <FormSection
-        blocks={formField.conditions[currentlySelectedCondition]}
-        path={path}
-        disabled={disabled}
-        skipAppend
-      />
-    </GroupControls>
+        }
+      >
+        <FormSection
+          blocks={formField.conditions[currentlySelectedCondition]}
+          path={path}
+          disabled={disabled}
+          skipAppend
+        />
+      </GroupControls>
+    </SectionContainer>
   );
 };
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/GroupLabel.module.scss b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/GroupLabel.module.scss
deleted file mode 100644
index 10dc11765f1a..000000000000
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/GroupLabel.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@use "../../../../../scss/colors";
-@use "../../../../../scss/variables";
-
-.groupLabel {
-  width: auto;
-  height: 100%;
-  padding-right: variables.$spacing-md;
-  display: flex;
-  align-items: center;
-  background-color: colors.$white;
-  white-space: nowrap;
-}
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/GroupLabel.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/GroupLabel.tsx
index c283a3d05cb6..8323d152a46a 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/GroupLabel.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/GroupLabel.tsx
@@ -1,19 +1,11 @@
 import { FormConditionItem, FormObjectArrayItem } from "core/form/types";
 
 import { PropertyLabel } from "../Property/PropertyLabel";
-import styles from "./GroupLabel.module.scss";
 
 interface GroupLabelProps {
   formField: FormConditionItem | FormObjectArrayItem;
 }
 
 export const GroupLabel: React.FC<GroupLabelProps> = ({ formField }) => {
-  return (
-    <PropertyLabel
-      className={styles.groupLabel}
-      property={formField}
-      label={`${formField.title || formField.fieldKey}`}
-      optional={false}
-    />
-  );
+  return <PropertyLabel property={formField} label={`${formField.title || formField.fieldKey}`} optional={false} />;
 };