feat: Allow selecting objects by click-dragging over info panel headers #3074
Conversation
|
🚀 Thanks for opening this pull request! We appreciate your effort in improving the project. Please let us know once your pull request is ready for review. |
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
📝 WalkthroughWalkthroughIntroduces drag-to-select functionality for panel checkboxes in multi-panel view by adding state tracking for drag operations and three new event handlers (onMouseDownPanelCheckBox, onMouseUpPanelCheckBox, onMouseEnterPanelCheckBox) that replace single-click handlers and enable selection propagation while dragging across panels. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/dashboard/Data/Browser/DataBrowser.react.js (2)
156-157: Consider renamingdraggedPanelSelectionfor clarity.The property name
draggedPanelSelectionmight be clearer astargetSelectionStateordragSelectionState, since it stores the boolean selection state (checked/unchecked) that should be applied to panels during dragging, rather than identifying which panel is being dragged.Apply this diff:
- panelCheckboxDragging: false, - draggedPanelSelection: false, + panelCheckboxDragging: false, + targetSelectionState: false,Also update the references in
onMouseDownPanelCheckBoxandonMouseEnterPanelCheckBox.
1146-1168: Drag-to-select logic is correct, but consider touch device support.The implementation correctly handles drag-to-select behavior:
- Mouse down toggles the initial checkbox and initiates dragging
- Mouse enter applies the selection state while dragging
- Mouse up terminates the drag operation
However, touch device users (tablets, mobile) won't be able to use this feature since it only handles mouse events.
Consider using pointer events for cross-device compatibility:
- onMouseDownPanelCheckBox(objectId, checked) { + onPointerDownPanelCheckBox(objectId, checked) { const newSelectionState = !checked; this.props.selectRow(objectId, newSelectionState); this.setState({ panelCheckboxDragging: true, draggedPanelSelection: newSelectionState, }); } - onMouseUpPanelCheckBox() { + onPointerUpPanelCheckBox() { if (this.state.panelCheckboxDragging) { this.setState({ panelCheckboxDragging: false, draggedPanelSelection: false, }); } } - onMouseEnterPanelCheckBox(objectId) { + onPointerEnterPanelCheckBox(objectId) { if (this.state.panelCheckboxDragging) { this.props.selectRow(objectId, this.state.draggedPanelSelection); } }Update the constructor bindings and event attributes in the render method accordingly (e.g.,
onPointerDown,onPointerUp,onPointerEnter), and update the global listener frommouseuptopointerup.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/dashboard/Data/Browser/DataBrowser.react.js(6 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2025-07-31T06:12:17.707Z
Learnt from: mtrezza
Repo: parse-community/parse-dashboard PR: 2957
File: src/dashboard/Data/Browser/BrowserTable.react.js:584-597
Timestamp: 2025-07-31T06:12:17.707Z
Learning: In Parse Dashboard's data browser selection logic (src/dashboard/Data/Browser/BrowserTable.react.js), the `selection['*']` pattern is used to handle global operations that pass `{ '*': true }` to indicate all items are selected, particularly for bulk operations like delete. This is not dead code but serves as compatibility layer for global operations that don't go through normal individual row selection workflows.
Applied to files:
src/dashboard/Data/Browser/DataBrowser.react.js
📚 Learning: 2025-12-13T19:47:18.023Z
Learnt from: mtrezza
Repo: parse-community/parse-dashboard PR: 0
File: :0-0
Timestamp: 2025-12-13T19:47:18.023Z
Learning: In Parse Dashboard, checking for the `onEditSelectedRow` prop before showing script execution options is intentional and consistent across both DataBrowser and BrowserCell components. This prop indicates the browser is in an editable state, preventing scripts from being shown in read-only views.
Applied to files:
src/dashboard/Data/Browser/DataBrowser.react.js
📚 Learning: 2025-12-13T19:47:18.023Z
Learnt from: mtrezza
Repo: parse-community/parse-dashboard PR: 0
File: :0-0
Timestamp: 2025-12-13T19:47:18.023Z
Learning: In Parse Dashboard DataBrowser, the panel header context menu uses the hardcoded 'objectId' field when filtering scripts via `getValidScripts` because the panel header represents the entire object, not a specific field. Field-specific script execution happens when right-clicking on individual table cells in BrowserCell.
Applied to files:
src/dashboard/Data/Browser/DataBrowser.react.js
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Docker linux/amd64
🔇 Additional comments (4)
src/dashboard/Data/Browser/DataBrowser.react.js (4)
191-193: LGTM!The event handler bindings follow React best practices and are correctly placed in the constructor.
273-273: LGTM!The global mouseup listener is correctly added to handle drag termination when the mouse button is released outside the component, which is essential for robust drag-to-select behavior.
288-288: LGTM!Proper cleanup of the global mouseup listener prevents memory leaks.
1768-1773: Event integration is correct. Add tests and documentation as noted in PR objectives.The event handlers are properly wired:
preventDefault()on mousedown prevents unwanted text selection during dragreadOnlycheckbox is appropriate since selection state is managed by parent handlers- Event flow is correct: mousedown → (mouseenter*) → mouseup
The PR objectives indicate that tests and documentation are still TODO:
- Add tests for the drag-to-select functionality
- Add documentation (guides, in-code descriptions)
Please ensure these are completed before merging.
# [8.2.0-alpha.8](8.2.0-alpha.7...8.2.0-alpha.8) (2025-12-16) ### Features * Allow selecting objects by click-dragging over info panel headers ([#3074](#3074)) ([d6ef86c](d6ef86c))
|
🎉 This change has been released in version 8.2.0-alpha.8 |
2 participants
New Pull Request Checklist
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.