🪟 🎉 Add column selection UI to new stream table

airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.tsx

@@ -1,5 +1,4 @@
 import { FormikErrors, getIn } from "formik";
-import isEqual from "lodash/isEqual";
 import React, { memo, useCallback, useMemo } from "react";
 import { useToggle } from "react-use";
 
@@ -12,7 +11,6 @@ import {
   DestinationSyncMode,
   NamespaceDefinitionType,
   SyncMode,
-  SelectedFieldInfo,
 } from "core/request/AirbyteClient";
 import { useDestinationNamespace } from "hooks/connection/useDestinationNamespace";
 import { useNewTableDesignExperiment } from "hooks/connection/useNewTableDesignExperiment";
@@ -27,6 +25,8 @@ import {
   updatePrimaryKey,
   toggleFieldInPrimaryKey,
   updateCursorField,
+  updateFieldSelected,
+  toggleAllFieldsSelected,
 } from "./streamConfigHelpers/streamConfigHelpers";
 import { StreamFieldTable } from "./StreamFieldTable";
 import { StreamHeader } from "./StreamHeader";
@@ -51,8 +51,14 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
   errors,
   changedSelected,
 }) => {
+  const { stream, config } = streamNode;
   const isNewTableDesignEnabled = useNewTableDesignExperiment();
 
+  const fields = useMemo(() => {
+    const traversedFields = traverseSchemaToField(stream?.jsonSchema, stream?.name);
+    return traversedFields.sort(naturalComparatorBy((field) => field.cleanedName));
+  }, [stream?.jsonSchema, stream?.name]);
+
   const numberOfFieldsInStream = Object.keys(streamNode?.stream?.jsonSchema?.properties).length ?? 0;
 
   const {
@@ -61,7 +67,6 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
   const { mode } = useConnectionFormService();
 
   const [isRowExpanded, onExpand] = useToggle(false);
-  const { stream, config } = streamNode;
 
   const updateStreamWithConfig = useCallback(
     (config: Partial<AirbyteStreamConfiguration>) => updateStream(streamNode.id, config),
@@ -86,9 +91,7 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
       if (!config) {
         return;
       }
-
       const updatedConfig = toggleFieldInPrimaryKey(config, pkPath, numberOfFieldsInStream);
-
       updateStreamWithConfig(updatedConfig);
     },
     [config, updateStreamWithConfig, numberOfFieldsInStream]
@@ -99,9 +102,7 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
       if (!config) {
         return;
       }
-
       const updatedConfig = updateCursorField(config, cursorField, numberOfFieldsInStream);
-
       updateStreamWithConfig(updatedConfig);
     },
     [config, numberOfFieldsInStream, updateStreamWithConfig]
@@ -112,43 +113,30 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
       if (!config) {
         return;
       }
-
       const updatedConfig = updatePrimaryKey(config, newPrimaryKey, numberOfFieldsInStream);
-
       updateStreamWithConfig(updatedConfig);
     },
     [config, updateStreamWithConfig, numberOfFieldsInStream]
   );
 
-  const onToggleFieldSelected = (fieldPath: string[], isSelected: boolean) => {
-    const previouslySelectedFields = config?.selectedFields || [];
-
-    if (!config?.fieldSelectionEnabled && !isSelected) {
-      // All fields in a stream are implicitly selected. When deselecting the first one, we also need to explicitly select the rest.
-      const allOtherFields = fields.filter((field: SyncSchemaField) => !isEqual(field.path, fieldPath)) ?? [];
-      const selectedFields: SelectedFieldInfo[] = allOtherFields.map((field) => ({ fieldPath: field.path }));
-      updateStreamWithConfig({
-        selectedFields,
-        fieldSelectionEnabled: true,
-      });
-    } else if (isSelected && previouslySelectedFields.length === numberOfFieldsInStream - 1) {
-      // In this case we are selecting the only unselected field
-      updateStreamWithConfig({
-        selectedFields: [],
-        fieldSelectionEnabled: false,
-      });
-    } else if (isSelected) {
-      updateStreamWithConfig({
-        selectedFields: [...previouslySelectedFields, { fieldPath }],
-        fieldSelectionEnabled: true,
-      });
-    } else {
-      updateStreamWithConfig({
-        selectedFields: previouslySelectedFields.filter((f) => !isEqual(f.fieldPath, fieldPath)) || [],
-        fieldSelectionEnabled: true,
-      });
+  const onToggleAllFieldsSelected = useCallback(() => {
+    if (!config) {
+      return;
     }
-  };
+    const updatedConfig = toggleAllFieldsSelected(config);
+    updateStreamWithConfig(updatedConfig);
+  }, [config, updateStreamWithConfig]);
+
+  const onToggleFieldSelected = useCallback(
+    (fieldPath: string[], isSelected: boolean) => {
+      if (!config) {
+        return;
+      }
+      const updatedConfig = updateFieldSelected({ config, fields, fieldPath, isSelected, numberOfFieldsInStream });
+      updateStreamWithConfig(updatedConfig);
+    },
+    [config, fields, numberOfFieldsInStream, updateStreamWithConfig]
+  );
 
   const pkRequired = config?.destinationSyncMode === DestinationSyncMode.append_dedup;
   const cursorRequired = config?.syncMode === SyncMode.incremental;
@@ -172,12 +160,6 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
       namespaceFormat,
     }) ?? "";
 
-  const fields = useMemo(() => {
-    const traversedFields = traverseSchemaToField(stream?.jsonSchema, stream?.name);
-
-    return traversedFields.sort(naturalComparatorBy((field) => field.cleanedName));
-  }, [stream?.jsonSchema, stream?.name]);
-
   const flattenedFields = useMemo(() => flatten(fields), [fields]);
 
   const primitiveFields = useMemo<SyncSchemaField[]>(
@@ -231,11 +213,13 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
             onCursorSelect={onCursorSelect}
             onPkSelect={onPkSelect}
             onSelectedChange={onSelectStream}
+            handleFieldToggle={onToggleFieldSelected}
             shouldDefinePk={shouldDefinePk}
             shouldDefineCursor={shouldDefineCursor}
             isCursorDefinitionSupported={cursorRequired}
             isPKDefinitionSupported={pkRequired}
             stream={stream}
+            toggleAllFieldsSelected={onToggleAllFieldsSelected}
           />
         ) : (
           <div className={styles.streamFieldTableContainer}>

airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamDetailsPanel.tsx

@@ -14,12 +14,15 @@ interface StreamDetailsPanelProps extends StreamFieldsTableProps {
   onClose: () => void;
   onSelectedChange: () => void;
   stream?: AirbyteStream;
+  handleFieldToggle: (fieldPath: string[], isSelected: boolean) => void;
+  toggleAllFieldsSelected: () => void;
 }
 
 export const StreamDetailsPanel: React.FC<StreamDetailsPanelProps> = ({
   stream,
   config,
   disabled,
+  handleFieldToggle,
   onPkSelect,
   onCursorSelect,
   onClose,
@@ -29,6 +32,7 @@ export const StreamDetailsPanel: React.FC<StreamDetailsPanelProps> = ({
   isCursorDefinitionSupported,
   isPKDefinitionSupported,
   syncSchemaFields,
+  toggleAllFieldsSelected,
 }) => {
   return (
     <Dialog className={styles.dialog} open onClose={onClose}>
@@ -45,12 +49,14 @@ export const StreamDetailsPanel: React.FC<StreamDetailsPanelProps> = ({
           <StreamFieldsTable
             config={config}
             syncSchemaFields={syncSchemaFields}
+            handleFieldToggle={handleFieldToggle}
             onCursorSelect={onCursorSelect}
             onPkSelect={onPkSelect}
             shouldDefinePk={shouldDefinePk}
             shouldDefineCursor={shouldDefineCursor}
             isCursorDefinitionSupported={isCursorDefinitionSupported}
             isPKDefinitionSupported={isPKDefinitionSupported}
+            toggleAllFieldsSelected={toggleAllFieldsSelected}
           />
         </div>
       </Dialog.Panel>

airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamFieldsTable/StreamFieldsTable.module.scss

@@ -38,6 +38,11 @@ $cell-left-padding: variables.$spacing-xl + variables.$spacing-sm;
   line-height: 15px;
   text-transform: capitalize;
 
+  &--syncCell {
+    width: 0; /** Collapses the th to the exact size of its content **/
+    padding-right: variables.$spacing-lg;
+  }
+
   &:first-child {
     padding-left: $cell-left-padding;
     border-radius: 0;

airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamFieldsTable/StreamFieldsTable.tsx

@@ -1,14 +1,19 @@
 import { createColumnHelper } from "@tanstack/react-table";
-import React, { useMemo } from "react";
+import classNames from "classnames";
+import isEqual from "lodash/isEqual";
+import React, { useCallback, useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { pathDisplayName } from "components/connection/CatalogTree/PathPopout";
 import { ArrowRightIcon } from "components/icons/ArrowRightIcon";
+import { CheckBox } from "components/ui/CheckBox";
+import { FlexContainer } from "components/ui/Flex";
 import { NextTable } from "components/ui/NextTable";
 
 import { SyncSchemaField, SyncSchemaFieldObject } from "core/domain/catalog";
 import { AirbyteStreamConfiguration } from "core/request/AirbyteClient";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
+import { useExperiment } from "hooks/services/Experiment";
 import { useDestinationDefinition } from "services/connector/DestinationDefinitionService";
 import { useSourceDefinition } from "services/connector/SourceDefinitionService";
 import { equal } from "utils/objects";
@@ -18,8 +23,11 @@ import { ConnectorHeaderGroupIcon } from "./ConnectorHeaderGroupIcon";
 import { CursorCell } from "./CursorCell";
 import { PKCell } from "./PKCell";
 import styles from "./StreamFieldsTable.module.scss";
+import { SyncFieldCell } from "./SyncFieldCell";
 
 export interface TableStream {
+  field: SyncSchemaField;
+  isFieldSelected: boolean;
   path: string[];
   dataType: string;
   cursorDefined?: boolean;
@@ -28,32 +36,48 @@ export interface TableStream {
 
 export interface StreamFieldsTableProps {
   config?: AirbyteStreamConfiguration;
+  handleFieldToggle: (fieldPath: string[], isSelected: boolean) => void;
   onCursorSelect: (cursorPath: string[]) => void;
   onPkSelect: (pkPath: string[]) => void;
   shouldDefinePk: boolean;
   shouldDefineCursor: boolean;
   isCursorDefinitionSupported: boolean;
   isPKDefinitionSupported: boolean;
   syncSchemaFields: SyncSchemaField[];
+  toggleAllFieldsSelected: () => void;
 }
 
 export const StreamFieldsTable: React.FC<StreamFieldsTableProps> = ({
   config,
+  handleFieldToggle,
   onPkSelect,
   onCursorSelect,
   shouldDefineCursor,
   shouldDefinePk,
   isCursorDefinitionSupported,
   isPKDefinitionSupported,
   syncSchemaFields,
+  toggleAllFieldsSelected,
 }) => {
   const { formatMessage } = useIntl();
-
-  const isCursor = useMemo(() => (path: string[]) => equal(config?.cursorField, path), [config?.cursorField]);
-  const isPrimaryKey = useMemo(
-    () => (path: string[]) => !!config?.primaryKey?.some((p) => equal(p, path)),
+  const isColumnSelectionEnabled = useExperiment("connection.columnSelection", false);
+  const isCursor = useCallback((path: string[]) => equal(config?.cursorField, path), [config?.cursorField]);
+  const isPrimaryKey = useCallback(
+    (path: string[]) => !!config?.primaryKey?.some((p) => equal(p, path)),
     [config?.primaryKey]
   );
+  const checkIsFieldSelected = useCallback(
+    (field: SyncSchemaField): boolean => {
+      // All fields are implicitly selected if field selection is disabled
+      if (!config?.fieldSelectionEnabled) {
+        return true;
+      }
+
+      // path[0] is the top-level field name for all nested fields
+      return !!config?.selectedFields?.find((f) => isEqual(f.fieldPath, [field.path[0]]));
+    },
+    [config]
+  );
 
   // header group icons:
   const {
@@ -66,18 +90,53 @@ export const StreamFieldsTable: React.FC<StreamFieldsTableProps> = ({
   const tableData: TableStream[] = useMemo(
     () =>
       syncSchemaFields.map((stream) => ({
+        field: stream,
+        isFieldSelected: checkIsFieldSelected(stream),
         path: stream.path,
         dataType: getDataType(stream),
         cursorDefined: shouldDefineCursor && SyncSchemaFieldObject.isPrimitive(stream),
         primaryKeyDefined: shouldDefinePk && SyncSchemaFieldObject.isPrimitive(stream),
       })),
-    [shouldDefineCursor, shouldDefinePk, syncSchemaFields]
+    [shouldDefineCursor, shouldDefinePk, syncSchemaFields, checkIsFieldSelected]
   );
 
   const columnHelper = createColumnHelper<TableStream>();
 
   const sourceColumns = useMemo(
     () => [
+      ...(isColumnSelectionEnabled
+        ? [
+            columnHelper.display({
+              id: "sourceSyncField",
+              header: () => (
+                <FlexContainer gap="md">
+                  <CheckBox
+                    checkboxSize="sm"
+                    indeterminate={config?.fieldSelectionEnabled && !!config?.selectedFields?.length}
+                    checked={!config?.fieldSelectionEnabled}
+                    onChange={toggleAllFieldsSelected}
+                  />
+                  <FormattedMessage id="form.field.sync" />
+                </FlexContainer>
+              ),
+              cell: (props) => (
+                <SyncFieldCell
+                  field={props.row.original.field}
+                  isFieldSelected={props.row.original.isFieldSelected}
+                  handleFieldToggle={handleFieldToggle}
+                  checkIsCursor={isCursor}
+                  checkIsPrimaryKey={isPrimaryKey}
+                  syncMode={config?.syncMode}
+                  destinationSyncMode={config?.destinationSyncMode}
+                />
+              ),
+              meta: {
+                thClassName: classNames(styles.headerCell, styles["headerCell--syncCell"]),
+                tdClassName: styles.textCell,
+              },
+            }),
+          ]
+        : []),
       columnHelper.accessor("path", {
         id: "sourcePath",
         header: () => <FormattedMessage id="form.field.name" />,
@@ -134,13 +193,20 @@ export const StreamFieldsTable: React.FC<StreamFieldsTableProps> = ({
     ],
     [
       columnHelper,
+      config?.fieldSelectionEnabled,
+      config?.selectedFields?.length,
       formatMessage,
+      handleFieldToggle,
+      isColumnSelectionEnabled,
       isCursor,
       isPrimaryKey,
       isCursorDefinitionSupported,
       isPKDefinitionSupported,
       onCursorSelect,
       onPkSelect,
+      toggleAllFieldsSelected,
+      config?.syncMode,
+      config?.destinationSyncMode,
     ]
   );