Add latest changes from gitlab-org/gitlab@master

3 files changed, 44 insertions, 3 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 b71cfbb6112..674058bcaf0 100644
--- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue
+++ b/app/assets/javascripts/invite_members/components/invite_members_modal.vue
@@ -356,7 +356,7 @@ export default {
         data-testid="alert-member-error"
       >
         {{ $options.labels.memberErrorListText }}
-        <ul class="gl-pl-5">
+        <ul class="gl-pl-5 gl-mb-0">
           <li v-for="(error, member) in invalidMembers" :key="member">
             <strong>{{ tokenName(member) }}:</strong> {{ error }}
           </li>
diff --git a/app/assets/javascripts/invite_members/components/members_token_select.vue b/app/assets/javascripts/invite_members/components/members_token_select.vue
index b2bcb9a5906..2ddb04e1eeb 100644
--- a/app/assets/javascripts/invite_members/components/members_token_select.vue
+++ b/app/assets/javascripts/invite_members/components/members_token_select.vue
@@ -1,10 +1,16 @@
 <script>
 import { GlTokenSelector, GlAvatar, GlAvatarLabeled, GlIcon, GlSprintf } from '@gitlab/ui';
-import { debounce } from 'lodash';
+import { debounce, isEmpty } from 'lodash';
 import { __ } from '~/locale';
 import { getUsers } from '~/rest_api';
 import { memberName } from '../utils/member_utils';
-import { SEARCH_DELAY, USERS_FILTER_ALL, USERS_FILTER_SAML_PROVIDER_ID } from '../constants';
+import {
+  SEARCH_DELAY,
+  USERS_FILTER_ALL,
+  USERS_FILTER_SAML_PROVIDER_ID,
+  VALID_TOKEN_BACKGROUND,
+  INVALID_TOKEN_BACKGROUND,
+} from '../constants';
 
 export default {
   components: {
@@ -75,6 +81,25 @@ export default {
       }
       return this.$options.defaultQueryOptions;
     },
+    hasInvalidMembers() {
+      return !isEmpty(this.invalidMembers);
+    },
+  },
+  watch: {
+    // We might not really want this to be *reactive* since we want the "class" state to be
+    // tied to the specific `selectedToken` such that if the token is removed and re-added, this
+    // state is reset.
+    // See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/90076#note_1027165312
+    hasInvalidMembers: {
+      handler(updatedInvalidMembers) {
+        // Only update tokens if we receive invalid members
+        if (!updatedInvalidMembers) {
+          return;
+        }
+
+        this.updateTokenClasses();
+      },
+    },
   },
   methods: {
     handleTextInput(query) {
@@ -83,6 +108,12 @@ export default {
       this.loading = true;
       this.retrieveUsers(query);
     },
+    updateTokenClasses() {
+      this.selectedTokens = this.selectedTokens.map((token) => ({
+        ...token,
+        class: this.tokenClass(token),
+      }));
+    },
     retrieveUsers: debounce(function debouncedRetrieveUsers() {
       return getUsers(this.query, this.queryOptions)
         .then((response) => {
@@ -98,6 +129,14 @@ export default {
           this.loading = false;
         });
     }, SEARCH_DELAY),
+    tokenClass(token) {
+      if (this.hasError(token)) {
+        return INVALID_TOKEN_BACKGROUND;
+      }
+
+      // assume success for this token
+      return VALID_TOKEN_BACKGROUND;
+    },
     handleInput() {
       this.$emit('input', this.selectedTokens);
     },
diff --git a/app/assets/javascripts/invite_members/constants.js b/app/assets/javascripts/invite_members/constants.js
index 6141e5e9e0b..f5187a3ef0c 100644
--- a/app/assets/javascripts/invite_members/constants.js
+++ b/app/assets/javascripts/invite_members/constants.js
@@ -2,6 +2,8 @@ import { s__ } from '~/locale';
 
 export const CLOSE_TO_LIMIT_COUNT = 2;
 export const SEARCH_DELAY = 200;
+export const VALID_TOKEN_BACKGROUND = 'gl-bg-green-100';
+export const INVALID_TOKEN_BACKGROUND = 'gl-bg-red-100';
 export const INVITE_MEMBERS_FOR_TASK = {
   minimum_access_level: 30,
   name: 'invite_members_for_task',