🪟 🎨 Row highlighting for new streams table (#19449)

* initial pass and cleanup * merge cleanup * get dropdowns colored correctly also * colors for modificationIcon * icon alignment * testing skeleton * move calculation to a hook * update hover styles on rows with changes * add testing Co-authored-by: Krishna (kc) Glick <krishnaglick@users.noreply.github.com> * clarify naming * add mixin, fix selected added/removed rows * WIP test icons using snapshots * fix snapshots, tests for catalog tree table row hook * fix order of logic for disabled rows (disabled trumps everything) * Update airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.test.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> * move icon to its own component, clean up tests * tidy up test linting disables * Update airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io> * Update airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io> * Update airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io> * Update airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.test.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io> * Update airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.test.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io> * clean up tests * make path-select dropdown full column width * cleanup from rebase Co-authored-by: Krishna (kc) Glick <krishnaglick@users.noreply.github.com> Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>
airbytehq · Dec 5, 2022 · 7810c92 · 7810c92
1 parent 6b39a1a
commit 7810c92
Show file tree

Hide file tree

Showing 11 changed files with 349 additions and 54 deletions.
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss
@@ -1,21 +1,18 @@
 @use "scss/colors";
 @use "scss/variables";
 
-.icon {
-  margin-right: 7px;
-  margin-top: -1px;
+@mixin header-background($color, $hoverColor) {
+  background-color: $color;
 
-  &.plus {
-    color: colors.$green;
-  }
-
-  &.minus {
-    color: colors.$red;
+  &:hover {
+    background-color: $hoverColor;
+    cursor: pointer;
   }
 }
 
 .streamHeaderContent {
-  background: colors.$white;
+  @include header-background(colors.$white, colors.$grey-30);
+
   border-bottom: 1px solid colors.$grey-50;
   padding: 0 variables.$spacing-md;
   margin-bottom: 1px;
@@ -26,27 +23,22 @@
   overflow-y: auto;
   scrollbar-gutter: stable;
 
-  &:hover {
-    background: colors.$grey-30;
-    cursor: pointer;
+  &.removed {
+    @include header-background(colors.$red-30, colors.$red-40);
   }
 
-  &.disabledChange {
-    background-color: colors.$red-50;
+  &.added {
+    @include header-background(colors.$green-30, colors.$green-40);
   }
 
-  &.enabledChange {
-    background-color: colors.$green-50;
+  &.changed {
+    @include header-background(colors.$blue-30, colors.$blue-40);
   }
 
   &.error {
     border: 1px solid colors.$red;
   }
 
-  &.selected {
-    background-color: colors.$blue-transparent;
-  }
-
   &.disabled {
     background-color: colors.$grey-50;
   }
@@ -62,6 +54,7 @@
   flex-direction: row;
   justify-content: flex-end;
   padding-left: variables.$spacing-xl + variables.$spacing-sm;
+  align-items: center;
 }
 
 .arrowCell {

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx
@@ -1,4 +1,4 @@
-import { faArrowRight, faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
 import React, { useMemo } from "react";
@@ -12,9 +12,13 @@ import { Text } from "components/ui/Text";
 import { useBulkEditSelect } from "hooks/services/BulkEdit/BulkEditService";
 
 import { StreamHeaderProps } from "../StreamHeader";
+// eslint-disable-next-line css-modules/no-unused-class
 import styles from "./CatalogTreeTableRow.module.scss";
+import { CatalogTreeTableRowIcon } from "./CatalogTreeTableRowIcon";
 import { StreamPathSelect } from "./StreamPathSelect";
 import { SyncModeSelect } from "./SyncModeSelect";
+import { useCatalogTreeTableRowProps } from "./useCatalogTreeTableRowProps";
+
 export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
   stream,
   destName,
@@ -30,12 +34,9 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
   // isRowExpanded,
   fields,
   onExpand,
-  changedSelected,
-  hasError,
   disabled,
 }) => {
   const { primaryKey, cursorField, syncMode, destinationSyncMode } = stream.config ?? {};
-  const isStreamEnabled = stream.config?.selected;
 
   const { defaultCursorField } = stream.stream ?? {};
   const syncSchema = useMemo(
@@ -52,32 +53,15 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
   const fieldCount = fields?.length ?? 0;
   const onRowClick = fieldCount > 0 ? () => onExpand() : undefined;
 
-  const iconStyle = classnames(styles.icon, {
-    [styles.plus]: isStreamEnabled,
-    [styles.minus]: !isStreamEnabled,
-  });
+  const { streamHeaderContentStyle, pillButtonVariant } = useCatalogTreeTableRowProps(stream);
 
-  const streamHeaderContentStyle = classnames(styles.streamHeaderContent, {
-    [styles.enabledChange]: changedSelected && isStreamEnabled,
-    [styles.disabledChange]: changedSelected && !isStreamEnabled,
-    [styles.selected]: isSelected,
-    [styles.error]: hasError,
-    [styles.disabled]: !changedSelected && !isStreamEnabled,
-  });
+  const checkboxCellCustomStyle = classnames(styles.checkboxCell, styles.streamRowCheckboxCell);
 
   return (
     <Row onClick={onRowClick} className={streamHeaderContentStyle}>
       {!disabled && (
-        <div className={styles.streamRowCheckboxCell}>
-          {changedSelected && (
-            <div>
-              {isStreamEnabled ? (
-                <FontAwesomeIcon icon={faPlus} size="2x" className={iconStyle} />
-              ) : (
-                <FontAwesomeIcon icon={faMinus} size="2x" className={iconStyle} />
-              )}
-            </div>
-          )}
+        <div className={checkboxCellCustomStyle}>
+          <CatalogTreeTableRowIcon stream={stream} />
           <CheckBox checked={isSelected} onChange={selectForBulkEdit} />
         </div>
       )}
@@ -104,7 +88,12 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
           </Cell>
         ) : (
           // todo: SyncModeSelect should probably have a Tooltip, append/dedupe ends up ellipsing
-          <SyncModeSelect options={availableSyncModes} onChange={onSelectSyncMode} value={syncSchema} />
+          <SyncModeSelect
+            options={availableSyncModes}
+            onChange={onSelectSyncMode}
+            value={syncSchema}
+            variant={pillButtonVariant}
+          />
         )}
       </div>
       <Cell flex={1}>
@@ -114,6 +103,7 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
             paths={paths}
             path={cursorType === "sourceDefined" ? defaultCursorField : cursorField}
             onPathChange={onCursorChange}
+            variant={pillButtonVariant}
           />
         )}
       </Cell>
@@ -125,6 +115,7 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
             path={primaryKey}
             isMulti
             onPathChange={onPrimaryKeyChange}
+            variant={pillButtonVariant}
           />
         )}
       </Cell>

diff --git a/...yte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRowIcon.module.scss b/...yte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRowIcon.module.scss
@@ -0,0 +1,24 @@
+@use "scss/colors";
+
+.icon {
+  margin-right: 7px;
+
+  &.plus {
+    color: colors.$green;
+  }
+
+  &.minus {
+    color: colors.$red;
+  }
+
+  &.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
@@ -0,0 +1,42 @@
+import { 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 { SyncSchemaStream } from "core/domain/catalog";
+
+import styles from "./CatalogTreeTableRowIcon.module.scss";
+import { useCatalogTreeTableRowProps } from "./useCatalogTreeTableRowProps";
+
+interface CatalogTreeTableRowIconProps {
+  stream: SyncSchemaStream;
+}
+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>
+    );
+  }
+  return <div />;
+};
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.module.scss
@@ -4,6 +4,10 @@
   white-space: nowrap;
 }
 
-.pillSelect {
+.streamPathSelect {
   width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx
@@ -61,14 +61,14 @@ export const StreamPathSelect: React.FC<PathPopoutProps> = (props) => {
     <PillSelect
       disabled={props.disabled}
       variant={props.variant}
-      className={styles.pillSelect}
       options={options}
       value={props.path}
       isMulti={props.isMulti}
       onChange={(options: PathPopoutProps["isMulti"] extends true ? Array<{ value: Path }> : { value: Path }) => {
         const finalValues = Array.isArray(options) ? options.map((op) => op.value) : options.value;
         props.onPathChange(finalValues);
       }}
+      className={styles.streamPathSelect}
     />
   );
 };
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx
@@ -26,7 +26,7 @@ interface SyncModeSelectProps {
   variant?: PillButtonVariant;
 }
 
-export const SyncModeSelect: React.FC<SyncModeSelectProps> = ({ className, variant, options, onChange, value }) => {
+export const SyncModeSelect: React.FC<SyncModeSelectProps> = ({ className, options, onChange, value, variant }) => {
   const pillSelectOptions = useMemo(() => {
     return options.map(({ value }) => {
       const { syncMode, destinationSyncMode } = value;
@@ -45,11 +45,11 @@ export const SyncModeSelect: React.FC<SyncModeSelectProps> = ({ className, varia
 
   return (
     <PillSelect
-      variant={variant}
       options={pillSelectOptions}
       value={value}
       onChange={onChange}
       className={classNames(styles.pillSelect, className)}
+      variant={variant}
     />
   );
 };