feat: add toast alert system

.changeset/toast-alert.md

@@ -0,0 +1,5 @@
+---
+"@serverlessworkflow/diagram-editor": minor
+---
+
+add toast alert system through shadcn Sonner

packages/serverless-workflow-diagram-editor/package.json

@@ -49,6 +49,7 @@
     "elkjs": "catalog:",
     "js-yaml": "catalog:",
     "radix-ui": "catalog:",
+    "sonner": "catalog:",
     "use-sync-external-store": "catalog:"
   },
   "devDependencies": {

packages/serverless-workflow-diagram-editor/src/components/ui/sonner.css

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ @reference "../../styles.css";
+
+@layer sonner {
+  /* sonner defaults unlayered, so these overrides need !important */
+  .dec-root [data-sonner-toaster] { --width: 300px !important; }
+  .dec-root [data-sonner-toast] { background: var(--dec-toast-bg) !important; border-radius: 10px !important; border: 1px solid var(--dec-toast-border) !important; }
+  .dec-root [data-sonner-toast][data-type="success"] { border-left: 4px solid var(--dec-toast-success) !important; }
+  .dec-root [data-sonner-toast][data-type="error"]   { border-left: 4px solid var(--dec-error-accent) !important; }
+  .dec-root [data-sonner-toast][data-type="warning"] { border-left: 4px solid var(--dec-toast-warning) !important; }
+  .dec-root [data-sonner-toast][data-type="info"]    { border-left: 4px solid var(--dec-toast-info) !important; }
+  .dec-root [data-sonner-toast] [data-title], .dec-root [data-sonner-toast] [data-description] { color: var(--dec-toast-text) !important; }
+  .dec-root [data-sonner-toast] [data-close-button] {
+    position: absolute !important;
+    top: 50% !important;
+    right: 12px !important;
+    left: auto !important;
+    transform: translateY(-50%) !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: var(--dec-toast-close-btn);
+    cursor: pointer;
+  }
+}

packages/serverless-workflow-diagram-editor/src/components/ui/sonner.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+  XIcon,
+} from "lucide-react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+import "./sonner.css";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      position="top-left"
+      className="dec:toaster dec:group"
+      closeButton
+      icons={{
+        success: (
+          <CircleCheckIcon className="dec:size-4" style={{ color: "var(--dec-toast-success)" }} />
+        ),
+        info: <InfoIcon className="dec:size-4" style={{ color: "var(--dec-toast-info)" }} />,
+        warning: (
+          <TriangleAlertIcon className="dec:size-4" style={{ color: "var(--dec-toast-warning)" }} />
+        ),
+        error: <OctagonXIcon className="dec:size-4" style={{ color: "var(--dec-error-accent)" }} />,
+        loading: <Loader2Icon className="dec:size-4 dec:animate-spin" />,
+        close: <XIcon size={14} />,
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

@@ -27,6 +27,7 @@ import { useResolvedColorMode } from "../hooks/useResolvedColorMode";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { SidePanel } from "@/side-panel/SidePanel";
 import { DiagramEditorErrorBoundary } from "./error-pages/DiagramEditorErrorBoundary";
+import { Toaster } from "@/components/ui/sonner";
 
 /**
  * DiagramEditor component API
@@ -130,6 +131,7 @@ export const DiagramEditor = (props: DiagramEditorProps) => {
           }}
         </DiagramEditorInner>
       </I18nProvider>
+      <Toaster theme={resolvedColorMode} />
     </div>
   );
 };

packages/serverless-workflow-diagram-editor/src/i18n/locales/en.ts

@@ -50,6 +50,9 @@ export const en = {
   "aria.panel.workflowInfo": "Workflow information panel",
   "aria.panel.content": "Panel content",
   "aria.panel.exportActions": "Export actions",
+  "toast.clipboard.error": "Failed to copy",
+  "toast.download.success": "Download started",
+  "toast.download.error": "Download failed",
 } as const;
 
 export type TranslationKeys = keyof typeof en;

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

@@ -22,6 +22,7 @@ import { exportToMermaid } from "@/core";
 import { copyToClipboard } from "@/lib/clipboard";
 import { downloadFile } from "@/lib/download";
 import type { Specification } from "@serverlessworkflow/sdk";
+import { toast } from "sonner";
 
 export function MermaidActions({ model }: { model: Specification.Workflow }): React.JSX.Element {
   const { t } = useI18n();
@@ -51,8 +52,9 @@ export function MermaidActions({ model }: { model: Specification.Workflow }): Re
         copyTimeoutRef.current = null;
       }, 2000);
     } catch (error) {
-      console.error("Failed to copy mermaid code:", error);
-      // TODO: Create component to show errors to users
+      toast.error(t("toast.clipboard.error"), {
+        description: error instanceof Error ? error.message : undefined,
+      });
     }
   };
 
@@ -66,9 +68,11 @@ export function MermaidActions({ model }: { model: Specification.Workflow }): Re
         .substring(0, 200);
       const filename = `${sanitizedName}.mmd`;
       downloadFile(mermaidCode, filename);
+      toast.success(t("toast.download.success"));
     } catch (error) {
-      console.error("Failed to download mermaid file:", error);
-      // TODO: Create component to show errors to users
+      toast.error(t("toast.download.error"), {
+        description: error instanceof Error ? error.message : undefined,
+      });
     }
   };
 

packages/serverless-workflow-diagram-editor/src/styles.css

@@ -19,7 +19,8 @@
   side-panel,
   react-flow-overrides,
   custom-nodes,
-  custom-edge-labels;
+  custom-edge-labels,
+  sonner;
 
 @import 'tailwindcss' prefix(dec);
 @import './components/ui/shadcn.css';
@@ -61,6 +62,15 @@
     --dec-minimap-node-stroke: #64748b;
     --dec-minimap-border: #cbd5e1;
     --dec-minimap-shadow: rgba(15, 23, 42, 0.12);
+
+    /* toast */
+    --dec-toast-bg: #ffffff;
+    --dec-toast-border: #e9edf4;
+    --dec-toast-success: #22c55e;
+    --dec-toast-warning: #f97316;
+    --dec-toast-info: #3b82f6;
+    --dec-toast-close-btn: #6b7280;
+    --dec-toast-text: #1f2328;
   }
 
   .dec-root.dark {
@@ -77,6 +87,15 @@
     --dec-minimap-node-stroke: #cbd5e1;
     --dec-minimap-border: #2d3748;
     --dec-minimap-shadow: rgba(0, 0, 0, 0.5);
+
+    /* toast */
+    --dec-toast-bg: #2d3748;
+    --dec-toast-border: #4a5568;
+    --dec-toast-success: #4ade80;
+    --dec-toast-warning: #fb923c;
+    --dec-toast-info: #60a5fa;
+    --dec-toast-close-btn: #ffffff;
+    --dec-toast-text: #ffffff;
   }
 
   .dec-root .dec-diagram-content {

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

@@ -24,35 +24,91 @@ import { WORKFLOW_WITH_METADATA_JSON } from "../fixtures/workflows";
 import * as clipboard from "../../src/lib/clipboard";
 import * as core from "../../src/core";
 import * as download from "../../src/lib/download";
+import * as sonner from "sonner";
 
 describe("MermaidActions", () => {
+  const toastMock = vi.fn();
+  const MERMAID_CODE = "mermaid code";
+
   afterEach(() => {
+    toastMock.mockClear();
     vi.restoreAllMocks();
   });
 
   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(clipboard, "copyToClipboard").mockResolvedValue(undefined);
-    vi.spyOn(core, "exportToMermaid").mockReturnValue("mermaid code");
+    vi.spyOn(core, "exportToMermaid").mockReturnValue(MERMAID_CODE);
 
     renderWithProviders(<MermaidActions model={model!} />, { model });
-    const copyButton = screen.getByText(/Copy Mermaid Code/i);
+
+    const copyButton = screen.getByRole("button", {
+      name: /Copy Mermaid Code/i,
+    });
+
+    await user.click(copyButton);
+
+    expect(copySpy).toHaveBeenCalledWith(MERMAID_CODE);
+  });
+
+  it("should show error toast when clipboard copy fails", async () => {
+    const user = userEvent.setup();
+    const { model } = parseWorkflow(WORKFLOW_WITH_METADATA_JSON);
+    vi.spyOn(clipboard, "copyToClipboard").mockRejectedValue(new Error("Clipboard error"));
+    vi.spyOn(core, "exportToMermaid").mockReturnValue(MERMAID_CODE);
+    vi.spyOn(sonner.toast, "error").mockImplementation(toastMock);
+    vi.spyOn(sonner.toast, "success").mockImplementation(toastMock);
+
+    renderWithProviders(<MermaidActions model={model!} />, { model });
+
+    const copyButton = screen.getByRole("button", {
+      name: /Copy Mermaid Code/i,
+    });
+
     await user.click(copyButton);
 
-    expect(copySpy).toHaveBeenCalledWith("mermaid code");
+    expect(toastMock).toHaveBeenCalledWith(expect.any(String), { description: "Clipboard error" });
   });
 
-  it("should call downloadMermaidFile when download button is clicked", async () => {
+  it("should call downloadMermaidFile and show success toast when download button is clicked", async () => {
     const user = userEvent.setup();
     const { model } = parseWorkflow(WORKFLOW_WITH_METADATA_JSON);
     const downloadSpy = vi.spyOn(download, "downloadFile").mockImplementation(() => {});
-    vi.spyOn(core, "exportToMermaid").mockReturnValue("mermaid code");
+    vi.spyOn(core, "exportToMermaid").mockReturnValue(MERMAID_CODE);
+    vi.spyOn(sonner.toast, "error").mockImplementation(toastMock);
+    vi.spyOn(sonner.toast, "success").mockImplementation(toastMock);
 
     renderWithProviders(<MermaidActions model={model!} />, { model });
-    const downloadButton = screen.getByText(/Download as Mermaid File/i);
+
+    const downloadButton = screen.getByRole("button", {
+      name: /Download as Mermaid File/i,
+    });
+
+    await user.click(downloadButton);
+
+    expect(downloadSpy).toHaveBeenCalledWith(MERMAID_CODE, "test-wf.mmd");
+    expect(toastMock).toHaveBeenCalledWith(expect.any(String));
+  });
+
+  it("should show error toast when download fails", async () => {
+    const user = userEvent.setup();
+    const { model } = parseWorkflow(WORKFLOW_WITH_METADATA_JSON);
+    vi.spyOn(download, "downloadFile").mockImplementation(() => {
+      throw new Error("Download error");
+    });
+    vi.spyOn(core, "exportToMermaid").mockReturnValue(MERMAID_CODE);
+    vi.spyOn(sonner.toast, "error").mockImplementation(toastMock);
+    vi.spyOn(sonner.toast, "success").mockImplementation(toastMock);
+
+    renderWithProviders(<MermaidActions model={model!} />, { model });
+
+    const downloadButton = screen.getByRole("button", {
+      name: /Download as Mermaid File/i,
+    });
+
     await user.click(downloadButton);
 
-    expect(downloadSpy).toHaveBeenCalledWith("mermaid code", "test-wf.mmd");
+    expect(toastMock).toHaveBeenCalledWith(expect.any(String), { description: "Download error" });
   });
 });

pnpm-workspace.yaml

@@ -38,6 +38,7 @@ catalog:
   react: ^19.2.7
   react-dom: ^19.2.7
   rimraf: ^6.1.3
+  sonner: ^2.0.7
   storybook: ^10.4.6
   syncpack: ^15.3.2
   tailwindcss: ^4.3.1