feat: enhance Snackbar action with dismiss button in Journeys Admin app#8889
Open
feat: enhance Snackbar action with dismiss button in Journeys Admin app#8889
Conversation
Contributor
WalkthroughAdds a provider-level dismiss action to the journeys-admin Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 153f520
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
docs/plans/2026-03-20-001-fix-snackbar-mobile-blocking-autodismiss-plan.md (1)
94-94: Bundle impact statement references unused icon.This line mentions
@mui/icons-material/Closebut the implementation actually usesXCircleContainedIconfrom@core/shared/ui/icons/XCircleContained(as correctly noted on line 163). Consider updating this statement for accuracy.📝 Suggested fix
-- **Zero bundle impact**: `@mui/icons-material/Close` and `@mui/material/IconButton` are already in the dependency graph from other components. +- **Zero bundle impact**: `@mui/material/IconButton` and `@core/shared/ui/icons/XCircleContained` are already in the dependency graph from other components.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/plans/2026-03-20-001-fix-snackbar-mobile-blocking-autodismiss-plan.md` at line 94, The bundle impact statement incorrectly references the unused icon package `@mui/icons-material/Close`; update the sentence to reference the actual icon used (`XCircleContainedIcon` from `@core/shared/ui/icons/XCircleContained`) and adjust the dependency claim to reflect that the implementation relies on the shared `XCircleContainedIcon` (and any other real imports like `@mui/material/IconButton` if used elsewhere) so the zero bundle impact assertion is accurate.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/plans/2026-03-20-001-fix-snackbar-mobile-blocking-autodismiss-plan.md`:
- Around line 114-116: The import from 'notistack' used by snackbarAction is
missing the SnackbarKey type; update the existing import line that currently
brings in closeSnackbar and SnackbarProvider to also export SnackbarKey so the
snackbarAction function signature can reference it (ensure the file's imports
now include SnackbarKey, closeSnackbar, SnackbarProvider to match the "Full
corrected import order" example and keep IconButton import positioned after
GlobalStyles).
---
Nitpick comments:
In `@docs/plans/2026-03-20-001-fix-snackbar-mobile-blocking-autodismiss-plan.md`:
- Line 94: The bundle impact statement incorrectly references the unused icon
package `@mui/icons-material/Close`; update the sentence to reference the actual
icon used (`XCircleContainedIcon` from `@core/shared/ui/icons/XCircleContained`)
and adjust the dependency claim to reflect that the implementation relies on the
shared `XCircleContainedIcon` (and any other real imports like
`@mui/material/IconButton` if used elsewhere) so the zero bundle impact
assertion is accurate.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 5642bd9b-a981-4f27-b3d9-14683b0009c4
📒 Files selected for processing (2)
apps/journeys-admin/pages/_app.tsxdocs/plans/2026-03-20-001-fix-snackbar-mobile-blocking-autodismiss-plan.md
Comment on lines
+114
to
+116
| // New imports: | ||
| import IconButton from '@mui/material/IconButton' // after GlobalStyles (alphabetical) | ||
| import { closeSnackbar, SnackbarProvider } from 'notistack' // add closeSnackbar to existing import |
Contributor
There was a problem hiding this comment.
Incomplete import statement in code example.
The import statement on line 116 is missing SnackbarKey, which is required for the snackbarAction function signature. The "Full corrected import order" section at line 155 shows the correct import.
📝 Suggested fix
// New imports:
import IconButton from '@mui/material/IconButton' // after GlobalStyles (alphabetical)
-import { closeSnackbar, SnackbarProvider } from 'notistack' // add closeSnackbar to existing import
+import { closeSnackbar, SnackbarKey, SnackbarProvider } from 'notistack' // add closeSnackbar and SnackbarKey to existing import🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/plans/2026-03-20-001-fix-snackbar-mobile-blocking-autodismiss-plan.md`
around lines 114 - 116, The import from 'notistack' used by snackbarAction is
missing the SnackbarKey type; update the existing import line that currently
brings in closeSnackbar and SnackbarProvider to also export SnackbarKey so the
snackbarAction function signature can reference it (ensure the file's imports
now include SnackbarKey, closeSnackbar, SnackbarProvider to match the "Full
corrected import order" example and keep IconButton import positioned after
GlobalStyles).
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (2)
docs/solutions/ui-bugs/mobile-snackbar-blocking-ui-no-dismiss-button.md (2)
123-123: Clarify cleanup scope to preserve intentional snackbar UX exceptions.“Remove redundant
actionandautoHideDuration” could be read as blanket removal. Please explicitly note exceptions where per-callsite behavior is intentional (e.g., long-running video upload UX), to avoid regressions during follow-up cleanup.Based on learnings, in apps/journeys-admin, success snackbars for video uploads should be retained because video uploads have different UX requirements due to longer processing times.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/solutions/ui-bugs/mobile-snackbar-blocking-ui-no-dismiss-button.md` at line 123, Clarify the cleanup note: when updating createShowSnackbar, do not globally strip per-call overrides for action and autoHideDuration—keep per-call handling where UX requires it (e.g., video upload success snackbars used by the video upload flow); update the comment in the createShowSnackbar utility to say remove redundant action/autoHideDuration only for calls that truly inherit provider defaults, and explicitly list exceptions (video upload success snackbars / long-running upload flows) so reviewers know to preserve per-call action/autoHideDuration behavior.
32-32: Replace internalnotistack.esm.jsline references with official documentation links.Referencing
notistack.esm.js:759is brittle across package updates. The 5000ms default is correct and documented officially (https://notistack.com/api-reference), but internal line numbers shift with each version. Reference the official API documentation instead so this remains accurate when notistack is upgraded.Also applies to: 116-116
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/solutions/ui-bugs/mobile-snackbar-blocking-ui-no-dismiss-button.md` at line 32, Replace the brittle internal reference to notistack.esm.js:759 with the official notistack API docs link (https://notistack.com/api-reference) wherever the diff mentions the 5000ms default for autoHideDuration (references around the notistack default/autoHideDuration text and the other occurrence noted at 116); update the text to cite the official API as the source for the 5000ms default and remove any direct file/line references to node_modules to avoid breakage on upgrades.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@docs/solutions/ui-bugs/mobile-snackbar-blocking-ui-no-dismiss-button.md`:
- Line 123: Clarify the cleanup note: when updating createShowSnackbar, do not
globally strip per-call overrides for action and autoHideDuration—keep per-call
handling where UX requires it (e.g., video upload success snackbars used by the
video upload flow); update the comment in the createShowSnackbar utility to say
remove redundant action/autoHideDuration only for calls that truly inherit
provider defaults, and explicitly list exceptions (video upload success
snackbars / long-running upload flows) so reviewers know to preserve per-call
action/autoHideDuration behavior.
- Line 32: Replace the brittle internal reference to notistack.esm.js:759 with
the official notistack API docs link (https://notistack.com/api-reference)
wherever the diff mentions the 5000ms default for autoHideDuration (references
around the notistack default/autoHideDuration text and the other occurrence
noted at 116); update the text to cite the official API as the source for the
5000ms default and remove any direct file/line references to node_modules to
avoid breakage on upgrades.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 27144ba9-a29b-4940-9a67-c53a6059b408
📒 Files selected for processing (1)
docs/solutions/ui-bugs/mobile-snackbar-blocking-ui-no-dismiss-button.md
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/solutions/ui-bugs/mobile-snackbar-blocking-ui-no-dismiss-button.md`:
- Around line 64-79: The example is missing the React type import used by the
snackbarAction return type; add an import for ReactElement from 'react' (e.g.,
import type { ReactElement } from 'react') at the top so the
snackbarAction(snackbarKey: SnackbarKey): ReactElement signature compiles
without TypeScript errors, and keep existing imports (IconButton, SnackbarKey,
SnackbarProvider, closeSnackbar, XCircleContainedIcon) unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: d96a16a0-178e-4b5a-9578-e1e63d3eb1ca
📒 Files selected for processing (1)
docs/solutions/ui-bugs/mobile-snackbar-blocking-ui-no-dismiss-button.md
Comment on lines
+64
to
+79
| ```tsx | ||
| import IconButton from '@mui/material/IconButton' | ||
| import { SnackbarKey, SnackbarProvider, closeSnackbar } from 'notistack' | ||
| import XCircleContainedIcon from '@core/shared/ui/icons/XCircleContained' | ||
|
|
||
| // Module-scope for stable reference (no re-creation on render) | ||
| const snackbarAction = (snackbarKey: SnackbarKey): ReactElement => ( | ||
| <IconButton | ||
| size="small" | ||
| aria-label="dismiss notification" | ||
| color="inherit" | ||
| onClick={() => closeSnackbar(snackbarKey)} | ||
| > | ||
| <XCircleContainedIcon /> | ||
| </IconButton> | ||
| ) |
Contributor
There was a problem hiding this comment.
Add missing React import in code example.
The code example uses ReactElement as a return type (line 70) but doesn't import it from React. This would cause a TypeScript error if developers copy this code directly.
📝 Proposed fix to complete the imports
+import { type ReactElement } from 'react'
import IconButton from '@mui/material/IconButton'
import { SnackbarKey, SnackbarProvider, closeSnackbar } from 'notistack'
import XCircleContainedIcon from '@core/shared/ui/icons/XCircleContained'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/solutions/ui-bugs/mobile-snackbar-blocking-ui-no-dismiss-button.md`
around lines 64 - 79, The example is missing the React type import used by the
snackbarAction return type; add an import for ReactElement from 'react' (e.g.,
import type { ReactElement } from 'react') at the top so the
snackbarAction(snackbarKey: SnackbarKey): ReactElement signature compiles
without TypeScript errors, and keep existing imports (IconButton, SnackbarKey,
SnackbarProvider, closeSnackbar, XCircleContainedIcon) unchanged.
Contributor
|
The latest updates on your projects.
|
…ervations-questions
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
1 participant
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.
Summary by CodeRabbit