Add a user overage modal

What does this MR do and why?

Introduce a feature flag overage_members_modal and show a modal confirmation window when adding new members to a group. The modal will be shown if the group has a subscription and adding a new member to it will cause overage.

This is a first part of implementing this modal, currently we show the overage modal on every addition if the FF is turned on. There is be a backend follow-up MR to add a proper check.

Step	Status
Introduce a FF and a modal on FE	you are here
Add logic to when we show overage modal and calculate the amount of users for overage	!78287 (merged) workflowin dev

Related to #348486 (closed)

Screenshots or screen recordings

Screen_Recording_2022-02-15_at_19.34.14

How to set up and validate locally

1. If the feature flag is not enabled user won't see an overage modal

2. Enable the overage modal

   Feature.enable(:overage_members_modal)

3. Visit any group page, then Group Information -> Members http://localhost:3000/groups/<your-group>/-/group_members.

4. Click the Invite members button

5. Add a user and click Invite.

6. Check the modal.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

app/assets/javascripts/invite_members/components/invite_members_modal.vue

@@ -19,7 +19,7 @@ import ExperimentTracking from '~/experimentation/experiment_tracking';
 import { sanitize } from '~/lib/dompurify';
 import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import { getParameterValues } from '~/lib/utils/url_utility';
-import { sprintf, __ } from '~/locale';
+import { sprintf } from '~/locale';
 import {
   GROUP_FILTERS,
   USERS_FILTER_ALL,
@@ -28,6 +28,8 @@ import {
   LEARN_GITLAB,
   OVERAGE_MODAL_LINK,
   OVERAGE_MODAL_TITLE,
+  OVERAGE_MODAL_BUTTON_LABEL,
+  OVERAGE_MODAL_LINK_TEXT,
   overageModalInfoText,
   overageModalInfoWarning,
 } from '../constants';
@@ -120,7 +122,7 @@ export default {
     subscriptionSeats: {
       type: Number,
       required: false,
-      default: 0,
+      default: 10, // TODO: pass data from backend https://gitlab.com/gitlab-org/gitlab/-/merge_requests/78287
     },
   },
   data() {
@@ -230,13 +232,12 @@ export default {
     },
     modalInfo() {
       const infoText = this.$options.i18n.infoText(this.subscriptionSeats);
-      const infoWarningCountable = this.$options.i18n.infoWarning(this.totalUserCount);
-      const infoWarning = sprintf(infoWarningCountable, {
-        groupName: this.name,
-        quantity: this.totalUserCount,
-      });
+      const infoWarning = this.$options.i18n.infoWarning(this.totalUserCount, this.name);
 
-      return [infoText, infoWarning].join(' ');
+      return `${infoText} ${infoWarning}`;
+    },
+    modalTitleLabel() {
+      return this.showOverageModal ? this.$options.i18n.overageModalTitle : this.modalTitle;
     },
   },
   mounted() {
@@ -426,8 +427,8 @@ export default {
     infoWarning: overageModalInfoWarning,
     overageModalTitle: OVERAGE_MODAL_TITLE,
     url: OVERAGE_MODAL_LINK,
-    buttonLabel: __('Back'),
-    linkText: __('Learn more.'),
+    buttonLabel: OVERAGE_MODAL_BUTTON_LABEL,
+    linkText: OVERAGE_MODAL_LINK_TEXT,
   },
   membersTokenSelectLabelId: 'invite-members-input',
 };
@@ -439,7 +440,7 @@ export default {
     size="sm"
     data-qa-selector="invite_members_modal_content"
     data-testid="invite-members-modal"
-    :title="showOverageModal ? $options.i18n.overageModalTitle : modalTitle"
+    :title="modalTitleLabel"
     :header-close-label="$options.labels.headerCloseLabel"
     @hidden="resetFields"
     @close="resetFields"