Use provide for unchanging values in trial status components

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,17 +18,15 @@ export const initTrialStatusWidget = () => {
 
   return new Vue({
     el,
-    render: (createElement) =>
-      createElement(TrialStatusWidget, {
-        props: {
-          containerId,
-          daysRemaining: Number(daysRemaining),
-          navIconImagePath,
-          percentageComplete: Number(percentageComplete),
-          planName,
-          plansHref,
-        },
-      }),
+    provide: {
+      containerId,
+      daysRemaining: Number(daysRemaining),
+      navIconImagePath,
+      percentageComplete: Number(percentageComplete),
+      planName,
+      plansHref,
+    },
+    render: (createElement) => createElement(TrialStatusWidget),
   });
 };
 
@@ -49,18 +47,16 @@ export const initTrialStatusPopover = () => {
 
   return new Vue({
     el,
-    render: (createElement) =>
-      createElement(TrialStatusPopover, {
-        props: {
-          containerId,
-          groupName,
-          planName,
-          plansHref,
-          purchaseHref,
-          targetId,
-          trialEndDate: new Date(trialEndDate),
-        },
-      }),
+    provide: {
+      containerId,
+      groupName,
+      planName,
+      plansHref,
+      purchaseHref,
+      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,
       },
     });
   };