diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue')
| -rw-r--r-- | app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue | 116 |
1 files changed, 67 insertions, 49 deletions
diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue index 2b9804796ae..4b39a8e45bb 100644 --- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue +++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue @@ -9,23 +9,31 @@ import { GlButton, GlAvatarLabeled, } from '@gitlab/ui'; -import { __ } from '~/locale'; import { glEmojiTag } from '~/emoji'; import createFlash from '~/flash'; import { followUser, unfollowUser } from '~/rest_api'; import { isUserBusy } from '~/set_status_modal/utils'; import Tracking from '~/tracking'; -import { USER_POPOVER_DELAY } from './constants'; +import { + I18N_ERROR_FOLLOW, + I18N_ERROR_UNFOLLOW, + I18N_USER_BLOCKED, + I18N_USER_BUSY, + I18N_USER_LEARN, + I18N_USER_FOLLOW, + I18N_USER_UNFOLLOW, + USER_POPOVER_DELAY, +} from './constants'; const MAX_SKELETON_LINES = 4; export default { name: 'UserPopover', maxSkeletonLines: MAX_SKELETON_LINES, + I18N_USER_BLOCKED, + I18N_USER_BUSY, + I18N_USER_LEARN, USER_POPOVER_DELAY, - i18n: { - busy: __('Busy'), - }, components: { GlIcon, GlLink, @@ -94,7 +102,7 @@ export default { toggleFollowButtonText() { if (this.toggleFollowLoading) return null; - return this.user?.isFollowed ? __('Unfollow') : __('Follow'); + return this.user?.isFollowed ? I18N_USER_UNFOLLOW : I18N_USER_FOLLOW; }, toggleFollowButtonVariant() { return this.user?.isFollowed ? 'default' : 'confirm'; @@ -102,6 +110,9 @@ export default { hasPronouns() { return Boolean(this.user?.pronouns?.trim()); }, + isBlocked() { + return this.user?.state === 'blocked'; + }, isBusy() { return isUserBusy(this.availabilityStatus); }, @@ -129,7 +140,7 @@ export default { this.$emit('follow'); } catch (error) { createFlash({ - message: __('An error occurred while trying to follow this user, please try again.'), + message: I18N_ERROR_FOLLOW, error, captureError: true, }); @@ -149,7 +160,7 @@ export default { this.$emit('unfollow'); } catch (error) { createFlash({ - message: __('An error occurred while trying to unfollow this user, please try again.'), + message: I18N_ERROR_UNFOLLOW, error, captureError: true, }); @@ -189,16 +200,21 @@ export default { :label="user.name" :sub-label="username" > - <gl-button - v-if="shouldRenderToggleFollowButton" - class="gl-mt-3 gl-align-self-start" - :variant="toggleFollowButtonVariant" - :loading="toggleFollowLoading" - size="small" - data-testid="toggle-follow-button" - @click="toggleFollow" - >{{ toggleFollowButtonText }}</gl-button - > + <template v-if="isBlocked"> + <span class="gl-mt-4 gl-font-style-italic">{{ $options.I18N_USER_BLOCKED }}</span> + </template> + <template v-else> + <gl-button + v-if="shouldRenderToggleFollowButton" + class="gl-mt-3 gl-align-self-start" + :variant="toggleFollowButtonVariant" + :loading="toggleFollowLoading" + size="small" + data-testid="toggle-follow-button" + @click="toggleFollow" + >{{ toggleFollowButtonText }}</gl-button + > + </template> <template #meta> <span @@ -208,7 +224,7 @@ export default { >({{ user.pronouns }})</span > <span v-if="isBusy" class="gl-text-gray-500 gl-font-sm gl-font-weight-normal gl-p-1" - >({{ $options.i18n.busy }})</span + >({{ $options.I18N_USER_BUSY }})</span > </template> </gl-avatar-labeled> @@ -223,39 +239,41 @@ export default { /> </template> <template v-else> - <div class="gl-text-gray-500"> - <div v-if="user.bio" class="gl-display-flex gl-mb-2"> - <gl-icon name="profile" class="gl-flex-shrink-0" /> - <span ref="bio" class="gl-ml-2">{{ user.bio }}</span> + <template v-if="!isBlocked"> + <div class="gl-text-gray-500"> + <div v-if="user.bio" class="gl-display-flex gl-mb-2"> + <gl-icon name="profile" class="gl-flex-shrink-0" /> + <span ref="bio" class="gl-ml-2">{{ user.bio }}</span> + </div> + <div v-if="user.workInformation" class="gl-display-flex gl-mb-2"> + <gl-icon name="work" class="gl-flex-shrink-0" /> + <span ref="workInformation" class="gl-ml-2">{{ user.workInformation }}</span> + </div> + <div v-if="user.location" class="gl-display-flex gl-mb-2"> + <gl-icon name="location" class="gl-flex-shrink-0" /> + <span class="gl-ml-2">{{ user.location }}</span> + </div> + <div + v-if="user.localTime && !user.bot" + class="gl-display-flex gl-mb-2" + data-testid="user-popover-local-time" + > + <gl-icon name="clock" class="gl-flex-shrink-0" /> + <span class="gl-ml-2">{{ user.localTime }}</span> + </div> </div> - <div v-if="user.workInformation" class="gl-display-flex gl-mb-2"> - <gl-icon name="work" class="gl-flex-shrink-0" /> - <span ref="workInformation" class="gl-ml-2">{{ user.workInformation }}</span> + <div v-if="statusHtml" class="gl-mb-2" data-testid="user-popover-status"> + <span v-safe-html:[$options.safeHtmlConfig]="statusHtml"></span> </div> - <div v-if="user.location" class="gl-display-flex gl-mb-2"> - <gl-icon name="location" class="gl-flex-shrink-0" /> - <span class="gl-ml-2">{{ user.location }}</span> + <div v-if="user.bot && user.websiteUrl" class="gl-text-blue-500"> + <gl-icon name="question" /> + <gl-link data-testid="user-popover-bot-docs-link" :href="user.websiteUrl"> + <gl-sprintf :message="$options.I18N_USER_LEARN"> + <template #name>{{ user.name }}</template> + </gl-sprintf> + </gl-link> </div> - <div - v-if="user.localTime && !user.bot" - class="gl-display-flex gl-mb-2" - data-testid="user-popover-local-time" - > - <gl-icon name="clock" class="gl-flex-shrink-0" /> - <span class="gl-ml-2">{{ user.localTime }}</span> - </div> - </div> - <div v-if="statusHtml" class="gl-mb-2" data-testid="user-popover-status"> - <span v-safe-html:[$options.safeHtmlConfig]="statusHtml"></span> - </div> - <div v-if="user.bot && user.websiteUrl" class="gl-text-blue-500"> - <gl-icon name="question" /> - <gl-link data-testid="user-popover-bot-docs-link" :href="user.websiteUrl"> - <gl-sprintf :message="__('Learn more about %{username}')"> - <template #username>{{ user.name }}</template> - </gl-sprintf> - </gl-link> - </div> + </template> </template> </div> </gl-popover> |