Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

1 files changed, 110 insertions, 61 deletions

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 d9297614a7e..33d37b809c2 100644
--- a/app/assets/javascripts/invite_members/components/invite_modal_base.vue
+++ b/app/assets/javascripts/invite_members/components/invite_modal_base.vue
@@ -8,7 +8,9 @@ import {
   GlLink,
   GlSprintf,
   GlFormInput,
+  GlIcon,
 } from '@gitlab/ui';
+import Tracking from '~/tracking';
 import { sprintf } from '~/locale';
 import ContentTransition from '~/vue_shared/components/content_transition.vue';
 import {
@@ -16,8 +18,13 @@ import {
   ACCESS_EXPIRE_DATE,
   READ_MORE_TEXT,
   INVITE_BUTTON_TEXT,
+  INVITE_BUTTON_TEXT_DISABLED,
   CANCEL_BUTTON_TEXT,
+  CANCEL_BUTTON_TEXT_DISABLED,
   HEADER_CLOSE_LABEL,
+  ON_SHOW_TRACK_LABEL,
+  ON_CLOSE_TRACK_LABEL,
+  ON_SUBMIT_TRACK_LABEL,
 } from '../constants';
 
 const DEFAULT_SLOT = 'default';
@@ -41,8 +48,10 @@ export default {
     GlDropdownItem,
     GlSprintf,
     GlFormInput,
+    GlIcon,
     ContentTransition,
   },
+  mixins: [Tracking.mixin()],
   inheritAttrs: false,
   props: {
     modalTitle: {
@@ -122,6 +131,16 @@ export default {
       required: false,
       default: false,
     },
+    reachedLimit: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    usersLimitDataset: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     // Be sure to check out reset!
@@ -151,20 +170,27 @@ export default {
     },
     actionPrimary() {
       return {
-        text: this.submitButtonText,
+        text: this.reachedLimit ? INVITE_BUTTON_TEXT_DISABLED : this.submitButtonText,
         attributes: {
           variant: 'confirm',
-          disabled: this.submitDisabled,
-          loading: this.isLoading,
+          disabled: this.reachedLimit ? false : this.submitDisabled,
+          loading: this.reachedLimit ? false : this.isLoading,
           'data-qa-selector': 'invite_button',
+          ...(this.reachedLimit && { href: this.usersLimitDataset.membersPath }),
         },
       };
     },
     actionCancel() {
+      if (this.reachedLimit && this.usersLimitDataset.userNamespace) return undefined;
+
       return {
-        text: this.cancelButtonText,
+        text: this.reachedLimit ? CANCEL_BUTTON_TEXT_DISABLED : this.cancelButtonText,
+        ...(this.reachedLimit && { attributes: { href: this.usersLimitDataset.purchasePath } }),
       };
     },
+    selectLabelClass() {
+      return `col-form-label ${this.reachedLimit ? 'gl-text-gray-500' : ''}`;
+    },
   },
   watch: {
     selectedAccessLevel: {
@@ -183,15 +209,24 @@ export default {
 
       this.$emit('reset');
     },
+    onShowModal() {
+      if (this.reachedLimit) {
+        this.track('render', { category: 'default', label: ON_SHOW_TRACK_LABEL });
+      }
+    },
     onCloseModal(e) {
-      if (this.preventCancelDefault) {
+      if (this.preventCancelDefault || this.reachedLimit) {
         e.preventDefault();
       } else {
         this.onReset();
         this.$refs.modal.hide();
       }
 
-      this.$emit('cancel');
+      if (this.reachedLimit) {
+        this.track('click_button', { category: 'default', label: ON_CLOSE_TRACK_LABEL });
+      } else {
+        this.$emit('cancel');
+      }
     },
     changeSelectedItem(item) {
       this.selectedAccessLevel = item;
@@ -200,10 +235,14 @@ export default {
       // We never want to hide when submitting
       e.preventDefault();
 
-      this.$emit('submit', {
-        accessLevel: this.selectedAccessLevel,
-        expiresAt: this.selectedDate,
-      });
+      if (this.reachedLimit) {
+        this.track('click_button', { category: 'default', label: ON_SUBMIT_TRACK_LABEL });
+      } else {
+        this.$emit('submit', {
+          accessLevel: this.selectedAccessLevel,
+          expiresAt: this.selectedDate,
+        });
+      }
     },
   },
   HEADER_CLOSE_LABEL,
@@ -227,6 +266,7 @@ export default {
     :header-close-label="$options.HEADER_CLOSE_LABEL"
     :action-primary="actionPrimary"
     :action-cancel="actionCancel"
+    @shown="onShowModal"
     @primary="onSubmit"
     @cancel="onCloseModal"
     @hidden="onReset"
@@ -255,64 +295,73 @@ export default {
         <gl-form-group
           :invalid-feedback="invalidFeedbackMessage"
           :state="validationState"
-          :description="formGroupDescription"
           data-testid="members-form-group"
         >
-          <label :id="selectLabelId" class="col-form-label">{{ labelSearchField }}</label>
-          <slot name="select" v-bind="{ validationState, labelId: selectLabelId }"></slot>
+          <template #description>
+            <gl-icon v-if="reachedLimit" name="lock" />
+            {{ formGroupDescription }}
+          </template>
+
+          <label :id="selectLabelId" :class="selectLabelClass">{{ labelSearchField }}</label>
+          <gl-form-input v-if="reachedLimit" data-testid="disabled-input" disabled />
+          <slot v-else name="select" v-bind="{ validationState, labelId: selectLabelId }"></slot>
         </gl-form-group>
 
-        <label class="gl-font-weight-bold">{{ $options.ACCESS_LEVEL }}</label>
-        <div class="gl-mt-2 gl-w-half gl-xs-w-full">
-          <gl-dropdown
-            class="gl-shadow-none gl-w-full"
-            data-qa-selector="access_level_dropdown"
-            v-bind="$attrs"
-            :text="selectedRoleName"
-          >
-            <template v-for="(key, item) in accessLevels">
-              <gl-dropdown-item
-                :key="key"
-                active-class="is-active"
-                is-check-item
-                :is-checked="key === selectedAccessLevel"
-                @click="changeSelectedItem(key)"
-              >
-                <div>{{ item }}</div>
-              </gl-dropdown-item>
-            </template>
-          </gl-dropdown>
-        </div>
+        <template v-if="!reachedLimit">
+          <label class="gl-font-weight-bold">{{ $options.ACCESS_LEVEL }}</label>
 
-        <div class="gl-mt-2 gl-w-half gl-xs-w-full">
-          <gl-sprintf :message="$options.READ_MORE_TEXT">
-            <template #link="{ content }">
-              <gl-link :href="helpLink" target="_blank">{{ content }}</gl-link>
-            </template>
-          </gl-sprintf>
-        </div>
+          <div class="gl-mt-2 gl-w-half gl-xs-w-full">
+            <gl-dropdown
+              class="gl-shadow-none gl-w-full"
+              data-qa-selector="access_level_dropdown"
+              v-bind="$attrs"
+              :text="selectedRoleName"
+            >
+              <template v-for="(key, item) in accessLevels">
+                <gl-dropdown-item
+                  :key="key"
+                  active-class="is-active"
+                  is-check-item
+                  :is-checked="key === selectedAccessLevel"
+                  @click="changeSelectedItem(key)"
+                >
+                  <div>{{ item }}</div>
+                </gl-dropdown-item>
+              </template>
+            </gl-dropdown>
+          </div>
 
-        <label class="gl-mt-5 gl-display-block" for="expires_at">{{
-          $options.ACCESS_EXPIRE_DATE
-        }}</label>
-        <div class="gl-mt-2 gl-w-half gl-xs-w-full gl-display-inline-block">
-          <gl-datepicker
-            v-model="selectedDate"
-            class="gl-display-inline!"
-            :min-date="minDate"
-            :target="null"
-          >
-            <template #default="{ formattedDate }">
-              <gl-form-input
-                class="gl-w-full"
-                :value="formattedDate"
-                :placeholder="__(`YYYY-MM-DD`)"
-              />
-            </template>
-          </gl-datepicker>
-        </div>
-        <slot name="form-after"></slot>
+          <div class="gl-mt-2 gl-w-half gl-xs-w-full">
+            <gl-sprintf :message="$options.READ_MORE_TEXT">
+              <template #link="{ content }">
+                <gl-link :href="helpLink" target="_blank">{{ content }}</gl-link>
+              </template>
+            </gl-sprintf>
+          </div>
+
+          <label class="gl-mt-5 gl-display-block" for="expires_at">{{
+            $options.ACCESS_EXPIRE_DATE
+          }}</label>
+          <div class="gl-mt-2 gl-w-half gl-xs-w-full gl-display-inline-block">
+            <gl-datepicker
+              v-model="selectedDate"
+              class="gl-display-inline!"
+              :min-date="minDate"
+              :target="null"
+            >
+              <template #default="{ formattedDate }">
+                <gl-form-input
+                  class="gl-w-full"
+                  :value="formattedDate"
+                  :placeholder="__(`YYYY-MM-DD`)"
+                />
+              </template>
+            </gl-datepicker>
+          </div>
+          <slot name="form-after"></slot>
+        </template>
       </template>
+
       <template v-for="{ key } in extraSlots" #[key]>
         <slot :name="key"></slot>
       </template>