From 94bf06aff3304bb22732f2ebacbc937bc1b87077 Mon Sep 17 00:00:00 2001
From: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com>
Date: Fri, 6 Jan 2023 14:05:38 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20=F0=9F=90=9B=20=F0=9F=8E=A8=20Fi?=
 =?UTF-8?q?x=20stream=20table=20icon=20checkboxes=20and=20icons=20(#21108)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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
---
 .../CreateConnectionForm.test.tsx.snap        |  3 +
 .../CatalogTree/CatalogTreeHeader.module.scss |  4 +-
 .../CatalogTree/StreamHeader.module.scss      | 10 ++-
 .../connection/CatalogTree/StreamHeader.tsx   | 14 +---
 .../next/CatalogTreeTableRow.module.scss      |  2 +-
 .../next/CatalogTreeTableRowIcon.module.scss  | 22 +++---
 .../next/CatalogTreeTableRowIcon.tsx          | 72 +++++++++++--------
 .../next/useCatalogTreeTableRowProps.tsx      |  2 +-
 .../src/components/icons/MinusIcon.tsx        |  9 +++
 .../src/components/icons/ModificationIcon.tsx |  1 +
 .../src/components/icons/PlusIcon.tsx         | 12 ++++
 .../ConnectionReplicationTab.test.tsx.snap    |  3 +
 12 files changed, 101 insertions(+), 53 deletions(-)
 create mode 100644 airbyte-webapp/src/components/icons/MinusIcon.tsx
 create mode 100644 airbyte-webapp/src/components/icons/PlusIcon.tsx

diff --git a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
index 5c1187b4a3e0..c08a694f45e5 100644
--- a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
+++ b/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>"
                           >
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeHeader.module.scss
index 50c61f200503..91c6c4529f8a 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeHeader.module.scss
+++ b/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,
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
index 99b7b00592f1..90a907e99b90 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
+++ b/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 {
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
index df29630e7468..63ae5b7ca43c 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
+++ b/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>
       )}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss
index 4447c78027ea..328c3911b03e 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss
+++ b/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 {
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRowIcon.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRowIcon.module.scss
index f14a40a0d502..c20090d4544c 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRowIcon.module.scss
+++ b/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;
-}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRowIcon.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRowIcon.tsx
index bf74cc1a35dc..8534c5076e96 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRowIcon.tsx
+++ b/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>;
 };
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx
index 4f9e07c7a688..c642ddf8fbfc 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx
+++ b/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);
diff --git a/airbyte-webapp/src/components/icons/MinusIcon.tsx b/airbyte-webapp/src/components/icons/MinusIcon.tsx
new file mode 100644
index 000000000000..24755afd617b
--- /dev/null
+++ b/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>
+);
diff --git a/airbyte-webapp/src/components/icons/ModificationIcon.tsx b/airbyte-webapp/src/components/icons/ModificationIcon.tsx
index efe57b2db19a..e2dff1d9654f 100644
--- a/airbyte-webapp/src/components/icons/ModificationIcon.tsx
+++ b/airbyte-webapp/src/components/icons/ModificationIcon.tsx
@@ -1,4 +1,5 @@
 import { theme } from "theme";
+
 interface ModificationIconProps {
   color?: string;
 }
diff --git a/airbyte-webapp/src/components/icons/PlusIcon.tsx b/airbyte-webapp/src/components/icons/PlusIcon.tsx
new file mode 100644
index 000000000000..027366b8f009
--- /dev/null
+++ b/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>
+);
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
index ac66c36e2f92..b8d60981c950 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
+++ b/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>"
                           >