Updated merge request header

What does this MR do and why?

Updates the merge request header by moving the branch information from the widget into the header.

Screenshots or screen recordings

How to set up and validate locally

Enable updated_mr_header

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #356703 (closed)

changed milestone to %15.0

added devopscreate frontend groupcode review typefeature labels

assigned to @iamphill

Suggested Reviewers (beta)

This is an experimental ML-based code reviewer recommendation system created by ~"group::applied ml".

The individuals below may be good candidates to participate in the review based on various factors.

After you review all recommendations, please assign reviewers manually, as this is not done automatically.

You can use slash commands in comments to quickly assign /assign_reviewer @user1.

Reviewers
@kushalpandya, @iamphill, @jcaigitlab, @rymai, @rspeicher

If you do not believe these recommendations are useful or if you do not want to use any of the suggestions, please apply the label Bad Suggested Reviewer. You can also provide feedback for this feature on this issue: https://gitlab.com/gitlab-org/gitlab/-/issues/357923.

Automatically generated by Suggested Reviewers Bot

@annabeldunstone There is still plenty for me to fix up on this but just thought i'd ping you so you are aware

I guess we still also want to keep the task completed part?

	1 Warning
	This merge request changed files with disabled eslint rules. Please consider fixing them.

	1 Message
	CHANGELOG missing: If you want to create a changelog entry for GitLab FOSS, add the Changelog trailer to the commit message you want to add to the changelog. If you want to create a changelog entry for GitLab EE, also add the EE: true trailer to your commit message. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

If needed, you can retry the danger-review job that generated this comment.

Disabled eslint rules

The following files have disabled eslint rules. Please consider fixing them:

• app/assets/javascripts/merge_request.js

Run the following command for more details

node_modules/.bin/eslint --report-unused-disable-directives --no-inline-config \
  'app/assets/javascripts/merge_request.js'

Reviewer roulette

Changes that require review have been detected!

Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:

Category	Reviewer	Maintainer
backend	Ross Fuhrman (@rossfuhrman) (UTC-5, 6 hours behind @iamphill)	Stan Hu (@stanhu) (UTC-7, 8 hours behind @iamphill)
frontend	Miranda Fluharty (@mfluharty) (UTC-6, 7 hours behind @iamphill)	Mike Greiling (@mikegreiling) (UTC-5, 6 hours behind @iamphill)
test Quality for spec/features/*	Anastasia McDonald (@a_mcdonald) (UTC+12, 11 hours ahead of @iamphill)	Maintainer review is optional for test Quality for spec/features/*

To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.

To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.

Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.

Generated by Danger

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 171ff1ad and 9967a1b6

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	3.45 MB	3.46 MB	+6.07 KB	0.2 %
mainChunk	1.93 MB	1.93 MB	-	0.0 %

Significant Growth: 4

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.projects.edit	2.16 MB	2.81 MB	+674.21 KB	30.6 %
pages.projects.merge_requests.creations.new	1.73 MB	2.39 MB	+673.55 KB	38.0 %
pages.projects.merge_requests.creations.diffs	1.68 MB	2.33 MB	+673.18 KB	39.2 %
pages.projects.merge_requests.edit	1.68 MB	2.33 MB	+673.18 KB	39.2 %

Significant Reduction: 1

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.groups.issues	2.42 MB	2.36 MB	-57.25 KB	-2.3 %

---

Your MR has at least one entrypoint growing significantly (more > 1 KB or 2%). If you write new or extend existing features, this is expected and there is nothing to worry about.

Please consider pinging someone from the FE Foundations (@dmishunov, @justin_ho, @mikegreiling or @nmezzopera) for review, if you are unsure about the size increase.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

Allure report

allure-report-publisher generated test report!

review-qa-blocking: test report for 9967a1b6

expand test summary

+-------------------------------------------------------------------+
|                          suites summary                           |
+----------------------+--------+--------+---------+-------+--------+
|                      | passed | failed | skipped | flaky | result |
+----------------------+--------+--------+---------+-------+--------+
| Create               | 24     | 0      | 2       | 4     | ❗     |
| Manage               | 31     | 0      | 2       | 1     | ❗     |
| Plan                 | 41     | 0      | 1       | 3     | ❗     |
| Verify               | 12     | 0      | 1       | 0     | ✅     |
| Version sanity check | 0      | 0      | 1       | 0     | ➖     |
| Protect              | 2      | 0      | 0       | 1     | ❗     |
| Package              | 0      | 0      | 1       | 0     | ➖     |
| Configure            | 0      | 0      | 1       | 0     | ➖     |
+----------------------+--------+--------+---------+-------+--------+
| Total                | 110    | 0      | 9       | 9     | ❗     |
+----------------------+--------+--------+---------+-------+--------+

package-and-qa-ff-disabled: test report for 9967a1b6

expand test summary

+-------------------------------------------------------------------+
|                          suites summary                           |
+----------------------+--------+--------+---------+-------+--------+
|                      | passed | failed | skipped | flaky | result |
+----------------------+--------+--------+---------+-------+--------+
| Plan                 | 53     | 0      | 0       | 1     | ❗     |
| Verify               | 33     | 0      | 8       | 8     | ❗     |
| Manage               | 91     | 0      | 6       | 2     | ❗     |
| Configure            | 0      | 0      | 3       | 0     | ➖     |
| Create               | 147    | 1      | 7       | 8     | ❌     |
| Release              | 6      | 0      | 0       | 3     | ❗     |
| Fulfillment          | 2      | 0      | 10      | 0     | ✅     |
| Package              | 0      | 0      | 3       | 0     | ➖     |
| Protect              | 2      | 0      | 0       | 0     | ✅     |
| Secure               | 16     | 0      | 3       | 1     | ❗     |
| Non-devops           | 2      | 0      | 0       | 0     | ✅     |
| Version sanity check | 0      | 0      | 1       | 1     | ➖     |
+----------------------+--------+--------+---------+-------+--------+
| Total                | 352    | 1      | 41      | 24    | ❌     |
+----------------------+--------+--------+---------+-------+--------+

package-and-qa-ff-enabled: test report for 9967a1b6

expand test summary

+-------------------------------------------------------------------+
|                          suites summary                           |
+----------------------+--------+--------+---------+-------+--------+
|                      | passed | failed | skipped | flaky | result |
+----------------------+--------+--------+---------+-------+--------+
| Secure               | 16     | 0      | 3       | 1     | ❗     |
| Manage               | 91     | 0      | 6       | 1     | ❗     |
| Configure            | 0      | 0      | 3       | 0     | ➖     |
| Plan                 | 53     | 0      | 0       | 1     | ❗     |
| Release              | 6      | 0      | 0       | 3     | ❗     |
| Create               | 147    | 1      | 7       | 8     | ❌     |
| Verify               | 33     | 0      | 8       | 7     | ❗     |
| Version sanity check | 0      | 0      | 1       | 1     | ➖     |
| Fulfillment          | 2      | 0      | 10      | 0     | ✅     |
| Protect              | 2      | 0      | 0       | 0     | ✅     |
| Package              | 0      | 0      | 3       | 0     | ➖     |
| Non-devops           | 2      | 0      | 0       | 0     | ✅     |
+----------------------+--------+--------+---------+-------+--------+
| Total                | 352    | 1      | 41      | 22    | ❌     |
+----------------------+--------+--------+---------+-------+--------+

added 1 commit

• 58491f7f - Updated merge request header

Compare with previous version

added sectiondev label

added 321 commits

• 58491f7f...0ef2477e - 320 commits from branch master
• a2145d53 - Updated merge request header

Compare with previous version

• The gitlab-qa-mirror downstream pipeline for !86019 (a2145d53) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (a2145d53) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (9b14b899) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (9b14b899) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (9c388a80) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (9c388a80) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (22bced59) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (22bced59) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (5af6221b) passed.
• The gitlab-qa-mirror downstream pipeline for !86019 (5af6221b) passed.
• The gitlab-qa-mirror downstream pipeline for !86019 (d6859bae) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (d6859bae) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (cb9723c6) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (cb9723c6) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (12a1f631) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (12a1f631) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (20fbbe64) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (20fbbe64) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (4250246b) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (4250246b) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (659fcb05) passed.
• The gitlab-qa-mirror downstream pipeline for !86019 (659fcb05) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (ab527c26) passed.
• The gitlab-qa-mirror downstream pipeline for !86019 (9967a1b6) failed!
• The gitlab-qa-mirror downstream pipeline for !86019 (9967a1b6) failed!

added 1 commit

• 9b14b899 - Updated merge request header

Compare with previous version

changed the description

added 1 commit

• 9c388a80 - Updated merge request header

Compare with previous version

mentioned in merge request !85534 (closed)

added 1 commit

• 35449eac - Updated merge request header

Compare with previous version

changed the description

added 1 commit

• 22bced59 - Updated merge request header

Compare with previous version

added 605 commits

• 22bced59...39ce586b - 604 commits from branch master
• 5af6221b - Updated merge request header

Compare with previous version

marked this merge request as ready

requested review from @mvanremmerden

@iamphill Is this MR already in a state where we can review? I enabled the feature flag moved_mr_sidebar, but the only change I saw was that the "Open" badge now uses a new styling.

Also, should we use a different feature flag for this change, as it is not really about the sidebar?

requested review from @annabeldunstone

added 190 commits

• 5af6221b...140a0e04 - 189 commits from branch master
• d6859bae - Updated merge request header

Compare with previous version

@iamphill Since we don't have the extra space from the sidebar being gone, can we go back to our previous truncation rules for branch names? Something like:

display: inline-block;
max-width: 12.5em;
margin-bottom: -12px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

locked this merge request

unlocked this merge request

For now can we put the Lock icon in the current header location when the MR is locked? Something like this:

Maybe in the future we can look into combining them in some way

@annabeldunstone @iamphill I just played around with the branch, and tried to see if we could improve the situation around this space problem with a two smaller re-arrangements, would love to hear your opinion:

Moving title up

• Higher chance of having a shorter text there whereas the line with the branch is always roughly the same length.
• Wrapping multiple lines of pure text looks better than wrapping multiple lines of text, links and buttons.
• Better hierarchy of big text up and flowing down to smaller text.

Potentially we could also move the "Open" badge to the title. That would give both lines a visual indicator at the beginning, instead of overloading one line with multiple, but I don't feel strong about this one at all.

Current	This MR	Alternative layout

added 1 commit

• cb9723c6 - Updated merge request header

Compare with previous version

changed the description

added 1 commit

• 12a1f631 - Updated merge request header

Compare with previous version

added 1 commit

• 20fbbe64 - Updated merge request header

Compare with previous version

changed the description

added 1 commit

• 92dbeb95 - Updated merge request header

Compare with previous version

@annabeldunstone @mvanremmerden I think this is good to be reviewed before we keep changing things

added 1 commit

• 4250246b - Updated merge request header

Compare with previous version

Long titles end up on their own line:

Without the new merge widget enabled, I can't find the commits behind info

@iamphill This looks amazing! I just had a few small comments, mostly about alignment.

I guess the biggest thing right now is that I couldn't see the commits behind info on the current merge widget. Is that going to be enabled at the same time? I know we discussed this somewhere but I can't find it at the moment

removed review request for @annabeldunstone

mentioned in merge request gitlab-com/www-gitlab-com!103569 (merged)

added 318 commits

• 4250246b...d40bfcd0 - 317 commits from branch master
• 59f7b2f5 - Updated merge request header

Compare with previous version

added 1 commit

• 659fcb05 - Updated merge request header

Compare with previous version

requested review from @annabeldunstone

@annabeldunstone @iamphill The branch names keep throwing me off because they are now part of a longer sentence, so I tried to solve it in a different way by copying the style from when a user gets mentioned in a system note:

Before	After

If you want to test it out yourself, here is the diff:

diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index bc9975ea17a..d676d26961e 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -70,4 +70,11 @@
   .author-link {
     color: $gl-text-color;
   }
+
+  .branch-name {
+    padding: 2px $gl-padding-4;
+    background-color: $blue-50;
+    border-radius: $border-radius-default;
+    font-size: $gl-font-size-small;
+  }
 }
diff --git a/app/helpers/merge_requests_helper.rb b/app/helpers/merge_requests_helper.rb
index f24338e8f27..d6143b02269 100644
--- a/app/helpers/merge_requests_helper.rb
+++ b/app/helpers/merge_requests_helper.rb
@@ -245,13 +245,13 @@ def merge_request_source_branch(merge_request)
                     ''
                   end
 
-    link_to branch, branch_path, class: 'gl-link gl-font-monospace'
+    link_to branch, branch_path, class: 'gl-link gl-font-monospace branch-name'
   end
 
   def merge_request_header(project, merge_request)
     link_to_author = link_to_member(project, merge_request.author, size: 24, extra_class: 'gl-font-weight-bold', avatar: false)
     copy_button = clipboard_button(text: merge_request.source_branch, title: _('Copy branch name'), class: 'btn btn-default btn-sm gl-button btn-default-tertiary btn-icon gl-display-none! gl-md-display-inline-block! js-source-branch-copy')
-    target_branch = link_to merge_request.target_branch, project_tree_path(merge_request.target_project, merge_request.target_branch), class: 'gl-link gl-font-monospace'
+    target_branch = link_to merge_request.target_branch, project_tree_path(merge_request.target_project, merge_request.target_branch), class: 'gl-link gl-font-monospace branch-name'
 
     _('%{author} requested to merge %{span_start}%{source_branch} %{copy_button}%{span_end} into %{target_branch} %{created_at}').html_safe % { author: link_to_author.html_safe, source_branch: merge_request_source_branch(merge_request).html_safe, copy_button: copy_button.html_safe, target_branch: target_branch.html_safe, created_at: time_ago_with_tooltip(merge_request.created_at, html_class: 'gl-display-inline-block').html_safe, span_start: '<span class="gl-display-inline-block">'.html_safe, span_end: '</span>'.html_safe }
   end

What do you two think?

added 100 commits

• 659fcb05...6b5942aa - 99 commits from branch master
• e607ed8d - Updated merge request header

Compare with previous version

This looks so great! I'm so so so excited to see this live

I think this is in a good state for frontend review now. @kushalpandya Can you please review?

requested review from @kushalpandya

resolved all threads

added 1 commit

• ab527c26 - Updated merge request header

Compare with previous version

approved this merge request

@annabeldunstone, thanks for approving this merge request.

This is the first time the merge request is approved. To ensure full test coverage, a new pipeline has been started.

For more info, please refer to the following links:

• rspec minimal jobs
• jest minimal jobs
• merging a merge request.

approved this merge request

@iamphill Thanks! frontend approved, but since this has controller and helper updates, we'd need a formal backend maintainer review and approval.

requested review from @dbalexandre and removed review request for @kushalpandya

removed review request for @dbalexandre

added 1 commit

• 9967a1b6 - Updated merge request header

Compare with previous version

requested review from @dbalexandre

approved this merge request

Thanks, @iamphill! The backend changes look good to me. Is this ready to merge, or is it pending a review from @mvanremmerden?

removed review request for @dbalexandre

@dbalexandre I think with @annabeldunstone approving we are good to merge please

resolved all threads

enabled an automatic merge when the pipeline for f9086b11 succeeds

resolved all threads

removed review request for @mvanremmerden

merged

mentioned in commit 39359005

added workflowstaging-canary label

added workflowcanary label and removed workflowstaging-canary label

added workflowstaging label and removed workflowcanary label

added workflowproduction label and removed workflowstaging label

mentioned in merge request !86772 (merged)

@iamphill @annabeldunstone Just a heads-up that I have !86772 (merged) opened where we're updating state badge styles for Issues, MRs, and Epics. And I've also covered the changes made in this MR (updated MR header styles behind FF). Be sure to have a look at the screenshots attached in linked MR and let me know if you notice anything out of place.

resolved all threads

added Beautifying our UI label

mentioned in merge request !87595 (merged)

added releasedcandidate label

added releasedpublished label and removed releasedcandidate label

mentioned in merge request !138822 (merged)