Skip to content
Snippets Groups Projects

Add a user overage modal

Merged Diana Zubova requested to merge dz/348486-add-second-modal into master
12 files
+ 359
22
Compare changes
  • Side-by-side
  • Inline
Files
12
@@ -13,18 +13,22 @@ 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,
overageModalInfoText,
overageModalInfoWarning,
} from '../constants';
import eventHub from '../event_hub';
import {
@@ -53,6 +57,7 @@ export default {
GroupSelect,
ModalConfetti,
},
mixins: [glFeatureFlagsMixin()],
inject: ['newProjectPath'],
props: {
id: {
@@ -107,6 +112,11 @@ export default {
type: Array,
required: true,
},
subscriptionSeats: {
type: Number,
required: false,
default: 10,
},
},
data() {
return {
@@ -123,6 +133,8 @@ export default {
invalidFeedbackMessage: '',
isLoading: false,
mode: 'default',
hasOverage: false,
totalUserCount: null,
};
},
computed: {
@@ -205,6 +217,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) => {
@@ -235,6 +263,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);
},
@@ -253,6 +283,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(',');
@@ -373,6 +416,13 @@ export default {
},
},
labels: MODAL_LABELS,
i18n: {
infoText: overageModalInfoText,
infoWarning: overageModalInfoWarning,
url: OVERAGE_MODAL_LINK,
buttonLabel: __('Back'),
linkText: __('Learn more.'),
},
membersTokenSelectLabelId: 'invite-members-input',
};
</script>
@@ -389,9 +439,11 @@ export default {
@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">
@@ -533,21 +585,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>
Loading