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

@@ -13,18 +13,23 @@ import {
   GlFormCheckboxGroup,
 } from '@gitlab/ui';
 import { partition, isString, unescape, uniqueId } from 'lodash';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import Api from '~/api';
 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,
   INVITE_MEMBERS_FOR_TASK,
   MODAL_LABELS,
   LEARN_GITLAB,
+  OVERAGE_MODAL_LINK,
+  OVERAGE_MODAL_TITLE,
+  overageModalInfoText,
+  overageModalInfoWarning,
 } from '../constants';
 import eventHub from '../event_hub';
 import {
@@ -53,6 +58,7 @@ export default {
     GroupSelect,
     ModalConfetti,
   },
+  mixins: [glFeatureFlagsMixin()],
   inject: ['newProjectPath'],
   props: {
     id: {
@@ -111,6 +117,11 @@ export default {
       type: Array,
       required: true,
     },
+    subscriptionSeats: {
+      type: Number,
+      required: false,
+      default: 10, // TODO: pass data from backend https://gitlab.com/gitlab-org/gitlab/-/merge_requests/78287
+    },
   },
   data() {
     return {
@@ -127,6 +138,8 @@ export default {
       invalidFeedbackMessage: '',
       isLoading: false,
       mode: 'default',
+      hasOverage: false,
+      totalUserCount: null,
     };
   },
   computed: {
@@ -209,6 +222,22 @@ export default {
     isOnLearnGitlab() {
       return this.source === LEARN_GITLAB;
     },
+    showOverageModal() {
+      return this.hasOverage && this.enabledOverageCheck;
+    },
+    enabledOverageCheck() {
+      return this.glFeatures.overageMembersModal;
+    },
+    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,
+      });
+
+      return [infoText, infoWarning].join(' ');
+    },
   },
   mounted() {
     eventHub.$on('openModal', (options) => {
@@ -239,6 +268,8 @@ export default {
       this.mode = mode;
       this.inviteeType = inviteeType;
       this.source = source;
+      // to ensure that we don't start with the overage modal
+      this.hasOverage = false;
 
       this.$root.$emit(BV_SHOW_MODAL, this.modalId);
     },
@@ -257,6 +288,19 @@ export default {
         this.submitInviteMembers();
       }
     },
+    checkOverage() {
+      // add a more complex check in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/78287
+      // totalUserCount should be calculated there
+      if (this.enabledOverageCheck) {
+        this.totalUserCount = 1;
+        this.hasOverage = true;
+      } else {
+        this.sendInvite();
+      }
+    },
+    handleBack() {
+      this.hasOverage = false;
+    },
     trackinviteMembersForTask() {
       const label = 'selected_tasks_to_be_done';
       const property = this.selectedTasksToBeDone.join(',');
@@ -377,6 +421,14 @@ export default {
     },
   },
   labels: MODAL_LABELS,
+  i18n: {
+    infoText: overageModalInfoText,
+    infoWarning: overageModalInfoWarning,
+    overageModalTitle: OVERAGE_MODAL_TITLE,
+    url: OVERAGE_MODAL_LINK,
+    buttonLabel: __('Back'),
+    linkText: __('Learn more.'),
+  },
   membersTokenSelectLabelId: 'invite-members-input',
 };
 </script>
@@ -387,15 +439,17 @@ export default {
     size="sm"
     data-qa-selector="invite_members_modal_content"
     data-testid="invite-members-modal"
-    :title="modalTitle"
+    :title="showOverageModal ? $options.i18n.overageModalTitle : modalTitle"
     :header-close-label="$options.labels.headerCloseLabel"
     @hidden="resetFields"
     @close="resetFields"
     @hide="resetFields"
   >
-    <div>
+    <div v-show="!showOverageModal">
       <div class="gl-display-flex">
-        <div v-if="isCelebration" class="gl-p-4 gl-font-size-h1"><gl-emoji data-name="tada" /></div>
+        <div v-if="isCelebration" class="gl-p-4 gl-font-size-h1">
+          <gl-emoji data-name="tada" />
+        </div>
         <div>
           <p ref="introText">
             <gl-sprintf :message="introText">
@@ -538,21 +592,41 @@ export default {
         </gl-alert>
       </div>
     </div>
-
+    <div v-if="showOverageModal">
+      {{ modalInfo }}
+      <gl-link :href="$options.i18n.url" target="_blank">{{ $options.i18n.linkText }}</gl-link>
+    </div>
     <template #modal-footer>
-      <gl-button data-testid="cancel-button" @click="closeModal">
-        {{ $options.labels.cancelButtonText }}
-      </gl-button>
-      <gl-button
-        :disabled="inviteDisabled"
-        :loading="isLoading"
-        variant="success"
-        data-qa-selector="invite_button"
-        data-testid="invite-button"
-        @click="sendInvite"
-      >
-        {{ $options.labels.inviteButtonText }}
-      </gl-button>
+      <template v-if="!showOverageModal">
+        <gl-button data-testid="cancel-button" @click="closeModal">
+          {{ $options.labels.cancelButtonText }}
+        </gl-button>
+        <gl-button
+          :disabled="inviteDisabled"
+          :loading="isLoading"
+          variant="success"
+          data-qa-selector="invite_button"
+          data-testid="invite-button"
+          @click="checkOverage"
+        >
+          {{ $options.labels.inviteButtonText }}
+        </gl-button>
+      </template>
+      <template v-else>
+        <gl-button data-testid="overage-back-button" @click="handleBack">
+          {{ $options.i18n.buttonLabel }}
+        </gl-button>
+        <gl-button
+          :disabled="inviteDisabled"
+          :loading="isLoading"
+          variant="success"
+          data-qa-selector="invite_with_overage_button"
+          data-testid="invite-with-overage-button"
+          @click="sendInvite"
+        >
+          {{ $options.labels.inviteButtonText }}
+        </gl-button>
+      </template>
     </template>
   </gl-modal>
 </template>