<script> import { mapGetters } from 'vuex'; import Icon from '~/vue_shared/components/icon.vue'; import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; import ReplyButton from './note_actions/reply_button.vue'; export default { name: 'NoteActions', components: { Icon, ReplyButton, GlLoadingIcon, }, directives: { GlTooltip: GlTooltipDirective, }, props: { authorId: { type: Number, required: true, }, noteId: { type: [String, Number], required: true, }, discussionId: { type: String, required: false, default: '', }, noteUrl: { type: String, required: false, default: '', }, accessLevel: { type: String, required: false, default: '', }, reportAbusePath: { type: String, required: false, default: null, }, showReply: { type: Boolean, required: true, }, canEdit: { type: Boolean, required: true, }, canAwardEmoji: { type: Boolean, required: true, }, canDelete: { type: Boolean, required: true, }, canResolve: { type: Boolean, required: false, default: false, }, resolvable: { type: Boolean, required: false, default: false, }, isResolved: { type: Boolean, required: false, default: false, }, isResolving: { type: Boolean, required: false, default: false, }, resolvedBy: { type: Object, required: false, default: () => ({}), }, canReportAsAbuse: { type: Boolean, required: true, }, }, computed: { ...mapGetters(['getUserDataByProp']), showReplyButton() { return gon.features && gon.features.replyToIndividualNotes && this.showReply; }, shouldShowActionsDropdown() { return this.currentUserId && (this.canEdit || this.canReportAsAbuse); }, showDeleteAction() { return this.canDelete && !this.canReportAsAbuse && !this.noteUrl; }, isAuthoredByCurrentUser() { return this.authorId === this.currentUserId; }, currentUserId() { return this.getUserDataByProp('id'); }, resolveButtonTitle() { let title = 'Mark as resolved'; if (this.resolvedBy) { title = `Resolved by ${this.resolvedBy.name}`; } return title; }, }, methods: { onEdit() { this.$emit('handleEdit'); }, onDelete() { this.$emit('handleDelete'); }, onResolve() { this.$emit('handleResolve'); }, }, }; </script> <template> <div class="note-actions"> <span v-if="accessLevel" class="note-role user-access-role">{{ accessLevel }}</span> <div v-if="canResolve" class="note-actions-item"> <button v-gl-tooltip :class="{ 'is-disabled': !resolvable, 'is-active': isResolved }" :title="resolveButtonTitle" :aria-label="resolveButtonTitle" type="button" class="line-resolve-btn note-action-button" @click="onResolve" > <template v-if="!isResolving"> <icon name="check-circle" /> </template> <gl-loading-icon v-else inline /> </button> </div> <div v-if="canAwardEmoji" class="note-actions-item"> <a v-gl-tooltip :class="{ 'js-user-authored': isAuthoredByCurrentUser }" class="note-action-button note-emoji-button js-add-award js-note-emoji" href="#" title="Add reaction" > <gl-loading-icon inline /> <icon css-classes="link-highlight award-control-icon-neutral" name="emoji_slightly_smiling_face" /> <icon css-classes="link-highlight award-control-icon-positive" name="emoji_smiley" /> <icon css-classes="link-highlight award-control-icon-super-positive" name="emoji_smiley" /> </a> </div> <reply-button v-if="showReplyButton" ref="replyButton" class="js-reply-button" :note-id="discussionId" /> <div v-if="canEdit" class="note-actions-item"> <button v-gl-tooltip type="button" title="Edit comment" class="note-action-button js-note-edit btn btn-transparent" @click="onEdit" > <icon name="pencil" css-classes="link-highlight" /> </button> </div> <div v-if="showDeleteAction" class="note-actions-item"> <button v-gl-tooltip type="button" title="Delete comment" class="note-action-button js-note-delete btn btn-transparent" @click="onDelete" > <icon name="remove" class="link-highlight" /> </button> </div> <div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions note-actions-item"> <button v-gl-tooltip type="button" title="More actions" class="note-action-button more-actions-toggle btn btn-transparent" data-toggle="dropdown" > <icon css-classes="icon" name="ellipsis_v" /> </button> <ul class="dropdown-menu more-actions-dropdown dropdown-open-left"> <li v-if="canReportAsAbuse"> <a :href="reportAbusePath">{{ __('Report abuse to GitLab') }}</a> </li> <li v-if="noteUrl"> <button :data-clipboard-text="noteUrl" type="button" class="btn-default btn-transparent js-btn-copy-note-link" > {{ __('Copy link') }} </button> </li> <li v-if="canEdit"> <button class="btn btn-transparent js-note-delete js-note-delete" type="button" @click.prevent="onDelete" > <span class="text-danger">{{ __('Delete comment') }}</span> </button> </li> </ul> </div> </div> </template>