Merge branch 'dreedy-be-explicit-as-to-which-props-a-vue-component-takes' into 'master'

Be explicit about which props a Vue component takes

See merge request gitlab-org/gitlab!59048

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

@@ -7,16 +7,26 @@ export const initTrialStatusWidget = () => {
 
   if (!el) return undefined;
 
-  const { daysRemaining, percentageComplete, ...props } = el.dataset;
+  const {
+    containerId,
+    daysRemaining,
+    navIconImagePath,
+    percentageComplete,
+    planName,
+    plansHref,
+  } = el.dataset;
 
   return new Vue({
     el,
     render: (createElement) =>
       createElement(TrialStatusWidget, {
         props: {
-          ...props,
+          containerId,
           daysRemaining: Number(daysRemaining),
+          navIconImagePath,
           percentageComplete: Number(percentageComplete),
+          planName,
+          plansHref,
         },
       }),
   });
@@ -27,14 +37,27 @@ export const initTrialStatusPopover = () => {
 
   if (!el) return undefined;
 
-  const { trialEndDate, ...props } = el.dataset;
+  const {
+    containerId,
+    groupName,
+    planName,
+    plansHref,
+    purchaseHref,
+    targetId,
+    trialEndDate,
+  } = el.dataset;
 
   return new Vue({
     el,
     render: (createElement) =>
       createElement(TrialStatusPopover, {
         props: {
-          ...props,
+          containerId,
+          groupName,
+          planName,
+          plansHref,
+          purchaseHref,
+          targetId,
           trialEndDate: new Date(trialEndDate),
         },
       }),

ee/spec/frontend/contextual_sidebar/group_trial_status_widget_spec.js

@@ -8,7 +8,7 @@ describe('TrialStatusWidget component', () => {
 
   const getGlLink = () => wrapper.findComponent(GlLink);
 
-  const createComponent = ({ props } = {}) => {
+  const createComponent = (props = {}) => {
     return shallowMount(TrialStatusWidget, {
       propsData: {
         daysRemaining: 20,
@@ -49,7 +49,7 @@ describe('TrialStatusWidget component', () => {
 
   describe('with the optional containerId prop', () => {
     beforeEach(() => {
-      wrapper = createComponent({ props: { containerId: 'some-id' } });
+      wrapper = createComponent({ containerId: 'some-id' });
     });
 
     it('renders with the given id', () => {