Add keyboard shortcut to copy branch name

Adds a new keyboard shortcut to copy the source branch name to the
clipboard on merge request pages.

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

 <script>
+import Mousetrap from 'mousetrap';
 import { escape } from 'lodash';
 import { n__, s__, sprintf } from '~/locale';
 import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility';
@@ -74,6 +75,17 @@ export default {
         : '';
     },
   },
+  mounted() {
+    Mousetrap.bind('b', this.copyBranchName);
+  },
+  beforeDestroy() {
+    Mousetrap.unbind('b');
+  },
+  methods: {
+    copyBranchName() {
+      this.$refs.copyBranchNameButton.$el.click();
+    },
+  },
 };
 </script>
 <template>
@@ -89,6 +101,7 @@ export default {
             class="label-branch label-truncate js-source-branch"
             v-html="mr.sourceBranchLink"
           /><clipboard-button
+            ref="copyBranchNameButton"
             :text="branchNameClipboardData"
             :title="__('Copy branch name')"
             css-class="btn-default btn-transparent btn-clipboard"

app/views/help/_shortcuts.html.haml

@@ -309,6 +309,10 @@
                   %td.shortcut
                     %kbd p
                   %td= _('Previous unresolved discussion')
+                %tr
+                  %td.shortcut
+                    %kbd b
+                  %td= _('Copy source branch name')
               %tbody
                 %tr
                   %th

changelogs/unreleased/nfriend-add-copy-branch-name-shortcut.yml

+---
+title: Add keyboard shortcut ('b') to copy MR source branch name on MR page
+merge_request: 36338
+author:
+type: added

doc/user/shortcuts.md

@@ -78,10 +78,11 @@ These shortcuts are available when viewing issues and merge requests.
 | <kbd>m</kbd>                 | Change milestone. |
 | <kbd>l</kbd>                 | Change label. |
 | <kbd>r</kbd>                 | Start writing a comment. If any text is selected, it will be quoted in the comment. Can't be used to reply within a thread. |
-| <kbd>n</kbd>                 | Move to next unresolved discussion (Merge requests only). |
-| <kbd>p</kbd>                 | Move to previous unresolved discussion (Merge requests only). |
-| <kbd>]</kbd> or <kbd>j</kbd> | Move to next file (Merge requests only). |
-| <kbd>[</kbd> or <kbd>k</kbd> | Move to previous file (Merge requests only). |
+| <kbd>n</kbd>                 | Move to next unresolved discussion (merge requests only). |
+| <kbd>p</kbd>                 | Move to previous unresolved discussion (merge requests only). |
+| <kbd>]</kbd> or <kbd>j</kbd> | Move to next file (merge requests only). |
+| <kbd>[</kbd> or <kbd>k</kbd> | Move to previous file (merge requests only). |
+| <kbd>b</kbd>                 | Copy source branch name (merge requests only). |
 
 ### Project Files
 

locale/gitlab.pot

@@ -6590,6 +6590,9 @@ msgstr ""
 msgid "Copy secret"
 msgstr ""
 
+msgid "Copy source branch name"
+msgstr ""
+
 msgid "Copy token"
 msgstr ""
 

spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js

 import Vue from 'vue';
+import Mousetrap from 'mousetrap';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import headerComponent from '~/vue_merge_request_widget/components/mr_widget_header.vue';
 
+jest.mock('mousetrap', () => ({
+  bind: jest.fn(),
+  unbind: jest.fn(),
+}));
+
 describe('MRWidgetHeader', () => {
   let vm;
   let Component;
@@ -126,6 +132,35 @@ describe('MRWidgetHeader', () => {
       it('renders target branch', () => {
         expect(vm.$el.querySelector('.js-target-branch').textContent.trim()).toEqual('master');
       });
+
+      describe('keyboard shortcuts', () => {
+        it('binds a keyboard shortcut handler to the "b" key', () => {
+          expect(Mousetrap.bind).toHaveBeenCalledWith('b', expect.any(Function));
+        });
+
+        it('triggers a click on the "copy to clipboard" button when the handler is executed', () => {
+          const testClickHandler = jest.fn();
+          vm.$refs.copyBranchNameButton.$el.addEventListener('click', testClickHandler);
+
+          // Get a reference to the function that was assigned to the "b" shortcut key.
+          const shortcutHandler = Mousetrap.bind.mock.calls[0][1];
+
+          expect(testClickHandler).not.toHaveBeenCalled();
+
+          // Simulate Mousetrap calling the function.
+          shortcutHandler();
+
+          expect(testClickHandler).toHaveBeenCalledTimes(1);
+        });
+
+        it('unbinds the keyboard shortcut when the component is destroyed', () => {
+          expect(Mousetrap.unbind).not.toHaveBeenCalled();
+
+          vm.$destroy();
+
+          expect(Mousetrap.unbind).toHaveBeenCalledWith('b');
+        });
+      });
     });
 
     describe('with an open merge request', () => {