feat: implement bulk edit functionality for devices with multi-select support (vertex app) - #3555
Merged
Conversation
…ableTable actions Add multi-select capability to the DevicesTable component, allowing users to select multiple devices for actions such as adding or removing from cohorts. Update the ReusableTable to support dynamic action handling based on selected items, improving user interaction and functionality. Additionally, clean up the action handling logic for better maintainability.
Change the updateDeviceGroup function to bulkUpdateDeviceDetails, allowing multiple device IDs and update data to be processed in a single API call. Update related hooks to accommodate the new bulk update functionality, enhancing efficiency and user experience. Additionally, improve error handling and success notifications in the useCreateDevice hook.
… hook Enhance the DevicesTable component by introducing a bulk edit option, allowing users to select multiple devices for editing. Implement a new useUpdateDeviceBulk hook to handle bulk updates, including success and error notifications. This update improves user experience by streamlining device management processes and ensuring efficient handling of multiple device updates.
…sTable and NetworkDevicesTable Enhance the ClientPaginatedDevicesTable and NetworkDevicesTable components by adding bulk action capabilities, allowing users to assign devices to cohorts, unassign them, and perform bulk edits. Introduce modals for assigning and unassigning devices, improving user experience and streamlining device management processes. Update action handling logic to support multi-select functionality and ensure proper state management for selected devices.
Enhance the BulkEditDevicesModal component by streamlining the submission logic and updating the dialog structure. Simplify the updateData object creation and improve the handling of the primary and secondary actions. Adjust the layout and spacing for better user experience, ensuring clear visibility of the selected field and confirmation details. This update also includes minor adjustments to input value handling for consistency.
Contributor
|
Warning Review limit reached
More reviews will be available in 31 minutes and 32 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThis PR adds bulk edit and multi-select functionality to device management. It introduces a two-step bulk edit modal, refactors the shared table action system from dropdowns to direct buttons, and integrates multi-select workflows across device and network tables with cohort and bulk edit actions. ChangesBulk Edit & Multi-Select for Devices
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 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 |
Contributor
|
New azure vertex changes available for preview here |
![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: 5
🤖 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/bulk-edit-device-details-modal.tsx`:
- Around line 150-161: The modal allows submitting a stale or null `value` when
`selectedField` changes; update the `onChange` for `ReusableSelectInput` (where
`setSelectedField` is called) to also reset the edit `value` (e.g.,
setValue(null/"" or appropriate empty type) so previous field values are
cleared), add a small validator (isValidValueForField(selectedField, value)) and
update the button disabled logic (currently in the `disabled: step ===
"choose_field" ? !selectedField : bulkUpdate.isPending` expression) to also
require a valid value when on the active edit/confirm step (e.g., for
choose_field/confirm steps require selectedField && isValidValueForField(...));
apply same reset/validation changes to other branching points that set
selectedField (lines ~61-65, 74-122) so no null/stale value can be submitted.
- Around line 61-68: The handleSubmit function currently proceeds to call
bulkUpdate.mutate even when no devices are selected; add an early return guard
that checks deviceIds (e.g., if (!deviceIds || deviceIds.length === 0) return)
before building updateData and calling bulkUpdate.mutate to no-op when there are
no selected devices, leaving existing selectedField/value checks and bulkUpdate
usage intact.
In `@src/vertex/core/apis/devices.ts`:
- Around line 549-557: The bulkUpdateDeviceDetails function is forwarding
deviceIds as-is; add client-side validation in bulkUpdateDeviceDetails to reject
empty arrays or any blank/whitespace-only IDs before building requestBody—check
that deviceIds.length > 0 and that every id is a non-empty trimmed string, and
throw or return a clear validation error (e.g., BadRequest / Error) early so the
request is not sent to the server.
In `@src/vertex/core/hooks/useDevices.ts`:
- Around line 466-469: The bulk-update success handler currently invalidates
"devices", "network-devices", and "deviceActivities" but misses "myDevices",
causing stale UI; update the success invalidation block in useDevices (where
queryClient.invalidateQueries is called) to also call
queryClient.invalidateQueries({ queryKey: ["myDevices"] }) so My Devices cache
is refreshed after bulk edits.
- Around line 540-553: The code currently falls back to an empty deviceId when
calling updateDeviceGroup.mutateAsync and only invalidates caches inside the try
block; change the logic so you only call updateDeviceGroup.mutateAsync when
data.created_device._id (or activeGroup?.grp_title) is truthy to avoid sending
an empty deviceId to updateDeviceGroup.mutateAsync, and move the
queryClient.invalidateQueries calls for ["devices"], ["network-devices"], and
["deviceActivities"] into a finally block (or otherwise ensure they run
regardless of success) so caches are always refreshed even if group assignment
fails.
🪄 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: 9e754633-1c36-458c-9e37-bef8305375b5
📒 Files selected for processing (9)
src/vertex/app/(authenticated)/devices/my-devices/page.tsxsrc/vertex/app/changelog.mdsrc/vertex/components/features/devices/bulk-edit-device-details-modal.tsxsrc/vertex/components/features/devices/client-paginated-devices-table.tsxsrc/vertex/components/features/devices/device-list-table.tsxsrc/vertex/components/features/networks/network-device-list-table.tsxsrc/vertex/components/shared/table/ReusableTable.tsxsrc/vertex/core/apis/devices.tssrc/vertex/core/hooks/useDevices.ts
Refactor the BulkEditDevicesModal component to include validation for selected fields and their corresponding values before proceeding with updates. Introduce a new `hasValidValue` check to ensure that the input meets the required criteria for 'network' and 'tags'. Update the submission logic to prevent actions when validation fails, improving user experience and data integrity.
Sanitize device IDs by trimming whitespace and filtering out empty values. Introduce an error throw if no valid device IDs are provided, ensuring that at least one device ID is required for the update operation. This change enhances input validation and prevents unnecessary API calls.
Enhance the useUpdateDeviceBulk hook by adding cache invalidation for the myDevices query key alongside existing cache invalidations. This ensures that the device list remains up-to-date after bulk updates, improving data consistency and user experience.
Contributor
|
New azure vertex changes available for preview here |
…ateDevice hook Refactor the useCreateDevice hook to enhance error handling when assigning newly created devices to groups. Introduce a more robust check for created device IDs and log errors appropriately. This change improves reliability and provides clearer feedback in case of failures during the device assignment process.
Contributor
|
New azure vertex changes available for preview here |
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
2 participants
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.
Description
Implemented comprehensive bulk edit capabilities for device management, allowing users to efficiently update multiple devices at once.
Key Features
New Bulk Edit Modal (
BulkEditDevicesModal):Multi-Select Support:
ReusableTableto support multi-selectionDevicesTable,ClientPaginatedDevicesTable, andNetworkDevicesTableAPI & Hook Support:
useUpdateDeviceBulkhookChanges Summary
Related Tickets
Files Changed: 8
src/vertex/components/features/devices/bulk-edit-device-details-modal.tsx(New)src/vertex/components/features/devices/device-list-table.tsxsrc/vertex/components/features/devices/client-paginated-devices-table.tsxsrc/vertex/components/features/networks/network-device-list-table.tsxsrc/vertex/components/shared/table/ReusableTable.tsxsrc/vertex/core/hooks/useDevices.tssrc/vertex/core/apis/devices.tssrc/vertex/app/(authenticated)/devices/my-devices/page.tsxScreenshots (optional)
Summary by CodeRabbit
Release Notes
New Features
Documentation