fix: inconsistent behavior between ImportComponent and Drop on canvas (#1487)

## Description

Closes Shopify/oasis-frontend#226

Refactored component import functionality to use React Query mutations and improved event handling. The main changes include:

- Made `ComponentDuplicateDialog` wait for the import component operation to complete by adding `await`
- Replaced the deprecated `useImportComponent` hook with direct usage of the `ComponentLibraryProvider`
- Added custom DOM event handling for component library events
- Implemented loading state indicators with a spinner during component import
- Added event dispatching when components are added to the library
- Added tests for the new event-based functionality

## Type of Change

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

## 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.18.30 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/4afe34ee-da7b-46e2-9134-af5f70655cc2.mov" />](https://app.graphite.com/user-attachments/video/4afe34ee-da7b-46e2-9134-af5f70655cc2.mov)

    [Screen Recording 2025-12-06 at 12.15.30 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/f6f138a6-e1bf-43fb-bdd9-936a1db085fc.mov" />](https://app.graphite.com/user-attachments/video/f6f138a6-e1bf-43fb-bdd9-936a1db085fc.mov)

    Import a component using the import dialog
2. Verify the loading state is displayed correctly
3. Confirm the component is successfully added to the library
4. Check that duplicate component handling works as expected
5. Test that all 3 major ways of importing works 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"

Author: maxy-shpfy

src/components/shared/Dialogs/ComponentDuplicateDialog.tsx

@@ -119,7 +119,7 @@ const ComponentDuplicateDialog = ({
       USER_COMPONENTS_LIST_NAME,
       existingComponent?.name ?? "",
     );
-    handleImportComponent(yamlString);
+    await handleImportComponent(yamlString);
 
     setClose();
   }, [handleImportComponent, setClose]);

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

@@ -1,3 +1,4 @@
+import { useMutation } from "@tanstack/react-query";
 import { PackagePlus, X } from "lucide-react";
 import { Upload } from "lucide-react";
 import {
@@ -25,10 +26,15 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import useImportComponent from "@/hooks/useImportComponent";
 import useToastNotification from "@/hooks/useToastNotification";
 import { cn } from "@/lib/utils";
+import { useComponentLibrary } from "@/providers/ComponentLibraryProvider";
+import {
+  getStringFromData,
+  hydrateComponentReference,
+} from "@/services/componentService";
 
 enum TabType {
   URL = "URL",
@@ -42,13 +48,13 @@ const ImportComponent = ({
   triggerComponent?: ReactNode;
 }) => {
   const notify = useToastNotification();
+  const { addToComponentLibrary } = useComponentLibrary();
 
   const hasEnabledInAppEditor = useBetaFlagValue("in-app-component-editor");
 
   const [url, setUrl] = useState("");
   const [tab, setTab] = useState<TabType>(TabType.File);
   const [isOpen, setIsOpen] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
   const [selectedFile, setSelectedFile] = useState<string | ArrayBuffer | null>(
     null,
   );
@@ -63,21 +69,6 @@ const ImportComponent = ({
     setIsOpen(false);
   };
 
-  const { onImportFromUrl, onImportFromFile, isLoading } = useImportComponent({
-    successCallback: () => {
-      setIsOpen(false);
-      setUrl("");
-      setSelectedFile(null);
-      setSelectedFileName("");
-      setIsSubmitting(false);
-      notify("Component imported successfully", "success");
-    },
-    errorCallback: (error: Error) => {
-      notify(error.message, "error");
-      setIsSubmitting(false);
-    },
-  });
-
   const handleTabChange = useCallback((value: TabType) => {
     setTab(value);
   }, []);
@@ -114,14 +105,60 @@ const ImportComponent = ({
     }
   }, []);
 
+  const { mutate: importComponent, isPending } = useMutation({
+    mutationFn: async () => {
+      const componentRef = {
+        text:
+          tab === TabType.File && selectedFile
+            ? getStringFromData(selectedFile)
+            : undefined,
+        url: tab === TabType.URL ? url : undefined,
+      };
+
+      const hydratedComponent = await hydrateComponentReference(componentRef);
+
+      if (!hydratedComponent) {
+        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();
+      });
+    },
+    onSuccess: async ([result, _]) => {
+      setIsOpen(false);
+      setUrl("");
+      setSelectedFile(null);
+      setSelectedFileName("");
+
+      if (result instanceof CustomEvent && result.detail?.component) {
+        notify("Component imported successfully", "success");
+      }
+    },
+    onError: (error: Error) => {
+      notify(error.message, "error");
+    },
+  });
+
   const handleImport = useCallback(() => {
-    setIsSubmitting(true);
-    if (tab === TabType.URL) {
-      onImportFromUrl(url);
-    } else if (tab === TabType.File && selectedFile) {
-      onImportFromFile(selectedFile as string);
-    }
-  }, [tab, url, selectedFile]);
+    void importComponent();
+  }, [importComponent]);
 
   const handleUrlChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -132,22 +169,20 @@ const ImportComponent = ({
 
   const handleOpenChange = useCallback(
     (open: boolean) => {
-      if (!open && (isLoading || isSubmitting)) return;
+      if (!open && isPending) return;
 
       if (!open) {
         setUrl("");
         setSelectedFile(null);
         setSelectedFileName("");
-        setIsSubmitting(false);
       }
       setIsOpen(open);
     },
-    [isLoading, isSubmitting],
+    [isPending],
   );
 
   const isButtonDisabled =
-    isLoading ||
-    isSubmitting ||
+    isPending ||
     (tab === TabType.URL && !url) ||
     (tab === TabType.File && !selectedFile);
 
@@ -203,7 +238,7 @@ const ImportComponent = ({
                           type="file"
                           accept=".yaml"
                           onChange={handleFileChange}
-                          disabled={isLoading || isSubmitting}
+                          disabled={isPending}
                           ref={fileInputRef}
                           className={`absolute inset-0 w-full h-full opacity-0 cursor-pointer ${selectedFileName ? "hidden" : ""}`}
                         />
@@ -263,7 +298,7 @@ const ImportComponent = ({
                       placeholder="https://raw.githubusercontent.com/.../component.yaml"
                       value={url}
                       onChange={handleUrlChange}
-                      disabled={isLoading || isSubmitting}
+                      disabled={isPending}
                     />
                     <p className="text-sm text-gray-500">
                       Enter the URL of a component YAML file
@@ -293,7 +328,13 @@ const ImportComponent = ({
                 onClick={handleImport}
                 disabled={isButtonDisabled}
               >
-                Import
+                {isPending ? (
+                  <>
+                    <Spinner /> Importing...
+                  </>
+                ) : (
+                  "Import"
+                )}
               </Button>
             )}
           </DialogFooter>
@@ -310,4 +351,23 @@ 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;

src/hooks/useComponentUploader.tsx

@@ -17,6 +17,9 @@ interface useComponentUploaderProps {
   ) => void;
 }
 
+/**
+ * @deprecated - use ComponentLibraryProvider instead
+ */
 const useComponentUploader = (
   readOnly = false,
   { onImportSuccess }: useComponentUploaderProps,

src/hooks/useImportComponent.ts

@@ -12,6 +12,10 @@ interface ImportComponentProps {
   errorCallback?: (error: Error) => void;
 }
 
+/**
+ *
+ * @deprecated
+ */
 const useImportComponent = ({
   successCallback,
   errorCallback,

src/providers/ComponentLibraryProvider/ComponentLibraryProvider.test.tsx

@@ -359,6 +359,48 @@ describe("ComponentLibraryProvider - Component Management", () => {
 
       expect(mockImportComponent).toHaveBeenCalledWith(newComponent);
     });
+
+    it("should dispatch custom event 'tangle.library.componentAdded' when component is added", async () => {
+      const newComponent: HydratedComponentReference = {
+        name: "event-test-component",
+        digest: "event-digest",
+        spec: mockComponentSpec,
+        text: "event test yaml",
+      };
+
+      mockImportComponent.mockResolvedValue(undefined);
+      mockFlattenFolders.mockReturnValue([]); // No duplicate
+
+      const { result } = renderHook(() => useComponentLibrary(), {
+        wrapper: createWrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      const eventListener = vi.fn();
+      window.addEventListener("tangle.library.componentAdded", eventListener);
+
+      await act(async () => {
+        await result.current.addToComponentLibrary(newComponent);
+      });
+
+      expect(mockImportComponent).toHaveBeenCalledWith(newComponent);
+      expect(eventListener).toHaveBeenCalled();
+
+      // Optional: check event detail contents if relevant
+      const eventArg = eventListener.mock.calls[0]?.[0];
+      expect(eventArg).toBeInstanceOf(CustomEvent);
+      expect(eventArg.detail?.component).toEqual(
+        expect.objectContaining(newComponent),
+      );
+
+      window.removeEventListener(
+        "tangle.library.componentAdded",
+        eventListener,
+      );
+    });
   });
 
   describe("Removing Components", () => {

src/providers/ComponentLibraryProvider/ComponentLibraryProvider.tsx

@@ -80,7 +80,9 @@ type ComponentLibraryContextType = {
     search: string,
     filters: string[],
   ) => SearchResult | null;
-  addToComponentLibrary: (component: HydratedComponentReference) => void;
+  addToComponentLibrary: (
+    component: HydratedComponentReference,
+  ) => Promise<void>;
   removeFromComponentLibrary: (component: ComponentReference) => void;
   refetchLibrary: () => void;
   refetchUserComponents: () => void;
@@ -418,6 +420,25 @@ export const ComponentLibraryProvider = ({
     [componentLibrary, userComponentsFolder, usedComponentsFolder],
   );
 
+  const internalAddComponentToLibrary = useCallback(
+    async (hydratedComponent: HydratedComponentReference) => {
+      await importComponent(hydratedComponent);
+      await refreshComponentLibrary();
+      await refreshUserComponents();
+      setNewComponent(null);
+      setExistingComponent(null);
+
+      dispatchEvent(
+        new CustomEvent("tangle.library.componentAdded", {
+          detail: {
+            component: hydratedComponent,
+          },
+        }),
+      );
+    },
+    [refreshComponentLibrary, refreshUserComponents, importComponent],
+  );
+
   const handleImportComponent = useCallback(
     async (yamlString: string) => {
       try {
@@ -429,11 +450,7 @@ export const ComponentLibraryProvider = ({
           throw new Error("Failed to hydrate component");
         }
 
-        await importComponent(hydratedComponent);
-        await refreshComponentLibrary();
-        await refreshUserComponents();
-        setNewComponent(null);
-        setExistingComponent(null);
+        await internalAddComponentToLibrary(hydratedComponent);
       } catch (error) {
         console.error("Error importing component:", error);
       }
@@ -454,19 +471,21 @@ export const ComponentLibraryProvider = ({
           )
         : undefined;
 
-      if (duplicate?.name) {
-        const existingUserComponent = await getUserComponentByName(
-          duplicate.name,
-        );
+      const existingUserComponent = duplicate?.name
+        ? await getUserComponentByName(duplicate.name)
+        : undefined;
+
+      if (
+        existingUserComponent &&
+        existingUserComponent.componentRef.digest !== component.digest
+      ) {
         setExistingComponent(existingUserComponent);
         setNewComponent(component);
         return;
       }
 
       try {
-        await importComponent(component);
-        await refreshComponentLibrary();
-        await refreshUserComponents();
+        await internalAddComponentToLibrary(component);
       } catch (error) {
         console.error("Error adding component to library:", error);
       }
@@ -505,6 +524,8 @@ export const ComponentLibraryProvider = ({
   const handleCloseDuplicationDialog = useCallback(() => {
     setExistingComponent(null);
     setNewComponent(null);
+
+    dispatchEvent(new CustomEvent("tangle.library.duplicateDialogClosed"));
   }, []);
 
   const searchResult = useMemo(

src/services/componentService.ts

@@ -331,7 +331,7 @@ export const parseComponentData = (data: string): ComponentSpec | null => {
  * @param data - The data to normalize.
  * @returns The string representation of the data.
  */
-function getStringFromData(data: string | ArrayBuffer): string {
+export function getStringFromData(data: string | ArrayBuffer): string {
   if (typeof data === "object" && "byteLength" in data) {
     return new TextDecoder().decode(data);
   }