Merge branch 'rs-port-57662' into 'master'

Cherry-pick Merge branch 'fix-mr-source-branch-styling' into 'master'

See merge request gitlab-org/security/gitlab!1327

app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js

@@ -120,7 +120,7 @@ export default class ShortcutsIssuable extends Shortcuts {
   static copyBranchName() {
     // There are two buttons - one that is shown when the sidebar
     // is expanded, and one that is shown when it's collapsed.
-    const allCopyBtns = Array.from(document.querySelectorAll('.sidebar-source-branch button'));
+    const allCopyBtns = Array.from(document.querySelectorAll('.js-sidebar-source-branch button'));
 
     // Select whichever button is currently visible so that
     // the "Copied" tooltip is shown when a click is simulated.

app/assets/stylesheets/pages/issuable.scss

@@ -225,8 +225,7 @@
     }
   }
 
-  .cross-project-reference,
-  .sidebar-mr-source-branch {
+  .cross-project-reference {
     color: inherit;
 
     span {

app/views/shared/issuable/_sidebar.html.haml

@@ -133,12 +133,12 @@
       .block.with-sub-blocks
         #js-reference-entry-point
         - if issuable_type == 'merge_request'
-          .sidebar-source-branch.sub-block
+          .sub-block.js-sidebar-source-branch
             .sidebar-collapsed-icon.dont-change-state
               = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport')
-            .sidebar-mr-source-branch.hide-collapsed
-              %span
-                = _('Source branch: %{source_branch_open}%{source_branch}%{source_branch_close}').html_safe % { source_branch_open: "<cite class='ref-name' title='#{html_escape(source_branch)}'>".html_safe, source_branch_close: "</cite>".html_safe, source_branch: html_escape(source_branch) }
+            .gl-display-flex.gl-align-items-center.gl-justify-content-space-between.gl-mb-2.hide-collapsed
+              %span.gl-overflow-hidden.gl-text-overflow-ellipsis.gl-white-space-nowrap
+                = _('Source branch: %{source_branch_open}%{source_branch}%{source_branch_close}').html_safe % { source_branch_open: "<span class='gl-font-monospace' data-testid='ref-name' title='#{html_escape(source_branch)}'>".html_safe, source_branch_close: "</span>".html_safe, source_branch: html_escape(source_branch) }
               = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport')
 
       - if show_forwarding_email

changelogs/unreleased/fix-mr-source-branch-styling.yml

+---
+title: Fix MR Source Branch styling
+merge_request: 57662
+author:
+type: fixed

spec/features/merge_request/user_views_open_merge_request_spec.rb

@@ -125,7 +125,7 @@ RSpec.describe 'User views an open merge request' do
     end
 
     it 'encodes branch name' do
-      expect(find('cite.ref-name')[:title]).to eq(source_branch)
+      expect(find("[data-testid='ref-name']")[:title]).to eq(source_branch)
     end
   end
 end

spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js

@@ -329,7 +329,7 @@ describe('ShortcutsIssuable', () => {
       window.shortcut = new ShortcutsIssuable();
 
       [sidebarCollapsedBtn, sidebarExpandedBtn] = document.querySelectorAll(
-        '.sidebar-source-branch button',
+        '.js-sidebar-source-branch button',
       );
 
       [sidebarCollapsedBtn, sidebarExpandedBtn].forEach((btn) => jest.spyOn(btn, 'click'));