feat(vertex/devices): migrate device management toasts to InfoBanner …#3503
Conversation
…system Replaces ReusableToast with useBanner across device management components. ReusableDialog now natively includes BannerSlot so no manual slot placement is needed for dialog-based components
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
📝 WalkthroughWalkthroughThis PR replaces toast and inline-form errors with the centralized banner system via useBanner().showBanner across device components and removes in-hook toast callbacks from useDevices so components emit banners instead. ChangesDevice Management Toast-to-Banner Migration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
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 |
Codebmk
left a comment
Codebmk
left a comment
There was a problem hiding this comment.
Great work @BwanikaRobert .
Also migrate the toasts for RecallDeviceDialog, DeviceDetailsModal, DeviceAssignmentModal. Move their toasts from the hook side to the UI side. If you have any further queries on this, don't hesitate to ask.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/vertex/components/features/devices/recall-device-dialog.tsx`:
- Around line 53-55: The success banner is created with showBanner(..., scoped:
true) then the dialog is immediately closed via onOpenChange(false), causing the
scoped banner to be hidden before the user can see it; change the banner to
global by passing scoped: false (or omitting scoped if default is global) in the
showBanner call that uses deviceDisplayName/deviceName, then keep the existing
setRecallType("") and onOpenChange(false) behavior so the dialog can close while
the success message remains visible to the user.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b9c4c63d-35cb-4a41-bf8c-e46b3cc3a7f2
📒 Files selected for processing (4)
src/vertex/components/features/devices/device-assignment-modal.tsxsrc/vertex/components/features/devices/device-details-modal.tsxsrc/vertex/components/features/devices/recall-device-dialog.tsxsrc/vertex/core/hooks/useDevices.ts
There was a problem hiding this comment.
@BwanikaRobert this error is still being shown using toast, check the useAddMaintenanceLog hook and move the toasts to the UI side
There was a problem hiding this comment.
After device is deployed, toast is still being used. Move toast from useDeployDevice hook to UI component
There was a problem hiding this comment.
@Codebmk In useDevices.ts should i replace all the ReusableToast components or only those you have so far mentioned?
There was a problem hiding this comment.
We shall do this following a separate issue and pull request. For now do these and just ensure that for all you've worked on so far they are working as expected @BwanikaRobert
…system Replaces ReusableToast with useBanner across device management components. ReusableDialog now natively includes BannerSlot so no manual slot placement is needed for dialog-based components
…s to UI Remove onSuccess/onError ReusableToast callbacks from useDeployDevice and useAddMaintenanceLog hooks.
92e71f8 to
0e78435
Compare
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/vertex/components/features/devices/create-device-modal.tsx (1)
53-86:⚠️ Potential issue | 🟠 Major | 🏗️ Heavy liftComplete create-device submit feedback migration to banners.
This flow is only partially migrated: missing-network now uses
showBanner, but create mutation success/error still depends on hook toasts (catchonly logs). That keeps mixed UX in the same modal and conflicts with the banner migration objective.Suggested direction
// src/vertex/components/features/devices/create-device-modal.tsx +import { getApiErrorMessage } from "`@/core/utils/getApiErrorMessage`"; ... } catch (error) { - // Error handling is done in the hook - console.error("Create device failed:", error); + showBanner({ + severity: "error", + message: `Creation Failed: ${getApiErrorMessage(error)}`, + scoped: true, + }); }// src/vertex/core/hooks/useDevices.ts (useCreateDevice) // Remove ReusableToast side-effects and keep cache invalidation only; // let caller components own user-facing banners.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/vertex/components/features/devices/create-device-modal.tsx` around lines 53 - 86, The submit flow in handleSubmit still relies on the hook's toasts (only logs errors) causing mixed UX; update the try/catch around createDevice.mutateAsync to call showBanner on success and on failure (include the error message/details), remove the console.error, and keep the current form reset/onOpenChange behavior on success; reference handleSubmit, createDevice.mutateAsync, showBanner, onOpenChange, setFormData and setErrors so you place the banners in the same modal flow and pass scoped: true (and a clear severity/message) for both success and error cases.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/vertex/components/features/devices/create-device-modal.tsx`:
- Around line 53-86: The submit flow in handleSubmit still relies on the hook's
toasts (only logs errors) causing mixed UX; update the try/catch around
createDevice.mutateAsync to call showBanner on success and on failure (include
the error message/details), remove the console.error, and keep the current form
reset/onOpenChange behavior on success; reference handleSubmit,
createDevice.mutateAsync, showBanner, onOpenChange, setFormData and setErrors so
you place the banners in the same modal flow and pass scoped: true (and a clear
severity/message) for both success and error cases.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 286ebad3-b1ac-4a3c-995f-f2cc71e34288
📒 Files selected for processing (8)
src/vertex/components/features/devices/add-maintenance-log-modal.tsxsrc/vertex/components/features/devices/create-device-modal.tsxsrc/vertex/components/features/devices/deploy-device-component.tsxsrc/vertex/components/features/devices/device-assignment-modal.tsxsrc/vertex/components/features/devices/device-details-modal.tsxsrc/vertex/components/features/devices/import-device-modal.tsxsrc/vertex/components/features/devices/recall-device-dialog.tsxsrc/vertex/core/hooks/useDevices.ts
🚧 Files skipped from review as they are similar to previous changes (4)
- src/vertex/components/features/devices/import-device-modal.tsx
- src/vertex/components/features/devices/device-assignment-modal.tsx
- src/vertex/components/features/devices/recall-device-dialog.tsx
- src/vertex/components/features/devices/device-details-modal.tsx
Remove onSuccess/onError ReusableToast callbacks from useCreateDevice hook.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/vertex/components/features/devices/create-device-modal.tsx`:
- Around line 75-81: The success banner is shown inside the setTimeout using
showBanner with message interpolating formData.long_name but the dialog closes
immediately, so update the showBanner call (inside the existing setTimeout) to
explicitly set scoped: false (global) so the banner remains visible after the
modal is closed; modify the showBanner invocation in create-device-modal.tsx
(the setTimeout callback that currently builds the success message) to include
scoped: false before the modal-close call.
In `@src/vertex/components/features/devices/import-device-modal.tsx`:
- Around line 128-134: The success banner shown after closing the dialog via
showBanner should be explicitly global so it isn't hidden by scoped defaults;
update the callback that calls showBanner (the setTimeout block that builds the
message using variables.long_name) to include scoped: false in the banner
payload so the success message is visible application-wide after the modal
closes.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 3dd86293-5ee6-47c1-999b-415a62f1b3d0
📒 Files selected for processing (7)
src/vertex/components/features/devices/add-maintenance-log-modal.tsxsrc/vertex/components/features/devices/create-device-modal.tsxsrc/vertex/components/features/devices/deploy-device-component.tsxsrc/vertex/components/features/devices/device-assignment-modal.tsxsrc/vertex/components/features/devices/import-device-modal.tsxsrc/vertex/components/features/devices/recall-device-dialog.tsxsrc/vertex/core/hooks/useDevices.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- src/vertex/components/features/devices/deploy-device-component.tsx
- src/vertex/components/features/devices/device-assignment-modal.tsx
- src/vertex/components/features/devices/add-maintenance-log-modal.tsx
3 participants
Summary of Changes (What does this PR do?)
Replaces
ReusableToastcalls withuseBanneracross device managementcomponents. Error and validation feedback now renders as an InfoBanner
inside the active modal or dialog container instead of a floating toast.
No new dependencies required. Depends on the
BannerContextinfrastructureand the updated
ReusableDialogfrom PR #3498.Changes per component:
useBanneradded;showBannerreplaces old inline red error div for missing network erroruseBanneradded;showBannersurfaces the previously silent missing user ID error; removes old inline red error divReusableToastreplaced withshowBannerfor validation errorReusableToastcalls replaced withshowBanneruseBanneradded; success and error feedback moved from hook callbacks to component try/catchReusableToastreplaced withshowBannerfor all validation, update, and key decryption feedback; success/error callbacks added toupdateLocalandupdateGlobalmutate callsuseBanneradded withscoped: false(uses baseDialog, notReusableDialog); assignment success and error feedback moved from hook to componentReusableToastfromonSuccess/onErrorinuseRecallDevice,useUpdateDeviceLocal,useUpdateDeviceGlobal,useAssignDeviceToOrganization, anduseDecryptDeviceKeys; hooks now only handle API calls and cache invalidationStatus of maturity (all need to be checked before merging):
How should this be manually tested?
Deploy Device (
/devices/overview/[device-id]→ Deploy action)Add Maintenance Log (Device detail page → Maintenance tab)
Import Device (
/devices/overviewor/devices/my-devices)Create Device (
/admin/networks/[id]— requires admin access)Recall Device (Device detail page → Recall action)
Device Details (Device detail page → Edit)
Share Device (
/devices/my-devices→ Share action)What are the relevant tickets?
Screenshots (optional)
Deploy Device — validation error banner
Maintenance Log — validation error banner
Summary by CodeRabbit