Add ExtendReactivateTrialButton to the SubscriptionTable

Duplicate the button to the SubscriptionTable to let
users to extend or to reactivate their trial.

ee/app/assets/javascripts/billings/subscriptions/components/app.vue

@@ -9,7 +9,7 @@ export default {
   },
   inject: {
     namespaceId: {
-      default: '',
+      default: null,
     },
   },
   created() {

ee/app/assets/javascripts/billings/subscriptions/components/subscription_table.vue

@@ -9,6 +9,7 @@ import {
   DAYS_FOR_RENEWAL,
   PLAN_TITLE_TRIAL_TEXT,
 } from 'ee/billings/constants';
+import ExtendReactivateTrialButton from 'ee/trials/extend_reactivate_trial/components/extend_reactivate_trial_button.vue';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { getDayDifference } from '~/lib/utils/datetime/date_calculation_utility';
@@ -24,6 +25,7 @@ export default {
     GlButton,
     GlLoadingIcon,
     SubscriptionTableRow,
+    ExtendReactivateTrialButton,
   },
   mixins: [glFeatureFlagsMixin()],
   inject: {
@@ -34,7 +36,7 @@ export default {
       default: '',
     },
     namespaceId: {
-      default: '',
+      default: null,
     },
     customerPortalUrl: {
       default: '',
@@ -54,6 +56,9 @@ export default {
     refreshSeatsHref: {
       default: '',
     },
+    availableTrialAction: {
+      default: null,
+    },
   },
   computed: {
     ...mapState([
@@ -182,7 +187,14 @@ export default {
         data-testid="subscription-header"
       >
         <strong>{{ subscriptionHeader }}</strong>
-        <div class="controls">
+        <div class="gl-display-flex">
+          <extend-reactivate-trial-button
+            v-if="availableTrialAction"
+            :namespace-id="namespaceId"
+            :action="availableTrialAction"
+            :plan-name="planName"
+            class="gl-mr-3"
+          />
           <gl-button
             v-for="(button, index) in buttons"
             :key="button.text"

ee/app/assets/javascripts/billings/subscriptions/index.js

@@ -24,13 +24,14 @@ export default (containerId = 'js-billing-plans') => {
     planName,
     freePersonalNamespace,
     refreshSeatsHref,
+    action,
   } = containerEl.dataset;
 
   return new Vue({
     el: containerEl,
     store: new Vuex.Store(initialStore()),
     provide: {
-      namespaceId,
+      namespaceId: Number(namespaceId),
       namespaceName,
       addSeatsHref,
       planUpgradeHref,
@@ -40,6 +41,7 @@ export default (containerId = 'js-billing-plans') => {
       planName,
       freePersonalNamespace: parseBoolean(freePersonalNamespace),
       refreshSeatsHref,
+      availableTrialAction: action,
     },
     render(createElement) {
       return createElement(SubscriptionApp);

ee/app/assets/javascripts/pages/profiles/billings/index.js

 import initSubscriptions from 'ee/billings/subscriptions';
+import { shouldExtendReactivateTrialButtonMount } from 'ee/trials/extend_reactivate_trial';
 import PersistentUserCallout from '~/persistent_user_callout';
 
 PersistentUserCallout.factory(document.querySelector('.js-gold-trial-callout'));
+shouldExtendReactivateTrialButtonMount();
 initSubscriptions();

ee/spec/frontend/billings/subscriptions/components/subscription_table_spec.js

@@ -6,6 +6,7 @@ import SubscriptionTable from 'ee/billings/subscriptions/components/subscription
 import SubscriptionTableRow from 'ee/billings/subscriptions/components/subscription_table_row.vue';
 import initialStore from 'ee/billings/subscriptions/store';
 import * as types from 'ee/billings/subscriptions/store/mutation_types';
+import ExtendReactivateTrialButton from 'ee/trials/extend_reactivate_trial/components/extend_reactivate_trial_button.vue';
 import { mockDataSubscription } from 'ee_jest/billings/mock_data';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -361,4 +362,33 @@ describe('SubscriptionTable component', () => {
       expect(findRefreshSeatsButton().exists()).toBe(false);
     });
   });
+
+  describe.each`
+    availableTrialAction | buttonVisible
+    ${null}              | ${false}
+    ${'extend'}          | ${true}
+    ${'reactivate'}      | ${true}
+  `(
+    'with availableTrialAction=$availableTrialAction',
+    ({ availableTrialAction, buttonVisible }) => {
+      beforeEach(() => {
+        createComponentWithStore({
+          provide: {
+            namespaceId: 1,
+            availableTrialAction,
+          },
+        });
+      });
+
+      if (buttonVisible) {
+        it('renders the trial button', () => {
+          expect(wrapper.findComponent(ExtendReactivateTrialButton).isVisible()).toBe(true);
+        });
+      } else {
+        it('does not render the trial button', () => {
+          expect(wrapper.findComponent(ExtendReactivateTrialButton).exists()).toBe(false);
+        });
+      }
+    },
+  );
 });