diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-04 18:16:11 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-04 18:16:11 +0300 |
commit | 73e15fde38825a490903ef88933d8896585f3008 (patch) | |
tree | 9540de3751be70a2f101185c8f830452d3a2ad1d /app/assets/javascripts/invite_members | |
parent | 7150920cea6cdd82b9409d5757fa26dac66876d1 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/invite_members')
4 files changed, 73 insertions, 51 deletions
diff --git a/app/assets/javascripts/invite_members/components/invite_groups_modal.vue b/app/assets/javascripts/invite_members/components/invite_groups_modal.vue index 6598000c464..f266d978ffa 100644 --- a/app/assets/javascripts/invite_members/components/invite_groups_modal.vue +++ b/app/assets/javascripts/invite_members/components/invite_groups_modal.vue @@ -4,6 +4,7 @@ import Api from '~/api'; import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants'; import { GROUP_FILTERS, GROUP_MODAL_LABELS } from '../constants'; import eventHub from '../event_hub'; +import { getInvalidFeedbackMessage } from '../utils/get_invalid_feedback_message'; import GroupSelect from './group_select.vue'; import InviteModalBase from './invite_modal_base.vue'; @@ -55,6 +56,8 @@ export default { }, data() { return { + invalidFeedbackMessage: '', + isLoading: false, modalId: uniqueId('invite-groups-modal-'), groupToBeSharedWith: {}, }; @@ -83,13 +86,19 @@ export default { }); }, methods: { + showInvalidFeedbackMessage(response) { + this.invalidFeedbackMessage = getInvalidFeedbackMessage(response); + }, openModal() { this.$root.$emit(BV_SHOW_MODAL, this.modalId); }, closeModal() { this.$root.$emit(BV_HIDE_MODAL, this.modalId); }, - sendInvite({ onError, onSuccess, data: { accessLevel, expiresAt } }) { + sendInvite({ accessLevel, expiresAt }) { + this.invalidFeedbackMessage = ''; + this.isLoading = true; + const apiShareWithGroup = this.isProject ? Api.projectShareWithGroup.bind(Api) : Api.groupShareWithGroup.bind(Api); @@ -101,18 +110,27 @@ export default { expires_at: expiresAt, }) .then(() => { - onSuccess(); this.showSuccessMessage(); }) - .catch(onError); + .catch((e) => { + this.showInvalidFeedbackMessage(e); + }) + .finally(() => { + this.isLoading = false; + }); }, resetFields() { + this.invalidFeedbackMessage = ''; + this.isLoading = false; this.groupToBeSharedWith = {}; }, showSuccessMessage() { this.$toast.show(this.$options.labels.toastMessageSuccessful, this.toastOptions); this.closeModal(); }, + clearValidation() { + this.invalidFeedbackMessage = ''; + }, }, labels: GROUP_MODAL_LABELS, }; @@ -129,10 +147,12 @@ export default { :label-intro-text="labelIntroText" :label-search-field="$options.labels.searchField" :submit-disabled="inviteDisabled" + :invalid-feedback-message="invalidFeedbackMessage" + :is-loading="isLoading" @reset="resetFields" @submit="sendInvite" > - <template #select="{ clearValidation }"> + <template #select> <group-select v-model="groupToBeSharedWith" :access-levels="accessLevels" 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 6c0fc5caf26..be48a58d838 100644 --- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue +++ b/app/assets/javascripts/invite_members/components/invite_members_modal.vue @@ -21,6 +21,7 @@ import { } from '../constants'; import eventHub from '../event_hub'; import { responseMessageFromSuccess } from '../utils/response_message_parser'; +import { getInvalidFeedbackMessage } from '../utils/get_invalid_feedback_message'; import ModalConfetti from './confetti.vue'; import MembersTokenSelect from './members_token_select.vue'; @@ -84,6 +85,8 @@ export default { }, data() { return { + invalidFeedbackMessage: '', + isLoading: false, modalId: uniqueId('invite-members-modal-'), newUsersToInvite: [], selectedTasksToBeDone: [], @@ -152,6 +155,9 @@ export default { } }, methods: { + showInvalidFeedbackMessage(response) { + this.invalidFeedbackMessage = getInvalidFeedbackMessage(response); + }, partitionNewUsersToInvite() { const [usersToInviteByEmail, usersToAddById] = partition( this.newUsersToInvite, @@ -176,7 +182,10 @@ export default { const tracking = new ExperimentTracking(experimentName); tracking.event(eventName); }, - sendInvite({ onError, onSuccess, data: { accessLevel, expiresAt } }) { + sendInvite({ accessLevel, expiresAt }) { + this.isLoading = true; + this.invalidFeedbackMessage = ''; + const [usersToInviteByEmail, usersToAddById] = this.partitionNewUsersToInvite(); const promises = []; const baseData = { @@ -220,19 +229,17 @@ export default { const message = responseMessageFromSuccess(responses); if (message) { - onError({ - response: { - data: { - message, - }, - }, + this.showInvalidFeedbackMessage({ + response: { data: { message } }, }); } else { - onSuccess(); this.showSuccessMessage(); } }) - .catch(onError); + .catch((e) => this.showInvalidFeedbackMessage(e)) + .finally(() => { + this.isLoading = false; + }); }, trackinviteMembersForTask() { const label = 'selected_tasks_to_be_done'; @@ -241,6 +248,8 @@ export default { tracking.event(INVITE_MEMBERS_FOR_TASK.submit); }, resetFields() { + this.isLoading = false; + this.invalidFeedbackMessage = ''; this.newUsersToInvite = []; this.selectedTasksToBeDone = []; [this.selectedTaskProject] = this.projects; @@ -260,6 +269,9 @@ export default { onAccessLevelUpdate(val) { this.selectedAccessLevel = val; }, + clearValidation() { + this.invalidFeedbackMessage = ''; + }, }, labels: MEMBER_MODAL_LABELS, }; @@ -276,6 +288,8 @@ export default { :label-search-field="$options.labels.searchField" :form-group-description="$options.labels.placeHolder" :submit-disabled="inviteDisabled" + :invalid-feedback-message="invalidFeedbackMessage" + :is-loading="isLoading" @reset="resetFields" @submit="sendInvite" @access-level="onAccessLevelUpdate" @@ -288,7 +302,7 @@ export default { <span v-if="isCelebration">{{ $options.labels.modal.celebrate.intro }} </span> <modal-confetti v-if="isCelebration" /> </template> - <template #select="{ clearValidation, validationState, labelId }"> + <template #select="{ validationState, labelId }"> <members-token-select v-model="newUsersToInvite" class="gl-mb-2" diff --git a/app/assets/javascripts/invite_members/components/invite_modal_base.vue b/app/assets/javascripts/invite_members/components/invite_modal_base.vue index e92433e0ccf..69205d7d250 100644 --- a/app/assets/javascripts/invite_members/components/invite_modal_base.vue +++ b/app/assets/javascripts/invite_members/components/invite_modal_base.vue @@ -10,19 +10,15 @@ import { GlButton, GlFormInput, } from '@gitlab/ui'; -import { unescape } from 'lodash'; -import { sanitize } from '~/lib/dompurify'; import { sprintf } from '~/locale'; import { ACCESS_LEVEL, ACCESS_EXPIRE_DATE, - INVALID_FEEDBACK_MESSAGE_DEFAULT, READ_MORE_TEXT, INVITE_BUTTON_TEXT, CANCEL_BUTTON_TEXT, HEADER_CLOSE_LABEL, } from '../constants'; -import { responseMessageFromError } from '../utils/response_message_parser'; export default { components: { @@ -80,14 +76,22 @@ export default { required: false, default: false, }, + isLoading: { + type: Boolean, + required: false, + default: false, + }, + invalidFeedbackMessage: { + type: String, + required: false, + default: '', + }, }, data() { // Be sure to check out reset! return { - invalidFeedbackMessage: '', selectedAccessLevel: this.defaultAccessLevel, selectedDate: undefined, - isLoading: false, minDate: new Date(), }; }, @@ -116,16 +120,9 @@ export default { }, }, methods: { - showInvalidFeedbackMessage(response) { - const message = this.unescapeMsg(responseMessageFromError(response)); - - this.invalidFeedbackMessage = message || INVALID_FEEDBACK_MESSAGE_DEFAULT; - }, reset() { // This component isn't necessarily disposed, // so we might need to reset it's state. - this.isLoading = false; - this.invalidFeedbackMessage = ''; this.selectedAccessLevel = this.defaultAccessLevel; this.selectedDate = undefined; @@ -135,33 +132,15 @@ export default { this.reset(); this.$refs.modal.hide(); }, - clearValidation() { - this.invalidFeedbackMessage = ''; - }, changeSelectedItem(item) { this.selectedAccessLevel = item; }, submit() { - this.isLoading = true; - this.invalidFeedbackMessage = ''; - this.$emit('submit', { - onSuccess: () => { - this.isLoading = false; - }, - onError: (...args) => { - this.isLoading = false; - this.showInvalidFeedbackMessage(...args); - }, - data: { - accessLevel: this.selectedAccessLevel, - expiresAt: this.selectedDate, - }, + accessLevel: this.selectedAccessLevel, + expiresAt: this.selectedDate, }); }, - unescapeMsg(message) { - return unescape(sanitize(message, { ALLOWED_TAGS: [] })); - }, }, HEADER_CLOSE_LABEL, ACCESS_EXPIRE_DATE, @@ -204,10 +183,7 @@ export default { data-testid="members-form-group" > <label :id="selectLabelId" class="col-form-label">{{ labelSearchField }}</label> - <slot - name="select" - v-bind="{ clearValidation, validationState, labelId: selectLabelId }" - ></slot> + <slot name="select" v-bind="{ validationState, labelId: selectLabelId }"></slot> </gl-form-group> <label class="gl-font-weight-bold">{{ $options.ACCESS_LEVEL }}</label> diff --git a/app/assets/javascripts/invite_members/utils/get_invalid_feedback_message.js b/app/assets/javascripts/invite_members/utils/get_invalid_feedback_message.js new file mode 100644 index 00000000000..62f66d009dc --- /dev/null +++ b/app/assets/javascripts/invite_members/utils/get_invalid_feedback_message.js @@ -0,0 +1,12 @@ +import { unescape } from 'lodash'; +import { sanitize } from '~/lib/dompurify'; +import { INVALID_FEEDBACK_MESSAGE_DEFAULT } from '../constants'; +import { responseMessageFromError } from './response_message_parser'; + +const unescapeMsg = (message) => unescape(sanitize(message, { ALLOWED_TAGS: [] })); + +export const getInvalidFeedbackMessage = (response) => { + const message = unescapeMsg(responseMessageFromError(response)); + + return message || INVALID_FEEDBACK_MESSAGE_DEFAULT; +}; |