🪟 🔧 Refactor column selection callback (#20544)

airbytehq · Jan 2, 2023 · d71273d · d71273d
1 parent 2654e05
commit d71273d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 49 deletions.
diff --git 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;
@@ -212,12 +218,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
@@ -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