Synced from GitHub
refactor(web): the pull request header's actions live in their own components#22702
The header's controls (checkout menu, resolve-conflicts button, primary merge/ready/auto-merge control, approve-workflows button and the overflow menu) were ~600 lines of JSX inside the panel.
PullRequestDetailActions.tsx: checkout menu, resolve conflicts, primary action, approve workflows, environment picker.PullRequestActionsMenu.tsx: the overflow menu; it reads keybindings itself.
Each control now owns its own inline-confirm state, so arming "Confirm merge?" re-renders that control instead of the panel. Disarm behavior is unchanged: any pointerdown outside the armed element, Escape, blur or the 3 s timeout still clears it.
| File | Before | After |
|---|---|---|
| PullRequestDetailPanel.tsx | 2,545 | 1,985 |
| PullRequestDetailActions.tsx | - | 443 |
| PullRequestActionsMenu.tsx | - | 371 |
Part of the pull request page split stack: #22671 → #22672 → #22702 → #22703 → #22704 → #22705 → #22706.
Measured with the rc-init render counter against a dev server seeded from real data (136 pull requests listed), fresh browser per side, main 6a6c84f990 vs the stack top. Opening a PR detail: 6482 / 947 / 1249 renders on main vs 6331 / 1187 / 956 on the stack (noise, the first open includes data arriving). Switching Summary/Timeline/Code: 2-13 renders per switch on both sides. Holding Shift 3 times on the list: 14952 vs 14937 renders; the page and column no longer re-render (6 + 6 before, 0 after), the rows still do because their speed-mode prop really changes.
Tests run on this layer: tsc --noEmit for apps/web, vp lint on the changed files, vp test run src/reactCompilerCoverage.test.ts -t pullRequest (every new file compiles with 0 bailouts), vp test run src/components/pullRequest/pullRequestsRouteSearch.test.ts.
🤖 Generated with Claude Code
Checks
- SuccessfulCodeRabbitGitHub
Review completed
- Successful
Skipped - Not affected
- Skipped
- Skipped
- Skipped
- SuccessfulRemove preview downloadGitHub
- Skipped
- SuccessfulLabel PR sizeGitHub
- SuccessfulLabel PR 22702GitHub
- Successful
- Successful
- Successful
- SuccessfulCollect PR targetsGitHub
- SuccessfulPrepare PR size configGitHub
- SuccessfulCheckGitHub
- SkippedRelease SmokeGitHub
- SkippedRustGitHub
- Skipped
- SuccessfulBuild and TypecheckGitHub
- SuccessfulTestGitHub
- SuccessfulTest WebGitHub
- SuccessfulLabel PR 22702GitHub
- Skipped
- SuccessfulLabel PR sizeGitHub
- SuccessfulTest Server 1GitHub
- SuccessfulTest Server 7GitHub
- SuccessfulTest Server 4GitHub
- SuccessfulTest Server 6GitHub
- SuccessfulTest Server 8GitHub
- SuccessfulTest Server 2GitHub
- SuccessfulTest Server 3GitHub
- SuccessfulLintGitHub
- SuccessfulTest Server 5GitHub
- SkippedEAS PreviewGitHub
- SuccessfulChangesGitHub
- SuccessfulNative fingerprint diffGitHub
- SuccessfulCollect PR targetsGitHub
- SuccessfulPrepare PR size configGitHub
Added 1 commit
- refactor(web): the pull request header's actions live in their own components4207420
Synced from GitHub
Approvability
Verdict: Approved at 4207420
Macroscope's review found this PR approvable — This change extracts existing pull-request header controls into focused components without adding workflows, changing APIs, or altering product defaults. The production behavior remains bounded to the same existing callbacks and conditions, with only confirmation state moved to the extracted controls.
You can add or adjust custom eligibility rules. Learn more.
Synced from GitHub
No actionable comments were generated in the recent review. 🎉
ℹ️ Recent review info
⚙️ Run configuration
- Configuration used: Path: .coderabbit.config.ts
- Review profile: CHILL
- Plan: Team
- Run ID:
87b0bda9-1b50-413c-9858-a929de12591e
📥 Commits
Reviewing files that changed from the base of the PR and between deb06508250ef29db3af594ae34852dcd88f9ecc and 4207420d8e84e7f4937474921a1295c4675601de.
📒 Files selected for processing: 3
apps/web/src/components/pullRequest/PullRequestActionsMenu.tsxapps/web/src/components/pullRequest/PullRequestDetailActions.tsxapps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
Limit details: You’ve used all 10 included reviews currently available.
📝 Walkthrough
PullRequestDetailPanel now delegates pull-request menus and action controls to dedicated components. The panel passes state and callbacks for checkout, conflict resolution, merge actions, workflow approval, and other menu actions. It also stores selected merge methods and acting environments scoped to the current pull request.
Changes: Pull request actions
Layer / File(s) Summary Extract action controls
apps/web/src/components/pullRequest/PullRequestDetailActions.tsx,apps/web/src/components/pullRequest/PullRequestActionsMenu.tsxAdded dedicated controls for environment selection, checkout, conflict resolution, primary pull-request actions, and workflow approval. Added an overflow menu whose actions depend on pull-request state, permissions, capabilities, configuration, environment connectivity, and pending operations. Wire actions into the detail panel
apps/web/src/components/pullRequest/PullRequestDetailPanel.tsxReplaced inline action controls with the extracted components. Added callbacks for merge-method selection and pull-request-scoped acting-environment selection. Priority: ⬇️ Low
Estimated code review effort: 3 (Moderate) | ~25 minutes
Change: Refactor
Merge Risk: ⚪ Minimal · up to 42074
This change moves pull request header actions into separate components without an identified behavior change. No merge-blocking risk was found in the supplied context.
Pre-merge checks: Passed 3 · Failed 1
Failed Failed checks: 1 warning
Check name Status Explanation Resolution Description check Warning The description explains the refactor and lists focused verification, but it omits the required Problem and Scope and approval sections. It also provides no before-and-after screenshots for the UI cha… Add the required Problem section with expected behavior and context. Add the Scope and approval section with the related issue or explicit maintainer approval, or explain why an exception applies. Add before-and-after UI screenshots and des… Passed Passed checks: 3 passed
Check name Status Explanation Title check Passed The title clearly and concisely describes the main change: moving pull request header actions into separate components. Linked Issues check Passed Check skipped because no linked issues were found for this pull request. Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Description check
Explanation
The description explains the refactor and lists focused verification, but it omits the required Problem and Scope and approval sections. It also provides no before-and-after screenshots for the UI changes.
Resolution
Add the required Problem section with expected behavior and context. Add the Scope and approval section with the related issue or explicit maintainer approval, or explain why an exception applies. Add before-and-after UI screenshots and describe any checks that could not be completed.
✨ Finishing Touches
📝 Generate docstrings
- Commit to this branch
- Create a new PR
🧪 Generate unit tests (beta)
- Commit to this branch
- Create a new PR
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Usage-based review receipt
- Mode: Continue automatically
- Reviewed files: 3
- Charged: $0.75
- View usage details
Note
This review was completed with usage-based billing: files reviewed beyond your plan's included limits are billed at $0.25/file. View usage-based billing.
Comment @coderabbitai help to get the list of available commands.