diff options
Diffstat (limited to 'app/assets/javascripts/invite_members')
5 files changed, 77 insertions, 11 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 7857b9d86d2..d597c7e53bb 100644 --- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue +++ b/app/assets/javascripts/invite_members/components/invite_members_modal.vue @@ -14,6 +14,7 @@ import ExperimentTracking from '~/experimentation/experiment_tracking'; import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants'; import { getParameterValues } from '~/lib/utils/url_utility'; import { + CLOSE_TO_LIMIT_COUNT, USERS_FILTER_ALL, INVITE_MEMBERS_FOR_TASK, MEMBER_MODAL_LABELS, @@ -151,6 +152,16 @@ export default { isOnLearnGitlab() { return this.source === LEARN_GITLAB; }, + closeToLimit() { + if (this.usersLimitDataset.freeUsersLimit && this.usersLimitDataset.membersCount) { + return ( + this.usersLimitDataset.membersCount >= + this.usersLimitDataset.freeUsersLimit - CLOSE_TO_LIMIT_COUNT + ); + } + + return false; + }, reachedLimit() { if (this.usersLimitDataset.freeUsersLimit && this.usersLimitDataset.membersCount) { return this.usersLimitDataset.membersCount >= this.usersLimitDataset.freeUsersLimit; @@ -297,6 +308,7 @@ export default { :is-loading="isLoading" :new-users-to-invite="newUsersToInvite" :root-group-id="rootId" + :close-to-limit="closeToLimit" :reached-limit="reachedLimit" :users-limit-dataset="usersLimitDataset" @reset="resetFields" @@ -314,6 +326,7 @@ export default { <template #user-limit-notification> <user-limit-notification + :close-to-limit="closeToLimit" :reached-limit="reachedLimit" :users-limit-dataset="usersLimitDataset" /> diff --git a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue index 79b192e2495..42645110e48 100644 --- a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue +++ b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue @@ -2,7 +2,11 @@ import { GlButton, GlLink, GlIcon } from '@gitlab/ui'; import { s__ } from '~/locale'; import eventHub from '../event_hub'; -import { TRIGGER_ELEMENT_BUTTON, TRIGGER_ELEMENT_SIDE_NAV } from '../constants'; +import { + TRIGGER_ELEMENT_BUTTON, + TRIGGER_ELEMENT_SIDE_NAV, + TRIGGER_DEFAULT_QA_SELECTOR, +} from '../constants'; export default { components: { GlButton, GlLink, GlIcon }, @@ -46,12 +50,17 @@ export default { required: false, default: '', }, + qaSelector: { + type: String, + required: false, + default: TRIGGER_DEFAULT_QA_SELECTOR, + }, }, computed: { componentAttributes() { const baseAttributes = { class: this.classes, - 'data-qa-selector': 'invite_members_button', + 'data-qa-selector': this.qaSelector, 'data-test-id': 'invite-members-button', }; 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 33d37b809c2..90d266c3155 100644 --- a/app/assets/javascripts/invite_members/components/invite_modal_base.vue +++ b/app/assets/javascripts/invite_members/components/invite_modal_base.vue @@ -131,6 +131,11 @@ export default { required: false, default: false, }, + closeToLimit: { + type: Boolean, + required: false, + default: false, + }, reachedLimit: { type: Boolean, required: false, @@ -183,6 +188,17 @@ export default { actionCancel() { if (this.reachedLimit && this.usersLimitDataset.userNamespace) return undefined; + if (this.closeToLimit && this.usersLimitDataset.userNamespace) { + return { + text: INVITE_BUTTON_TEXT_DISABLED, + attributes: { + href: this.usersLimitDataset.membersPath, + category: 'secondary', + variant: 'confirm', + }, + }; + } + return { text: this.reachedLimit ? CANCEL_BUTTON_TEXT_DISABLED : this.cancelButtonText, ...(this.reachedLimit && { attributes: { href: this.usersLimitDataset.purchasePath } }), diff --git a/app/assets/javascripts/invite_members/components/user_limit_notification.vue b/app/assets/javascripts/invite_members/components/user_limit_notification.vue index ea5f4317d86..ae5c3c11386 100644 --- a/app/assets/javascripts/invite_members/components/user_limit_notification.vue +++ b/app/assets/javascripts/invite_members/components/user_limit_notification.vue @@ -8,15 +8,20 @@ import { REACHED_LIMIT_MESSAGE, REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE, CLOSE_TO_LIMIT_MESSAGE, + CLOSE_TO_LIMIT_MESSAGE_PERSONAL_NAMESPACE, + DANGER_ALERT_TITLE_PERSONAL_NAMESPACE, + WARNING_ALERT_TITLE_PERSONAL_NAMESPACE, } from '../constants'; -const CLOSE_TO_LIMIT_COUNT = 2; - export default { name: 'UserLimitNotification', components: { GlAlert, GlSprintf, GlLink }, inject: ['name'], props: { + closeToLimit: { + type: Boolean, + required: true, + }, reachedLimit: { type: Boolean, required: true, @@ -40,14 +45,14 @@ export default { purchasePath() { return this.usersLimitDataset.purchasePath; }, - closeToLimit() { - if (this.freeUsersLimit && this.membersCount) { - return this.membersCount >= this.freeUsersLimit - CLOSE_TO_LIMIT_COUNT; + warningAlertTitle() { + if (this.usersLimitDataset.userNamespace) { + return sprintf(WARNING_ALERT_TITLE_PERSONAL_NAMESPACE, { + count: this.freeUsersLimit - this.membersCount, + members: this.pluralMembers(this.freeUsersLimit - this.membersCount), + }); } - return false; - }, - warningAlertTitle() { return sprintf(WARNING_ALERT_TITLE, { count: this.freeUsersLimit - this.membersCount, members: this.pluralMembers(this.freeUsersLimit - this.membersCount), @@ -55,6 +60,13 @@ export default { }); }, dangerAlertTitle() { + if (this.usersLimitDataset.userNamespace) { + return sprintf(DANGER_ALERT_TITLE_PERSONAL_NAMESPACE, { + count: this.freeUsersLimit, + members: this.pluralMembers(this.freeUsersLimit), + }); + } + return sprintf(DANGER_ALERT_TITLE, { count: this.freeUsersLimit, members: this.pluralMembers(this.freeUsersLimit), @@ -79,6 +91,10 @@ export default { return this.reachedLimitMessage; } + if (this.usersLimitDataset.userNamespace) { + return this.$options.i18n.closeToLimitMessagePersonalNamespace; + } + return this.$options.i18n.closeToLimitMessage; }, }, @@ -91,6 +107,7 @@ export default { reachedLimitMessage: REACHED_LIMIT_MESSAGE, reachedLimitUpgradeSuggestionMessage: REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE, closeToLimitMessage: CLOSE_TO_LIMIT_MESSAGE, + closeToLimitMessagePersonalNamespace: CLOSE_TO_LIMIT_MESSAGE_PERSONAL_NAMESPACE, }, }; </script> diff --git a/app/assets/javascripts/invite_members/constants.js b/app/assets/javascripts/invite_members/constants.js index 928f79f1c8d..beb8f5b5aab 100644 --- a/app/assets/javascripts/invite_members/constants.js +++ b/app/assets/javascripts/invite_members/constants.js @@ -1,7 +1,7 @@ import { s__ } from '~/locale'; +export const CLOSE_TO_LIMIT_COUNT = 2; export const SEARCH_DELAY = 200; - export const INVITE_MEMBERS_FOR_TASK = { minimum_access_level: 30, name: 'invite_members_for_task', @@ -18,6 +18,7 @@ export const USERS_FILTER_ALL = 'all'; export const USERS_FILTER_SAML_PROVIDER_ID = 'saml_provider_id'; export const TRIGGER_ELEMENT_BUTTON = 'button'; export const TRIGGER_ELEMENT_SIDE_NAV = 'side-nav'; +export const TRIGGER_DEFAULT_QA_SELECTOR = 'invite_members_button'; export const MEMBERS_MODAL_DEFAULT_TITLE = s__('InviteMembersModal|Invite members'); export const MEMBERS_MODAL_CELEBRATE_TITLE = s__( 'InviteMembersModal|GitLab is better with colleagues!', @@ -131,10 +132,17 @@ export const ON_SUBMIT_TRACK_LABEL = 'manage_members_clicked'; export const WARNING_ALERT_TITLE = s__( 'InviteMembersModal|You only have space for %{count} more %{members} in %{name}', ); +export const WARNING_ALERT_TITLE_PERSONAL_NAMESPACE = s__( + 'InviteMembersModal|You only have space for %{count} more %{members} in your personal projects', +); export const DANGER_ALERT_TITLE = s__( "InviteMembersModal|You've reached your %{count} %{members} limit for %{name}", ); +export const DANGER_ALERT_TITLE_PERSONAL_NAMESPACE = s__( + "InviteMembersModal|You've reached your %{count} %{members} limit for your personal projects", +); + export const REACHED_LIMIT_MESSAGE = s__( 'InviteMembersModal|You cannot add more members, but you can remove members who no longer need access.', ); @@ -148,3 +156,6 @@ export const REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE = REACHED_LIMIT_MESSAGE.co export const CLOSE_TO_LIMIT_MESSAGE = s__( 'InviteMembersModal|To get more members an owner of this namespace can %{trialLinkStart}start a trial%{trialLinkEnd} or %{upgradeLinkStart}upgrade%{upgradeLinkEnd} to a paid tier.', ); +export const CLOSE_TO_LIMIT_MESSAGE_PERSONAL_NAMESPACE = s__( + 'InviteMembersModal|To make more space, you can remove members who no longer need access.', +); |