Merge branch '11707-add-copy-to-clipboard' into 'master'

Resolve "Add Copy to Clipboard Button to Review App Modal"

Closes #11707

See merge request gitlab-org/gitlab-ee!14290

app/assets/javascripts/vue_shared/components/modal_copy_button.vue

@@ -26,6 +26,11 @@ export default {
       required: false,
       default: '',
     },
+    cssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
     modalId: {
       type: String,
       required: false,
@@ -110,6 +115,7 @@ export default {
 <template>
   <gl-button
     v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
+    :class="cssClasses"
     :data-clipboard-target="target"
     :data-clipboard-text="text"
     :title="title"

ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue

 <script>
 import Icon from '~/vue_shared/components/icon.vue';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 
@@ -8,6 +9,7 @@ export default {
     GlButton,
     GlModal,
     Icon,
+    ModalCopyButton,
   },
   directives: {
     'gl-modal': GlModalDirective,
@@ -127,7 +129,15 @@ export default {
       <p v-html="instructionText.intro"></p>
       <div>
         <p v-html="instructionText.step1"></p>
+        <div class="flex align-items-start">
           <pre> {{ copyString.script }} </pre>
+          <modal-copy-button
+            title="Copy script"
+            :text="copyString.script"
+            :modal-id="modalId"
+            css-classes="border-0"
+          />
+        </div>
       </div>
       <p v-html="instructionText.step2"></p>
       <p v-html="instructionText.step3"></p>

ee/changelogs/unreleased/11707-add-copy-to-clipboard.yml

+---
+title: Add Copy to Clipboard Button to Review App Modal
+merge_request: 14290
+author:
+type: changed

ee/spec/frontend/vue_mr_widget/components/visual_review_app_spec.js

 import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
 import VisualReviewAppLink from 'ee/vue_merge_request_widget/components/visual_review_app_link.vue';
 import { GlButton, GlModal } from '@gitlab/ui';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 
 const localVue = createLocalVue();
 
@@ -52,7 +53,6 @@ describe('Visual Review App Link', () => {
         localVue,
       });
     });
-
     it('with expected project Id', () => {
       expect(wrapper.find(GlModal).text()).toEqual(
         expect.stringContaining(`data-project-id='${propsData.appMetadata.sourceProjectId}'`),
@@ -86,4 +86,15 @@ describe('Visual Review App Link', () => {
       ).toEqual(propsData.link);
     });
   });
+
+  describe('renders the copyToClipboard button', () => {
+    it('within the modal', () => {
+      expect(wrapper.find(ModalCopyButton)).toBeTruthy();
+    });
+
+    it('with the expected modalId', () => {
+      const renderedId = wrapper.find(GlModal).attributes('modalid');
+      expect(wrapper.find(ModalCopyButton).props().modalId).toBe(renderedId);
+    });
+  });
 });