Add copy feature to CI job page

Adds a copy to clipboard shortcut for CI jobs
to copy the source ref to the clipboard.

Changelog: added

app/assets/javascripts/jobs/components/stages_dropdown.vue

@@ -2,10 +2,12 @@
 import { GlLink, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 export default {
   components: {
     CiIcon,
+    clipboardButton,
     GlDropdown,
     GlDropdownItem,
     GlLink,
@@ -45,7 +47,7 @@ export default {
 <template>
   <div class="dropdown">
     <div class="js-pipeline-info" data-testid="pipeline-info">
-      <ci-icon :status="pipeline.details.status" class="vertical-align-middle" />
+      <ci-icon :status="pipeline.details.status" />
 
       <span class="font-weight-bold">{{ s__('Job|Pipeline') }}</span>
       <gl-link
@@ -85,7 +87,14 @@ export default {
         </template>
         <gl-link v-else :href="pipeline.ref.path" class="link-commit ref-name">{{
           pipeline.ref.name
-        }}</gl-link>
+        }}</gl-link
+        ><clipboard-button
+          :text="pipeline.ref.name"
+          :title="__('Copy reference')"
+          category="tertiary"
+          size="small"
+          data-testid="copy-source-ref-link"
+        />
       </template>
     </div>
 

spec/frontend/jobs/components/stages_dropdown_spec.js

@@ -20,6 +20,7 @@ describe('Stages Dropdown', () => {
   const findPipelineInfoText = () => wrapper.findByTestId('pipeline-info').text();
   const findPipelinePath = () => wrapper.findByTestId('pipeline-path').attributes('href');
   const findMRLinkPath = () => wrapper.findByTestId('mr-link').attributes('href');
+  const findCopySourceBranchBtn = () => wrapper.findByTestId('copy-source-ref-link');
   const findSourceBranchLinkPath = () =>
     wrapper.findByTestId('source-branch-link').attributes('href');
   const findTargetBranchLinkPath = () =>
@@ -70,6 +71,10 @@ describe('Stages Dropdown', () => {
 
       expect(actual).toBe(expected);
     });
+
+    it(`renders the source ref copy button`, () => {
+      expect(findCopySourceBranchBtn().exists()).toBe(true);
+    });
   });
 
   describe('with an "attached" merge request pipeline', () => {
@@ -103,6 +108,10 @@ describe('Stages Dropdown', () => {
         mockPipelineWithAttachedMR.merge_request.target_branch_path,
       );
     });
+
+    it(`renders the source ref copy button`, () => {
+      expect(findCopySourceBranchBtn().exists()).toBe(true);
+    });
   });
 
   describe('with a detached merge request pipeline', () => {
@@ -130,5 +139,9 @@ describe('Stages Dropdown', () => {
         mockPipelineDetached.merge_request.source_branch_path,
       );
     });
+
+    it(`renders the source ref copy button`, () => {
+      expect(findCopySourceBranchBtn().exists()).toBe(true);
+    });
   });
 });