diff --git a/web_src/src/pages/workflowv2/CanvasYamlModal.spec.tsx b/web_src/src/pages/workflowv2/CanvasYamlModal.spec.tsx
new file mode 100644
index 0000000000..c39bdc3297
--- /dev/null
+++ b/web_src/src/pages/workflowv2/CanvasYamlModal.spec.tsx
@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { CanvasYamlModal } from "./CanvasYamlModal";
+
+vi.mock("@monaco-editor/react", () => ({
+  Editor: ({ value }: { value?: string }) => <pre data-testid="monaco-stub">{value}</pre>,
+}));
+
+describe("CanvasYamlModal", () => {
+  const defaultProps = {
+    open: true,
+    onOpenChange: vi.fn(),
+    yamlText: "name: test-canvas",
+    filename: "test-canvas.yaml",
+  };
+
+  it("uses the provided copy handler for copy feedback and error handling", () => {
+    const onCopy = vi.fn();
+
+    render(<CanvasYamlModal {...defaultProps} onCopy={onCopy} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Copy" }));
+
+    expect(onCopy).toHaveBeenCalledTimes(1);
+  });
+
+  it("hides the copy button when no copy handler is provided", () => {
+    render(<CanvasYamlModal {...defaultProps} />);
+
+    expect(screen.queryByRole("button", { name: "Copy" })).not.toBeInTheDocument();
+  });
+});
diff --git a/web_src/src/pages/workflowv2/CanvasYamlModal.tsx b/web_src/src/pages/workflowv2/CanvasYamlModal.tsx
index 9c671ef8c7..1eac895ddd 100644
--- a/web_src/src/pages/workflowv2/CanvasYamlModal.tsx
+++ b/web_src/src/pages/workflowv2/CanvasYamlModal.tsx
@@ -106,7 +106,7 @@ function CopyButton(props: CanvasYamlModalProps) {
   if (!props.onCopy) return null;
 
   return (
-    <Button variant="outline" size="sm" onClick={() => navigator.clipboard.writeText(props.yamlText)}>
+    <Button variant="outline" size="sm" onClick={props.onCopy}>
       <Copy />
       Copy
     </Button>