🪟 🐛 Fixes BulkEditServiceProvider to use filtered streams instead of …

…all streams (#21902) * Fixes BulkEditServiceProvider to use filtered streams instead of all streams * Fixes CatalogTree streams updating while filtering streams by search input * Adds functionality to disable CatalogTreeSearch while bulk adi is active
airbytehq · Feb 6, 2023 · 57b0088 · 57b0088
1 parent 36698ce
commit 57b0088
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx
@@ -30,6 +30,12 @@ const CatalogTreeComponent: React.FC<React.PropsWithChildren<CatalogTreeProps>>
 
   const [searchString, setSearchString] = useState("");
 
+  const onBatchStreamsChanged = useCallback(
+    (newStreams: SyncSchemaStream[]) =>
+      onStreamsChanged(streams.map((str) => newStreams.find((newStr) => newStr.id === str.id) ?? str)),
+    [streams, onStreamsChanged]
+  );
+
   const onSingleStreamChanged = useCallback(
     (newValue: SyncSchemaStream) => onStreamsChanged(streams.map((str) => (str.id === newValue.id ? newValue : str))),
     [streams, onStreamsChanged]
@@ -70,7 +76,7 @@ const CatalogTreeComponent: React.FC<React.PropsWithChildren<CatalogTreeProps>>
   );
 
   return (
-    <BulkEditServiceProvider nodes={streams} update={onStreamsChanged}>
+    <BulkEditServiceProvider nodes={filteredStreams} update={onBatchStreamsChanged}>
       <LoadingBackdrop loading={isLoading}>
         {mode !== "readonly" && <CatalogTreeSearch onSearch={setSearchString} />}
         <div className={classNames(styles.catalogTreeTable, { [styles.newCatalogTreeTable]: isNewTableDesignEnabled })}>

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx
@@ -3,6 +3,8 @@ import { useIntl } from "react-intl";
 
 import { Input } from "components/ui/Input";
 
+import { useBulkEditService } from "hooks/services/BulkEdit/BulkEditService";
+
 import styles from "./CatalogTreeSearch.module.scss";
 
 interface CatalogTreeSearchProps {
@@ -11,10 +13,12 @@ interface CatalogTreeSearchProps {
 
 export const CatalogTreeSearch: React.FC<CatalogTreeSearchProps> = ({ onSearch }) => {
   const { formatMessage } = useIntl();
+  const { isActive } = useBulkEditService();
 
   return (
     <div className={styles.searchContent}>
       <Input
+        disabled={isActive}
         className={styles.searchInput}
         placeholder={formatMessage({
           id: `form.nameSearch`,