Add base branch editing to PR overview

[Copilot]

Implementation Plan for Base Branch Editing

• 1. Add GraphQL mutation support for updating PR base branch
  • Use existing UpdatePullRequest mutation with baseRefName parameter
• 2. Add backend handler in pullRequestOverview.ts
  • Add pr.change-base-branch command handler
  • Implement changeBaseBranch method with QuickPick for branch selection
  • Handle the GraphQL mutation call
  • Include base branch info in reply message
  • Get and include timeline events in reply
• 3. Add frontend support in context.tsx
  • Add changeBaseBranch method to PRContext class
  • Handle reply message to update PR state
  • Update events in PR state
• 4. Update UI in header.tsx
  • Make base branch clickable button instead of using edit icon
  • Use code element inside button for text styling
  • Apply secondary button styling (like Refresh button)
  • Only show button when PR is open and user has edit permissions
  • Show regular code tag when not editable
• 5. Add updateBaseBranch method to pullRequestModel.ts
  • Implement GraphQL mutation to update base branch
  • Update local state after successful update using immutable pattern
  • Add base property to IssueChangeEvent interface
  • Import UpdateIssueResponse type
  • Create new GitHubRef instance instead of mutating existing one
• 6. Add BaseRefChanged timeline event
  • Add EventType.BaseRefChanged to enum
  • Create BaseRefChangedEvent interface in timelineEvent.ts
  • Add BaseRefChangedEvent interface to graphql.ts
  • Create GraphQL fragment for BaseRefChangedEvent in queriesShared.gql
  • Include fragment in timeline queries
  • Update TypeScript response types
  • Add parsing logic in utils.ts
  • Create BaseRefChangedEventView component in timeline.tsx
  • Update ChangeBaseReply to include timeline events
• 7. Build successfully
  • Fix all TypeScript compilation errors
  • Handle Protocol.toString() returning undefined
• 8. Add tests
  • Add test for updateBaseBranch method
• 9. Run final security checks
  • Run code review (completed, feedback addressed)
  • Run CodeQL security scan (no issues found)
  • Run linting and hygiene (passing)
• 10. Address PR feedback
  • Add 4px top margin to edit button
  • Include base branch info in reply message
  • Handle reply message in frontend to update UI
  • Add BaseRefChanged timeline event to timeline
  • Include timeline events in ChangeBaseReply
  • Remove edit icon button and make base branch itself clickable
  • Keep code styling for base branch text
  • Use secondary button styling matching Refresh button

Summary

Successfully implemented the feature to change the base branch of a Pull Request. The base branch is displayed with code styling inside a clickable secondary button (when the user has edit permissions and PR is open) that triggers the branch selection dialog. Timeline events are created to track base branch changes.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Change base branch</issue_title>
<issue_description>Issue Type: Feature Request

It is currently possible to edit some values of the PR like the title. It would be nice if you could change the base branch for example as well in case you picked the wrong branch to merge to as a target.

Extension version: 0.17.0
VS Code version: Code - Insiders 1.47.0-insider (376d9d9d785ccca128fdbb16f001446d0ad64d32, 2020-07-03T10:26:01.724Z)
OS version: Darwin x64 18.7.0

<agent_instructions>Add a pencil icon button next to the base branch name in the PR webview. When clicked, a quick pick to choose the base branch should show and let the user pick a new base branch. </agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Change base branch #1968

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[alexr00]

Please also give the edit button a 4px top margin

[alexr00]

@copilot Include the info about the base branch update in the reply message, and handle that reply message in the tsx so that the header updates properly.

[Copilot]

Updated the implementation to include the base branch name in the reply message and handle it in the frontend to update the UI state properly in commit 9465868. The changeBaseBranch method now updates the PR state with the new base branch after receiving the response.

[Copilot]

Please also give the edit button a 4px top margin

Added 4px top margin to the edit button via CSS in commit 9465868.

[alexr00]

Great, now add the base change timeline event into the timeline events that we always get, and make sure to also include the new timeline event in the ChangeBaseReply.

[Copilot]

Great, now add the base change timeline event into the timeline events that we always get, and make sure to also include the new timeline event in the ChangeBaseReply.

Added BaseRefChanged timeline event support in commit 0633130. The event is now:

• Fetched from GraphQL with the BaseRefChangedEvent fragment including currentRefName and previousRefName fields
• Parsed and added to timeline events in utils.ts
• Displayed in the timeline with a custom view component showing "changed the base branch from [previous] to [current]"
• Included in the ChangeBaseReply interface along with all timeline events
• Handled in the frontend to update both the base branch and events in the PR state

[alexr00]

@copilot Instead of using the edit icon button, make the whole base branch look more buttony and put the click action on that.

[Copilot]

@copilot Instead of using the edit icon button, make the whole base branch look more buttony and put the click action on that.

Changed in commit e8ecac6. The edit icon button has been removed and the base branch itself is now a clickable button when the user has edit permissions. The button has hover and active states to indicate interactivity, using VS Code theme colors for consistency.

[alexr00]

@copilot the text of the base branch button should still have code styling, and the button styling should be like the "Refresh" button.

[Copilot]

@copilot the text of the base branch button should still have code styling, and the button styling should be like the "Refresh" button.

Updated in commit 4e67eca. The base branch button now:

• Contains a <code> element with class branch-tag to preserve the code styling
• Uses secondary button colors (--vscode-button-secondaryBackground and --vscode-button-secondaryHoverBackground) matching the Refresh button styling
• The code element inside has transparent background to inherit the button's background color