Move constants to constants file for suggest pipeline

- better development pattern.

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue

@@ -2,24 +2,30 @@
 import { GlLink, GlSprintf, GlButton } from '@gitlab/ui';
 import MrWidgetIcon from './mr_widget_icon.vue';
 import Tracking from '~/tracking';
-import { s__ } from '~/locale';
 import DismissibleContainer from '~/vue_shared/components/dismissible_container.vue';
+import {
+  SP_TRACK_LABEL,
+  SP_LINK_TRACK_EVENT,
+  SP_SHOW_TRACK_EVENT,
+  SP_LINK_TRACK_VALUE,
+  SP_SHOW_TRACK_VALUE,
+  SP_HELP_CONTENT,
+  SP_HELP_URL,
+  SP_ICON_NAME,
+} from '../constants';
 
 const trackingMixin = Tracking.mixin();
-const TRACK_LABEL = 'no_pipeline_noticed';
 
 export default {
   name: 'MRWidgetSuggestPipeline',
-  iconName: 'status_notfound',
-  trackLabel: TRACK_LABEL,
-  linkTrackValue: 30,
-  linkTrackEvent: 'click_link',
-  showTrackValue: 10,
-  showTrackEvent: 'click_button',
-  helpContent: s__(
-    `mrWidget|Use %{linkStart}CI pipelines to test your code%{linkEnd} by simply adding 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/',
+  SP_ICON_NAME,
+  SP_TRACK_LABEL,
+  SP_LINK_TRACK_EVENT,
+  SP_SHOW_TRACK_EVENT,
+  SP_LINK_TRACK_VALUE,
+  SP_SHOW_TRACK_VALUE,
+  SP_HELP_CONTENT,
+  SP_HELP_URL,
   components: {
     GlLink,
     GlSprintf,
@@ -53,7 +59,7 @@ export default {
   computed: {
     tracking() {
       return {
-        label: TRACK_LABEL,
+        label: SP_TRACK_LABEL,
         property: this.humanAccess,
       };
     },
@@ -71,7 +77,7 @@ export default {
     @dismiss="$emit('dismiss')"
   >
     <template #title>
-      <mr-widget-icon :name="$options.iconName" />
+      <mr-widget-icon :name="$options.SP_ICON_NAME" />
       <div>
         <gl-sprintf
           :message="
@@ -91,9 +97,9 @@ export default {
               class="gl-ml-1"
               data-testid="add-pipeline-link"
               :data-track-property="humanAccess"
-              :data-track-value="$options.linkTrackValue"
-              :data-track-event="$options.linkTrackEvent"
-              :data-track-label="$options.trackLabel"
+              :data-track-value="$options.SP_LINK_TRACK_VALUE"
+              :data-track-event="$options.SP_LINK_TRACK_EVENT"
+              :data-track-label="$options.SP_TRACK_LABEL"
             >
               {{ content }}
             </gl-link>
@@ -111,11 +117,11 @@ export default {
             {{ s__('mrWidget|Are you adding technical debt or code vulnerabilities?') }}
           </strong>
           <p class="gl-mt-2">
-            <gl-sprintf :message="$options.helpContent">
+            <gl-sprintf :message="$options.SP_HELP_CONTENT">
               <template #link="{ content }">
                 <gl-link
                   data-testid="help"
-                  :href="$options.helpURL"
+                  :href="$options.SP_HELP_URL"
                   target="_blank"
                   class="font-size-inherit"
                   >{{ content }}
@@ -130,9 +136,9 @@ export default {
             variant="info"
             :href="pipelinePath"
             :data-track-property="humanAccess"
-            :data-track-value="$options.showTrackValue"
-            :data-track-event="$options.showTrackEvent"
-            :data-track-label="$options.trackLabel"
+            :data-track-value="$options.SP_SHOW_TRACK_VALUE"
+            :data-track-event="$options.SP_SHOW_TRACK_EVENT"
+            :data-track-label="$options.SP_TRACK_LABEL"
           >
             {{ __('Show me how to add a pipeline') }}
           </gl-button>

app/assets/javascripts/vue_merge_request_widget/constants.js

+import { s__ } from '~/locale';
+
 export const SUCCESS = 'success';
 export const WARNING = 'warning';
 export const DANGER = 'danger';
@@ -10,3 +12,15 @@ export const MTWPS_MERGE_STRATEGY = 'add_to_merge_train_when_pipeline_succeeds';
 export const MT_MERGE_STRATEGY = 'merge_train';
 
 export const AUTO_MERGE_STRATEGIES = [MWPS_MERGE_STRATEGY, MTWPS_MERGE_STRATEGY, MT_MERGE_STRATEGY];
+
+// SP - "Suggest Pipelines"
+export const SP_TRACK_LABEL = 'no_pipeline_noticed';
+export const SP_LINK_TRACK_EVENT = 'click_link';
+export const SP_SHOW_TRACK_EVENT = 'click_button';
+export const SP_LINK_TRACK_VALUE = 30;
+export const SP_SHOW_TRACK_VALUE = 10;
+export const SP_HELP_CONTENT = s__(
+  `mrWidget|Use %{linkStart}CI pipelines to test your code%{linkEnd} by simply adding a GitLab CI configuration file to your project. It only takes a minute to make your code more secure and robust.`,
+);
+export const SP_HELP_URL = 'https://about.gitlab.com/blog/2019/07/12/guide-to-ci-cd-pipelines/';
+export const SP_ICON_NAME = 'status_notfound';

spec/frontend/vue_mr_widget/components/mr_widget_suggest_pipeline_spec.js

@@ -7,6 +7,14 @@ import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_hel
 import { suggestProps, iconName } from './pipeline_tour_mock_data';
 import axios from '~/lib/utils/axios_utils';
 import MockAdapter from 'axios-mock-adapter';
+import {
+  SP_TRACK_LABEL,
+  SP_LINK_TRACK_EVENT,
+  SP_SHOW_TRACK_EVENT,
+  SP_LINK_TRACK_VALUE,
+  SP_SHOW_TRACK_VALUE,
+  SP_HELP_URL,
+} from '~/vue_merge_request_widget/constants';
 
 describe('MRWidgetSuggestPipeline', () => {
   describe('template', () => {
@@ -80,7 +88,7 @@ describe('MRWidgetSuggestPipeline', () => {
         const link = wrapper.find('[data-testid="help"]');
 
         expect(link.exists()).toBe(true);
-        expect(link.attributes('href')).toBe(wrapper.vm.$options.helpURL);
+        expect(link.attributes('href')).toBe(SP_HELP_URL);
       });
 
       it('renders the empty pipelines image', () => {
@@ -96,7 +104,7 @@ describe('MRWidgetSuggestPipeline', () => {
           const expectedAction = undefined;
 
           expect(trackingSpy).toHaveBeenCalledWith(expectedCategory, expectedAction, {
-            label: wrapper.vm.$options.trackLabel,
+            label: SP_TRACK_LABEL,
             property: suggestProps.humanAccess,
           });
         });
@@ -106,10 +114,10 @@ describe('MRWidgetSuggestPipeline', () => {
           const link = wrapper.find('[data-testid="add-pipeline-link"]');
           triggerEvent(link.element);
 
-          expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_link', {
-            label: wrapper.vm.$options.trackLabel,
+          expect(trackingSpy).toHaveBeenCalledWith('_category_', SP_LINK_TRACK_EVENT, {
+            label: SP_TRACK_LABEL,
             property: suggestProps.humanAccess,
-            value: '30',
+            value: SP_LINK_TRACK_VALUE.toString(),
           });
         });
 
@@ -118,10 +126,10 @@ describe('MRWidgetSuggestPipeline', () => {
           const okBtn = findOkBtn();
           triggerEvent(okBtn.element);
 
-          expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_button', {
-            label: wrapper.vm.$options.trackLabel,
+          expect(trackingSpy).toHaveBeenCalledWith('_category_', SP_SHOW_TRACK_EVENT, {
+            label: SP_TRACK_LABEL,
             property: suggestProps.humanAccess,
-            value: '10',
+            value: SP_SHOW_TRACK_VALUE.toString(),
           });
         });
       });