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 | 24 |
1 files changed, 22 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 db6a7888786..7aece3b7bb4 100644 --- a/app/assets/javascripts/invite_members/components/members_token_select.vue +++ b/app/assets/javascripts/invite_members/components/members_token_select.vue @@ -1,5 +1,5 @@ <script> -import { GlTokenSelector, GlAvatar, GlAvatarLabeled, GlSprintf } from '@gitlab/ui'; +import { GlTokenSelector, GlAvatar, GlAvatarLabeled, GlIcon, GlSprintf } from '@gitlab/ui'; import { debounce } from 'lodash'; import { __ } from '~/locale'; import { getUsers } from '~/rest_api'; @@ -10,6 +10,7 @@ export default { GlTokenSelector, GlAvatar, GlAvatarLabeled, + GlIcon, GlSprintf, }, props: { @@ -22,6 +23,11 @@ export default { type: String, required: true, }, + validationState: { + type: Boolean, + required: false, + default: null, + }, }, data() { return { @@ -84,6 +90,13 @@ export default { this.hasBeenFocused = true; }, + handleTokenRemove() { + if (this.selectedTokens.length) { + return; + } + + this.$emit('clear'); + }, }, queryOptions: { exclude_internal: true, active: true }, i18n: { @@ -95,19 +108,26 @@ export default { <template> <gl-token-selector v-model="selectedTokens" + :state="validationState" :dropdown-items="users" :loading="loading" :allow-user-defined-tokens="emailIsValid" :hide-dropdown-with-no-items="hideDropdownWithNoItems" :placeholder="placeholderText" :aria-labelledby="ariaLabelledby" + :text-input-attrs="{ + 'data-testid': 'members-token-select-input', + 'data-qa-selector': 'members_token_select_input', + }" @blur="handleBlur" @text-input="handleTextInput" @input="handleInput" @focus="handleFocus" + @token-remove="handleTokenRemove" > <template #token-content="{ token }"> - <gl-avatar v-if="token.avatar_url" :src="token.avatar_url" :size="16" /> + <gl-icon v-if="validationState === false" name="error" :size="16" class="gl-mr-2" /> + <gl-avatar v-else-if="token.avatar_url" :src="token.avatar_url" :size="16" /> {{ token.name }} </template> |