Optimize checkbox selection logic in backup dialog objects tree. #9110

[adityatoshniwal]

Summary by CodeRabbit

• Bug Fixes

  • Improved overflow handling and content display in process details panel

• Style

  • Added minimum heights to process details components for better visual consistency and scrolling

• Refactor

  • Streamlined tree view selection state management with simplified internal logic

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Updates CSS styling in ProcessDetails component (overflow, minHeight properties), refactors PgTreeView selection logic and rendering with simplified state model and new DefaultNode component, removes PgTreeSelectionContext export, and strips ESLint directives from webpack configuration files.

Changes

Cohort / File(s)	Summary
ProcessDetails styling web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx	Added overflow: auto and minHeight properties to StyledBox wrapper and ProcessDetails-cmd/logs elements; removed explicit display="flex" and flexDirection="column" props from root StyledBox.
PgTreeView refactoring web/pgadmin/static/js/PgTreeView/index.jsx	Removed PgTreeSelectionContext export; replaced selection state mechanism with checkedState map; rewrote onSelectionChange flow with new toggleCheck handler that cascades state updates and propagates indeterminate states; consolidated node rendering into memoized DefaultNode component with isChecked, onToggle, and hasCheckbox props; eliminated legacy internal UI helpers.
Webpack configuration cleanup web/webpack.config.js, web/webpack.shim.js	Removed ESLint environment directive comments (/* eslint-env node */) from file headers; no runtime behavior changes.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title references 'backup dialog objects tree' and 'checkbox selection logic', which aligns with the major changes in PgTreeView (selection state refactoring) and ProcessDetails styling updates.

✨ Finishing touches

• 📝 Generate docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

Fix all issues with AI Agents 🤖

In @web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx:
- Line 34: The root StyledBox currently sets overflow: 'auto' which together
with the logs container (the logs section element that has overflow: 'auto' and
flexGrow: 1) can create two independent scroll contexts; remove or change the
root-level overflow (in the StyledBox definition) so it does not create its own
scroll (e.g. remove overflow or set it to 'visible'/'hidden') and ensure only
the logs container handles scrolling—verify that the logs container (the element
with flexGrow: 1 and overflow: 'auto') has the required height/flex parent so it
is the sole scrollable area.

In @web/pgadmin/static/js/PgTreeView/index.jsx:
- Around line 83-116: The toggleCheck handler currently collects only the
toggled node's checked descendants in selectedChNodes; when ancestor nodes
become fully checked inside the ancestor loop (in toggleCheck, lines around the
parent traversal), add those parent nodes to selectedChNodes when you set
newState[parent.id] = true so selectionChange receives them too; keep using the
existing symbols (toggleCheck, updateDescendants, selectedChNodes, parent
traversal, setCheckedState, selectionChange) and after the ancestor loop call
selectionChange with the augmented selectedChNodes. Optionally, inside
updateDescendants short-circuit when newState[n.id] === val to avoid needless
recursion and replace the hard-coded '__root__' check with a robust root
detection (e.g., parent === null or a configurable root id).

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

web/pgadmin/static/js/PgTreeView/index.jsx (1)

192-198: Fix PropTypes to match component signature.

The PropTypes definition doesn't match the actual component props. The component signature (line 157) expects isChecked and onToggle, but PropTypes list tree and onNodeSelectionChange instead.

🔎 Proposed fix for PropTypes

 DefaultNode.propTypes = {
   node: PropTypes.object,
   style: PropTypes.any,
-  tree: PropTypes.object,
+  isChecked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['indeterminate'])]),
+  onToggle: PropTypes.func,
   hasCheckbox: PropTypes.bool,
-  onNodeSelectionChange: PropTypes.func
 };

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 30f032b and f2c66a5.

📒 Files selected for processing (4)

• web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
• web/pgadmin/static/js/PgTreeView/index.jsx
• web/webpack.config.js
• web/webpack.shim.js

💤 Files with no reviewable changes (2)

• web/webpack.config.js
• web/webpack.shim.js

🧰 Additional context used

🧬 Code graph analysis (1)

web/pgadmin/static/js/PgTreeView/index.jsx (1)

web/pgadmin/static/js/tree/tree.js (2)

• node (19-19)
• Tree (78-596)

⏰ Context from checks skipped due to timeout of 900000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (10)

• GitHub Check: run-python-tests-pg (windows-latest, 16)
• GitHub Check: run-python-tests-pg (windows-latest, 17)
• GitHub Check: run-python-tests-pg (windows-latest, 13)
• GitHub Check: run-python-tests-pg (windows-latest, 15)
• GitHub Check: run-feature-tests-pg (18)
• GitHub Check: run-feature-tests-pg (14)
• GitHub Check: run-feature-tests-pg (13)
• GitHub Check: run-feature-tests-pg (17)
• GitHub Check: run-feature-tests-pg (16)
• GitHub Check: run-feature-tests-pg (15)

🔇 Additional comments (5)

web/pgadmin/static/js/PgTreeView/index.jsx (2)

80-80: LGTM! Simplified state management.

The map-based checkedState approach is cleaner and more performant than the previous context-based solution for tracking checkbox states.

---

118-148: LGTM! Cleaner rendering without context provider.

The simplified Tree rendering correctly passes isChecked, onToggle, and hasCheckbox props to the Node component. Removing the context provider reduces complexity.

web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx (3)

42-43: LGTM!

The minHeight ensures the command section maintains a minimum visible area, and overflow: 'auto' appropriately handles long command text. These styling additions improve the component's layout consistency.

---

62-62: LGTM!

The minHeight: '120px' ensures the logs section maintains a reasonable minimum visible area, which works well with the existing flexGrow: 1 property.

---

154-154: LGTM!

Removing the redundant display and flexDirection props is appropriate since they're already defined in the StyledBox styled component (lines 30-31). This cleanup improves code maintainability.