Make SectionContainer resizable prop optional to fix Permissions and …

[RohitBhati8269]

…other page layouts.

Summary by CodeRabbit

• New Features
  • Dashboard Activity section tables (Sessions, Locks, Prepared Transactions) are now resizable, letting users adjust table heights.
  • Resizable sections have a configurable initial height (default 200px) to control starting display size.

[coderabbitai]

Walkthrough

Adds optional resizable behavior to dashboard sections: SectionContainer gains resizable and defaultHeight props (defaults: false, 200). Three Activity section containers (Sessions, Locks, Prepared Transactions) are now rendered with resizable={true}.

Changes

Cohort / File(s)	Summary
Dashboard Section Updates web/pgadmin/dashboard/static/js/Dashboard.jsx	Three SectionContainer usages in the Activity section now pass resizable={true} to enable resizable rendering for Sessions, Locks, and Prepared Transactions.
SectionContainer Enhancement web/pgadmin/dashboard/static/js/components/SectionContainer.jsx	Adds resizable (bool, default false) and defaultHeight (number, default 200) props. Renders content directly when not resizable, or wrapped in a Resizable with defaultSize.height from defaultHeight when resizable is true. Updates propTypes.

Sequence Diagram(s)

sequenceDiagram
    participant Dashboard as Dashboard.jsx
    participant Section as SectionContainer.jsx
    participant Resizable as Resizable Wrapper
    participant Content as Section Content (header/body)

    Dashboard->>Section: render SectionContainer(resizable=true, defaultHeight=200)
    alt resizable == true
        Section->>Resizable: wrap content with defaultSize.height=defaultHeight
        Resizable->>Content: render header and body inside resizable container
    else resizable == false
        Section->>Content: render header and body directly
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Fix dashboard freeze on initial render with high number of locks. #9285 #9516: Modifies SectionContainer.jsx and adjusts Resizable default height to 200 — directly related to the sizing/resizable behavior changes.

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title is partially related to the changeset; it references making the resizable prop optional, which is the main technical change, but appears truncated and doesn't fully convey the complete intent.	Consider using a complete, untruncated title that fully describes the change, such as 'Make SectionContainer resizable prop optional to fix layout issues'.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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]

🧹 Nitpick comments (1)

web/pgadmin/dashboard/static/js/components/SectionContainer.jsx (1)

60-63: Guard defaultHeight before using it for initial size.

At Line 62, a non-positive or invalid defaultHeight from callers can produce a poor initial render. Consider clamping/fallback before passing to defaultSize.

♻️ Suggested hardening

 export default function SectionContainer({title, titleExtras, children, style, resizable = false, defaultHeight = 200}) {
+  const resolvedDefaultHeight =
+    Number.isFinite(defaultHeight) && defaultHeight >= 25 ? defaultHeight : 200;
+
   const content = (
@@
         <Resizable
           enable={{ bottom: true }}
-          defaultSize={{ height: defaultHeight, width: '100%' }}
+          defaultSize={{ height: resolvedDefaultHeight, width: '100%' }}
           minHeight={25}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@web/pgadmin/dashboard/static/js/components/SectionContainer.jsx` around lines
60 - 63, Guard the defaultHeight value before passing it to the Resizable
component's defaultSize: validate that defaultHeight is a finite positive number
and clamp or fall back to a safe value (for example at least the existing
minHeight or a sensible default like 100). Update the code that computes/uses
defaultHeight in SectionContainer.jsx so you use a sanitized variable (e.g.,
safeDefaultHeight = Number.isFinite(defaultHeight) && defaultHeight > 0 ?
Math.max(defaultHeight, minHeight) : minHeightOrFallback) and pass
safeDefaultHeight into Resizable's defaultSize, keeping the minHeight prop
unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@web/pgadmin/dashboard/static/js/components/SectionContainer.jsx`:
- Around line 60-63: Guard the defaultHeight value before passing it to the
Resizable component's defaultSize: validate that defaultHeight is a finite
positive number and clamp or fall back to a safe value (for example at least the
existing minHeight or a sensible default like 100). Update the code that
computes/uses defaultHeight in SectionContainer.jsx so you use a sanitized
variable (e.g., safeDefaultHeight = Number.isFinite(defaultHeight) &&
defaultHeight > 0 ? Math.max(defaultHeight, minHeight) : minHeightOrFallback)
and pass safeDefaultHeight into Resizable's defaultSize, keeping the minHeight
prop unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: cf32f897-7da2-43fc-83fd-ce6cdfdf3eb4

📥 Commits

Reviewing files that changed from the base of the PR and between 1540ecb and 4b2bd91.

📒 Files selected for processing (2)

• web/pgadmin/dashboard/static/js/Dashboard.jsx
• web/pgadmin/dashboard/static/js/components/SectionContainer.jsx

🚧 Files skipped from review as they are similar to previous changes (1)

• web/pgadmin/dashboard/static/js/Dashboard.jsx