1 files changed, 92 insertions, 37 deletions

diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index 1780afd39e8..7c4811b2d6f 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -1,8 +1,12 @@
 <script>
-import { GlLink, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlLink, GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
+import Mousetrap from 'mousetrap';
+import { s__ } from '~/locale';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { clickCopyToClipboardButton } from '~/behaviors/copy_to_clipboard';
+import { keysFor, MR_COPY_SOURCE_BRANCH_NAME } from '~/behaviors/shortcuts/keybindings';
 
 export default {
   components: {
@@ -11,6 +15,7 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlLink,
+    GlSprintf,
   },
   props: {
     pipeline: {
@@ -36,11 +41,43 @@ export default {
     isMergeRequestPipeline() {
       return Boolean(this.pipeline.flags && this.pipeline.flags.merge_request_pipeline);
     },
+    pipelineInfo() {
+      if (!this.hasRef) {
+        return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id}');
+      } else if (!this.isTriggeredByMergeRequest) {
+        return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} for %{ref}');
+      } else if (!this.isMergeRequestPipeline) {
+        return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} for %{mrId} with %{source}');
+      }
+
+      return s__(
+        'Job|%{boldStart}Pipeline%{boldEnd} %{id} for %{mrId} with %{source} into %{target}',
+      );
+    },
+  },
+  mounted() {
+    Mousetrap.bind(keysFor(MR_COPY_SOURCE_BRANCH_NAME), this.handleKeyboardCopy);
+  },
+  beforeDestroy() {
+    Mousetrap.unbind(keysFor(MR_COPY_SOURCE_BRANCH_NAME));
   },
   methods: {
     onStageClick(stage) {
       this.$emit('requestSidebarStageDropdown', stage);
     },
+    handleKeyboardCopy() {
+      let button;
+
+      if (!this.hasRef) {
+        return;
+      } else if (!this.isTriggeredByMergeRequest) {
+        button = this.$refs['copy-source-ref-link'];
+      } else {
+        button = this.$refs['copy-source-branch-link'];
+      }
+
+      clickCopyToClipboardButton(button.$el);
+    },
   },
 };
 </script>
@@ -48,54 +85,72 @@ export default {
   <div class="dropdown">
     <div class="js-pipeline-info" data-testid="pipeline-info">
       <ci-icon :status="pipeline.details.status" />
-
-      <span class="font-weight-bold">{{ s__('Job|Pipeline') }}</span>
-      <gl-link
-        :href="pipeline.path"
-        class="js-pipeline-path link-commit"
-        data-testid="pipeline-path"
-        data-qa-selector="pipeline_path"
-        >#{{ pipeline.id }}</gl-link
-      >
-      <template v-if="hasRef">
-        {{ s__('Job|for') }}
-
-        <template v-if="isTriggeredByMergeRequest">
+      <gl-sprintf :message="pipelineInfo">
+        <template #bold="{ content }">
+          <span class="font-weight-bold">{{ content }}</span>
+        </template>
+        <template #id>
+          <gl-link
+            :href="pipeline.path"
+            class="js-pipeline-path link-commit"
+            data-testid="pipeline-path"
+            data-qa-selector="pipeline_path"
+            >#{{ pipeline.id }}</gl-link
+          >
+        </template>
+        <template #mrId>
           <gl-link
             :href="pipeline.merge_request.path"
             class="link-commit ref-name"
             data-testid="mr-link"
             >!{{ pipeline.merge_request.iid }}</gl-link
           >
-          {{ s__('Job|with') }}
+        </template>
+        <template #ref>
+          <gl-link
+            :href="pipeline.ref.path"
+            class="link-commit ref-name"
+            data-testid="source-ref-link"
+            >{{ pipeline.ref.name }}</gl-link
+          ><clipboard-button
+            ref="copy-source-ref-link"
+            :text="pipeline.ref.name"
+            :title="__('Copy reference')"
+            category="tertiary"
+            size="small"
+            data-testid="copy-source-ref-link"
+          />
+        </template>
+        <template #source>
           <gl-link
             :href="pipeline.merge_request.source_branch_path"
             class="link-commit ref-name"
             data-testid="source-branch-link"
             >{{ pipeline.merge_request.source_branch }}</gl-link
-          >
-
-          <template v-if="isMergeRequestPipeline">
-            {{ s__('Job|into') }}
-            <gl-link
-              :href="pipeline.merge_request.target_branch_path"
-              class="link-commit ref-name"
-              data-testid="target-branch-link"
-              >{{ pipeline.merge_request.target_branch }}</gl-link
-            >
-          </template>
+          ><clipboard-button
+            ref="copy-source-branch-link"
+            :text="pipeline.merge_request.source_branch"
+            :title="__('Copy branch name')"
+            category="tertiary"
+            size="small"
+            data-testid="copy-source-branch-link"
+          />
+        </template>
+        <template #target>
+          <gl-link
+            :href="pipeline.merge_request.target_branch_path"
+            class="link-commit ref-name"
+            data-testid="target-branch-link"
+            >{{ pipeline.merge_request.target_branch }}</gl-link
+          ><clipboard-button
+            :text="pipeline.merge_request.target_branch"
+            :title="__('Copy branch name')"
+            category="tertiary"
+            size="small"
+            data-testid="copy-target-branch-link"
+          />
         </template>
-        <gl-link v-else :href="pipeline.ref.path" class="link-commit ref-name">{{
-          pipeline.ref.name
-        }}</gl-link
-        ><clipboard-button
-          :text="pipeline.ref.name"
-          :title="__('Copy reference')"
-          category="tertiary"
-          size="small"
-          data-testid="copy-source-ref-link"
-        />
-      </template>
+      </gl-sprintf>
     </div>
 
     <gl-dropdown :text="selectedStage" class="js-selected-stage gl-w-full gl-mt-3">