Add latest changes from gitlab-org/gitlab@16-1-stable-eev16.1.0-rc42

4 files changed, 57 insertions, 7 deletions

diff --git a/app/assets/javascripts/invite_members/components/import_project_members_modal.vue b/app/assets/javascripts/invite_members/components/import_project_members_modal.vue
index 10c08d63612..cc95027f0db 100644
--- a/app/assets/javascripts/invite_members/components/import_project_members_modal.vue
+++ b/app/assets/javascripts/invite_members/components/import_project_members_modal.vue
@@ -1,15 +1,24 @@
 <script>
 import { GlFormGroup, GlModal, GlSprintf } from '@gitlab/ui';
-import { uniqueId } from 'lodash';
+import { uniqueId, isEmpty } from 'lodash';
 import { importProjectMembers } from '~/api/projects_api';
 import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
 import { s__, __, sprintf } from '~/locale';
+import Tracking from '~/tracking';
 import eventHub from '../event_hub';
+
 import {
   displaySuccessfulInvitationAlert,
   reloadOnInvitationSuccess,
 } from '../utils/trigger_successful_invite_alert';
-import { PROJECT_SELECT_LABEL_ID } from '../constants';
+
+import {
+  PROJECT_SELECT_LABEL_ID,
+  IMPORT_PROJECT_MEMBERS_MODAL_TRACKING_CATEGORY,
+  IMPORT_PROJECT_MEMBERS_MODAL_TRACKING_LABEL,
+} from '../constants';
+
+import UserLimitNotification from './user_limit_notification.vue';
 import ProjectSelect from './project_select.vue';
 
 export default {
@@ -18,8 +27,15 @@ export default {
     GlFormGroup,
     GlModal,
     GlSprintf,
+    UserLimitNotification,
     ProjectSelect,
   },
+  mixins: [
+    Tracking.mixin({
+      category: IMPORT_PROJECT_MEMBERS_MODAL_TRACKING_CATEGORY,
+      label: IMPORT_PROJECT_MEMBERS_MODAL_TRACKING_LABEL,
+    }),
+  ],
   props: {
     projectId: {
       type: String,
@@ -34,6 +50,11 @@ export default {
       required: false,
       default: false,
     },
+    usersLimitDataset: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -54,6 +75,12 @@ export default {
     validationState() {
       return this.invalidFeedbackMessage === '' ? null : false;
     },
+    showUserLimitNotification() {
+      return !isEmpty(this.usersLimitDataset.alertVariant);
+    },
+    limitVariant() {
+      return this.usersLimitDataset.alertVariant;
+    },
     actionPrimary() {
       return {
         text: this.$options.i18n.modalPrimaryButton,
@@ -79,6 +106,7 @@ export default {
   },
   methods: {
     openModal() {
+      this.track('render');
       this.$root.$emit(BV_SHOW_MODAL, this.$options.modalId);
     },
     closeModal() {
@@ -102,6 +130,8 @@ export default {
         });
     },
     onInviteSuccess() {
+      this.track('invite_successful');
+
       if (this.reloadPageOnSubmit) {
         reloadOnInvitationSuccess();
       } else {
@@ -115,6 +145,12 @@ export default {
     showErrorAlert() {
       this.invalidFeedbackMessage = this.$options.i18n.defaultError;
     },
+    onCancel() {
+      this.track('click_cancel');
+    },
+    onClose() {
+      this.track('click_x');
+    },
   },
   toastOptions() {
     return {
@@ -153,7 +189,15 @@ export default {
     no-focus-on-show
     @primary="submitImport"
     @hidden="resetFields"
+    @cancel="onCancel"
+    @close="onClose"
   >
+    <user-limit-notification
+      v-if="showUserLimitNotification"
+      class="gl-mb-5"
+      :limit-variant="limitVariant"
+      :users-limit-dataset="usersLimitDataset"
+    />
     <p ref="modalIntro">
       <gl-sprintf :message="modalIntro">
         <template #strong="{ content }">
diff --git a/app/assets/javascripts/invite_members/components/members_token_select.vue b/app/assets/javascripts/invite_members/components/members_token_select.vue
index 68602068699..e0bfa1111e8 100644
--- a/app/assets/javascripts/invite_members/components/members_token_select.vue
+++ b/app/assets/javascripts/invite_members/components/members_token_select.vue
@@ -114,11 +114,11 @@ export default {
     },
   },
   methods: {
-    handleTextInput(query) {
+    handleTextInput(inputQuery) {
       this.hideDropdownWithNoItems = false;
-      this.query = query;
+      this.query = inputQuery.trim();
       this.loading = true;
-      this.retrieveUsers(query);
+      this.retrieveUsers();
     },
     updateTokenClasses() {
       this.selectedTokens = this.selectedTokens.map((token) => ({
diff --git a/app/assets/javascripts/invite_members/constants.js b/app/assets/javascripts/invite_members/constants.js
index 9afcaff6e16..a4fe1a413aa 100644
--- a/app/assets/javascripts/invite_members/constants.js
+++ b/app/assets/javascripts/invite_members/constants.js
@@ -25,6 +25,8 @@ export const TRIGGER_ELEMENT_DROPDOWN_WITH_EMOJI = 'dropdown-text-emoji';
 export const TRIGGER_ELEMENT_DISCLOSURE_DROPDOWN = 'dropdown-text';
 export const INVITE_MEMBER_MODAL_TRACKING_CATEGORY = 'invite_members_modal';
 export const TRIGGER_DEFAULT_QA_SELECTOR = 'invite_members_button';
+export const IMPORT_PROJECT_MEMBERS_MODAL_TRACKING_CATEGORY = 'invite_project_members_modal';
+export const IMPORT_PROJECT_MEMBERS_MODAL_TRACKING_LABEL = 'project-members-page';
 export const MEMBERS_MODAL_DEFAULT_TITLE = s__('InviteMembersModal|Invite members');
 export const MEMBERS_MODAL_CELEBRATE_TITLE = s__(
   'InviteMembersModal|GitLab is better with colleagues!',
diff --git a/app/assets/javascripts/invite_members/init_import_project_members_modal.js b/app/assets/javascripts/invite_members/init_import_project_members_modal.js
index 227d8395250..90479038414 100644
--- a/app/assets/javascripts/invite_members/init_import_project_members_modal.js
+++ b/app/assets/javascripts/invite_members/init_import_project_members_modal.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import ImportProjectMembersModal from '~/invite_members/components/import_project_members_modal.vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { parseBoolean, convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 export default function initImportProjectMembersModal() {
   const el = document.querySelector('.js-import-project-members-modal');
@@ -9,16 +9,20 @@ export default function initImportProjectMembersModal() {
     return false;
   }
 
-  const { projectId, projectName, reloadPageOnSubmit } = el.dataset;
+  const { projectId, projectName, reloadPageOnSubmit, usersLimitDataset } = el.dataset;
 
   return new Vue({
     el,
+    provide: {
+      name: projectName,
+    },
     render: (createElement) =>
       createElement(ImportProjectMembersModal, {
         props: {
           projectId,
           projectName,
           reloadPageOnSubmit: parseBoolean(reloadPageOnSubmit),
+          usersLimitDataset: convertObjectPropsToCamelCase(JSON.parse(usersLimitDataset || '{}')),
         },
       }),
   });