fix component text corruption in duplicate dialog (#1448)

## Description

Closes #1403

Refactored component duplication and library management to use hydrated component references. This PR eliminates the need to repeatedly serialize/deserialize components with `js-yaml`.

Key changes:

- Added a `replaceComponentName` helper function to modify component names directly in the text
- Updated `ComponentDuplicateDialog` to work with hydrated components
- Modified `FavoriteComponentToggle` to hydrate components before adding them to the library
- Updated the component library provider to handle hydrated components throughout

## 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

[Screen Recording 2025-12-01 at 8.29.44 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/06a293d2-a1a9-47b8-9fec-920c3f82b312.mov" />](https://app.graphite.com/user-attachments/video/06a293d2-a1a9-47b8-9fec-920c3f82b312.mov)

1. Follow video to test the functionality.
2. Open any component for edit in YAML editor (not Python).
3. Add multiple lines of strings (e.g. `#1`​ like comments)
4. Save. Observe the Duplicate dialog. Test that dialog works exactly same as in staging/production
5. Ensure, that after subsequent edits of the same component does not alterate the content of component (adding new lines, or collapsing lines into one line).
6. Follow examples from the ticket #1403
7. Ensure that remaining functionality has no regressions (e.g. adding components via Canvas drops, adding removing components from favorites).

## Notes

- This PR does not address round-trip issues with "Component Details" e.g. download YAML or Implementation Code (which comes from Spec, not Text).

Author: maxy-shpfy

src/components/shared/Dialogs/ComponentDuplicateDialog.test.tsx

@@ -0,0 +1,280 @@
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import type { HydratedComponentReference } from "@/utils/componentSpec";
+import type { UserComponent } from "@/utils/localforage";
+
+import ComponentDuplicateDialog from "./ComponentDuplicateDialog";
+
+// Mock only what's necessary - file operations and digest generation
+vi.mock("@/utils/componentStore", async (importOriginal) => ({
+  ...(await importOriginal()),
+  deleteComponentFileFromList: vi.fn().mockResolvedValue(undefined),
+}));
+
+// Import mocked functions
+import { deleteComponentFileFromList } from "@/utils/componentStore";
+
+describe("ComponentDuplicateDialog", () => {
+  // Test data
+  const mockExistingComponent: UserComponent = {
+    name: "ExistingComponent",
+    componentRef: {
+      name: "ExistingComponent",
+      digest: "existing-digest-123",
+    },
+    data: new ArrayBuffer(0),
+    creationTime: new Date("2024-01-01"),
+    modificationTime: new Date("2024-01-02"),
+  };
+
+  const mockNewComponent: HydratedComponentReference = {
+    name: "NewComponent",
+    digest: "new-digest-456",
+    text: `name: NewComponent
+description: A new component
+inputs: []
+outputs: []
+implementation:
+  container:
+    image: test-image`,
+    spec: {
+      name: "NewComponent",
+      description: "A new component",
+      inputs: [],
+      outputs: [],
+      implementation: {
+        container: {
+          image: "test-image",
+        },
+      },
+    },
+  };
+
+  const mockHandleImportComponent = vi.fn().mockResolvedValue(undefined);
+  const mockSetClose = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("should close dialog when Cancel button is clicked", async () => {
+    render(
+      <ComponentDuplicateDialog
+        existingComponent={mockExistingComponent}
+        newComponent={mockNewComponent}
+        newComponentDigest="new-digest-456"
+        setClose={mockSetClose}
+        handleImportComponent={mockHandleImportComponent}
+      />,
+    );
+
+    // Verify dialog is open
+    expect(
+      screen.getByTestId("component-duplicate-dialog-title"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Component already exists")).toBeInTheDocument();
+
+    // Click Cancel button
+    const cancelButton = screen.getByTestId(
+      "duplicate-component-cancel-button",
+    );
+
+    await act(async () => {
+      fireEvent.click(cancelButton);
+    });
+
+    // Verify setClose was called
+    expect(mockSetClose).toHaveBeenCalledOnce();
+    expect(mockHandleImportComponent).not.toHaveBeenCalled();
+  });
+
+  test("should replace existing component when Replace existing button is clicked", async () => {
+    render(
+      <ComponentDuplicateDialog
+        existingComponent={mockExistingComponent}
+        newComponent={mockNewComponent}
+        newComponentDigest="new-digest-456"
+        setClose={mockSetClose}
+        handleImportComponent={mockHandleImportComponent}
+      />,
+    );
+
+    // Verify dialog is open with correct existing component info
+    const existingNameInput = screen.getAllByRole("textbox")[0];
+    expect(existingNameInput).toHaveValue("ExistingComponent");
+    expect(existingNameInput).toHaveAttribute("readonly");
+
+    // Click Replace existing button
+    const replaceButton = screen.getByTestId(
+      "duplicate-component-replace-existing-button",
+    );
+
+    await act(async () => {
+      await fireEvent.click(replaceButton);
+    });
+
+    await waitFor(() => {
+      // Verify deleteComponentFileFromList was called with correct parameters
+      expect(deleteComponentFileFromList).toHaveBeenCalledWith(
+        "user_components",
+        "ExistingComponent",
+      );
+
+      // Verify handleImportComponent was called with the original text
+      expect(mockHandleImportComponent).toHaveBeenCalledWith(
+        mockNewComponent.text,
+      );
+
+      // Verify setClose was called
+      expect(mockSetClose).toHaveBeenCalledOnce();
+    });
+  });
+
+  test("should import as new component when Import as new button is clicked", async () => {
+    render(
+      <ComponentDuplicateDialog
+        existingComponent={mockExistingComponent}
+        newComponent={mockNewComponent}
+        newComponentDigest="new-digest-456"
+        setClose={mockSetClose}
+        handleImportComponent={mockHandleImportComponent}
+      />,
+    );
+
+    // Find the new component name input (based on the rendering order)
+    const nameInputs = screen.getAllByRole("textbox");
+    const newNameInput = nameInputs[2]; // Third input is the editable new component name
+
+    // Verify initial state
+    expect(newNameInput).toHaveValue("NewComponent");
+
+    // Change the name to something different
+    await act(async () => {
+      await fireEvent.change(newNameInput, {
+        target: { value: "RenamedComponent" },
+      });
+      const importButton = screen.getByText("Import as new");
+      fireEvent.click(importButton);
+    });
+
+    await waitFor(() => {
+      // Verify handleImportComponent was called with renamed text
+      expect(mockHandleImportComponent).toHaveBeenCalledWith(
+        expect.stringContaining("name: RenamedComponent"),
+      );
+
+      // Verify deleteComponentFileFromList was NOT called
+      expect(deleteComponentFileFromList).not.toHaveBeenCalled();
+
+      // Verify setClose was called
+      expect(mockSetClose).toHaveBeenCalledOnce();
+    });
+  });
+
+  test("should disable Import as new button when name is the same as existing", async () => {
+    render(
+      <ComponentDuplicateDialog
+        existingComponent={mockExistingComponent}
+        newComponent={mockNewComponent}
+        newComponentDigest="new-digest-456"
+        setClose={mockSetClose}
+        handleImportComponent={mockHandleImportComponent}
+      />,
+    );
+
+    const importButton = screen.getByText("Import as new");
+    const nameInputs = screen.getAllByRole("textbox");
+    const newNameInput = nameInputs[2]; // Third input is the editable new component name
+
+    // Initially, the name should be "NewComponent" and button should be enabled
+    expect(newNameInput).toHaveValue("NewComponent");
+    expect(importButton).toBeEnabled();
+
+    // Change name to be same as existing component - should disable button
+    await act(async () => {
+      fireEvent.change(newNameInput, {
+        target: { value: "ExistingComponent" },
+      });
+    });
+
+    expect(importButton).toBeDisabled();
+  });
+
+  test("should not render dialog when required props are missing", () => {
+    // Test with missing newComponent
+    const { container: container1 } = render(
+      <ComponentDuplicateDialog
+        existingComponent={mockExistingComponent}
+        newComponent={null}
+        setClose={mockSetClose}
+        handleImportComponent={mockHandleImportComponent}
+      />,
+    );
+    expect(container1.querySelector("[role='dialog']")).not.toBeInTheDocument();
+
+    // Test with missing existingComponent
+    const { container: container2 } = render(
+      <ComponentDuplicateDialog
+        existingComponent={undefined}
+        newComponent={mockNewComponent}
+        setClose={mockSetClose}
+        handleImportComponent={mockHandleImportComponent}
+      />,
+    );
+    expect(container2.querySelector("[role='dialog']")).not.toBeInTheDocument();
+  });
+
+  test("should display correct component information in the dialog", () => {
+    render(
+      <ComponentDuplicateDialog
+        existingComponent={mockExistingComponent}
+        newComponent={mockNewComponent}
+        newComponentDigest="new-digest-456"
+        setClose={mockSetClose}
+        handleImportComponent={mockHandleImportComponent}
+      />,
+    );
+
+    // Check dialog title and descriptions
+    expect(screen.getByText("Component already exists")).toBeInTheDocument();
+    expect(
+      screen.getByText(/The component you are trying to import already exists/),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Note: "Replace existing" will use the existing name/),
+    ).toBeInTheDocument();
+
+    // Check existing component section
+    expect(screen.getByText("Existing Component")).toBeInTheDocument();
+    const textboxes = screen.getAllByRole("textbox");
+
+    // Existing component name (first textbox)
+    expect(textboxes[0]).toHaveValue("ExistingComponent");
+    expect(textboxes[0]).toHaveAttribute("readonly");
+    expect(textboxes[0]).toHaveClass("border-blue-200", "bg-blue-100/50");
+
+    // Existing component digest (second textbox)
+    expect(textboxes[1]).toHaveValue("existing-digest-123");
+    expect(textboxes[1]).toHaveAttribute("readonly");
+    expect(textboxes[1]).toHaveClass("border-blue-200", "bg-blue-100/50");
+
+    // Check new component section
+    expect(screen.getByText("New Component")).toBeInTheDocument();
+
+    // New component name (third textbox) - should be editable
+    expect(textboxes[2]).toHaveValue("NewComponent");
+    expect(textboxes[2]).not.toHaveAttribute("readonly");
+    expect(textboxes[2]).toHaveFocus(); // Has autoFocus
+
+    // New component digest (fourth textbox)
+    expect(textboxes[3]).toHaveValue("new-digest-456");
+    expect(textboxes[3]).toHaveAttribute("readonly");
+  });
+});