diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-02 18:08:56 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-02 18:08:56 +0300 |
commit | 6f998d352988f93f875db862353e814e95db1fe3 (patch) | |
tree | 3596c4b8cbc4d426c3aaf571ea5ba1a57ffe031e /app/assets/javascripts/invite_members | |
parent | 3eec6c2511af2b10cd25be64dcd84c4a35a7bcdb (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/invite_members')
3 files changed, 59 insertions, 9 deletions
diff --git a/app/assets/javascripts/invite_members/components/invite_members_modal.vue b/app/assets/javascripts/invite_members/components/invite_members_modal.vue index 431900aecf0..5881ec08a2e 100644 --- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue +++ b/app/assets/javascripts/invite_members/components/invite_members_modal.vue @@ -9,13 +9,14 @@ import { GlSprintf, GlButton, GlFormInput, + GlFormCheckboxGroup, } from '@gitlab/ui'; import { partition, isString } from 'lodash'; import Api from '~/api'; import ExperimentTracking from '~/experimentation/experiment_tracking'; -import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants'; +import { BV_SHOW_MODAL } from '~/lib/utils/constants'; import { s__, sprintf } from '~/locale'; -import { INVITE_MEMBERS_IN_COMMENT, GROUP_FILTERS } from '../constants'; +import { INVITE_MEMBERS_IN_COMMENT, GROUP_FILTERS, MEMBER_AREAS_OF_FOCUS } from '../constants'; import eventHub from '../event_hub'; import { responseMessageFromError, @@ -36,6 +37,7 @@ export default { GlSprintf, GlButton, GlFormInput, + GlFormCheckboxGroup, MembersTokenSelect, GroupSelect, }, @@ -74,6 +76,14 @@ export default { type: String, required: true, }, + areasOfFocusOptions: { + type: Array, + required: true, + }, + noSelectionAreasOfFocus: { + type: Array, + required: true, + }, }, data() { return { @@ -83,6 +93,7 @@ export default { inviteeType: 'members', newUsersToInvite: [], selectedDate: undefined, + selectedAreasOfFocus: [], groupToBeSharedWith: {}, source: 'unknown', invalidFeedbackMessage: '', @@ -128,10 +139,21 @@ export default { this.newUsersToInvite.length === 0 && Object.keys(this.groupToBeSharedWith).length === 0 ); }, + areasOfFocusEnabled() { + return this.areasOfFocusOptions.length !== 0; + }, + areasOfFocusForPost() { + if (this.selectedAreasOfFocus.length === 0 && this.areasOfFocusEnabled) { + return this.noSelectionAreasOfFocus; + } + + return this.selectedAreasOfFocus; + }, }, mounted() { eventHub.$on('openModal', (options) => { this.openModal(options); + this.trackEvent(MEMBER_AREAS_OF_FOCUS.name, MEMBER_AREAS_OF_FOCUS.view); }); }, methods: { @@ -152,9 +174,12 @@ export default { this.$root.$emit(BV_SHOW_MODAL, this.modalId); }, + trackEvent(experimentName, eventName) { + const tracking = new ExperimentTracking(experimentName); + tracking.event(eventName); + }, closeModal() { - this.resetFields(); - this.$root.$emit(BV_HIDE_MODAL, this.modalId); + this.$refs.modal.hide(); }, sendInvite() { if (this.isInviteGroup) { @@ -165,9 +190,10 @@ export default { }, trackInvite() { if (this.source === INVITE_MEMBERS_IN_COMMENT) { - const tracking = new ExperimentTracking(INVITE_MEMBERS_IN_COMMENT); - tracking.event('comment_invite_success'); + this.trackEvent(INVITE_MEMBERS_IN_COMMENT, 'comment_invite_success'); } + + this.trackEvent(MEMBER_AREAS_OF_FOCUS.name, MEMBER_AREAS_OF_FOCUS.submit); }, resetFields() { this.isLoading = false; @@ -176,6 +202,7 @@ export default { this.newUsersToInvite = []; this.groupToBeSharedWith = {}; this.invalidFeedbackMessage = ''; + this.selectedAreasOfFocus = []; }, changeSelectedItem(item) { this.selectedAccessLevel = item; @@ -223,6 +250,7 @@ export default { email: usersToInviteByEmail, access_level: this.selectedAccessLevel, invite_source: this.source, + areas_of_focus: this.areasOfFocusForPost, }; }, addByUserIdPostData(usersToAddById) { @@ -231,6 +259,7 @@ export default { user_id: usersToAddById, access_level: this.selectedAccessLevel, invite_source: this.source, + areas_of_focus: this.areasOfFocusForPost, }; }, shareWithGroupPostData(groupToBeSharedWith) { @@ -304,18 +333,22 @@ export default { inviteButtonText: s__('InviteMembersModal|Invite'), cancelButtonText: s__('InviteMembersModal|Cancel'), headerCloseLabel: s__('InviteMembersModal|Close invite team members'), + areasOfFocusLabel: s__( + 'InviteMembersModal|What would you like new member(s) to focus on? (optional)', + ), }, membersTokenSelectLabelId: 'invite-members-input', }; </script> <template> <gl-modal + ref="modal" :modal-id="modalId" size="sm" data-qa-selector="invite_members_modal_content" :title="$options.labels[inviteeType].modalTitle" :header-close-label="$options.labels.headerCloseLabel" - @close="resetFields" + @hidden="resetFields" > <div> <p ref="introText"> @@ -351,7 +384,7 @@ export default { /> </gl-form-group> - <label class="gl-font-weight-bold gl-mt-3">{{ $options.labels.accessLevel }}</label> + <label class="gl-mt-3">{{ $options.labels.accessLevel }}</label> <div class="gl-mt-2 gl-w-half gl-xs-w-full"> <gl-dropdown class="gl-shadow-none gl-w-full" @@ -381,7 +414,7 @@ export default { </gl-sprintf> </div> - <label class="gl-font-weight-bold gl-mt-5 gl-display-block" for="expires_at">{{ + <label class="gl-mt-5 gl-display-block" for="expires_at">{{ $options.labels.accessExpireDate }}</label> <div class="gl-mt-2 gl-w-half gl-xs-w-full gl-display-inline-block"> @@ -400,6 +433,16 @@ export default { </template> </gl-datepicker> </div> + <div v-if="areasOfFocusEnabled"> + <label class="gl-mt-5"> + {{ $options.labels.areasOfFocusLabel }} + </label> + <gl-form-checkbox-group + v-model="selectedAreasOfFocus" + :options="areasOfFocusOptions" + data-testid="area-of-focus-checks" + /> + </div> </div> <template #modal-footer> diff --git a/app/assets/javascripts/invite_members/constants.js b/app/assets/javascripts/invite_members/constants.js index 83e6cac0ac0..01b35f2a656 100644 --- a/app/assets/javascripts/invite_members/constants.js +++ b/app/assets/javascripts/invite_members/constants.js @@ -3,6 +3,11 @@ import { __ } from '~/locale'; export const SEARCH_DELAY = 200; export const INVITE_MEMBERS_IN_COMMENT = 'invite_members_in_comment'; +export const MEMBER_AREAS_OF_FOCUS = { + name: 'member_areas_of_focus', + view: 'view', + submit: 'submit', +}; export const GROUP_FILTERS = { ALL: 'all', diff --git a/app/assets/javascripts/invite_members/init_invite_members_modal.js b/app/assets/javascripts/invite_members/init_invite_members_modal.js index 7501e9f4e6e..db7e2ca4a71 100644 --- a/app/assets/javascripts/invite_members/init_invite_members_modal.js +++ b/app/assets/javascripts/invite_members/init_invite_members_modal.js @@ -23,6 +23,8 @@ export default function initInviteMembersModal() { defaultAccessLevel: parseInt(el.dataset.defaultAccessLevel, 10), groupSelectFilter: el.dataset.groupsFilter, groupSelectParentId: parseInt(el.dataset.parentId, 10), + areasOfFocusOptions: JSON.parse(el.dataset.areasOfFocusOptions), + noSelectionAreasOfFocus: JSON.parse(el.dataset.noSelectionAreasOfFocus), }, }), }); |