🪟 🔧 Update <CollapsibleCard /> component (#5830)

airbytehq · Apr 19, 2023 · 0ea64be · 0ea64be
1 parent ba4c7a3
commit 0ea64be
Show file tree

Hide file tree

Showing 19 changed files with 1,101 additions and 1,162 deletions.
diff --git a/airbyte-webapp-e2e-tests/cypress/pages/connection/connectionFormPageObject.ts b/airbyte-webapp-e2e-tests/cypress/pages/connection/connectionFormPageObject.ts
@@ -1,7 +1,7 @@
 import { getTestId } from "utils/selectors";
 
 const connectionNameInput = getTestId("connectionName");
-const expandConfigurationButton = getTestId("configuration-section-expand-arrow");
+const expandConfigurationIcon = getTestId("configuration-card-expand-arrow");
 const scheduleDropdown = getTestId("scheduleData");
 
 const destinationPrefixEditButton = getTestId("destination-stream-prefix-edit-button");
@@ -29,7 +29,7 @@ export const selectSchedule = (value: string) => {
 };
 
 export const expandConfigurationSection = () => {
-  cy.get(expandConfigurationButton).click();
+  cy.get(expandConfigurationIcon).click();
 };
 
 export const fillOutDestinationPrefix = (value: string) => {

diff --git a/...ebapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.module.scss b/...ebapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.module.scss
@@ -1,12 +1,7 @@
 @use "scss/colors";
 @use "scss/variables";
 
-.formCard {
-  padding: variables.$spacing-xl;
-}
-
 .editControls {
-  border-top: variables.$border-thin solid colors.$grey-100;
   margin: 0 -#{variables.$spacing-xl};
   padding: variables.$spacing-xl variables.$spacing-xl 0;
 }
diff --git a/airbyte-webapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.tsx b/airbyte-webapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.tsx
@@ -40,7 +40,7 @@ export const ConnectionEditFormCard = <T extends object>({
     <Formik {...form} onSubmit={(values, formikHelpers) => mutateAsync({ values, formikHelpers })}>
       {({ resetForm, isSubmitting, dirty, isValid }) => (
         <CollapsibleCard {...props}>
-          <Form className={styles.formCard}>
+          <Form>
             <FormChangeTracker changed={dirty} />
             {children}
             <div className={styles.editControls}>

diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/ConnectionFormFields.module.scss b/airbyte-webapp/src/components/connection/ConnectionForm/ConnectionFormFields.module.scss
@@ -1,13 +1,5 @@
 @use "scss/variables";
 
-.formContainer {
-  display: flex;
-  flex-direction: column;
-  gap: variables.$spacing-md;
-  position: relative;
-  flex: 1;
-}
-
 .tryArrow {
   margin: 0 variables.$spacing-md -1px 0;
 

diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/ConnectionFormFields.tsx b/airbyte-webapp/src/components/connection/ConnectionForm/ConnectionFormFields.tsx
@@ -7,6 +7,9 @@ import { useUnmount } from "react-use";
 
 import { FormChangeTracker } from "components/common/FormChangeTracker";
 import { Button } from "components/ui/Button";
+import { Card } from "components/ui/Card";
+import { CollapsibleCard } from "components/ui/CollapsibleCard";
+import { FlexContainer } from "components/ui/Flex";
 
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
@@ -19,7 +22,6 @@ import { NamespaceDefinitionFieldNext } from "./NamespaceDefinitionFieldNext";
 import { NonBreakingChangesPreferenceField } from "./NonBreakingChangesPreferenceField";
 import { useRefreshSourceSchemaWithConfirmationOnDirty } from "./refreshSourceSchemaWithConfirmationOnDirty";
 import { ScheduleField } from "./ScheduleField";
-import { Section } from "./Section";
 import { SyncCatalogField } from "./SyncCatalogField";
 
 interface ConnectionFormFieldsProps {
@@ -45,22 +47,24 @@ export const ConnectionFormFields: React.FC<ConnectionFormFieldsProps> = ({ isSu
     <>
       {/* FormChangeTracker is here as it has access to everything it needs without being repeated */}
       <FormChangeTracker changed={dirty} formId={formId} />
-      <div className={styles.formContainer}>
-        <Section
+      <FlexContainer direction="column">
+        <CollapsibleCard
           title={<FormattedMessage id="form.configuration" />}
           collapsible={isEditMode}
-          collapsedInitially={isEditMode}
+          defaultCollapsedState={isEditMode}
           collapsedPreviewInfo={<ConnectionConfigurationFormPreview />}
           testId="configuration"
         >
-          <ScheduleField />
-          <NamespaceDefinitionFieldNext />
-          <DestinationStreamPrefixName />
-          {allowAutoDetectSchema && (
-            <Field name="nonBreakingChangesPreference" component={NonBreakingChangesPreferenceField} />
-          )}
-        </Section>
-        <Section flush flexHeight>
+          <FlexContainer direction="column" gap="lg">
+            <ScheduleField />
+            <NamespaceDefinitionFieldNext />
+            <DestinationStreamPrefixName />
+            {allowAutoDetectSchema && (
+              <Field name="nonBreakingChangesPreference" component={NonBreakingChangesPreferenceField} />
+            )}
+          </FlexContainer>
+        </CollapsibleCard>
+        <Card>
           <Field
             name="syncCatalog.streams"
             component={SyncCatalogField}
@@ -78,8 +82,8 @@ export const ConnectionFormFields: React.FC<ConnectionFormFieldsProps> = ({ isSu
               </Button>
             }
           />
-        </Section>
-      </div>
+        </Card>
+      </FlexContainer>
     </>
   );
 };
diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/OperationsSection.tsx b/airbyte-webapp/src/components/connection/ConnectionForm/OperationsSection.tsx
@@ -3,13 +3,13 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { Card } from "components/ui/Card";
+import { FlexContainer } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
 
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
 
 import { NormalizationField } from "./NormalizationField";
-import { Section } from "./Section";
 import { TransformationField } from "./TransformationField";
 
 interface OperationsSectionProps {
@@ -35,8 +35,8 @@ export const OperationsSection: React.FC<OperationsSectionProps> = ({
   }
 
   return (
-    <Card>
-      <Section>
+    <Card withPadding>
+      <FlexContainer direction="column" gap="lg">
         {supportsNormalization || supportsTransformations ? (
           <Heading as="h2" size="sm">
             {[
@@ -59,7 +59,7 @@ export const OperationsSection: React.FC<OperationsSectionProps> = ({
             )}
           </FieldArray>
         )}
-      </Section>
+      </FlexContainer>
     </Card>
   );
 };
diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/Section.module.scss b/airbyte-webapp/src/components/connection/ConnectionForm/Section.module.scss
@@ -1,7 +1,4 @@
 @use "scss/variables";
-@use "scss/colors";
-
-$icon-size: 16px;
 
 .flexHeight {
   flex: 1;
@@ -15,10 +12,6 @@ $icon-size: 16px;
   flex-direction: column;
   gap: variables.$spacing-lg;
 
-  &.collapsed {
-    cursor: pointer;
-  }
-
   // TODO: We may be able to get rid of this.
   &:not(:last-child) {
     box-shadow: 0 1px 0 rgba(139, 139, 160, 25%);
@@ -29,20 +22,3 @@ $icon-size: 16px;
     gap: 0;
   }
 }
-
-.header {
-  display: flex;
-  justify-content: space-between;
-
-  .arrow {
-    font-size: $icon-size;
-    line-height: $icon-size;
-    color: colors.$dark-blue;
-    transition: 0.3s;
-    cursor: pointer;
-
-    &.expanded {
-      transform: rotate(90deg);
-    }
-  }
-}
diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/Section.tsx b/airbyte-webapp/src/components/connection/ConnectionForm/Section.tsx
@@ -1,23 +1,14 @@
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
-import React from "react";
-import { useToggle } from "react-use";
 
-import { Button } from "components/ui/Button";
 import { Card } from "components/ui/Card";
 import { Heading } from "components/ui/Heading";
 
 import styles from "./Section.module.scss";
 
-export interface SectionProps {
+interface SectionProps {
   title?: React.ReactNode;
   flush?: boolean;
   className?: string;
-  collapsible?: boolean;
-  collapsedPreviewInfo?: React.ReactNode;
-  collapsedInitially?: boolean;
-  testId?: string;
   flexHeight?: boolean;
 }
 
@@ -26,50 +17,19 @@ export const Section: React.FC<React.PropsWithChildren<SectionProps>> = ({
   flush,
   children,
   className,
-  collapsible = false,
-  collapsedPreviewInfo,
-  collapsedInitially = false,
-  testId,
   flexHeight,
 }) => {
-  const [isCollapsed, setIsCollapsed] = useToggle(collapsedInitially);
-
-  if (collapsedInitially && !collapsible) {
-    console.warn("Section cannot be collapsed initially if it is not collapsible");
-  }
-
   return (
     <Card className={classNames({ [styles.flexHeight]: flexHeight })}>
       <div
-        className={classNames(
-          styles.section,
-          { [styles.flush]: flush, [styles.flexHeight]: flexHeight, [styles.collapsed]: collapsible && isCollapsed },
-          className
-        )}
-        {...(collapsible && isCollapsed ? { onClick: setIsCollapsed } : {})}
+        className={classNames(styles.section, { [styles.flush]: flush, [styles.flexHeight]: flexHeight }, className)}
       >
-        <div className={styles.header}>
-          {title && (
-            <Heading as="h2" size="sm">
-              {title}
-            </Heading>
-          )}
-          {collapsible && (
-            <Button
-              variant="clear"
-              {...(collapsible && !isCollapsed ? { onClick: setIsCollapsed } : {})}
-              data-testid={`${testId}-section-expand-arrow`}
-              type="button"
-            >
-              <FontAwesomeIcon
-                className={classNames(styles.arrow, { [styles.expanded]: !isCollapsed })}
-                icon={faChevronRight}
-              />
-            </Button>
-          )}
-        </div>
-        {collapsible && isCollapsed && collapsedPreviewInfo}
-        {collapsible ? !isCollapsed && children : children}
+        {title && (
+          <Heading as="h2" size="sm">
+            {title}
+          </Heading>
+        )}
+        {children}
       </div>
     </Card>
   );