refactor: unify import component logic and remove deprecated hooks (#1488)

## Description

Refactored component import functionality by removing deprecated hooks and consolidating the logic in the ComponentLibraryProvider. This change simplifies the component import flow by:

1. Removing `useComponentUploader` and `useImportComponent` hooks
2. Eliminating the `ComponentDuplicateDialog` from FlowCanvas
3. Moving file reading functionality to a dedicated utility function
4. Streamlining the component import process through the ComponentLibraryProvider

## Type of Change

- [x] Cleanup/Refactor
- [x] Improvement

## Checklist

- [x] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Test Instructions

1. [Screen Recording 2025-12-06 at 12.33.55 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/826c55e6-636b-4532-b2dd-9b343cd11129.mov" />](https://app.graphite.com/user-attachments/video/826c55e6-636b-4532-b2dd-9b343cd11129.mov)

    

    Test importing components by dragging and dropping YAML files onto the canvas
2. Verify that component import works through the sidebar import functionality
3. Confirm that duplicate component detection still works properly
4. Test that all 3 major ways of importing work exactly same
    1. Test import via "Add component" from "Used in Pipelines"
    2. Test import via "Drop on canvas"
    3. Test import from "Import Dialog"
5. Ensure Drop File on Canvas works in all ways - no regression
6. Ensure Drag-drop components from component library works exactly same, no regression

## Additional Comments

This change reduces code duplication and centralizes component import logic in the ComponentLibraryProvider, making the codebase more maintainable.

Author: maxy-shpfy

src/components/shared/ReactFlow/FlowCanvas/FlowCanvas.tsx

@@ -22,7 +22,6 @@ import { useEffect, useRef, useState } from "react";
 import { ConfirmationDialog } from "@/components/shared/Dialogs";
 import { BlockStack } from "@/components/ui/layout";
 import useComponentSpecToEdges from "@/hooks/useComponentSpecToEdges";
-import useComponentUploader from "@/hooks/useComponentUploader";
 import useConfirmationDialog from "@/hooks/useConfirmationDialog";
 import { useCopyPaste } from "@/hooks/useCopyPaste";
 import { useGhostNode } from "@/hooks/useGhostNode";
@@ -31,6 +30,7 @@ import { useNodeCallbacks } from "@/hooks/useNodeCallbacks";
 import { useSubgraphKeyboardNavigation } from "@/hooks/useSubgraphKeyboardNavigation";
 import useToastNotification from "@/hooks/useToastNotification";
 import { cn } from "@/lib/utils";
+import { useComponentLibrary } from "@/providers/ComponentLibraryProvider";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useContextPanel } from "@/providers/ContextPanelProvider";
 import { hydrateComponentReference } from "@/services/componentService";
@@ -40,15 +40,14 @@ import {
   isNotMaterializedComponentReference,
   type TaskSpec,
 } from "@/utils/componentSpec";
-import { loadComponentAsRefFromText } from "@/utils/componentStore";
+import { readTextFromFile } from "@/utils/dom";
 import { deselectAllNodes } from "@/utils/flowUtils";
 import createNodesFromComponentSpec from "@/utils/nodes/createNodesFromComponentSpec";
 import {
   getSubgraphComponentSpec,
   updateSubgraphSpec,
 } from "@/utils/subgraphUtils";
 
-import ComponentDuplicateDialog from "../../Dialogs/ComponentDuplicateDialog";
 import { useBetaFlagValue } from "../../Settings/useBetaFlags";
 import { useNodesOverlay } from "../NodesOverlay/NodesOverlayProvider";
 import { getBulkUpdateConfirmationDetails } from "./ConfirmationDialogs/BulkUpdateConfirmationDialog";
@@ -169,6 +168,8 @@ const FlowCanvas = ({
   const [shiftKeyPressed, setShiftKeyPressed] = useState(false);
   const [metaKeyPressed, setMetaKeyPressed] = useState(false);
 
+  const { addToComponentLibrary } = useComponentLibrary();
+
   const handleKeyDown = (event: KeyboardEvent) => {
     const target = event.target as HTMLElement;
     const isInputFocused =
@@ -465,67 +466,7 @@ const FlowCanvas = ({
     };
   }, [isConnecting, reactFlowInstance]);
 
-  const {
-    handleDrop,
-    existingAndNewComponent,
-    handleCancelUpload,
-    handleImportComponent,
-  } = useComponentUploader(readOnly, {
-    onImportSuccess: async (
-      content: string,
-      dropEvent?: DragEvent<HTMLDivElement>,
-    ) => {
-      if (readOnly) return;
-
-      try {
-        // Parse the imported YAML to get the component spec
-        const componentRef = await loadComponentAsRefFromText(content);
-
-        if (!componentRef.spec) {
-          console.error("Failed to parse component spec from imported content");
-          return;
-        }
-
-        let position;
-
-        if (dropEvent && reactFlowInstance) {
-          // Use the drop position if available
-          position = getPositionFromEvent(dropEvent, reactFlowInstance);
-        } else {
-          // Fallback to center of the canvas viewport
-          const { domNode } = store.getState();
-          const boundingRect = domNode?.getBoundingClientRect();
-
-          if (boundingRect && reactFlowInstance) {
-            position = reactFlowInstance.screenToFlowPosition({
-              x: boundingRect.x + boundingRect.width / 2,
-              y: boundingRect.y + boundingRect.height / 2,
-            });
-          }
-        }
-
-        if (position) {
-          const taskSpec: TaskSpec = {
-            annotations: {},
-            componentRef: { ...componentRef },
-          };
-          const { spec: newComponentSpec } = addTask(
-            "task",
-            taskSpec,
-            position,
-            componentSpec,
-          );
-
-          setComponentSpec(newComponentSpec);
-        }
-      } catch (error) {
-        console.error("Failed to add imported component to canvas:", error);
-        notify("Failed to add component to canvas", "error");
-      }
-    },
-  });
-
-  const onDragOver = (event: DragEvent<HTMLDivElement>) => {
+  const onDragOver = async (event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();
 
     // Check if we're dragging files
@@ -564,10 +505,48 @@ const FlowCanvas = ({
 
   const onDrop = async (event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();
+    if (readOnly) return;
 
     // Handle file drops
     if (event.dataTransfer.files.length > 0) {
-      handleDrop(event);
+      try {
+        // Parse the imported YAML to get the component spec
+        const content = await readTextFromFile(event.dataTransfer.files[0]);
+        const hydratedComponentRef = await hydrateComponentReference({
+          text: content,
+        });
+
+        if (!hydratedComponentRef) {
+          notify(
+            "Failed to parse component spec from imported content",
+            "error",
+          );
+          return;
+        }
+
+        const result = await addToComponentLibrary(hydratedComponentRef);
+
+        if (result && reactFlowInstance) {
+          // Use the drop position if available
+          const position = getPositionFromEvent(event, reactFlowInstance);
+          const taskSpec: TaskSpec = {
+            annotations: {},
+            componentRef: hydratedComponentRef,
+          };
+          const { spec: newComponentSpec } = addTask(
+            "task",
+            taskSpec,
+            position,
+            componentSpec,
+          );
+
+          setComponentSpec(newComponentSpec);
+        }
+      } catch (error) {
+        console.error("Failed to add imported component to canvas:", error);
+        notify("Failed to add component to canvas", "error");
+      }
+
       return;
     }
 
@@ -1030,12 +1009,6 @@ const FlowCanvas = ({
         currentSubgraphSpec={currentSubgraphSpec}
         onCreateSubgraph={handleCreateSubgraph}
       />
-      <ComponentDuplicateDialog
-        existingComponent={existingAndNewComponent?.existingComponent}
-        newComponent={existingAndNewComponent?.newComponent}
-        setClose={handleCancelUpload}
-        handleImportComponent={handleImportComponent}
-      />
     </BlockStack>
   );
 };

src/components/shared/ReactFlow/FlowSidebar/components/ImportComponent.tsx

@@ -31,10 +31,8 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import useToastNotification from "@/hooks/useToastNotification";
 import { cn } from "@/lib/utils";
 import { useComponentLibrary } from "@/providers/ComponentLibraryProvider";
-import {
-  getStringFromData,
-  hydrateComponentReference,
-} from "@/services/componentService";
+import { hydrateComponentReference } from "@/services/componentService";
+import { getStringFromData } from "@/utils/string";
 
 enum TabType {
   URL = "URL",
@@ -121,33 +119,15 @@ const ImportComponent = ({
         throw new Error("Failed to hydrate component");
       }
 
-      const abortController = new AbortController();
-
-      return await Promise.all([
-        Promise.race([
-          createPromiseFromDomEvent(
-            window,
-            "tangle.library.componentAdded",
-            abortController.signal,
-          ),
-          createPromiseFromDomEvent(
-            window,
-            "tangle.library.duplicateDialogClosed",
-            abortController.signal,
-          ),
-        ]),
-        addToComponentLibrary(hydratedComponent),
-      ]).finally(() => {
-        abortController.abort();
-      });
+      return await addToComponentLibrary(hydratedComponent);
     },
-    onSuccess: async ([result, _]) => {
+    onSuccess: async (result) => {
       setIsOpen(false);
       setUrl("");
       setSelectedFile(null);
       setSelectedFileName("");
 
-      if (result instanceof CustomEvent && result.detail?.component) {
+      if (result) {
         notify("Component imported successfully", "success");
       }
     },
@@ -351,23 +331,4 @@ const ImportComponent = ({
   );
 };
 
-function createPromiseFromDomEvent(
-  eventTarget: EventTarget,
-  eventName: string,
-  abortSignal?: AbortSignal,
-) {
-  return new Promise<Event>((resolve) => {
-    const handleEvent = (event: Event) => {
-      eventTarget.removeEventListener(eventName, handleEvent);
-
-      resolve(event);
-    };
-
-    eventTarget.addEventListener(eventName, handleEvent, {
-      once: true,
-      signal: abortSignal,
-    });
-  });
-}
-
 export default ImportComponent;