feat: add toast alert system #210
Open
cheryl7114 wants to merge 5 commits into
Open
Conversation
added 4 commits
June 30, 2026 10:13
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
✅ Deploy Preview for swf-editor ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a toast notification system to surface operational failures (e.g., clipboard and download actions) and wires it into the diagram editor UI.
Changes:
- Introduces a global toast store (
useToast) and UI renderer (Toaster) based on Radix Toast primitives. - Updates Mermaid export actions to show success/error toasts and expands unit tests to cover those cases.
- Adds a minimap toggle control button in the React Flow controls (currently duplicated—see review comments).
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/serverless-workflow-diagram-editor/tests/side-panel/MermaidActions.test.tsx | Adds toast-related assertions for copy/download success & failure flows. |
| packages/serverless-workflow-diagram-editor/src/side-panel/MermaidActions.tsx | Emits toast notifications for clipboard and download outcomes. |
| packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx | Adds an additional minimap toggle control button (currently duplicates existing one). |
| packages/serverless-workflow-diagram-editor/src/i18n/locales/en.ts | Adds toast-related translation strings. |
| packages/serverless-workflow-diagram-editor/src/hooks/useToast.ts | Implements a lightweight global toast store + helper function. |
| packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx | Mounts the toast provider + toaster at the editor level. |
| packages/serverless-workflow-diagram-editor/src/components/ui/toast.tsx | Implements toast rendering (variants, icons, viewport positioning). |
| .changeset/toast-alerts.md | Declares a minor version bump for the toast feature. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
closes #185
Summary
This PR introduces a toast notification system with 4 different types of variants: Success, Error, Warning, and Info (default). Toasts are anchored to the top left of the screen.
Preview:

