Merge branch 'copy-button-fix-issue-352532' into 'master'

[bug-fix] Copy button in Enable Review App modal is broken

See merge request gitlab-org/gitlab!80561

app/assets/javascripts/environments/components/enable_review_app_modal.vue

 <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>

spec/frontend/environments/enable_review_app_modal_spec.js

@@ -4,10 +4,17 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import EnableReviewAppButton from '~/environments/components/enable_review_app_modal.vue';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 
+// hardcode uniqueId for determinism
+jest.mock('lodash/uniqueId', () => (x) => `${x}77`);
+
+const EXPECTED_COPY_PRE_ID = 'enable-review-app-copy-string-77';
+
 describe('Enable Review App Button', () => {
   let wrapper;
   let modal;
 
+  const findCopyString = () => wrapper.find(`#${EXPECTED_COPY_PRE_ID}`);
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -30,12 +37,15 @@ describe('Enable Review App Button', () => {
     });
 
     it('renders the defaultBranchName copy', () => {
-      const findCopyString = () => wrapper.findByTestId('enable-review-app-copy-string');
       expect(findCopyString().text()).toContain('- main');
     });
 
     it('renders the copyToClipboard button', () => {
-      expect(wrapper.findComponent(ModalCopyButton).exists()).toBe(true);
+      expect(wrapper.findComponent(ModalCopyButton).props()).toMatchObject({
+        modalId: 'fake-id',
+        target: `#${EXPECTED_COPY_PRE_ID}`,
+        title: 'Copy snippet text',
+      });
     });
 
     it('emits change events from the modal up', () => {