diff options
Diffstat (limited to 'app/assets/javascripts/notes/components/note_header.vue')
-rw-r--r-- | app/assets/javascripts/notes/components/note_header.vue | 28 |
1 files changed, 22 insertions, 6 deletions
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue index a13a0dbbf30..cacf209ed81 100644 --- a/app/assets/javascripts/notes/components/note_header.vue +++ b/app/assets/javascripts/notes/components/note_header.vue @@ -1,7 +1,8 @@ <script> /* eslint-disable vue/no-v-html */ import { mapActions } from 'vuex'; -import { GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlIcon, GlLoadingIcon, GlTooltipDirective, GlSprintf } from '@gitlab/ui'; +import { isUserBusy } from '~/set_status_modal/utils'; import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; export default { @@ -11,6 +12,7 @@ export default { import('ee_component/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue'), GlIcon, GlLoadingIcon, + GlSprintf, }, directives: { GlTooltip: GlTooltipDirective, @@ -65,8 +67,8 @@ export default { }; }, computed: { - toggleChevronClass() { - return this.expanded ? 'fa-chevron-up' : 'fa-chevron-down'; + toggleChevronIconName() { + return this.expanded ? 'chevron-up' : 'chevron-down'; }, noteTimestampLink() { return this.noteId ? `#note_${this.noteId}` : undefined; @@ -85,9 +87,16 @@ export default { authorStatus() { return this.author.status_tooltip_html; }, + authorIsBusy() { + const { status } = this.author; + return status?.availability && isUserBusy(status.availability); + }, emojiElement() { return this.$refs?.authorStatus?.querySelector('gl-emoji'); }, + authorName() { + return this.author.name; + }, }, mounted() { this.emojiTitle = this.emojiElement ? this.emojiElement.getAttribute('title') : ''; @@ -133,7 +142,7 @@ export default { type="button" @click="handleToggle" > - <i ref="chevronIcon" :class="toggleChevronClass" class="fa" aria-hidden="true"></i> + <gl-icon ref="chevronIcon" :name="toggleChevronIconName" aria-hidden="true" /> {{ __('Toggle thread') }} </button> </div> @@ -146,7 +155,12 @@ export default { :data-username="author.username" > <slot name="note-header-info"></slot> - <span class="note-header-author-name bold">{{ author.name }}</span> + <span class="note-header-author-name gl-font-weight-bold"> + <gl-sprintf v-if="authorIsBusy" :message="s__('UserAvailability|%{author} (Busy)')"> + <template #author>{{ authorName }}</template> + </gl-sprintf> + <template v-else>{{ authorName }}</template> + </span> </a> <span v-if="authorStatus" @@ -170,7 +184,9 @@ export default { </template> <span v-else>{{ __('A deleted user') }}</span> <span class="note-headline-light note-headline-meta"> - <span class="system-note-message"> <slot></slot> </span> + <span class="system-note-message" data-qa-selector="system_note_content"> + <slot></slot> + </span> <template v-if="createdAt"> <span ref="actionText" class="system-note-separator"> <template v-if="actionText">{{ actionText }}</template> |