feat: add copied confirmation and fix copilot complaints

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

Author: Cheryl Kong

.changeset/mermaid-export.md

@@ -3,3 +3,11 @@
 ---
 
 Add mermaid export functionality
+flowchart TD
+root-entry-node(( ))
+root-exit-node((( )))
+/do/0/getPet["getPet"]
+/do/0/getPet --> root-exit-node
+root-entry-node --> /do/0/getPet
+
+classDef hidden width: 1px, height: 1px;

packages/serverless-workflow-diagram-editor/src/core/mermaidExport.ts

@@ -27,10 +27,17 @@ export function exportToMermaid(workflow: Specification.Workflow): string {
 }
 
 export function copyMermaidToClipboard(mermaidCode: string): Promise<void> {
+  if (typeof navigator === "undefined" || !navigator.clipboard) {
+    return Promise.reject(new Error("Clipboard API is not available in this environment"));
+  }
   return navigator.clipboard.writeText(mermaidCode);
 }
 
 export function downloadMermaidFile(mermaidCode: string, filename: string = "mermaid.mmd"): void {
+  if (typeof document === "undefined") {
+    throw new Error("Document API is not available in this environment");
+  }
+
   const blob = new Blob([mermaidCode], { type: "text/plain" });
   const url = URL.createObjectURL(blob);
   const link = document.createElement("a");
@@ -39,5 +46,7 @@ export function downloadMermaidFile(mermaidCode: string, filename: string = "mer
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
-  URL.revokeObjectURL(url);
+  setTimeout(() => {
+    URL.revokeObjectURL(url);
+  }, 10);
 }

packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx

@@ -38,6 +38,7 @@ export function SidePanel() {
   const { model, nodes, selectedNodeId } = useDiagramEditorContext();
   const { setOpen } = useSidebar();
   const { t } = useI18n();
+  const [isCopied, setIsCopied] = React.useState(false);
 
   const selectedNode = React.useMemo(
     () =>
@@ -68,7 +69,8 @@ export function SidePanel() {
     try {
       const mermaidCode = exportToMermaid(model);
       await copyMermaidToClipboard(mermaidCode);
-      console.log("mermaid copied to clipboard");
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
     } catch (error) {
       console.error("Failed to copy mermaid code:", error);
     }
@@ -126,7 +128,7 @@ export function SidePanel() {
           <>
             <Button onClick={handleCopyMermaid} variant="outline" size="sm">
               <Copy />
-              {t("sidebar.exportMermaid.copy")}
+              {isCopied ? "Copied!" : t("sidebar.exportMermaid.copy")}
             </Button>
             <Button onClick={handleDownloadMermaid} variant="outline" size="sm">
               <Download />

packages/serverless-workflow-diagram-editor/tests/side-panel/SidePanel.test.tsx

@@ -14,12 +14,14 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
 import { SidePanel } from "../../src/side-panel/SidePanel";
 import { parseWorkflow } from "../../src/core/workflowSdk";
 import { renderWithProviders } from "../test-utils/render-helpers";
 import { WORKFLOW_WITH_METADATA_JSON } from "../fixtures/workflows";
+import * as mermaidExport from "../../src/core/mermaidExport";
 
 describe("SidePanel", () => {
   it("renders sidebar with workflow info when model is present", () => {
@@ -71,4 +73,30 @@ describe("SidePanel", () => {
     expect(screen.queryByText(/Copy Mermaid Code/i)).not.toBeInTheDocument();
     expect(screen.queryByText(/Download as Mermaid File/i)).not.toBeInTheDocument();
   });
+
+  it("should call copyMermaidToClipboard when copy button is clicked", async () => {
+    const user = userEvent.setup();
+    const { model } = parseWorkflow(WORKFLOW_WITH_METADATA_JSON);
+    const copySpy = vi.spyOn(mermaidExport, "copyMermaidToClipboard").mockResolvedValue(undefined);
+    vi.spyOn(mermaidExport, "exportToMermaid").mockReturnValue("mermaid code");
+
+    renderWithProviders(<SidePanel />, { model });
+    const copyButton = screen.getByText(/Copy Mermaid Code/i);
+    await user.click(copyButton);
+
+    expect(copySpy).toHaveBeenCalledWith("mermaid code");
+  });
+
+  it("should call downloadMermaidFile when download button is clicked", async () => {
+    const user = userEvent.setup();
+    const { model } = parseWorkflow(WORKFLOW_WITH_METADATA_JSON);
+    const downloadSpy = vi.spyOn(mermaidExport, "downloadMermaidFile").mockImplementation(() => {});
+    vi.spyOn(mermaidExport, "exportToMermaid").mockReturnValue("mermaid code");
+
+    renderWithProviders(<SidePanel />, { model });
+    const downloadButton = screen.getByText(/Download as Mermaid File/i);
+    await user.click(downloadButton);
+
+    expect(downloadSpy).toHaveBeenCalledWith("mermaid code");
+  });
 });