1 files changed, 8 insertions, 2 deletions
diff --git a/app/assets/javascripts/environments/components/enable_review_app_modal.vue b/app/assets/javascripts/environments/components/enable_review_app_modal.vue
index b757c55bfdb..4d43ee156fb 100644
--- a/app/assets/javascripts/environments/components/enable_review_app_modal.vue
+++ b/app/assets/javascripts/environments/components/enable_review_app_modal.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlLink, GlModal, GlSprintf } from '@gitlab/ui';
+import { uniqueId } from 'lodash';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
@@ -44,6 +45,11 @@ export default {
     copyToClipboardText: s__('EnableReviewApp|Copy snippet text'),
     title: s__('ReviewApp|Enable Review App'),
   },
+  data() {
+    const modalInfoCopyId = uniqueId('enable-review-app-copy-string-');
+
+    return { modalInfoCopyId };
+  },
   computed: {
     modalInfoCopyStr() {
       return `deploy_review:
@@ -99,14 +105,14 @@ export default {
         </gl-sprintf>
       </p>
       <div class="gl-display-flex align-items-start">
-        <pre class="gl-w-full" data-testid="enable-review-app-copy-string">
+        <pre :id="modalInfoCopyId" class="gl-w-full" data-testid="enable-review-app-copy-string">
  {{ modalInfoCopyStr }} </pre
         >
         <modal-copy-button
           :title="$options.modalInfo.copyToClipboardText"
-          :text="$options.modalInfo.copyString"
           :modal-id="modalId"
           css-classes="border-0"
+          :target="`#${modalInfoCopyId}`"
         />
       </div>
     </div>