🪟 🔧 Generify GroupControls to make it more reusable (#20004)

* generify GroupControls more * undo radius change * use spacing variable
airbytehq · Dec 6, 2022 · 94477e4 · 94477e4
1 parent a1e21c9
commit 94477e4
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 93 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/...webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.module.scss b/...webapp/src/views/Connector/ConnectorForm/components/Sections/ConditionSection.module.scss
diff --git 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,29 +63,28 @@ 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}
             name={formField.path}
             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
diff --git 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} />;
 };