From 02209940f6426d10f237eabdea2356f3dee97a08 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Fri, 7 Jun 2024 12:40:24 +0200
Subject: [PATCH 1/2] Merge request: Migrate headline to use type scale

Also fixes a minor alignment issue in the sticky header.

Changelog: changed
---
 .../components/sticky_header.vue              | 27 +++++++++----------
 .../merge_requests/_mr_title.html.haml        |  6 ++---
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/merge_requests/components/sticky_header.vue b/app/assets/javascripts/merge_requests/components/sticky_header.vue
index 11cc06b78167ab..b36915346be7b3 100644
--- a/app/assets/javascripts/merge_requests/components/sticky_header.vue
+++ b/app/assets/javascripts/merge_requests/components/sticky_header.vue
@@ -160,14 +160,14 @@ export default {
     @disappear="setStickyHeaderVisible(true)"
   >
     <div
-      class="issue-sticky-header merge-request-sticky-header gl-fixed gl-bg-white gl-hidden md:gl-flex gl-flex-direction-column gl-justify-content-end gl-border-b"
+      class="issue-sticky-header merge-request-sticky-header gl-fixed gl-bg-white gl-hidden md:gl-flex gl-flex-col gl-justify-end gl-border-b"
       :class="{ 'gl-invisible': !isStickyHeaderVisible }"
     >
       <div
-        class="issue-sticky-header-text gl-display-flex gl-flex-direction-column gl-align-items-center gl-mx-auto gl-w-full"
+        class="issue-sticky-header-text gl-flex gl-flex-col gl-items-center gl-mx-auto gl-w-full"
         :class="{ 'container-limited': !isFluidLayout }"
       >
-        <div class="gl-w-full gl-display-flex gl-align-items-center gl-gap-2">
+        <div class="gl-w-full gl-flex gl-items-center gl-gap-2">
           <status-badge :issuable-type="$options.TYPE_MERGE_REQUEST" :state="badgeState.state" />
           <imported-badge v-if="isImported" :importable-type="$options.TYPE_MERGE_REQUEST" />
           <a
@@ -175,7 +175,7 @@ export default {
             href="#top"
             class="gl-hidden lg:gl-block gl-font-bold gl-overflow-hidden gl-whitespace-nowrap gl-text-overflow-ellipsis gl-my-0 gl-ml-1 gl-mr-2 gl-text-black-normal"
           ></a>
-          <div class="gl-display-flex gl-align-items-center">
+          <div class="gl-flex gl-items-center">
             <gl-sprintf :message="__('%{source} %{copyButton} into %{target}')">
               <template #copyButton>
                 <clipboard-button
@@ -183,14 +183,14 @@ export default {
                   :text="getNoteableData.source_branch"
                   size="small"
                   category="tertiary"
-                  class="gl-m-0! gl-mx-1! js-source-branch-copy gl-align-self-center"
+                  class="!gl-m-0 !gl-mx-1 js-source-branch-copy gl-self-center"
                 />
               </template>
               <template #source>
                 <gl-link
                   :title="getNoteableData.source_branch"
                   :href="getNoteableData.source_branch_path"
-                  class="gl-text-blue-500! gl-font-monospace gl-bg-blue-50 gl-rounded-base gl-font-sm gl-px-2 gl-text-truncate gl-max-w-26"
+                  class="gl-text-blue-500! gl-font-monospace gl-bg-blue-50 gl-rounded-base gl-font-sm gl-px-2 gl-mt-2 gl-truncate gl-max-w-26"
                   data-testid="source-branch"
                 >
                   <span
@@ -208,7 +208,7 @@ export default {
                 <gl-link
                   :title="getNoteableData.target_branch"
                   :href="getNoteableData.target_branch_path"
-                  class="gl-text-blue-500! gl-font-monospace gl-bg-blue-50 gl-rounded-base gl-font-sm gl-px-2 gl-text-truncate gl-max-w-26 gl-ml-2"
+                  class="gl-text-blue-500! gl-font-monospace gl-bg-blue-50 gl-rounded-base gl-font-sm gl-px-2 gl-mt-2 gl-truncate gl-max-w-26 gl-ml-2"
                 >
                   {{ getNoteableData.target_branch }}
                 </gl-link>
@@ -216,9 +216,9 @@ export default {
             </gl-sprintf>
           </div>
         </div>
-        <div class="gl-w-full gl-display-flex">
+        <div class="gl-w-full gl-flex">
           <ul
-            class="merge-request-tabs nav-tabs nav nav-links gl-display-flex gl-flex-nowrap gl-m-0 gl-p-0 gl-border-b-0"
+            class="merge-request-tabs nav-tabs nav nav-links gl-flex gl-flex-nowrap gl-m-0 gl-p-0 gl-border-b-0"
           >
             <li
               v-for="(tab, index) in tabs"
@@ -228,7 +228,7 @@ export default {
               <gl-link
                 :href="tab[2]"
                 :data-action="tab[0]"
-                class="!gl-outline-none gl-py-4!"
+                class="!gl-outline-none !gl-py-4"
                 @click="visitTab"
               >
                 {{ tab[1] }}
@@ -243,12 +243,9 @@ export default {
               </gl-link>
             </li>
           </ul>
-          <div class="gl-hidden lg:gl-flex gl-align-items-center gl-ml-auto">
+          <div class="gl-hidden lg:gl-flex gl-items-center gl-ml-auto">
             <discussion-counter :blocks-merge="blocksMerge" hide-options />
-            <div
-              v-if="isSignedIn"
-              :class="{ 'gl-display-flex gl-gap-3': isNotificationsTodosButtons }"
-            >
+            <div v-if="isSignedIn" :class="{ 'gl-flex gl-gap-3': isNotificationsTodosButtons }">
               <todo-widget
                 :issuable-id="issuableId"
                 :issuable-iid="issuableIid"
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index c44ce031a6d4a8..66785b405d690a 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -14,14 +14,14 @@
 
   .detail-page-header.border-bottom-0.gl-display-block.gl-pt-5{ class: "sm:!gl-flex #{'is-merge-request' if !fluid_layout}" }
     .detail-page-header-body
-      %h1.title.page-title.gl-font-size-h-display.gl-my-0.gl-display-inline-block.gl-flex-grow-1.gl-break-anywhere{ data: { testid: 'title-content' } }
+      %h1.title.gl-heading-1.gl-my-0.gl-block.gl-grow.gl-break-anywhere{ class: '!gl-m-0', data: { testid: 'title-content' } }
         = markdown_field(@merge_request, :title)
 
       - unless hide_gutter_toggle
         %div
           = render Pajamas::ButtonComponent.new(icon: "chevron-double-lg-left", button_options: { class: "btn-icon gl-float-right gl-display-block gutter-toggle issuable-gutter-toggle js-sidebar-toggle sm:!gl-hidden" })
 
-    .detail-page-header-actions.gl-align-self-start.is-merge-request.js-issuable-actions.gl-display-flex
+    .detail-page-header-actions.gl-self-start.is-merge-request.js-issuable-actions.gl-flex.gl-mt-1
       - if can_update_merge_request
         - edit_action_description = _('Edit merge request')
         - edit_action_shortcut = 'e'
@@ -29,7 +29,7 @@
         = render Pajamas::ButtonComponent.new(href: edit_project_merge_request_path(@project, @merge_request), button_options: { aria: {label: edit_action_description, keyshortcuts: edit_action_shortcut}, class: "gl-hidden sm:gl-block gl-align-self-start has-tooltip js-issuable-edit", data: { html: "true", testid: "edit-title-button" }, title: edit_button_title }) do
           = _('Edit')
 
-      .gl-display-flex.gl-flex-direction-column.gl-sm-flex-direction-row.gl-gap-3.gl-w-full.gl-sm-w-auto.gl-mt-2.gl-sm-mt-0
+      .gl-flex.gl-flex-col.sm:gl-flex-row.gl-gap-3.gl-w-full.sm:gl-w-auto.gl-mt-2.sm:gl-mt-0
         - if @merge_request.source_project
           = render 'projects/merge_requests/code_dropdown'
 
-- 
GitLab


From 3272c305ad81beb11ec05c26691eb8d1130bf48a Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Tue, 11 Jun 2024 08:24:39 +0200
Subject: [PATCH 2/2] Code cleanup

---
 .../behaviors/shortcuts/shortcuts_issuable.js       | 13 -------------
 .../merge_requests/components/sticky_header.vue     | 12 ++++--------
 app/helpers/merge_requests_helper.rb                |  2 +-
 3 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
index b8dd365d535c07..686b61629af15d 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
@@ -13,7 +13,6 @@ import {
   ISSUABLE_CHANGE_LABEL,
   ISSUABLE_COMMENT_OR_REPLY,
   ISSUABLE_EDIT_DESCRIPTION,
-  MR_COPY_SOURCE_BRANCH_NAME,
   ISSUABLE_COPY_REF,
 } from './keybindings';
 
@@ -43,7 +42,6 @@ export default class ShortcutsIssuable {
       [ISSUABLE_CHANGE_LABEL, () => ShortcutsIssuable.openSidebarDropdown('labels')],
       [ISSUABLE_COMMENT_OR_REPLY, ShortcutsIssuable.replyWithSelectedText],
       [ISSUABLE_EDIT_DESCRIPTION, ShortcutsIssuable.editIssue],
-      [MR_COPY_SOURCE_BRANCH_NAME, () => this.copyBranchName()],
       [ISSUABLE_COPY_REF, () => this.copyIssuableRef()],
     ]);
 
@@ -166,17 +164,6 @@ export default class ShortcutsIssuable {
     return false;
   }
 
-  async copyBranchName() {
-    const button = document.querySelector('.js-source-branch-copy');
-    const branchName = button?.dataset.clipboardText;
-
-    if (branchName) {
-      this.branchInMemoryButton.dataset.clipboardText = branchName;
-
-      this.branchInMemoryButton.dispatchEvent(new CustomEvent('click'));
-    }
-  }
-
   async copyIssuableRef() {
     const refButton = document.querySelector('.js-copy-reference');
     const copiedRef = refButton?.dataset.clipboardText;
diff --git a/app/assets/javascripts/merge_requests/components/sticky_header.vue b/app/assets/javascripts/merge_requests/components/sticky_header.vue
index b36915346be7b3..1cd27b4a2abbdb 100644
--- a/app/assets/javascripts/merge_requests/components/sticky_header.vue
+++ b/app/assets/javascripts/merge_requests/components/sticky_header.vue
@@ -180,17 +180,18 @@ export default {
               <template #copyButton>
                 <clipboard-button
                   v-gl-tooltip.bottom.html="copySourceBranchTooltip"
+                  :title="copySourceBranchTooltip"
                   :text="getNoteableData.source_branch"
                   size="small"
                   category="tertiary"
-                  class="!gl-m-0 !gl-mx-1 js-source-branch-copy gl-self-center"
+                  class="gl-mx-1"
                 />
               </template>
               <template #source>
                 <gl-link
                   :title="getNoteableData.source_branch"
                   :href="getNoteableData.source_branch_path"
-                  class="gl-text-blue-500! gl-font-monospace gl-bg-blue-50 gl-rounded-base gl-font-sm gl-px-2 gl-mt-2 gl-truncate gl-max-w-26"
+                  class="gl-font-monospace gl-bg-blue-50 gl-rounded-base gl-font-sm gl-px-2 gl-mt-2 gl-truncate gl-max-w-26"
                   data-testid="source-branch"
                 >
                   <span
@@ -225,12 +226,7 @@ export default {
               :key="tab[0]"
               :class="{ active: activeTab === tab[0] }"
             >
-              <gl-link
-                :href="tab[2]"
-                :data-action="tab[0]"
-                class="!gl-outline-none !gl-py-4"
-                @click="visitTab"
-              >
+              <gl-link :href="tab[2]" :data-action="tab[0]" class="!gl-py-4" @click="visitTab">
                 {{ tab[1] }}
                 <gl-badge variant="muted" size="sm">
                   <template v-if="index === 0 && discussionCounter !== 0">
diff --git a/app/helpers/merge_requests_helper.rb b/app/helpers/merge_requests_helper.rb
index e6f4a038747a83..c9482515dea4f4 100644
--- a/app/helpers/merge_requests_helper.rb
+++ b/app/helpers/merge_requests_helper.rb
@@ -308,7 +308,7 @@ def merge_request_header(project, merge_request)
     copy_action_description = _('Copy branch name')
     copy_action_shortcut = 'b'
     copy_button_title = "#{copy_action_description} <kbd class='flat ml-1' aria-hidden=true>#{copy_action_shortcut}</kbd>"
-    copy_button = clipboard_button(text: merge_request.source_branch, title: copy_button_title, aria_keyshortcuts: copy_action_shortcut, aria_label: copy_action_description, class: '!gl-hidden md:!gl-inline-block js-source-branch-copy gl-mx-1')
+    copy_button = clipboard_button(text: merge_request.source_branch, title: copy_button_title, aria_keyshortcuts: copy_action_shortcut, aria_label: copy_action_description, class: '!gl-hidden md:!gl-inline-block gl-mx-1')
 
     target_branch = link_to merge_request.target_branch, project_tree_path(merge_request.target_project, merge_request.target_branch), title: merge_request.target_branch, class: 'ref-container gl-display-inline-block gl-text-truncate gl-max-w-26 gl-mx-2'
 
-- 
GitLab