Add base branch editing to PR overview

[Copilot]

Users can now change the base branch of a pull request directly from the PR overview panel when they have edit permissions and the PR is open.

Changes

• UI: Made the base branch itself clickable when editable

  • Base branch displays as an interactive button when PR state is Open and user has canEdit permission
  • Triggers branch selection QuickPick on click
  • Button has hover and active states using VS Code theme colors for visual feedback
  • When not editable, displays as a regular code tag

• Backend:

  • Added pr.change-base-branch command handler in pullRequestOverview.ts
  • Implemented updateBaseBranch() method in pullRequestModel.ts using GitHub's UpdatePullRequest GraphQL mutation with baseRefName parameter
  • Creates new immutable GitHubRef instance on successful update
  • Fetches and returns timeline events after base branch update

• Timeline Event Support:

  • Added BaseRefChangedEvent type to track base branch changes
  • Created GraphQL fragment to fetch event details including currentRefName and previousRefName
  • Implemented timeline view component displaying "changed the base branch from [previous] to [current]"
  • Events are included in the ChangeBaseReply and automatically displayed in the PR timeline

• Type system:

  • Extended IssueChangeEvent interface with base?: true for change notifications
  • Added ChangeBaseReply interface with base and events fields

Example

// PullRequestModel
async updateBaseBranch(newBaseBranch: string): Promise<void> {
  const { data } = await mutate<UpdateIssueResponse>({
    mutation: schema.UpdatePullRequest,
    variables: {
      input: { pullRequestId: this.graphNodeId, baseRefName: newBaseBranch }
    }
  });
  
  if (data?.updateIssue?.issue) {
    this.base = new GitHubRef(newBaseBranch, ...);
    this._onDidChange.fire({ base: true });
  }
}

The QuickPick lists all repository branches excluding the current base branch. After selection, the panel refreshes automatically to reflect the change, and a timeline event is created showing the base branch change.

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.