Merge branch 'copy-for-mr-with-no-pipeline-experiment-first-nudge' into 'master'

Copy updates for VueMergeRequestWidget

See merge request gitlab-org/gitlab!34513

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_tour.vue

 <script>
-import { GlPopover, GlDeprecatedButton } from '@gitlab/ui';
+import { GlPopover, GlDeprecatedButton, GlSprintf, GlLink } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import Cookies from 'js-cookie';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import Tracking from '~/tracking';
+import { s__ } from '~/locale';
 
 const trackingMixin = Tracking.mixin();
 
@@ -14,10 +15,16 @@ export default {
   dismissTrackValue: 20,
   showTrackValue: 10,
   trackEvent: 'click_button',
+  helpContent: s__(
+    `mrWidget|Use %{linkStart}CI pipelines to test your code%{linkEnd}, simply add a GitLab CI configuration file to your project. It only takes a minute to make your code more secure and robust.`,
+  ),
+  helpURL: 'https://about.gitlab.com/blog/2019/07/12/guide-to-ci-cd-pipelines/',
   components: {
     GlPopover,
     GlDeprecatedButton,
     Icon,
+    GlSprintf,
+    GlLink,
   },
   mixins: [trackingMixin],
   props: {
@@ -97,13 +104,13 @@ export default {
     <div class="svg-content svg-150 pt-1">
       <img :src="pipelineSvgPath" />
     </div>
-    <p>
-      {{
-        s__(
-          'mrWidget|Detect issues before deployment with a CI pipeline that continuously tests your code. We created a quick guide that will show you how to create one. Make your code more secure and more robust in just a minute.',
-        )
-      }}
-    </p>
+    <gl-sprintf :message="$options.helpContent">
+      <template #link="{ content }">
+        <gl-link :href="$options.helpURL" target="_blank" class="font-size-inherit">{{
+          content
+        }}</gl-link>
+      </template>
+    </gl-sprintf>
     <gl-deprecated-button
       ref="ok"
       category="primary"
@@ -116,7 +123,7 @@ export default {
       :data-track-event="$options.trackEvent"
       :data-track-label="trackLabel"
     >
-      {{ __('Show me how') }}
+      {{ __('Show me how to add a pipeline') }}
     </gl-deprecated-button>
     <gl-deprecated-button
       ref="no-thanks"
@@ -130,7 +137,7 @@ export default {
       :data-track-label="trackLabel"
       @click="dismissPopover"
     >
-      {{ __("No thanks, don't show this again") }}
+      {{ __('No thanks') }}
     </gl-deprecated-button>
   </gl-popover>
 </template>

locale/gitlab.pot

@@ -15113,7 +15113,7 @@ msgstr ""
 msgid "No test coverage"
 msgstr ""
 
-msgid "No thanks, don't show this again"
+msgid "No thanks"
 msgstr ""
 
 msgid "No vulnerabilities present"
@@ -20598,7 +20598,7 @@ msgstr ""
 msgid "Show me everything"
 msgstr ""
 
-msgid "Show me how"
+msgid "Show me how to add a pipeline"
 msgstr ""
 
 msgid "Show me more advanced stuff"
@@ -27218,9 +27218,6 @@ msgstr ""
 msgid "mrWidget|Deployment statistics are not available currently"
 msgstr ""
 
-msgid "mrWidget|Detect issues before deployment with a CI pipeline that continuously tests your code. We created a quick guide that will show you how to create one. Make your code more secure and more robust in just a minute."
-msgstr ""
-
 msgid "mrWidget|Did not close"
 msgstr ""
 
@@ -27383,6 +27380,9 @@ msgstr ""
 msgid "mrWidget|To approve this merge request, please enter your password. This project requires all approvals to be authenticated."
 msgstr ""
 
+msgid "mrWidget|Use %{linkStart}CI pipelines to test your code%{linkEnd}, simply add a GitLab CI configuration file to your project. It only takes a minute to make your code more secure and robust."
+msgstr ""
+
 msgid "mrWidget|When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged"
 msgstr ""
 

spec/frontend/vue_mr_widget/components/mr_widget_suggest_pipeline_spec.js

 import { mount } from '@vue/test-utils';
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlSprintf } from '@gitlab/ui';
 import suggestPipelineComponent from '~/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue';
 import stubChildren from 'helpers/stub_children';
 import PipelineTourState from '~/vue_merge_request_widget/components/states/mr_widget_pipeline_tour.vue';
@@ -18,6 +18,7 @@ describe('MRWidgetHeader', () => {
       propsData: { pipelinePath, pipelineSvgPath, humanAccess },
       stubs: {
         ...stubChildren(PipelineTourState),
+        GlSprintf,
       },
     });
   });

spec/frontend/vue_mr_widget/components/states/mr_widget_pipeline_tour_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlPopover } from '@gitlab/ui';
+import { GlPopover, GlLink, GlSprintf } from '@gitlab/ui';
 import Cookies from 'js-cookie';
 import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper';
 import pipelineTourState from '~/vue_merge_request_widget/components/states/mr_widget_pipeline_tour.vue';
@@ -51,6 +51,9 @@ describe('MRWidgetPipelineTour', () => {
         Cookies.remove(cookieKey);
         wrapper = shallowMount(pipelineTourState, {
           propsData: popoverProps,
+          stubs: {
+            GlSprintf,
+          },
         });
       });
 
@@ -60,6 +63,13 @@ describe('MRWidgetPipelineTour', () => {
         expect(popover.exists()).toBe(true);
       });
 
+      it('renders the help link', () => {
+        const link = wrapper.find(GlLink);
+
+        expect(link.exists()).toBe(true);
+        expect(link.attributes('href')).toBe(wrapper.vm.$options.helpURL);
+      });
+
       it('renders the show me how button', () => {
         const button = findOkBtn();