Copy updates for PipelineTourSuccessModal

Implements Copy updates for "Success Modal" from Growth experiment

app/assets/javascripts/blob/pipeline_tour_success_modal.vue

@@ -11,8 +11,12 @@ export default {
   beginnerLink:
     'https://about.gitlab.com/blog/2018/01/22/a-beginners-guide-to-continuous-integration/',
   exampleLink: 'https://docs.gitlab.com/ee/ci/examples/',
+  codeQualityLink: 'https://docs.gitlab.com/ee/user/project/merge_requests/code_quality.html',
   bodyMessage: s__(
-    'MR widget|The pipeline will now run automatically every time you commit code. Pipelines are useful for deploying static web pages, detecting vulnerabilities in dependencies, static or dynamic application security testing (SAST and DAST), and so much more!',
+    `MR widget|The pipeline will test your code on every commit. A %{codeQualityLinkStart}code quality report%{codeQualityLinkEnd} will appear in your merge requests to warn you about potential code degradations.`,
+  ),
+  helpMessage: s__(
+    `MR widget|Take a look at our %{beginnerLinkStart}Beginner's Guide to Continuous Integration%{beginnerLinkEnd} and our %{exampleLinkStart}examples of GitLab CI/CD%{exampleLinkEnd} to learn more.`,
   ),
   modalTitle: sprintf(
     __("That's it, well done!%{celebrate}"),
@@ -75,15 +79,15 @@ export default {
     modal-id="success-pipeline-modal-id-not-used"
   >
     <p>
-      {{ $options.bodyMessage }}
+      <gl-sprintf :message="$options.bodyMessage">
+        <template #codeQualityLink="{content}">
+          <gl-link :href="$options.codeQualityLink" target="_blank" class="font-size-inherit">{{
+            content
+          }}</gl-link>
+        </template>
+      </gl-sprintf>
     </p>
-    <gl-sprintf
-      :message="
-        s__(`MR widget|Take a look at our %{beginnerLinkStart}Beginner's Guide to Continuous Integration%{beginnerLinkEnd}
-           and our %{exampleLinkStart}examples of GitLab CI/CD%{exampleLinkEnd}
-           to see all the cool stuff you can do with it.`)
-      "
-    >
+    <gl-sprintf :message="$options.helpMessage">
       <template #beginnerLink="{content}">
         <gl-link :href="$options.beginnerLink" target="_blank">
           {{ content }}
@@ -105,7 +109,7 @@ export default {
         :data-track-event="$options.trackEvent"
         :data-track-label="trackLabel"
       >
-        {{ __('Go to Pipelines') }}
+        {{ __('See your pipeline in action') }}
       </a>
     </template>
   </gl-modal>

app/assets/javascripts/pages/projects/blob/show/index.js

@@ -54,13 +54,9 @@ document.addEventListener('DOMContentLoaded', () => {
       new Vue({
         el: successPipelineEl,
         render(createElement) {
-          const { commitCookie, goToPipelinesPath, humanAccess } = this.$el.dataset;
-
           return createElement(PipelineTourSuccessModal, {
             props: {
-              goToPipelinesPath,
-              commitCookie,
-              humanAccess,
+              ...successPipelineEl.dataset,
             },
           });
         },

locale/gitlab.pot

@@ -11305,9 +11305,6 @@ msgstr ""
 msgid "Go to <strong>Issues</strong> > <strong>Boards</strong> to access your personalized learning issue board."
 msgstr ""
 
-msgid "Go to Pipelines"
-msgstr ""
-
 msgid "Go to Webhooks"
 msgstr ""
 
@@ -14105,10 +14102,10 @@ msgstr ""
 msgid "MERGED"
 msgstr ""
 
-msgid "MR widget|Take a look at our %{beginnerLinkStart}Beginner's Guide to Continuous Integration%{beginnerLinkEnd} and our %{exampleLinkStart}examples of GitLab CI/CD%{exampleLinkEnd} to see all the cool stuff you can do with it."
+msgid "MR widget|Take a look at our %{beginnerLinkStart}Beginner's Guide to Continuous Integration%{beginnerLinkEnd} and our %{exampleLinkStart}examples of GitLab CI/CD%{exampleLinkEnd} to learn more."
 msgstr ""
 
-msgid "MR widget|The pipeline will now run automatically every time you commit code. Pipelines are useful for deploying static web pages, detecting vulnerabilities in dependencies, static or dynamic application security testing (SAST and DAST), and so much more!"
+msgid "MR widget|The pipeline will test your code on every commit. A %{codeQualityLinkStart}code quality report%{codeQualityLinkEnd} will appear in your merge requests to warn you about potential code degradations."
 msgstr ""
 
 msgid "MRApprovals|Approvals"
@@ -20973,6 +20970,9 @@ msgstr ""
 msgid "See what's new at GitLab"
 msgstr ""
 
+msgid "See your pipeline in action"
+msgstr ""
+
 msgid "Select"
 msgstr ""
 

spec/frontend/blob/pipeline_tour_success_modal_spec.js

 import pipelineTourSuccess from '~/blob/pipeline_tour_success_modal.vue';
 import { shallowMount } from '@vue/test-utils';
 import Cookies from 'js-cookie';
-import { GlSprintf, GlModal } from '@gitlab/ui';
+import { GlSprintf, GlModal, GlLink } from '@gitlab/ui';
 import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper';
 import modalProps from './pipeline_tour_success_mock_data';
 
@@ -18,6 +18,7 @@ describe('PipelineTourSuccessModal', () => {
       propsData: modalProps,
       stubs: {
         GlModal,
+        GlSprintf,
       },
     });
 
@@ -37,6 +38,10 @@ describe('PipelineTourSuccessModal', () => {
     expect(sprintf.exists()).toBe(true);
   });
 
+  it('renders the link for codeQualityLink', () => {
+    expect(wrapper.find(GlLink).attributes('href')).toBe(wrapper.vm.$options.codeQualityLink);
+  });
+
   it('calls to remove cookie', () => {
     wrapper.vm.disableModalFromRenderingAgain();