move StreamHeader to scss modules, add CatalogSection scss

Author: teallarson

airbyte-webapp/src/scss/_colors.scss

@@ -1,6 +1,7 @@
 $primaryColor: #615eff;
-$primaryColor25: rgba(98, 94, 255, 0.25);
+$primaryColor10: rgba(98, 94, 255, 0.1);
 $primaryColor12: rgba(103, 87, 255, 0.12);
+$primaryColor25: rgba(98, 94, 255, 0.25);
 $mediumPrimaryColor: #36348f;
 $mediumPrimaryColor20: rgba(73, 68, 193, 0.2);
 $darkPrimaryColor: #010047;
@@ -11,6 +12,7 @@ $lightPrimaryColor: #edebff;
 $brightColor: #f7f6ff;
 
 $dangerColor: #ff5e7b;
+$dangerColor14: rgba(255, 94, 123, 0.14);
 $dangerColor25: rgba(255, 94, 123, 0.25);
 $warningColor: #ffbf00;
 $warningBackgroundColor: rgba(255, 191, 0, 0.2);
@@ -19,6 +21,7 @@ $dangerTransparentColor: rgba(247, 77, 88, 0.1);
 $attentionColor: #ffbd2e;
 $successColor: #67dae1;
 $successColor10: rgba(69, 230, 152, 0.1);
+$successColor14: rgb(103, 218, 225, 0.14);
 $successColor20: rgba(69, 230, 152, 0.2);
 $backgroundColor: #fef9f4;
 $shadowColor: rgba(0, 0, 0, 0.25);

airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.module.scss

@@ -15,24 +15,23 @@
 
 .catalogSectionRow {
  height: 40px;
- border-bottom: 1px solid colors.$greyColor0;
  height: 100%;
  white-space: nowrap;
  font-size: 12px;
 }
 
 .redBackground {
- background-color: rgb(255, 94, 123, 0.14);
+ background-color: colors.$dangerColor14;
 }
 
 .greenBackground {
- background-color: rgb(103, 218, 225, 0.14);
+ background-color: colors.$successColor14;
 }
 
 .redBorder {
  border: 1px solid colors.$dangerColor;
 }
 
 .purpleBackground {
- background-color: rgba(97, 94, 255, 0.1);
+ background-color: colors.$primaryColor10;
 }

airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.tsx

@@ -160,6 +160,7 @@ export const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
  hasFields={hasChildren}
  onExpand={onExpand}
  mode={mode}
+ changedSelected={changedSelected}
  />
  </Row>
  {isRowExpanded && hasChildren && (

airbyte-webapp/src/views/Connection/CatalogTree/CatalogTree.module.scss

@@ -0,0 +1,13 @@
+.headerCell {
+ font-size: 10px;
+ line-height: 13px;
+}
+
+.checkboxCell {
+ @extend .headerCell;
+ max-width: 43px;
+ text-align: center;
+ margin-left: -43px;
+ display: flex;
+ flex-direction: row;
+}

airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.module.scss

@@ -0,0 +1,13 @@
+@use "../../../scss/colors";
+@forward "./CatalogTree.module.scss";
+
+.greenText {
+ color: colors.$successColor;
+}
+
+.redText {
+ color: colors.$dangerColor;
+}
+
+.icon {
+}

airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.tsx

@@ -1,3 +1,6 @@
+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 styled from "styled-components";
@@ -12,7 +15,8 @@ import { ConnectionFormMode } from "../ConnectionForm/ConnectionForm";
 import { Arrow as ArrowBlock } from "./components/Arrow";
 import { IndexerType, PathPopout } from "./components/PathPopout";
 import { SyncSettingsDropdown } from "./components/SyncSettingsDropdown";
-import { ArrowCell, CheckboxCell, HeaderCell } from "./styles";
+import styles from "./StreamHeader.module.scss";
+import { ArrowCell, HeaderCell } from "./styles";
 
 const EmptyField = styled.span`
  color: ${({ theme }) => theme.greyColor40};
@@ -32,18 +36,16 @@ interface StreamHeaderProps {
  }[];
  onSelectSyncMode: (selectedMode: DropDownRow.IDataItem) => void;
  onSelectStream: () => void;
-
  primitiveFields: SyncSchemaField[];
-
  pkType: IndexerType;
  onPrimaryKeyChange: (pkPath: Path[]) => void;
  cursorType: IndexerType;
  onCursorChange: (cursorPath: Path) => void;
-
  isRowExpanded: boolean;
  hasFields: boolean;
  onExpand: () => void;
  mode?: ConnectionFormMode;
+ changedSelected: boolean;
 }
 
 export const StreamHeader: React.FC<StreamHeaderProps> = ({
@@ -62,8 +64,10 @@ export const StreamHeader: React.FC<StreamHeaderProps> = ({
  hasFields,
  onExpand,
  mode,
+ changedSelected,
 }) => {
  const { primaryKey, syncMode, cursorField, destinationSyncMode } = stream.config ?? {};
+ const isEnabled = stream.config?.selected;
 
  const { defaultCursorField } = stream.stream ?? {};
  const syncSchema = useMemo(
@@ -78,12 +82,26 @@ export const StreamHeader: React.FC<StreamHeaderProps> = ({
 
  const paths = primitiveFields.map((field) => field.path);
 
+ const iconStyle = classnames(styles.icon, {
+ [styles.greenText]: isEnabled,
+ [styles.redText]: !isEnabled,
+ });
+
  return (
  <>
  {mode !== "readonly" && (
- <CheckboxCell>
+ <Cell className={styles.checkboxCell}>
+ {changedSelected && (
+ <div>
+ {isEnabled ? (
+ <FontAwesomeIcon icon={faPlus} className={iconStyle} />
+ ) : (
+ <FontAwesomeIcon icon={faMinus} className={iconStyle} />
+ )}
+ </div>
+ )}
  <CheckBox checked={isSelected} onChange={selectForBulkEdit} />
- </CheckboxCell>
+ </Cell>
  )}
  <ArrowCell>
  {hasFields ? <ArrowBlock onExpand={onExpand} isItemHasChildren={hasFields} isItemOpen={isRowExpanded} /> : null}