Fix issues with catalog diff field section styles

* Update how icons work * Rearrange table headings and cells to align correctly * Add more spacing to the Diff Icon badges * Remove div from DiffHeader and simplify rendering * Remove border-spacing from tables * Move table margins to be set by padding on the panel itself
airbytehq · Nov 2, 2022 · ecc14b7 · ecc14b7
1 parent d6621ad
commit ecc14b7
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 61 deletions.
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss
@@ -1,6 +1,6 @@
-@use "../../../../scss/variables";
-@forward "../components/StreamRow.module.scss";
-@forward "../components/DiffSection.module.scss";
+@use "scss/variables";
+@forward "./StreamRow.module.scss";
+@forward "./DiffSection.module.scss";
 
 .accordionContainer {
   width: 100%;
@@ -18,3 +18,10 @@
   padding: variables.$spacing-sm;
   font-weight: 400;
 }
+
+.accordionPanel {
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-sm;
+  padding: 0 30px;
+}
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx
@@ -32,7 +32,7 @@ export const DiffAccordion: React.FC<DiffAccordionProps> = ({ streamTransform })
                 open={open}
               />
             </Disclosure.Button>
-            <Disclosure.Panel>
+            <Disclosure.Panel className={styles.accordionPanel}>
               {removedItems.length > 0 && <DiffFieldTable fieldTransforms={removedItems} diffVerb="removed" />}
               {newItems.length > 0 && <DiffFieldTable fieldTransforms={newItems} diffVerb="new" />}
               {changedItems.length > 0 && <DiffFieldTable fieldTransforms={changedItems} diffVerb="changed" />}

diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss
@@ -1,23 +1,20 @@
-@use "../../../../scss/variables";
+@use "scss/variables";
 @use "./DiffSection.module.scss";
 
-.accordionSubHeader {
+.header {
   @extend %sectionSubHeader;
 
-  & .padLeft {
-    padding-left: variables.$spacing-lg;
-  }
+  padding: 0 0 0 30px;
 
   & th {
     font-size: 10px;
     width: 228px;
-    padding-left: variables.$spacing-md;
   }
 }
 
 .table {
   width: 100%;
-  padding-left: variables.$spacing-xl;
+  border-spacing: 0;
 
   & tbody > tr:first-of-type > td:nth-of-type(2) {
     border-radius: variables.$border-radius-sm variables.$border-radius-sm 0 0;

diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx
@@ -16,12 +16,12 @@ export const DiffFieldTable: React.FC<DiffFieldTableProps> = ({ fieldTransforms,
   return (
     <table className={styles.table} aria-label={`${diffVerb} fields`}>
       <thead>
-        <tr className={styles.accordionSubHeader}>
+        <tr className={styles.header}>
           <th>
             <DiffHeader diffCount={fieldTransforms.length} diffVerb={diffVerb} diffType="field" />
           </th>
           {diffVerb === "changed" && (
-            <th className={styles.padLeft}>
+            <th>
               <FormattedMessage id="connection.updateSchema.dataType" />
             </th>
           )}

diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx
@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import { useIntl } from "react-intl";
 
 import { DiffVerb } from "../types";
 
@@ -11,15 +11,17 @@ interface DiffHeaderProps {
 }
 
 export const DiffHeader: React.FC<DiffHeaderProps> = ({ diffCount, diffVerb, diffType }) => {
-  return (
-    <div>
-      <FormattedMessage
-        id={`connection.updateSchema.${diffVerb}`}
-        values={{
-          value: diffCount,
-          item: <FormattedMessage id={`connection.updateSchema.${diffType}`} values={{ count: diffCount }} />,
-        }}
-      />
-    </div>
+  const { formatMessage } = useIntl();
+
+  const text = formatMessage(
+    {
+      id: `connection.updateSchema.${diffVerb}`,
+    },
+    {
+      value: diffCount,
+      item: formatMessage({ id: `connection.updateSchema.${diffType}` }, { count: diffCount }),
+    }
   );
+
+  return <>{text}</>;
 };
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss
@@ -1,6 +1,8 @@
+@use "scss/variables";
+
 .iconBlock {
   display: flex;
   flex-direction: row;
-  gap: 1px;
+  gap: variables.$spacing-sm;
   margin-left: auto;
 }
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss
@@ -1,12 +1,16 @@
-@use "../../../../scss/colors";
-@use "../../../../scss/variables";
-@use "../components/StreamRow.module.scss";
+@use "scss/colors";
+@use "scss/variables";
+@use "./StreamRow.module.scss";
 
 .sectionContainer {
   display: flex;
   flex-direction: column;
 }
 
+.table {
+  border-spacing: 0;
+}
+
 .sectionSubHeader,
 %sectionSubHeader {
   display: flex;

diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx
@@ -31,7 +31,7 @@ export const DiffSection: React.FC<DiffSectionProps> = ({ streams, catalog, diff
       <div className={styles.sectionHeader}>
         <DiffHeader diffCount={streams.length} diffVerb={diffVerb} diffType="stream" />
       </div>
-      <table aria-label={`${diffVerb} streams table`}>
+      <table aria-label={`${diffVerb} streams table`} className={styles.table}>
         <thead className={styles.sectionSubHeader}>
           <tr>
             <th>

diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss
@@ -1,18 +1,16 @@
-@use "../../../../scss/variables";
-@use "../../../../scss/colors";
+@use "scss/variables";
+@use "scss/colors";
 
 .row {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: variables.$spacing-sm variables.$spacing-xl;
   gap: variables.$spacing-md;
   height: 35px;
   font-size: 12px;
 }
 
 .content {
-  padding-left: 10px;
   display: flex;
   width: 100%;
   height: 35px;
@@ -39,24 +37,21 @@
 
   &.mod {
     color: colors.$blue-100;
+    margin-left: -5px;
   }
 }
 
-.iconCell {
-  background: white;
+.iconContainer {
   width: 10px;
   height: 100%;
   display: flex;
   align-items: center;
+  margin: 0 variables.$spacing-md;
 }
 
 .cell {
-  width: 228px;
-
   &.update {
-    border-radius: variables.$border-radius-sm;
-
-    & span {
+    span {
       background-color: rgba(98, 94, 255, 10%);
       padding: variables.$spacing-sm;
       border-radius: variables.$border-radius-sm;

diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx
@@ -38,29 +38,29 @@ export const FieldRow: React.FC<FieldRowProps> = ({ transform }) => {
 
   return (
     <tr className={styles.row}>
-      <td className={styles.iconCell}>
-        {diffType === "add" ? (
-          <FontAwesomeIcon icon={faPlus} size="1x" className={iconStyle} />
-        ) : diffType === "remove" ? (
-          <FontAwesomeIcon icon={faMinus} size="1x" className={iconStyle} />
-        ) : (
-          <span className="mod">
-            <ModificationIcon />
-          </span>
-        )}
-      </td>
       <td className={contentStyle}>
-        <div className={styles.cell}>
-          <span>{fieldName}</span>
+        <div className={styles.iconContainer}>
+          {diffType === "add" ? (
+            <FontAwesomeIcon icon={faPlus} size="1x" className={iconStyle} />
+          ) : diffType === "remove" ? (
+            <FontAwesomeIcon icon={faMinus} size="1x" className={iconStyle} />
+          ) : (
+            <div className={iconStyle}>
+              <ModificationIcon />
+            </div>
+          )}
         </div>
-        <div className={updateCellStyle}>
-          {oldType && newType && (
+        {fieldName}
+      </td>
+      {oldType && newType && (
+        <td className={contentStyle}>
+          <div className={updateCellStyle}>
             <span>
               {oldType} <FontAwesomeIcon icon={faArrowRight} /> {newType}
             </span>
-          )}
-        </div>
-      </td>
+          </div>
+        </td>
+      )}
     </tr>
   );
 };
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss
@@ -1,5 +1,5 @@
-@use "../../../../scss/colors";
-@use "../../../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 @use "./DiffSection.module.scss";
 
 .fieldHeader {
@@ -30,7 +30,7 @@
 }
 
 .fieldRowsContainer {
-  padding-left: variables.$spacing-lg;
+  padding: 0 variables.$spacing-lg;
 
   ul,
   li {