2017-06-13 17:01:59 +00:00
|
|
|
<script>
|
2021-10-05 18:13:27 +00:00
|
|
|
import {
|
|
|
|
GlIcon,
|
|
|
|
GlLoadingIcon,
|
|
|
|
GlTooltipDirective,
|
|
|
|
GlSafeHtmlDirective as SafeHtml,
|
|
|
|
} from '@gitlab/ui';
|
2021-02-14 18:09:20 +00:00
|
|
|
import { mapActions } from 'vuex';
|
2022-03-15 21:07:57 +00:00
|
|
|
import { __ } from '~/locale';
|
2020-04-09 21:09:19 +00:00
|
|
|
import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
|
2021-02-16 12:09:03 +00:00
|
|
|
import UserNameWithStatus from '../../sidebar/components/assignees/user_name_with_status.vue';
|
2017-06-13 17:01:59 +00:00
|
|
|
|
2018-03-16 20:16:21 +00:00
|
|
|
export default {
|
2021-10-05 18:13:27 +00:00
|
|
|
safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
|
2018-03-16 20:16:21 +00:00
|
|
|
components: {
|
|
|
|
timeAgoTooltip,
|
2020-05-15 12:08:28 +00:00
|
|
|
GitlabTeamMemberBadge: () =>
|
|
|
|
import('ee_component/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue'),
|
2020-05-19 21:08:05 +00:00
|
|
|
GlIcon,
|
2020-09-03 12:08:47 +00:00
|
|
|
GlLoadingIcon,
|
2021-02-16 12:09:03 +00:00
|
|
|
UserNameWithStatus,
|
2020-05-19 21:08:05 +00:00
|
|
|
},
|
|
|
|
directives: {
|
2021-10-05 18:13:27 +00:00
|
|
|
SafeHtml,
|
2020-05-19 21:08:05 +00:00
|
|
|
GlTooltip: GlTooltipDirective,
|
2018-03-16 20:16:21 +00:00
|
|
|
},
|
|
|
|
props: {
|
|
|
|
author: {
|
|
|
|
type: Object,
|
2018-09-07 13:39:20 +00:00
|
|
|
required: false,
|
|
|
|
default: () => ({}),
|
2018-01-05 00:18:35 +00:00
|
|
|
},
|
2018-03-16 20:16:21 +00:00
|
|
|
createdAt: {
|
|
|
|
type: String,
|
2018-10-06 17:16:40 +00:00
|
|
|
required: false,
|
|
|
|
default: null,
|
2017-06-13 17:01:59 +00:00
|
|
|
},
|
2018-03-16 20:16:21 +00:00
|
|
|
actionText: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: '',
|
2017-06-13 17:01:59 +00:00
|
|
|
},
|
2018-03-16 20:16:21 +00:00
|
|
|
noteId: {
|
2018-10-06 17:16:40 +00:00
|
|
|
type: [String, Number],
|
|
|
|
required: false,
|
|
|
|
default: null,
|
2018-03-16 20:16:21 +00:00
|
|
|
},
|
|
|
|
includeToggle: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
expanded: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: true,
|
|
|
|
},
|
2020-04-15 12:09:18 +00:00
|
|
|
showSpinner: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: true,
|
|
|
|
},
|
2020-05-19 21:08:05 +00:00
|
|
|
isConfidential: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: false,
|
|
|
|
},
|
2018-03-16 20:16:21 +00:00
|
|
|
},
|
2020-04-21 15:21:10 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
isUsernameLinkHovered: false,
|
|
|
|
emojiTitle: '',
|
|
|
|
authorStatusHasTooltip: false,
|
|
|
|
};
|
|
|
|
},
|
2018-03-16 20:16:21 +00:00
|
|
|
computed: {
|
2020-11-04 09:08:50 +00:00
|
|
|
toggleChevronIconName() {
|
|
|
|
return this.expanded ? 'chevron-up' : 'chevron-down';
|
2018-03-16 20:16:21 +00:00
|
|
|
},
|
|
|
|
noteTimestampLink() {
|
2020-04-15 12:09:18 +00:00
|
|
|
return this.noteId ? `#note_${this.noteId}` : undefined;
|
2018-03-16 20:16:21 +00:00
|
|
|
},
|
2018-11-08 07:58:45 +00:00
|
|
|
hasAuthor() {
|
|
|
|
return this.author && Object.keys(this.author).length;
|
|
|
|
},
|
2020-04-21 15:21:10 +00:00
|
|
|
authorLinkClasses() {
|
|
|
|
return {
|
|
|
|
hover: this.isUsernameLinkHovered,
|
|
|
|
'text-underline': this.isUsernameLinkHovered,
|
|
|
|
'author-name-link': true,
|
|
|
|
'js-user-link': true,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
authorStatus() {
|
2020-11-30 18:09:46 +00:00
|
|
|
if (this.author?.show_status) {
|
|
|
|
return this.author.status_tooltip_html;
|
|
|
|
}
|
|
|
|
return false;
|
2020-04-21 15:21:10 +00:00
|
|
|
},
|
|
|
|
emojiElement() {
|
|
|
|
return this.$refs?.authorStatus?.querySelector('gl-emoji');
|
|
|
|
},
|
2020-11-17 15:09:28 +00:00
|
|
|
authorName() {
|
|
|
|
return this.author.name;
|
|
|
|
},
|
2020-04-21 15:21:10 +00:00
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.emojiTitle = this.emojiElement ? this.emojiElement.getAttribute('title') : '';
|
|
|
|
|
|
|
|
const authorStatusTitle = this.$refs?.authorStatus
|
|
|
|
?.querySelector('.user-status-emoji')
|
|
|
|
?.getAttribute('title');
|
|
|
|
this.authorStatusHasTooltip = authorStatusTitle && authorStatusTitle !== '';
|
2018-03-16 20:16:21 +00:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['setTargetNoteHash']),
|
|
|
|
handleToggle() {
|
|
|
|
this.$emit('toggleHandler');
|
|
|
|
},
|
|
|
|
updateTargetNoteHash() {
|
2020-04-15 12:09:18 +00:00
|
|
|
if (this.$store) {
|
|
|
|
this.setTargetNoteHash(this.noteTimestampLink);
|
|
|
|
}
|
2018-03-16 20:16:21 +00:00
|
|
|
},
|
2020-04-21 15:21:10 +00:00
|
|
|
removeEmojiTitle() {
|
|
|
|
this.emojiElement.removeAttribute('title');
|
|
|
|
},
|
|
|
|
addEmojiTitle() {
|
|
|
|
this.emojiElement.setAttribute('title', this.emojiTitle);
|
|
|
|
},
|
|
|
|
handleUsernameMouseEnter() {
|
|
|
|
this.$refs.authorNameLink.dispatchEvent(new Event('mouseenter'));
|
|
|
|
this.isUsernameLinkHovered = true;
|
|
|
|
},
|
|
|
|
handleUsernameMouseLeave() {
|
|
|
|
this.$refs.authorNameLink.dispatchEvent(new Event('mouseleave'));
|
|
|
|
this.isUsernameLinkHovered = false;
|
|
|
|
},
|
2021-02-16 12:09:03 +00:00
|
|
|
userAvailability(selectedAuthor) {
|
|
|
|
return selectedAuthor?.availability || '';
|
|
|
|
},
|
2018-03-16 20:16:21 +00:00
|
|
|
},
|
2022-03-15 21:07:57 +00:00
|
|
|
i18n: {
|
|
|
|
showThread: __('Show thread'),
|
|
|
|
hideThread: __('Hide thread'),
|
|
|
|
},
|
2018-03-16 20:16:21 +00:00
|
|
|
};
|
2017-06-13 17:01:59 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div class="note-header-info">
|
2020-01-22 12:08:40 +00:00
|
|
|
<div v-if="includeToggle" ref="discussionActions" class="discussion-actions">
|
2018-04-19 10:57:12 +00:00
|
|
|
<button
|
|
|
|
class="note-action-button discussion-toggle-button js-vue-toggle-button"
|
2018-06-11 09:49:47 +00:00
|
|
|
type="button"
|
2022-03-15 21:07:57 +00:00
|
|
|
data-testid="thread-toggle"
|
2018-11-16 20:07:38 +00:00
|
|
|
@click="handleToggle"
|
|
|
|
>
|
2020-11-27 09:09:31 +00:00
|
|
|
<gl-icon ref="chevronIcon" :name="toggleChevronIconName" />
|
2022-03-15 21:07:57 +00:00
|
|
|
<template v-if="expanded">
|
|
|
|
{{ $options.i18n.hideThread }}
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
{{ $options.i18n.showThread }}
|
|
|
|
</template>
|
2018-04-19 10:57:12 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
2020-04-09 21:09:19 +00:00
|
|
|
<template v-if="hasAuthor">
|
|
|
|
<a
|
2020-04-21 15:21:10 +00:00
|
|
|
ref="authorNameLink"
|
2020-04-09 21:09:19 +00:00
|
|
|
:href="author.path"
|
2020-04-21 15:21:10 +00:00
|
|
|
:class="authorLinkClasses"
|
2020-04-09 21:09:19 +00:00
|
|
|
:data-user-id="author.id"
|
|
|
|
:data-username="author.username"
|
|
|
|
>
|
|
|
|
<slot name="note-header-info"></slot>
|
2021-02-16 12:09:03 +00:00
|
|
|
<user-name-with-status
|
|
|
|
:name="authorName"
|
|
|
|
:availability="userAvailability(author)"
|
|
|
|
container-classes="note-header-author-name gl-font-weight-bold"
|
|
|
|
/>
|
2020-04-09 21:09:19 +00:00
|
|
|
</a>
|
2020-04-21 15:21:10 +00:00
|
|
|
<span
|
|
|
|
v-if="authorStatus"
|
|
|
|
ref="authorStatus"
|
2021-10-05 18:13:27 +00:00
|
|
|
v-safe-html:[$options.safeHtmlConfig]="authorStatus"
|
2020-04-21 15:21:10 +00:00
|
|
|
v-on="
|
|
|
|
authorStatusHasTooltip ? { mouseenter: removeEmojiTitle, mouseleave: addEmojiTitle } : {}
|
|
|
|
"
|
|
|
|
></span>
|
|
|
|
<span class="text-nowrap author-username">
|
|
|
|
<a
|
|
|
|
ref="authorUsernameLink"
|
|
|
|
class="author-username-link"
|
|
|
|
:href="author.path"
|
|
|
|
@mouseenter="handleUsernameMouseEnter"
|
|
|
|
@mouseleave="handleUsernameMouseLeave"
|
|
|
|
><span class="note-headline-light">@{{ author.username }}</span>
|
|
|
|
</a>
|
2020-05-15 12:08:28 +00:00
|
|
|
<gitlab-team-member-badge v-if="author && author.is_gitlab_employee" />
|
2020-04-21 15:21:10 +00:00
|
|
|
</span>
|
2020-04-09 21:09:19 +00:00
|
|
|
</template>
|
2019-03-01 09:34:16 +00:00
|
|
|
<span v-else>{{ __('A deleted user') }}</span>
|
2020-05-12 06:09:37 +00:00
|
|
|
<span class="note-headline-light note-headline-meta">
|
2020-10-28 00:08:34 +00:00
|
|
|
<span class="system-note-message" data-qa-selector="system_note_content">
|
|
|
|
<slot></slot>
|
|
|
|
</span>
|
2019-03-11 13:19:52 +00:00
|
|
|
<template v-if="createdAt">
|
2020-05-12 06:09:37 +00:00
|
|
|
<span ref="actionText" class="system-note-separator">
|
2019-03-11 13:19:52 +00:00
|
|
|
<template v-if="actionText">{{ actionText }}</template>
|
|
|
|
</span>
|
|
|
|
<a
|
2020-04-15 12:09:18 +00:00
|
|
|
v-if="noteTimestampLink"
|
|
|
|
ref="noteTimestampLink"
|
2019-03-11 13:19:52 +00:00
|
|
|
:href="noteTimestampLink"
|
2020-05-12 06:09:37 +00:00
|
|
|
class="note-timestamp system-note-separator"
|
2019-03-11 13:19:52 +00:00
|
|
|
@click="updateTargetNoteHash"
|
|
|
|
>
|
|
|
|
<time-ago-tooltip :time="createdAt" tooltip-placement="bottom" />
|
|
|
|
</a>
|
2020-04-15 12:09:18 +00:00
|
|
|
<time-ago-tooltip v-else ref="noteTimestamp" :time="createdAt" tooltip-placement="bottom" />
|
2019-03-11 13:19:52 +00:00
|
|
|
</template>
|
2020-05-19 21:08:05 +00:00
|
|
|
<gl-icon
|
|
|
|
v-if="isConfidential"
|
|
|
|
v-gl-tooltip:tooltipcontainer.bottom
|
|
|
|
data-testid="confidentialIndicator"
|
|
|
|
name="eye-slash"
|
2021-02-11 15:09:11 +00:00
|
|
|
: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"
|
2020-05-19 21:08:05 +00:00
|
|
|
/>
|
2019-11-15 12:06:12 +00:00
|
|
|
<slot name="extra-controls"></slot>
|
2020-09-03 12:08:47 +00:00
|
|
|
<gl-loading-icon
|
2020-04-15 12:09:18 +00:00
|
|
|
v-if="showSpinner"
|
|
|
|
ref="spinner"
|
2021-07-07 09:08:35 +00:00
|
|
|
size="sm"
|
2020-09-03 12:08:47 +00:00
|
|
|
class="editing-spinner"
|
|
|
|
:label="__('Comment is being updated')"
|
|
|
|
/>
|
2017-06-13 17:01:59 +00:00
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</template>
|