feat: show branches and improve layout in MR overview webview

Mohammed Osumahrequested to merge
2270-show-mr-branch-source into main

Description

This MR adds source and target branch names to the merge request overview panel in the VS Code extension, matching the GitLab web UI experience.

Changes include:

  • Display source and target branch names in the MR overview header as clickable links to their respective GitLab branch pages
  • For fork MRs, fetch the source project namespace via the REST API and prefix the source branch label (e.g. fun_engineer/gitlab-development-kit:main → main)
  • Restructured the IssuableDetails layout to lead with the title, followed by a compact metadata row (state badge, author, date, branches), closer to the GitLab work items page
    • I felt this would be a nice UX improvement around responsiveness as I noticed when you make the webview width smaller the title and open in gitlab button would overlap each other
  • Added merged state to stateText and the corresponding purple badge style
  • Fixed avatar alignment in UserAvatar using flex box

Related Issues

Resolves #2270 (closed)

How has this been tested?

  1. Checkout this branch
  2. Run npm run watch:desktop
  3. Start extension host and test by opening the MR overview panel webview for:
    • A same-project MR (verified source and target branch labels and links)
    • A fork MR (verified namespace prefix on source branch label and correct link to fork branch page)
    • A merged MR (verified the purple "Merged" badge renders correctly)
  • If src/browser or src/common has been modified, please consider interoperability with the Web IDE. See Running the Extension in WebIDE.
  • Consider an end-to-end test for significant new features that aren't covered by integration tests.

Screenshots (if appropriate)

Issue

Screenshot 2026-04-29 at 1.54.47 PM.png

Screenshot 2026-04-29 at 2.04.25 PM.png

Merge Request

Screenshot 2026-04-29 at 1.56.42 PM.png

Screenshot 2026-04-29 at 2.02.28 PM.png

Screenshot 2026-04-29 at 2.03.22 PM.png

Screenshot 2026-04-29 at 3.08.05 PM.png

Screenshot 2026-04-29 at 3.16.15 PM.png

What CHANGELOG entry will this MR create?

  • fix: Bug fix fixes - a user-facing issue in production - included in changelog
  • feature: New feature - a user-facing change which adds functionality - included in changelog
  • BREAKING CHANGE: (fix or feature that would cause existing functionality to change) - should bump major version, mentioned in the changelog
  • None - other non-user-facing changes

Closes #2270 (closed)

Edited by Mohammed Osumah

Merge request reports