diff options
Diffstat (limited to 'app/assets/javascripts/invite_members/components/members_token_select.vue')
-rw-r--r-- | app/assets/javascripts/invite_members/components/members_token_select.vue | 43 |
1 files changed, 41 insertions, 2 deletions
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); }, |