Remove Duplication of Trial on Billing Page Subscription Header

ee/app/assets/javascripts/billings/constants.js

@@ -8,3 +8,5 @@ export const HEADER_PAGE_NUMBER = 'x-page';
 export const HEADER_ITEMS_PER_PAGE = 'x-per-page';
 
 export const DAYS_FOR_RENEWAL = 15;
+
+export const PLAN_TITLE_TRIAL_TEXT = ' Trial';

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

@@ -7,6 +7,7 @@ import {
   TABLE_TYPE_FREE,
   TABLE_TYPE_TRIAL,
   DAYS_FOR_RENEWAL,
+  PLAN_TITLE_TRIAL_TEXT,
 } from 'ee/billings/constants';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -68,7 +69,9 @@ export default {
       return !this.isFreePlan;
     },
     subscriptionHeader() {
-      const planName = this.isFreePlan ? s__('SubscriptionTable|Free') : escape(this.planName);
+      const planName = this.isFreePlan
+        ? s__('SubscriptionTable|Free')
+        : escape(this.planName.replace(PLAN_TITLE_TRIAL_TEXT, ''));
       const suffix = this.isSubscription && this.plan.trial ? s__('SubscriptionTable|Trial') : '';
 
       return `${this.namespaceName}: ${planName} ${suffix}`;

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

@@ -97,16 +97,36 @@ describe('SubscriptionTable component', () => {
   });
 
   describe('when it is a trial', () => {
-    it('should render the card title "GitLab.com: Trial"', async () => {
+    it('renders the card title', async () => {
       await createComponentWithStore({
+        provide: {
+          planName: 'Gold Plan',
+        },
         state: {
           plan: {
-            code: 'gold',
             trial: true,
           },
         },
       });
-      expect(wrapper.findByTestId('subscription-header').text()).toContain('Trial');
+      const subscriptionHeaderText = wrapper.findByTestId('subscription-header').text();
+
+      expect(subscriptionHeaderText).toContain('GitLab.com: Gold Plan Trial');
+    });
+
+    it('renders the title for a plan with Trial in the name', async () => {
+      await createComponentWithStore({
+        provide: {
+          planName: 'Ultimate SaaS Trial Plan',
+        },
+        state: {
+          plan: {
+            trial: true,
+          },
+        },
+      });
+      const subscriptionHeaderText = wrapper.findByTestId('subscription-header').text();
+
+      expect(subscriptionHeaderText).toContain('GitLab.com: Ultimate SaaS Plan Trial');
     });
   });