Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

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.',
+);