Highlight removed and added streams in Connection form (#13392)

* ugly but works

* make it prettier

* move StreamHeader to scss modules, add CatalogSection scss

* better... todo: spacing between rows, border radii

* fix size/spacing to match figma

* bug fix - page title

* only show on edit mode

* improve spacing of header rows

* fix styling for dropdown section

* adjust styles for readonly mode

* Changes from PR review

* justify flex-end instead of end

Author: teallarson

airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx

@@ -223,7 +223,7 @@ export const CreationFormPage: React.FC = () => {
 
   return (
     <>
-      <HeadTitle titles={[{ id: "sources.newSourceTitle" }]} />
+      <HeadTitle titles={[{ id: "connection.newConnectionTitle" }]} />
       <ConnectorDocumentationWrapper>
         <PageTitle
           title={<FormattedMessage id={titleId} />}

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

@@ -0,0 +1,14 @@
+@use "../../../scss/colors";
+
+.streamFieldTableContainer {
+  margin-left: 83px;
+  background: colors.$greyColor0;
+}
+
+.catalogSection:first-of-type > div:nth-child(1) > div:nth-child(3) {
+  border-radius: 8px 8px 0 0;
+}
+
+.catalogSection:last-of-type > div:nth-child(1) > div:nth-child(3) {
+  border-radius: 0 0 8px 8px;
+}

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

@@ -1,13 +1,11 @@
 import { FormikErrors, getIn } from "formik";
 import React, { memo, useCallback, useMemo } from "react";
 import { useToggle } from "react-use";
-import styled from "styled-components";
 
 import { DropDownRow } from "components";
 
 import { getDestinationNamespace, SyncSchemaField, SyncSchemaFieldObject, SyncSchemaStream } from "core/domain/catalog";
 import { traverseSchemaToField } from "core/domain/catalog/fieldUtil";
-import { useBulkEditSelect } from "hooks/services/BulkEdit/BulkEditService";
 import { equal, naturalComparatorBy } from "utils/objects";
 import { ConnectionFormValues, SUPPORTED_MODES } from "views/Connection/ConnectionForm/formConfig";
 
@@ -18,26 +16,12 @@ import {
   SyncMode,
 } from "../../../core/request/AirbyteClient";
 import { ConnectionFormMode } from "../ConnectionForm/ConnectionForm";
-import { TreeRowWrapper } from "./components/TreeRowWrapper";
+import styles from "./CatalogSection.module.scss";
 import { StreamFieldTable } from "./StreamFieldTable";
 import { StreamHeader } from "./StreamHeader";
 import { flatten, getPathType } from "./utils";
 
-const Section = styled.div<{ error?: boolean; isSelected: boolean }>`
-  border: 1px solid ${(props) => (props.error ? props.theme.dangerColor : "none")};
-  background: ${({ theme, isSelected }) => (isSelected ? "rgba(97, 94, 255, 0.1);" : theme.greyColor0)};
-  padding: 2px;
-
-  &:first-child {
-    border-radius: 8px 8px 0 0;
-  }
-
-  &:last-child {
-    border-radius: 0 0 8px 8px;
-  }
-`;
-
-type TreeViewRowProps = {
+interface CatalogSectionInnerProps {
   streamNode: SyncSchemaStream;
   errors: FormikErrors<ConnectionFormValues>;
   destinationSupportedSyncModes: DestinationSyncMode[];
@@ -46,9 +30,10 @@ type TreeViewRowProps = {
   prefix: string;
   updateStream: (id: string | undefined, newConfiguration: Partial<AirbyteStreamConfiguration>) => void;
   mode?: ConnectionFormMode;
-};
+  changedSelected: boolean;
+}
 
-const CatalogSectionInner: React.FC<TreeViewRowProps> = ({
+const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
   streamNode,
   updateStream,
   namespaceDefinition,
@@ -57,12 +42,11 @@ const CatalogSectionInner: React.FC<TreeViewRowProps> = ({
   errors,
   destinationSupportedSyncModes,
   mode,
+  changedSelected,
 }) => {
   const [isRowExpanded, onExpand] = useToggle(false);
   const { stream, config } = streamNode;
 
-  const [isSelected] = useBulkEditSelect(streamNode.id);
-
   const updateStreamWithConfig = useCallback(
     (config: Partial<AirbyteStreamConfiguration>) => updateStream(streamNode.id, config),
     [updateStream, streamNode]
@@ -146,37 +130,39 @@ const CatalogSectionInner: React.FC<TreeViewRowProps> = ({
   const hasChildren = fields && fields.length > 0;
 
   return (
-    <Section error={hasError} isSelected={isSelected}>
-      <TreeRowWrapper>
-        <StreamHeader
-          stream={streamNode}
-          destNamespace={destNamespace}
-          destName={prefix + (streamNode.stream?.name ?? "")}
-          availableSyncModes={availableSyncModes}
-          onSelectStream={onSelectStream}
-          onSelectSyncMode={onSelectSyncMode}
-          isRowExpanded={isRowExpanded}
-          primitiveFields={primitiveFields}
-          pkType={getPathType(pkRequired, shouldDefinePk)}
-          onPrimaryKeyChange={onPkUpdate}
-          cursorType={getPathType(cursorRequired, shouldDefineCursor)}
-          onCursorChange={onCursorSelect}
-          hasFields={hasChildren}
-          onExpand={onExpand}
-          mode={mode}
-        />
-      </TreeRowWrapper>
+    <div className={styles.catalogSection}>
+      <StreamHeader
+        stream={streamNode}
+        destNamespace={destNamespace}
+        destName={prefix + (streamNode.stream?.name ?? "")}
+        availableSyncModes={availableSyncModes}
+        onSelectStream={onSelectStream}
+        onSelectSyncMode={onSelectSyncMode}
+        isRowExpanded={isRowExpanded}
+        primitiveFields={primitiveFields}
+        pkType={getPathType(pkRequired, shouldDefinePk)}
+        onPrimaryKeyChange={onPkUpdate}
+        cursorType={getPathType(cursorRequired, shouldDefineCursor)}
+        onCursorChange={onCursorSelect}
+        hasFields={hasChildren}
+        onExpand={onExpand}
+        mode={mode}
+        changedSelected={changedSelected}
+        hasError={hasError}
+      />
       {isRowExpanded && hasChildren && (
-        <StreamFieldTable
-          config={config}
-          syncSchemaFields={flattenedFields}
-          onCursorSelect={onCursorSelect}
-          onPkSelect={onPkSelect}
-          shouldDefinePk={shouldDefinePk}
-          shouldDefineCursor={shouldDefineCursor}
-        />
+        <div className={styles.streamFieldTableContainer}>
+          <StreamFieldTable
+            config={config}
+            syncSchemaFields={flattenedFields}
+            onCursorSelect={onCursorSelect}
+            onPkSelect={onPkSelect}
+            shouldDefinePk={shouldDefinePk}
+            shouldDefineCursor={shouldDefineCursor}
+          />
+        </div>
       )}
-    </Section>
+    </div>
   );
 };
 

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

@@ -0,0 +1,16 @@
+// These are utility classes that will be used by multiple sub-components
+// of the CatalogTree component once we finish migrating to scss,
+// not only styles used directly in CatalogTree
+
+.headerCell {
+  font-size: 10px;
+  line-height: 13px;
+}
+
+.checkboxCell {
+  @extend .headerCell;
+  max-width: 43px;
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+}

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

@@ -1,9 +1,9 @@
-import { Field, FieldProps, setIn } from "formik";
+import { Field, FieldProps, setIn, useFormikContext } from "formik";
 import React, { useCallback } from "react";
 
 import { SyncSchemaStream } from "core/domain/catalog";
 import { AirbyteStreamConfiguration, DestinationSyncMode } from "core/request/AirbyteClient";
-import { FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";
+import { ConnectionFormValues, FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";
 
 import { ConnectionFormMode } from "../ConnectionForm/ConnectionForm";
 import { CatalogSection } from "./CatalogSection";
@@ -29,6 +29,12 @@ const CatalogTree: React.FC<CatalogTreeProps> = ({ streams, destinationSupported
     [streams, onChangeStream]
   );
 
+  const { initialValues } = useFormikContext<ConnectionFormValues>();
+
+  const changedStreams = streams.filter((stream, idx) => {
+    return stream.config?.selected !== initialValues.syncCatalog.streams[idx].config?.selected;
+  });
+
   return (
     <>
       {streams.map((streamNode) => (
@@ -44,6 +50,7 @@ const CatalogTree: React.FC<CatalogTreeProps> = ({ streams, destinationSupported
               destinationSupportedSyncModes={destinationSupportedSyncModes}
               updateStream={onUpdateStream}
               mode={mode}
+              changedSelected={changedStreams.includes(streamNode) && mode === "edit"}
             />
           )}
         </Field>

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

@@ -0,0 +1,64 @@
+@use "../../../scss/colors";
+@use "../../../scss/variables";
+@forward "./CatalogTree.module.scss";
+
+.removedStream {
+  color: colors.$dangerColor;
+}
+
+.icon {
+  margin-right: 7px;
+  margin-top: -1px;
+  &.plus {
+    color: colors.$successColor;
+  }
+  &.minus {
+    color: colors.$dangerColor;
+  }
+}
+
+.streamRowCheckboxCell {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.streamHeaderContent {
+  background: colors.$greyColor0;
+  transition: background-color variables.$transition;
+  width: 100%;
+  padding: 2px;
+  padding-left: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  vertical-align: middle;
+  height: 50px;
+}
+
+.catalogSectionRow {
+  height: 100%;
+  white-space: nowrap;
+  font-size: 12px;
+  display: flex;
+  flex-direction: row;
+  margin-top: 18px;
+  margin-bottom: 9px;
+}
+
+.redBackground {
+  background-color: colors.$dangerColor14;
+}
+
+.greenBackground {
+  background-color: colors.$successColor14;
+}
+
+.redBorder {
+  border: 1px solid colors.$dangerColor;
+}
+
+.purpleBackground {
+  background-color: colors.$primaryColor10;
+}