Add an Upgrade button to Group's billings page

It adds an upgrade button to the group billings
page that redirects to the customers portal
upgrade checkout page.

If the user is not logged in at the portal he/she
will be automatically redirected after the login
process.

If the user is at the latest tier, the button
won't be presented.

ee/app/assets/stylesheets/pages/billings.scss

@@ -16,6 +16,10 @@
       margin-bottom: 16px;
     }
   }
+
+  h4 {
+    font-size: 20px;
+  }
 }
 
 .billing-plans-alert {

ee/spec/frontend/billings/store/modules/subscription/data/mock_subscription.json

+{
+  "plan": { "code": "bronze", "name": "Bronze", "trial": null, "upgradable": true },
+  "usage": { "seats_in_subscription": 0, "seats_in_use": 1, "max_seats_used": 0, "seats_owed": 0 },
+  "billing": {
+    "subscription_start_date": "2019-07-31",
+    "subscription_end_date": null,
+    "trial_ends_on": null
+  }
+}

ee/spec/frontend/billings/store/modules/subscription/data/mock_tables.json

+{
+  "free": {
+    "rows": [
+      {
+        "header": { "icon": "monitor", "title": "Usage" },
+        "columns": [
+          {
+            "id": "seatsInUse",
+            "label": "Seats currently in use",
+            "value": null,
+            "colClass": "number",
+            "popover": {
+              "content": "This is the number of seats you will be required to purchase if you update to a paid plan."
+            }
+          },
+          {
+            "id": "subscriptionStartDate",
+            "label": "Subscription start date",
+            "value": null,
+            "isDate": true
+          }
+        ]
+      }
+    ]
+  },
+  "trial": {
+    "rows": [
+      {
+        "header": { "icon": "monitor", "title": "Usage" },
+        "columns": [
+          {
+            "id": "seatsInUse",
+            "label": "Seats currently in use",
+            "value": null,
+            "colClass": "number",
+            "popover": { "content": "Usage count is performed once a day at 12:00 PM." }
+          },
+          {
+            "id": "subscriptionStartDate",
+            "label": "Trial start date",
+            "value": null,
+            "isDate": true
+          },
+          { "id": "subscriptionEndDate", "label": "Trial end date", "value": null, "isDate": true }
+        ]
+      }
+    ]
+  },
+  "default": {
+    "rows": [
+      {
+        "header": { "icon": "monitor", "title": "Usage" },
+        "columns": [
+          {
+            "id": "seatsInSubscription",
+            "label": "Seats in subscription",
+            "value": 0,
+            "colClass": "number"
+          },
+          {
+            "id": "seatsInUse",
+            "label": "Seats currently in use",
+            "value": 1,
+            "colClass": "number",
+            "popover": { "content": "Usage count is performed once a day at 12:00 PM." }
+          },
+          {
+            "id": "maxSeatsUsed",
+            "label": "Max seats used",
+            "value": 0,
+            "colClass": "number",
+            "popover": {
+              "content": "This is the maximum number of users that have existed at the same time since this subscription started."
+            }
+          },
+          {
+            "id": "seatsOwed",
+            "label": "Seats owed",
+            "value": 0,
+            "colClass": "number",
+            "popover": {
+              "content": "GitLab allows you to continue using your subscription even if you exceed the number of seats you purchased. You will be required to pay for these seats upon renewal."
+            }
+          }
+        ]
+      },
+      {
+        "header": { "icon": "calendar", "title": "Billing" },
+        "columns": [
+          {
+            "id": "subscriptionStartDate",
+            "label": "Subscription start date",
+            "value": "2019-07-31",
+            "isDate": true
+          },
+          {
+            "id": "subscriptionEndDate",
+            "label": "Subscription end date",
+            "value": null,
+            "isDate": true
+          },
+          {
+            "id": "lastInvoice",
+            "label": "Last invoice",
+            "value": null,
+            "isDate": true,
+            "popover": {
+              "content": "This is the last time the GitLab.com team was in contact with you to settle any outstanding balances."
+            },
+            "hideContent": true
+          },
+          {
+            "id": "nextInvoice",
+            "label": "Next invoice",
+            "value": null,
+            "isDate": true,
+            "popover": {
+              "content": "This is the next date when the GitLab.com team is scheduled to get in contact with you to settle any outstanding balances."
+            },
+            "hideContent": true
+          }
+        ]
+      }
+    ]
+  }
+}

ee/spec/frontend/billings/stores/modules/subscription/mock_subscription.json

+{
+  "plan": { "code": "bronze", "name": "Bronze", "trial": null, "upgradable": true },
+  "usage": { "seats_in_subscription": 0, "seats_in_use": 1, "max_seats_used": 0, "seats_owed": 0 },
+  "billing": {
+    "subscription_start_date": "2019-07-31",
+    "subscription_end_date": null,
+    "trial_ends_on": null
+  }
+}

ee/spec/frontend/billings/stores/modules/subscription/mock_tables.json

+{
+  "free": {
+    "rows": [
+      {
+        "header": { "icon": "monitor", "title": "Usage" },
+        "columns": [
+          {
+            "id": "seatsInUse",
+            "label": "Seats currently in use",
+            "value": null,
+            "colClass": "number",
+            "popover": {
+              "content": "This is the number of seats you will be required to purchase if you update to a paid plan."
+            }
+          },
+          {
+            "id": "subscriptionStartDate",
+            "label": "Subscription start date",
+            "value": null,
+            "isDate": true
+          }
+        ]
+      }
+    ]
+  },
+  "trial": {
+    "rows": [
+      {
+        "header": { "icon": "monitor", "title": "Usage" },
+        "columns": [
+          {
+            "id": "seatsInUse",
+            "label": "Seats currently in use",
+            "value": null,
+            "colClass": "number",
+            "popover": { "content": "Usage count is performed once a day at 12:00 PM." }
+          },
+          {
+            "id": "subscriptionStartDate",
+            "label": "Trial start date",
+            "value": null,
+            "isDate": true
+          },
+          { "id": "subscriptionEndDate", "label": "Trial end date", "value": null, "isDate": true }
+        ]
+      }
+    ]
+  },
+  "default": {
+    "rows": [
+      {
+        "header": { "icon": "monitor", "title": "Usage" },
+        "columns": [
+          {
+            "id": "seatsInSubscription",
+            "label": "Seats in subscription",
+            "value": 0,
+            "colClass": "number"
+          },
+          {
+            "id": "seatsInUse",
+            "label": "Seats currently in use",
+            "value": 1,
+            "colClass": "number",
+            "popover": { "content": "Usage count is performed once a day at 12:00 PM." }
+          },
+          {
+            "id": "maxSeatsUsed",
+            "label": "Max seats used",
+            "value": 0,
+            "colClass": "number",
+            "popover": {
+              "content": "This is the maximum number of users that have existed at the same time since this subscription started."
+            }
+          },
+          {
+            "id": "seatsOwed",
+            "label": "Seats owed",
+            "value": 0,
+            "colClass": "number",
+            "popover": {
+              "content": "GitLab allows you to continue using your subscription even if you exceed the number of seats you purchased. You will be required to pay for these seats upon renewal."
+            }
+          }
+        ]
+      },
+      {
+        "header": { "icon": "calendar", "title": "Billing" },
+        "columns": [
+          {
+            "id": "subscriptionStartDate",
+            "label": "Subscription start date",
+            "value": "2019-07-31",
+            "isDate": true
+          },
+          {
+            "id": "subscriptionEndDate",
+            "label": "Subscription end date",
+            "value": null,
+            "isDate": true
+          },
+          {
+            "id": "lastInvoice",
+            "label": "Last invoice",
+            "value": null,
+            "isDate": true,
+            "popover": {
+              "content": "This is the last time the GitLab.com team was in contact with you to settle any outstanding balances."
+            },
+            "hideContent": true
+          },
+          {
+            "id": "nextInvoice",
+            "label": "Next invoice",
+            "value": null,
+            "isDate": true,
+            "popover": {
+              "content": "This is the next date when the GitLab.com team is scheduled to get in contact with you to settle any outstanding balances."
+            },
+            "hideContent": true
+          }
+        ]
+      }
+    ]
+  }
+}

ee/spec/frontend/billings/stores/modules/subscription/mutations_spec.js

+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import createState from 'ee/billings/stores/modules/subscription/state';
+import * as types from 'ee/billings/stores/modules/subscription/mutation_types';
+import mutations from 'ee/billings/stores/modules/subscription/mutations';
+import subscription from './mock_subscription.json';
+import tables from './mock_tables.json';
+
+describe('EE billings subscription module mutations', () => {
+  let state;
+
+  beforeEach(() => {
+    state = createState();
+  });
+
+  describe(types.SET_NAMESPACE_ID, () => {
+    it('sets namespaceId', () => {
+      const expectedNamespaceId = 'test';
+
+      expect(state.namespaceId).toBeNull();
+
+      mutations[types.SET_NAMESPACE_ID](state, expectedNamespaceId);
+
+      expect(state.namespaceId).toBe(expectedNamespaceId);
+    });
+  });
+
+  describe(types.REQUEST_SUBSCRIPTION, () => {
+    it('sets isLoading to true', () => {
+      mutations[types.REQUEST_SUBSCRIPTION](state);
+
+      expect(state.isLoading).toBeTruthy();
+    });
+
+    it('sets hasError to false', () => {
+      mutations[types.REQUEST_SUBSCRIPTION](state);
+
+      expect(state.hasError).toBeFalsy();
+    });
+  });
+
+  describe(types.RECEIVE_SUBSCRIPTION_SUCCESS, () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_SUBSCRIPTION_SUCCESS](state, subscription);
+    });
+
+    it('sets isLoading to false', () => {
+      expect(state.isLoading).toBeFalsy();
+    });
+
+    it('sets plan', () => {
+      const { plan } = convertObjectPropsToCamelCase(subscription, { deep: true });
+
+      expect(state.plan).toEqual(plan);
+    });
+
+    it('sets tables', () => {
+      const expectedTables = convertObjectPropsToCamelCase(tables, { deep: true });
+
+      expect(state.tables).toEqual(expectedTables);
+    });
+  });
+
+  describe(types.RECEIVE_SUBSCRIPTION_ERROR, () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_SUBSCRIPTION_ERROR](state);
+    });
+
+    it('sets isLoading to false', () => {
+      expect(state.isLoading).toBeFalsy();
+    });
+
+    it('sets hasError to true', () => {
+      expect(state.hasError).toBeTruthy();
+    });
+  });
+});

locale/gitlab.pot

@@ -302,6 +302,9 @@ msgstr ""
 msgid "%{percent}%% complete"
 msgstr ""
 
+msgid "%{prefix}: %{planName} %{suffix}"
+msgstr ""
+
 msgid "%{service_title} activated."
 msgstr ""