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}