Synced from GitHub
refactor(web): the pull request header's crumbs, title editor and base branch live in their own components#22672
PullRequestDetailPanel.tsx was 2,934 lines and rendered the repository/number crumbs, the title editor and the base branch (twice, condensed and expanded) inline.
PullRequestDetailCrumbs.tsx: the repo and number row and its condensed twin.PullRequestTitleEditor.tsx: owns the title draft, saving state and the update command, so typing a new title re-renders the editor instead of the whole panel.PullRequestBaseBranch.tsx: the base branch label with its out-of-date warning, written once instead of twice.
| File | Before | After |
|---|---|---|
| PullRequestDetailPanel.tsx | 2,934 | 2,545 |
| PullRequestDetailCrumbs.tsx | - | 193 |
| PullRequestTitleEditor.tsx | - | 127 |
| PullRequestBaseBranch.tsx | - | 137 |
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
- SuccessfulLabel PR 22672GitHub
- Skipped
- SuccessfulLabel PR sizeGitHub
- Successful
- SuccessfulCollect PR targetsGitHub
- SuccessfulPrepare PR size configGitHub
- Successful
- Successful
- SuccessfulCheckGitHub
- SkippedRustGitHub
- Skipped
- SkippedRelease SmokeGitHub
- SuccessfulTest WebGitHub
- SuccessfulBuild and TypecheckGitHub
- SuccessfulTestGitHub
- SuccessfulLabel PR 22672GitHub
- Skipped
- SuccessfulLabel PR sizeGitHub
- SkippedEAS PreviewGitHub
- SuccessfulCollect PR targetsGitHub
- SuccessfulPrepare PR size configGitHub
- SuccessfulTest Server 8GitHub
- SuccessfulChangesGitHub
- SuccessfulTest Server 1GitHub
- SuccessfulTest Server 4GitHub
- SuccessfulTest Server 7GitHub
- SuccessfulTest Server 2GitHub
- SuccessfulTest Server 3GitHub
- SuccessfulTest Server 6GitHub
- SuccessfulTest Server 5GitHub
- SuccessfulLintGitHub
- SuccessfulNative fingerprint diffGitHub
Added 1 commit
- refactor(web): the pull request header's crumbs, title editor and base branch live in their own componentsdeb0650
Synced from GitHub
Approvability
Verdict: Approved at deb0650
Macroscope's review found this PR approvable — This PR mechanically extracts the existing pull-request header crumbs, base-branch display, and title editor into focused components while preserving their existing callbacks and interactions. It introduces no new capability, schema, deployment, product-default, or static-analysis configuration behavior.
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:
afcb2bb7-486f-46a0-9521-e5d520ac9a9b
📥 Commits
Reviewing files that changed from the base of the PR and between 0f7b1fa34cfd384b42d234f9485a91dbb2d8d188 and deb06508250ef29db3af594ae34852dcd88f9ecc.
📒 Files selected for processing: 4
apps/web/src/components/pullRequest/PullRequestBaseBranch.tsxapps/web/src/components/pullRequest/PullRequestDetailCrumbs.tsxapps/web/src/components/pullRequest/PullRequestDetailPanel.tsxapps/web/src/components/pullRequest/PullRequestTitleEditor.tsx
Limit details: You’ve used all 10 included reviews currently available.
📝 Walkthrough
The pull request detail panel now uses separate components for breadcrumbs, base-branch status and updates, and title editing.
Changes: Pull request detail header
Layer / File(s) Summary Breadcrumb navigation
apps/web/src/components/pullRequest/PullRequestDetailCrumbs.tsx,apps/web/src/components/pullRequest/PullRequestDetailPanel.tsxThe panel delegates expanded and condensed breadcrumb rendering to PullRequestDetailCrumbs. It passes repository details, display state, and back navigation. The component supports repository links, pull-request number actions, and host context menus.Base-branch status and updates
apps/web/src/components/pullRequest/PullRequestBaseBranch.tsx,apps/web/src/components/pullRequest/PullRequestDetailPanel.tsxThe panel delegates base-branch rendering to PullRequestBaseBranchin both header states. The component displays stacked status and freshness details, with update actions disabled while pending.Pull request title editing
apps/web/src/components/pullRequest/PullRequestTitleEditor.tsx,apps/web/src/components/pullRequest/PullRequestDetailPanel.tsxThe panel delegates title display and editing to PullRequestTitleEditor. The component validates drafts, handles save and cancel actions, reports save failures, and calls the completion callback after a successful save.Priority: ⬇️ Low
Estimated code review effort: 3 (Moderate) | ~20 minutes
Change: Refactor
Merge Risk: ⚪ Minimal · up to deb06
The header extraction has no identified behavior regression and is ready to merge after normal checks.
Pre-merge checks: Passed 3 · Failed 1
Failed Failed checks: 1 warning
Check name Status Explanation Resolution Description check Warning The description explains the component split and includes detailed verification results, but it omits the required Problem and Scope and approval sections. It also does not include the required before… Add a Problem section with the expected behavior and problem context. Add a Scope and approval section with the linked issue or explicit maintainer approval, or explain why an exemption applies. Add clear before-and-after screenshots, and a… Passed Passed checks: 3 passed
Check name Status Explanation Title check Passed The title clearly identifies the main change: extracting the pull request header crumbs, title editor, and base branch 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 component split and includes detailed verification results, but it omits the required Problem and Scope and approval sections. It also does not include the required before-and-after screenshots for this UI change.
Resolution
Add a Problem section with the expected behavior and problem context. Add a Scope and approval section with the linked issue or explicit maintainer approval, or explain why an exemption applies. Add clear before-and-after screenshots, and a recording if interaction or transition behavior requires it.
✨ 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: 4
- Charged: $1.00
- 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.