<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Label this issue](https://contributors.gitlab.com/manage-issue?action=label&projectId=278964&issueIid=598206) </details> ### Summary The legacy commits list page (`/project/-/commits/:branch`) displays a **"Create merge request"** button when the user is on a non-default branch with no existing open MR, and a **"View open merge request"** button when an open MR already exists for that branch. When the `project_commits_refactor` feature flag is enabled, these buttons are missing from the new Vue-based `CommitListHeader` component. This is a feature parity gap that should be resolved before the feature flag is fully rolled out. ### Conditions for the button to appear The button is **not always visible**. It renders only when specific conditions are met: | Condition | Why | |---|---| | Current ref is a **branch** (not a tag or commit SHA) | `refType` must be `heads` — tags and SHAs cannot be MR source branches | | Current branch **differs from the default branch** | No MR from default to default | | User has **`createMergeRequestFrom`** permission on the project | Typically Developer role or higher | | User has **`createMergeRequestIn`** permission on the project | Typically Developer role or higher | The button state follows this priority: 1. If an **open MR already exists** from the current branch to the default branch → show **"View open merge request"** (links to the existing MR) 2. Else if **all conditions above pass** → show **"Create merge request"** (confirm variant, links to the new MR form with source branch pre-filled) 3. Otherwise → show **no button** ### Implementation plan The implementation uses a **client-side GraphQL query** in a new Vue component. No backend changes are needed. #### Why GraphQL instead of server-baked data Branch switching via `RefSelector` uses `$router.push()` which updates the URL via the History API **without a full page reload**. The Vue app stays mounted and `CommitListApp.currentRef` updates reactively to re-fetch commits via Apollo. However, any data baked into `dataset` / `provide` at page load (like a pre-computed MR path) would become stale after a branch switch. A GraphQL query that re-runs when `currentRef` changes keeps the button state in sync. #### Key design details - **Reactive ref tracking:** `currentRef` and `currentRefType` flow as reactive props from `CommitListApp` → `CommitListHeader` → `CreateMergeRequestButton`. When the user switches branches, the header emits a `ref-change` event with both `{ ref, refType }`, and the app updates both reactive data properties. - **Query skipping:** The GraphQL query is skipped when the ref is a tag (`refType === 'tags'`), or the current branch equals the default branch. This avoids unnecessary network requests. - **Stale data guard:** Apollo does not clear previously fetched data when a query becomes skipped. The template guards both buttons with `!shouldSkipQuery` to prevent stale permissions/MR data from causing the button to render incorrectly (e.g., after switching from a branch to a tag). - **URL construction:** The new MR form URL is built client-side: `/{projectRootPath}/-/merge_requests/new?merge_request[source_branch]={currentRef}`. <details> <summary>expand for details</summary> #### 1. Create the GraphQL query **File:** `app/assets/javascripts/projects/commits/graphql/queries/branch_merge_request.query.graphql` (new) Queries the project for: - `userPermissions { createMergeRequestFrom, createMergeRequestIn }` — whether the user can create MRs - `mergeRequests(state: opened, sourceBranches: [...], targetBranches: [...], first: 1)` — whether an open MR already exists for this branch #### 2. Create the `CreateMergeRequestButton` component **File:** `app/assets/javascripts/projects/commits/components/create_merge_request_button.vue` (new) - Receives `currentRef` and `refType` as **props** (reactive on branch switch) - Injects `projectFullPath`, `projectRootPath`, `rootRef` from the existing `provide` - Runs an Apollo query with `skip()` based on `shouldSkipQuery` (tags, default branch) - Template renders "View open merge request" if an existing MR is found, "Create merge request" if permissions allow, or nothing - Both template conditions are guarded by `!shouldSkipQuery` to prevent stale Apollo data from leaking through #### 3. Pass reactive ref state through the component tree **File:** `app/assets/javascripts/projects/commits/components/commit_list_app.vue` - Add `currentRefType` to `data()`, initialized from the injected `refType` - Update `handleRefChange` to accept `{ ref, refType }` object and update both `currentRef` and `currentRefType` - Pass `:current-ref` and `:current-ref-type` props to `CommitListHeader` **File:** `app/assets/javascripts/projects/commits/components/commit_list_header.vue` - Accept `currentRef` and `currentRefType` as props - Update `onRefChange` to extract `refType` from the router query params and emit `{ ref, refType }` instead of just the ref string - Import `CreateMergeRequestButton` and render it with `:current-ref` and `:ref-type` props - Apply `gl-hidden @md/panel:gl-block` classes for responsive visibility (matching the legacy page) #### 4. Tests - **`create_merge_request_button_spec.js`** (new) — 16 tests: existing MR, create MR, missing permissions, default branch, tags, loading state, ref changes, branch-to-tag switching - **`commit_list_header_spec.js`** (updated) — verify button renders with correct props and responsive classes, verify `ref-change` event emits `{ ref, refType }` - **`commit_list_app_spec.js`** (updated) — verify `ref-change` handler accepts object format, add `refType` to default provide - **`spec/features/projects/commits/user_browses_commits_spec.rb`** (updated) - add test cases under `# TODO: Implement merge request button functionality in refactored UI` - **`spec/features/projects/merge_request_button_spec.rb`** (updated) - add test cases under `# TODO: Implement merge request button functionality in refactored UI` </details> <!-- template sourced from https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/issue_templates/Default.md -->