From bc8425f7ab4b1b024f49c506cb6622ca1b347a22 Mon Sep 17 00:00:00 2001
From: josephkmh <joseph@airbyte.io>
Date: Thu, 15 Dec 2022 14:27:32 -0600
Subject: [PATCH] pull up field toggling callback to parent

---
 .../connection/CatalogTree/CatalogSection.tsx | 53 ++++++++++---------
 .../CatalogTree/StreamFieldTable.tsx          | 27 ++--------
 2 files changed, 31 insertions(+), 49 deletions(-)

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.tsx
index 0b8792a09d4d..72a936ea37bc 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.tsx
@@ -100,28 +100,34 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
 
   const numberOfFieldsInStream = Object.keys(streamNode?.stream?.jsonSchema?.properties).length ?? 0;
 
-  const onSelectedFieldsUpdate = (selectedFields: SelectedFieldInfo[]) => {
-    updateStreamWithConfig({
-      selectedFields,
-      fieldSelectionEnabled: true,
-    });
-  };
-
-  // All fields in a stream are implicitly selected. When deselecting the first one, we also need to explicitly select the rest.
-  const onFirstFieldDeselected = (fieldPath: string[]) => {
-    const allOtherFields = fields.filter((field: SyncSchemaField) => !isEqual(field.path, fieldPath)) ?? [];
-    const selectedFields: SelectedFieldInfo[] = allOtherFields.map((field) => ({ fieldPath: field.path }));
-    updateStreamWithConfig({
-      selectedFields,
-      fieldSelectionEnabled: true,
-    });
-  };
+  const onSelectedFieldsUpdate = (fieldPath: string[], isSelected: boolean) => {
+    const previouslySelectedFields = config?.selectedFields || [];
 
-  const onAllFieldsSelected = () => {
-    updateStreamWithConfig({
-      selectedFields: [],
-      fieldSelectionEnabled: false,
-    });
+    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 pkRequired = config?.destinationSyncMode === DestinationSyncMode.append_dedup;
@@ -210,12 +216,9 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
             <StreamFieldTable
               config={config}
               syncSchemaFields={flattenedFields}
-              numberOfSelectableFields={numberOfFieldsInStream}
               onCursorSelect={onCursorSelect}
               onPkSelect={onPkSelect}
-              onSelectedFieldsUpdate={onSelectedFieldsUpdate}
-              onFirstFieldDeselected={onFirstFieldDeselected}
-              onAllFieldsSelected={onAllFieldsSelected}
+              handleFieldToggle={onSelectedFieldsUpdate}
               shouldDefinePk={shouldDefinePk}
               shouldDefineCursor={shouldDefineCursor}
             />
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx b/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx
index 7220f4fceaa4..d4fd2daea569 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx
@@ -2,7 +2,7 @@ import isEqual from "lodash/isEqual";
 import React, { useCallback } from "react";
 
 import { SyncSchemaField, SyncSchemaFieldObject } from "core/domain/catalog";
-import { AirbyteStreamConfiguration, SelectedFieldInfo } from "core/request/AirbyteClient";
+import { AirbyteStreamConfiguration } from "core/request/AirbyteClient";
 
 import { FieldHeader } from "./FieldHeader";
 import { FieldRow } from "./FieldRow";
@@ -13,43 +13,22 @@ import { TreeRowWrapper } from "./TreeRowWrapper";
 interface StreamFieldTableProps {
   config: AirbyteStreamConfiguration | undefined;
   onCursorSelect: (cursorPath: string[]) => void;
-  onFirstFieldDeselected: (fieldName: string[]) => void;
   onPkSelect: (pkPath: string[]) => void;
-  onSelectedFieldsUpdate: (selectedFields: SelectedFieldInfo[]) => void;
-  onAllFieldsSelected: () => void;
+  handleFieldToggle: (fieldPath: string[], isSelected: boolean) => void;
   shouldDefineCursor: boolean;
   shouldDefinePk: boolean;
   syncSchemaFields: SyncSchemaField[];
-  numberOfSelectableFields: number;
 }
 
 export const StreamFieldTable: React.FC<StreamFieldTableProps> = ({
   config,
   onCursorSelect,
-  onFirstFieldDeselected,
   onPkSelect,
-  onSelectedFieldsUpdate,
-  onAllFieldsSelected,
+  handleFieldToggle,
   shouldDefineCursor,
   shouldDefinePk,
   syncSchemaFields,
-  numberOfSelectableFields,
 }) => {
-  const handleFieldToggle = (fieldPath: string[], isSelected: boolean) => {
-    const previouslySelectedFields = config?.selectedFields || [];
-
-    if (!config?.fieldSelectionEnabled && !isSelected) {
-      onFirstFieldDeselected(fieldPath);
-    } else if (isSelected && previouslySelectedFields.length === numberOfSelectableFields - 1) {
-      // In this case we are selecting the only unselected field
-      onAllFieldsSelected();
-    } else if (isSelected) {
-      onSelectedFieldsUpdate([...previouslySelectedFields, { fieldPath }]);
-    } else {
-      onSelectedFieldsUpdate(previouslySelectedFields.filter((f) => !isEqual(f.fieldPath, fieldPath)) || []);
-    }
-  };
-
   const isFieldSelected = useCallback(
     (field: SyncSchemaField): boolean => {
       // All fields are implicitly selected if field selection is disabled