Fix manual renew button feature flag usage

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

@@ -5,6 +5,7 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import { TABLE_TYPE_DEFAULT, TABLE_TYPE_FREE, TABLE_TYPE_TRIAL } from 'ee/billings/constants';
 import { s__ } from '~/locale';
 import SubscriptionTableRow from './subscription_table_row.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   name: 'SubscriptionTable',
@@ -12,6 +13,7 @@ export default {
     SubscriptionTableRow,
     GlLoadingIcon,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     namespaceName: {
       type: String,
@@ -54,7 +56,11 @@ export default {
       };
     },
     renewButton() {
-      if (this.isFreePlan && !this.plan.trial && !gon.features.saasManualRenewButton) {
+      if (!this.glFeatures.saasManualRenewButton) {
+        return null;
+      }
+
+      if (this.isFreePlan) {
         return null;
       }
 

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

@@ -6,10 +6,6 @@ Array [
     "href": "http://test.host/plan/upgrade/bronze",
     "text": "Upgrade",
   },
-  Object {
-    "href": "http://test.host/plan/renew",
-    "text": "Renew",
-  },
   Object {
     "href": "https://customers.gitlab.com/subscriptions",
     "text": "Manage",
@@ -23,10 +19,6 @@ Array [
     "href": "http://test.host/plan/upgrade/free",
     "text": "Upgrade",
   },
-  Object {
-    "href": "http://test.host/plan/renew",
-    "text": "Renew",
-  },
   Object {
     "href": "https://customers.gitlab.com/subscriptions",
     "text": "Manage",
@@ -36,10 +28,6 @@ Array [
 
 exports[`SubscriptionTable component given a gold plan with state: isFreePlan=false, upgradable=false, isTrialPlan=false has Renew and Manage buttons 1`] = `
 Array [
-  Object {
-    "href": "http://test.host/plan/renew",
-    "text": "Renew",
-  },
   Object {
     "href": "https://customers.gitlab.com/subscriptions",
     "text": "Manage",
@@ -49,10 +37,6 @@ Array [
 
 exports[`SubscriptionTable component given a trial-gold plan with state: isFreePlan=false, upgradable=false, isTrialPlan=true has Manage button 1`] = `
 Array [
-  Object {
-    "href": "http://test.host/plan/renew",
-    "text": "Renew",
-  },
   Object {
     "href": "https://customers.gitlab.com/subscriptions",
     "text": "Manage",

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

@@ -20,6 +20,7 @@ describe('SubscriptionTable component', () => {
 
   const findButtonProps = () =>
     wrapper.findAll('a').wrappers.map(x => ({ text: x.text(), href: x.attributes('href') }));
+  const findRenewButton = () => findButtonProps().filter(({ text }) => text === 'Renew');
 
   const factory = (options = {}) => {
     store = new Vuex.Store(initialStore());
@@ -130,26 +131,39 @@ describe('SubscriptionTable component', () => {
     },
   );
 
-  describe('render button', () => {
-    window.gon = { features: {} };
-
-    afterEach(() => {
-      window.gon.features = {};
+  describe.each`
+    planName        | planCode    | isFreePlan | isTrialPlan | featureFlag | expectedBehavior | testDescription
+    ${'free'}       | ${null}     | ${true}    | ${false}    | ${true}     | ${false}         | ${'does not render the renew button for free plan'}
+    ${'gold-trial'} | ${null}     | ${false}   | ${true}     | ${true}     | ${false}         | ${'does not render the renew button for trial plan'}
+    ${'silver'}     | ${'silver'} | ${false}   | ${false}    | ${true}     | ${true}          | ${'renders the renew button for paid plans if feature flag is on'}
+    ${'silver'}     | ${'silver'} | ${false}   | ${false}    | ${false}    | ${false}         | ${'does not render the renew button for paid plans if feature flag is off'}
+  `(
+    'given plan with state: isFreePlan=$isFreePlan and feature flag saasManualRenewButton=$featureFlag',
+    ({ planName, planCode, isFreePlan, featureFlag, testDescription, expectedBehavior }) => {
+      beforeEach(() => {
+        factory({
+          propsData: { namespaceName: TEST_NAMESPACE_NAME },
+          provide: {
+            glFeatures: {
+              saasManualRenewButton: featureFlag,
+            },
+          },
         });
 
-    it('renders the renew button when feature flag is on', () => {
-      gon.features.saasManualRenewButton = true;
-      factory({ propsData: { namespaceName: TEST_NAMESPACE_NAME } });
-      expect(findButtonProps()).toStrictEqual([
-        { text: 'Upgrade', href: '' },
-        { text: 'Renew', href: '' },
-      ]);
+        Object.assign(store.state, {
+          isLoadingSubscription: false,
+          isFreePlan,
+          plan: {
+            code: planCode,
+            name: planName,
+            upgradable: true,
+          },
         });
-
-    it('does not render the renew button when the feature flag is off', () => {
-      gon.features.saasManualRenewButton = false;
-      factory({ propsData: { namespaceName: TEST_NAMESPACE_NAME } });
-      expect(findButtonProps()).toStrictEqual([{ text: 'Upgrade', href: '' }]);
       });
+
+      it(testDescription, () => {
+        expect(findRenewButton().length > 0).toBe(expectedBehavior);
       });
+    },
+  );
 });