diff options
Diffstat (limited to 'app/assets/javascripts/notes/components/note_header.vue')
-rw-r--r-- | app/assets/javascripts/notes/components/note_header.vue | 30 |
1 files changed, 14 insertions, 16 deletions
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue index 17a995018d3..6932af61c69 100644 --- a/app/assets/javascripts/notes/components/note_header.vue +++ b/app/assets/javascripts/notes/components/note_header.vue @@ -1,9 +1,9 @@ <script> /* eslint-disable vue/no-v-html */ +import { GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; import { mapActions } from 'vuex'; -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'; +import UserNameWithStatus from '../../sidebar/components/assignees/user_name_with_status.vue'; export default { components: { @@ -12,7 +12,7 @@ export default { import('ee_component/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue'), GlIcon, GlLoadingIcon, - GlSprintf, + UserNameWithStatus, }, directives: { GlTooltip: GlTooltipDirective, @@ -90,10 +90,6 @@ export default { } return false; }, - authorIsBusy() { - const { status } = this.author; - return status?.availability && isUserBusy(status.availability); - }, emojiElement() { return this.$refs?.authorStatus?.querySelector('gl-emoji'); }, @@ -133,6 +129,9 @@ export default { this.$refs.authorNameLink.dispatchEvent(new Event('mouseleave')); this.isUsernameLinkHovered = false; }, + userAvailability(selectedAuthor) { + return selectedAuthor?.availability || ''; + }, }, }; </script> @@ -158,12 +157,11 @@ export default { :data-username="author.username" > <slot name="note-header-info"></slot> - <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> + <user-name-with-status + :name="authorName" + :availability="userAvailability(author)" + container-classes="note-header-author-name gl-font-weight-bold" + /> </a> <span v-if="authorStatus" @@ -210,9 +208,9 @@ export default { v-gl-tooltip:tooltipcontainer.bottom data-testid="confidentialIndicator" name="eye-slash" - :size="14" - :title="s__('Notes|Private comments are accessible by internal staff only')" - class="gl-ml-1 gl-text-gray-700 align-middle" + :size="16" + :title="s__('Notes|This comment is confidential and only visible to project members')" + class="gl-ml-1 gl-text-orange-700 align-middle" /> <slot name="extra-controls"></slot> <gl-loading-icon |