Merge branch...

Merge branch '333603-use-provide-for-setup-values-rather-than-props-in-trial-status-widget-and-popover' into 'master'

Use provide for unchanging values in trial status components

See merge request gitlab-org/gitlab!64372

ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue

@@ -23,36 +23,14 @@ export default {
     GlSprintf,
   },
   mixins: [trackingMixin],
-  props: {
-    containerId: {
-      type: [String, null],
-      required: false,
-      default: null,
-    },
-    groupName: {
-      type: String,
-      required: true,
-    },
-    planName: {
-      type: String,
-      required: true,
-    },
-    plansHref: {
-      type: String,
-      required: true,
-    },
-    purchaseHref: {
-      type: String,
-      required: true,
-    },
-    targetId: {
-      type: String,
-      required: true,
-    },
-    trialEndDate: {
-      type: Date,
-      required: true,
-    },
+  inject: {
+    containerId: { default: null },
+    groupName: {},
+    planName: {},
+    plansHref: {},
+    purchaseHref: {},
+    targetId: {},
+    trialEndDate: {},
   },
   data() {
     return {

ee/app/assets/javascripts/contextual_sidebar/components/trial_status_widget.vue

@@ -13,32 +13,13 @@ export default {
     GlProgressBar,
   },
   mixins: [trackingMixin],
-  props: {
-    containerId: {
-      type: [String, null],
-      required: false,
-      default: null,
-    },
-    daysRemaining: {
-      type: Number,
-      required: true,
-    },
-    navIconImagePath: {
-      type: String,
-      required: true,
-    },
-    percentageComplete: {
-      type: Number,
-      required: true,
-    },
-    planName: {
-      type: String,
-      required: true,
-    },
-    plansHref: {
-      type: String,
-      required: true,
-    },
+  inject: {
+    containerId: { default: null },
+    daysRemaining: {},
+    navIconImagePath: {},
+    percentageComplete: {},
+    planName: {},
+    plansHref: {},
   },
   i18n,
   trackingEvents,

ee/app/assets/javascripts/contextual_sidebar/init_trial_status_widget_and_popover.js

@@ -18,9 +18,7 @@ export const initTrialStatusWidget = () => {
 
   return new Vue({
     el,
-    render: (createElement) =>
-      createElement(TrialStatusWidget, {
-        props: {
+    provide: {
       containerId,
       daysRemaining: Number(daysRemaining),
       navIconImagePath,
@@ -28,7 +26,7 @@ export const initTrialStatusWidget = () => {
       planName,
       plansHref,
     },
-      }),
+    render: (createElement) => createElement(TrialStatusWidget),
   });
 };
 
@@ -49,9 +47,7 @@ export const initTrialStatusPopover = () => {
 
   return new Vue({
     el,
-    render: (createElement) =>
-      createElement(TrialStatusPopover, {
-        props: {
+    provide: {
       containerId,
       groupName,
       planName,
@@ -60,7 +56,7 @@ export const initTrialStatusPopover = () => {
       targetId,
       trialEndDate: new Date(trialEndDate),
     },
-      }),
+    render: (createElement) => createElement(TrialStatusPopover),
   });
 };
 

ee/spec/frontend/contextual_sidebar/trial_status_popover_spec.js

@@ -26,7 +26,7 @@ describe('TrialStatusPopover component', () => {
 
   const createComponent = (mountFn = shallowMount) => {
     return mountFn(TrialStatusPopover, {
-      propsData: {
+      provide: {
         groupName: 'Some Test Group',
         planName: 'Ultimate',
         plansHref: 'billing/path-for/group',

ee/spec/frontend/contextual_sidebar/trial_status_widget_spec.js

@@ -11,15 +11,15 @@ describe('TrialStatusWidget component', () => {
 
   const findGlLink = () => wrapper.findComponent(GlLink);
 
-  const createComponent = (props = {}) => {
+  const createComponent = (providers = {}) => {
     return shallowMount(TrialStatusWidget, {
-      propsData: {
+      provide: {
         daysRemaining: 20,
         navIconImagePath: 'illustrations/golden_tanuki.svg',
         percentageComplete: 10,
         planName: 'Ultimate',
         plansHref: 'billing/path-for/group',
-        ...props,
+        ...providers,
       },
     });
   };