feat: add toast alert system #210
Conversation
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. |
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>
cheryl7114
requested review from
fantonangeli,
handreyrc,
kumaradityaraj and
lornakelly
|
@cheryl7114 Thanks for the PR, I think the toast notification is very big against canvas, can we try reducing it a bit, less padding etc 
|
|
@cheryl7114 Did you add the shadcn component using the following pnpm command? Just double checking as usually it adds an extra dependency, might not in this case but just want to check, thanks |
https://www.radix-ui.com/primitives/docs/components/toast I added this one, because I saw the rest of the components using radix ui primitives as well so I wasn't too sure about using Sonner; and yeah it would've added a dependency if I'd used Sonner |
|
@lornakelly how does this look? Should I make it slightly smaller? I haven't committed yet, wanted to ask if it looks okay first |
Although I totally understand why you went with that approach, especially as it doesnt add an extra dependency and shadcn is radix under the hood anyway, consistency is important here. We have established a pattern to add any ui components using shadcn (approved by community) and important to follow that convention so future contributors dont get confused on the pattern to follow. It can also make things drift and make maintainability and future updates harder, for example, if we wanted to bulk update shadcn components etc this could cause issues It looks like sonner doesnt need a custom hook as well which is handy so less custom code- can you please use shadcns recommended approach instead, apologies for the confusion |
Yes that style looks great! |
Okay, Sonner's actually easier to set up as well so no worries! |
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
|
@lornakelly this is ready for review. Thank you! |
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:
