diff options
Diffstat (limited to 'app/assets/javascripts/invite_members')
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 || '{}')), }, }), }); |