🪟 🐛 🎨 Fix design issues with CatalogDiff modal (#18870)

* Increase size of CatalogDiff modal
Add ModalService to CatalogDiff to fix story

* 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

* Update spacing on field section to align more closely with design

* Update text color in NumberBadge to be consistent.

* Update spacing and alignment in stream row to match design

* Restore text color in NumberBadge

* Cleanup onClose fn in CatalogDiff story

* Add padding bottoom to DiffAccordion
Update CatalogDiff stories to include different use cases

Author: edmundito

airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss

@@ -1,5 +1,5 @@
-@use "../../../scss/colors";
-@use "../../../scss/fonts";
+@use "scss/colors";
+@use "scss/fonts";
 
 .circle {
   height: 20px;

airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx

@@ -20,7 +20,7 @@ export const NumberBadge: React.FC<NumberBadgeProps> = ({ value, color, classNam
 
   return (
     <div className={numberBadgeClassnames} aria-label={ariaLabel}>
-      <div>{value}</div>
+      {value}
     </div>
   );
 };

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%;
@@ -15,6 +15,13 @@
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  padding: variables.$spacing-sm;
+  padding: 0 15px 0 0;
   font-weight: 400;
 }
+
+.accordionPanel {
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-sm;
+  padding: 0 15px variables.$spacing-md 40px;
+}

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" />}

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss

@@ -1,12 +1,11 @@
 @forward "../components/StreamRow.module.scss";
 @forward "../components/DiffSection.module.scss";
-@use "../../../../scss/variables";
+@use "scss/variables";
 
-.namespace {
-  padding-left: variables.$spacing-sm;
+.row {
+  padding: 0 0 0 variables.$spacing-sm;
 }
 
-.headerAdjust {
-  padding-left: -10px;
-  margin-left: -5px;
+.namespace {
+  padding-left: variables.$spacing-sm;
 }

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx

@@ -36,10 +36,10 @@ export const DiffAccordionHeader: React.FC<DiffAccordionHeaderProps> = ({
       <ModificationIcon />
       <div className={namespaceCellStyles} aria-labelledby={formatMessage({ id: "connection.updateSchema.namespace" })}>
         {open ? <FontAwesomeIcon icon={faAngleDown} /> : <FontAwesomeIcon icon={faAngleRight} />}
-        <div className={styles.headerAdjust}>{streamDescriptor.namespace}</div>
+        <div>{streamDescriptor.namespace}</div>
       </div>
       <div className={nameCellStyle} aria-labelledby={formatMessage({ id: "connection.updateSchema.streamName" })}>
-        <div className={styles.headerAdjust}>{streamDescriptor.name}</div>
+        <div>{streamDescriptor.name}</div>
       </div>
       <DiffIconBlock removedCount={removedCount} newCount={newCount} changedCount={changedCount} />
     </>

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;

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

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

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

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;
@@ -25,10 +29,6 @@
     color: colors.$grey;
     line-height: 12px;
   }
-
-  .padLeft {
-    padding-left: variables.$spacing-md;
-  }
 }
 
 .sectionHeader,

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx

@@ -31,13 +31,13 @@ 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>
               <FormattedMessage id="connection.updateSchema.namespace" />
             </th>
-            <th className={styles.padLeft}>
+            <th>
               <FormattedMessage id="connection.updateSchema.streamName" />
             </th>
             <th />

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;
@@ -28,6 +26,16 @@
   }
 }
 
+tr:first-child .content {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+tr:last-child .content {
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
 .icon {
   &.plus {
     color: colors.$green;
@@ -39,24 +47,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;

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx

@@ -2,9 +2,10 @@ import { faArrowRight, faMinus, faPlus } from "@fortawesome/free-solid-svg-icons
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
 
+import { ModificationIcon } from "components/icons/ModificationIcon";
+
 import { FieldTransform } from "core/request/AirbyteClient";
 
-import { ModificationIcon } from "../../../../components/icons/ModificationIcon";
 import styles from "./FieldRow.module.scss";
 
 interface FieldRowProps {
@@ -38,29 +39,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>
   );
 };

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 {
@@ -11,11 +11,7 @@
 .fieldSubHeader {
   @extend %sectionSubHeader;
 
-  padding: 0 variables.$spacing-sm 0 35px;
-
-  .padLeft {
-    padding-left: variables.$spacing-xl;
-  }
+  padding: 0 variables.$spacing-sm 0 40px;
 
   > div {
     @extend %nameCell;
@@ -25,12 +21,11 @@
     font-size: 10px;
     color: colors.$grey;
     line-height: 12px;
-    padding-left: variables.$spacing-md;
   }
 }
 
 .fieldRowsContainer {
-  padding-left: variables.$spacing-lg;
+  padding: 0 variables.$spacing-lg;
 
   ul,
   li {

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx

@@ -23,7 +23,7 @@ export const FieldSection: React.FC<FieldSectionProps> = ({ streams, diffVerb })
         <div id={formatMessage({ id: "connection.updateSchema.namespace" })}>
           <FormattedMessage id="connection.updateSchema.namespace" />
         </div>
-        <div className={styles.padLeft} id={formatMessage({ id: "connection.updateSchema.streamName" })}>
+        <div id={formatMessage({ id: "connection.updateSchema.streamName" })}>
           <FormattedMessage id="connection.updateSchema.streamName" />
         </div>
         <div />