🪟 🐛 🎨 Fix stream table icon checkboxes and icons (#21108)

* Update new stream table icon positioning and style
* Add custom icons from design file
* Add opacity animation

* Fix checkbox sizing in current streams table

* Update test snapshots

Author: edmundito

airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap

@@ -635,6 +635,9 @@ exports[`CreateConnectionForm should render 1`] = `
                         <div
                           class="<removed-for-snapshot-test>"
                         >
+                          <div
+                            class="<removed-for-snapshot-test>"
+                          />
                           <label
                             class="<removed-for-snapshot-test>"
                           >

airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeHeader.module.scss

@@ -1,3 +1,5 @@
+@use "scss/variables";
+
 %headerCell {
   font-size: 10px;
   line-height: 13px;
@@ -7,7 +9,7 @@
   @extend %headerCell;
 
   max-width: 43px;
-  text-align: center;
+  padding-left: variables.$spacing-sm;
 }
 
 .catalogHeader,

airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss

@@ -2,9 +2,14 @@
 @use "scss/variables";
 @forward "./CatalogTreeHeader.module.scss";
 
+$icon-size: 20px;
+
 .icon {
-  margin-right: 7px;
-  margin-top: -1px;
+  width: $icon-size;
+  height: $icon-size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &.plus {
     color: colors.$green;
@@ -19,7 +24,6 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  padding-left: 27px;
 }
 
 .streamHeaderContent {

airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx

@@ -1,10 +1,10 @@
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
 import React, { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { Cell, Row } from "components";
+import { MinusIcon } from "components/icons/MinusIcon";
+import { PlusIcon } from "components/icons/PlusIcon";
 import { CheckBox } from "components/ui/CheckBox";
 import { DropDownOptionDataItem } from "components/ui/DropDown";
 import { Switch } from "components/ui/Switch";
@@ -101,15 +101,7 @@ export const StreamHeader: React.FC<StreamHeaderProps> = ({
     <Row className={styles.catalogSectionRow}>
       {!disabled && (
         <div className={checkboxCellCustomStyle}>
-          {changedSelected && (
-            <div>
-              {isStreamEnabled ? (
-                <FontAwesomeIcon icon={faPlus} size="2x" className={iconStyle} />
-              ) : (
-                <FontAwesomeIcon icon={faMinus} size="2x" className={iconStyle} />
-              )}
-            </div>
-          )}
+          <div className={iconStyle}>{changedSelected && (isStreamEnabled ? <PlusIcon /> : <MinusIcon />)}</div>
           <CheckBox checked={isSelected} onChange={selectForBulkEdit} />
         </div>
       )}

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss

@@ -46,7 +46,7 @@
   line-height: 13px;
   display: flex;
   justify-content: flex-end;
-  padding-left: variables.$spacing-xl + variables.$spacing-sm;
+  gap: variables.$spacing-sm;
 }
 
 .cellText {

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRowIcon.module.scss

@@ -1,7 +1,20 @@
 @use "scss/colors";
+@use "scss/variables";
+
+$icon-size: 20px;
 
 .icon {
-  margin-right: 7px;
+  width: $icon-size;
+  height: $icon-size;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity variables.$transition-out;
+  opacity: 0;
+
+  &.visible {
+    opacity: 1;
+  }
 
   &.plus {
     color: colors.$green;
@@ -13,12 +26,5 @@
 
   &.changed {
     color: colors.$blue;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
   }
 }
-
-:export {
-  modificationIconColor: colors.$blue;
-}

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRowIcon.tsx

@@ -1,42 +1,58 @@
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
+import { useState } from "react";
+import { useUpdateEffect } from "react-use";
 
+import { MinusIcon } from "components/icons/MinusIcon";
 import { ModificationIcon } from "components/icons/ModificationIcon";
+import { PlusIcon } from "components/icons/PlusIcon";
 
 import { SyncSchemaStream } from "core/domain/catalog";
 
 import styles from "./CatalogTreeTableRowIcon.module.scss";
-import { useCatalogTreeTableRowProps } from "./useCatalogTreeTableRowProps";
+import { StatusToDisplay, useCatalogTreeTableRowProps } from "./useCatalogTreeTableRowProps";
 
 interface CatalogTreeTableRowIconProps {
   stream: SyncSchemaStream;
+  className?: string;
 }
-export const CatalogTreeTableRowIcon: React.FC<CatalogTreeTableRowIconProps> = ({ stream }) => {
-  const { statusToDisplay, isSelected } = useCatalogTreeTableRowProps(stream);
 
-  if (statusToDisplay === "added") {
-    return (
-      <FontAwesomeIcon
-        icon={faPlus}
-        size="2x"
-        className={classNames(styles.icon, { [styles.plus]: !isSelected, [styles.changed]: isSelected })}
-      />
-    );
-  } else if (statusToDisplay === "removed") {
-    return (
-      <FontAwesomeIcon
-        icon={faMinus}
-        size="2x"
-        className={classNames(styles.icon, { [styles.minus]: !isSelected, [styles.changed]: isSelected })}
-      />
-    );
-  } else if (statusToDisplay === "changed") {
-    return (
-      <div className={classNames(styles.icon, styles.changed)}>
-        <ModificationIcon color={styles.modificationIconColor} />
-      </div>
-    );
+const getIcon = (statusToDisplay: StatusToDisplay): React.ReactNode | null => {
+  switch (statusToDisplay) {
+    case "added":
+      return <PlusIcon />;
+    case "removed":
+      return <MinusIcon />;
+    case "changed":
+      return <ModificationIcon color="currentColor" />;
   }
-  return <div />;
+
+  return null;
+};
+
+const VISIBLE_STATES: readonly StatusToDisplay[] = ["added", "changed", "removed"];
+
+export const CatalogTreeTableRowIcon: React.FC<CatalogTreeTableRowIconProps> = ({ stream, className }) => {
+  const { statusToDisplay, isSelected } = useCatalogTreeTableRowProps(stream);
+  const [visibleStatus, setVisibleStatus] = useState(statusToDisplay);
+
+  const isVisible = VISIBLE_STATES.includes(statusToDisplay);
+
+  useUpdateEffect(() => {
+    if (isVisible) {
+      setVisibleStatus(statusToDisplay);
+    }
+  }, [statusToDisplay, isVisible]);
+
+  const computedClassName = classNames(
+    styles.icon,
+    {
+      [styles.plus]: visibleStatus === "added" && !isSelected,
+      [styles.minus]: visibleStatus === "removed" && !isSelected,
+      [styles.changed]: visibleStatus === "changed" || isSelected,
+      [styles.visible]: isVisible,
+    },
+    className
+  );
+
+  return <div className={computedClassName}>{getIcon(visibleStatus)}</div>;
 };

airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx

@@ -11,7 +11,7 @@ import { useConnectionFormService } from "hooks/services/ConnectionForm/Connecti
 
 import styles from "./CatalogTreeTableRow.module.scss";
 
-type StatusToDisplay = "disabled" | "added" | "removed" | "changed" | "unchanged";
+export type StatusToDisplay = "disabled" | "added" | "removed" | "changed" | "unchanged";
 
 export const useCatalogTreeTableRowProps = (stream: SyncSchemaStream) => {
   const [isSelected] = useBulkEditSelect(stream.id);

airbyte-webapp/src/components/icons/MinusIcon.tsx

@@ -0,0 +1,9 @@
+interface MinusIconProps {
+  color?: string;
+}
+
+export const MinusIcon: React.FC<MinusIconProps> = ({ color = "currentColor" }) => (
+  <svg width="12" height="2" viewBox="0 0 12 2" fill="none">
+    <path d="M11.8334 1.83317V0.166504H0.166687V1.83317H11.8334Z" fill={color} />
+  </svg>
+);

airbyte-webapp/src/components/icons/ModificationIcon.tsx

@@ -1,4 +1,5 @@
 import { theme } from "theme";
+
 interface ModificationIconProps {
   color?: string;
 }

airbyte-webapp/src/components/icons/PlusIcon.tsx

@@ -0,0 +1,12 @@
+interface PlusIconProps {
+  color?: string;
+}
+
+export const PlusIcon: React.FC<PlusIconProps> = ({ color = "currentColor" }) => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+    <path
+      d="M5.16669 5.1665V0.166504H6.83335V5.1665H11.8334V6.83317H6.83335V11.8332H5.16669V6.83317H0.166687V5.1665H5.16669Z"
+      fill={color}
+    />
+  </svg>
+);

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap

@@ -581,6 +581,9 @@ exports[`ConnectionReplicationTab should render 1`] = `
                         <div
                           class="<removed-for-snapshot-test>"
                         >
+                          <div
+                            class="<removed-for-snapshot-test>"
+                          />
                           <label
                             class="<removed-for-snapshot-test>"
                           >