debian-mirror-gitlab/app/assets/javascripts/notes/components/note_actions.vue

337 lines
9 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2018-05-09 12:01:36 +05:30
import { mapGetters } from 'vuex';
2021-01-29 00:20:46 +05:30
import { GlTooltipDirective, GlIcon, GlButton, GlDropdownItem } from '@gitlab/ui';
2020-11-24 15:15:51 +05:30
import { __, sprintf } from '~/locale';
2020-06-23 00:09:42 +05:30
import resolvedStatusMixin from '~/batch_comments/mixins/resolved_status';
2019-03-02 22:35:43 +05:30
import ReplyButton from './note_actions/reply_button.vue';
2020-06-23 00:09:42 +05:30
import eventHub from '~/sidebar/event_hub';
import Api from '~/api';
2020-10-24 23:57:45 +05:30
import { deprecatedCreateFlash as flash } from '~/flash';
2020-11-24 15:15:51 +05:30
import { splitCamelCase } from '../../lib/utils/text_utility';
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
export default {
name: 'NoteActions',
2018-12-05 23:21:45 +05:30
components: {
2020-11-24 15:15:51 +05:30
GlIcon,
2019-03-02 22:35:43 +05:30
ReplyButton,
2021-01-29 00:20:46 +05:30
GlButton,
GlDropdownItem,
2018-12-05 23:21:45 +05:30
},
2018-05-09 12:01:36 +05:30
directives: {
2019-02-15 15:39:39 +05:30
GlTooltip: GlTooltipDirective,
2018-05-09 12:01:36 +05:30
},
2019-07-31 22:56:46 +05:30
mixins: [resolvedStatusMixin],
2018-05-09 12:01:36 +05:30
props: {
2020-06-23 00:09:42 +05:30
author: {
type: Object,
required: true,
},
2018-05-09 12:01:36 +05:30
authorId: {
type: Number,
required: true,
},
noteId: {
2018-12-05 23:21:45 +05:30
type: [String, Number],
2018-05-09 12:01:36 +05:30
required: true,
},
2018-11-08 19:23:39 +05:30
noteUrl: {
type: String,
2018-11-20 20:47:30 +05:30
required: false,
default: '',
2018-11-08 19:23:39 +05:30
},
2018-05-09 12:01:36 +05:30
accessLevel: {
type: String,
required: false,
default: '',
},
reportAbusePath: {
type: String,
2018-12-05 23:21:45 +05:30
required: false,
default: null,
2018-05-09 12:01:36 +05:30
},
2020-11-24 15:15:51 +05:30
isAuthor: {
type: Boolean,
required: false,
default: false,
},
isContributor: {
type: Boolean,
required: false,
default: false,
},
noteableType: {
type: String,
required: false,
default: '',
},
projectName: {
type: String,
required: false,
default: '',
},
2019-03-02 22:35:43 +05:30
showReply: {
type: Boolean,
required: true,
},
2018-05-09 12:01:36 +05:30
canEdit: {
type: Boolean,
required: true,
},
canAwardEmoji: {
type: Boolean,
required: true,
},
canDelete: {
type: Boolean,
required: true,
},
2018-11-08 19:23:39 +05:30
canResolve: {
type: Boolean,
required: false,
default: false,
},
2018-05-09 12:01:36 +05:30
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: {
2020-06-23 00:09:42 +05:30
...mapGetters(['getUserDataByProp', 'getNoteableData']),
2018-05-09 12:01:36 +05:30
shouldShowActionsDropdown() {
return this.currentUserId && (this.canEdit || this.canReportAsAbuse);
},
2018-12-05 23:21:45 +05:30
showDeleteAction() {
return this.canDelete && !this.canReportAsAbuse && !this.noteUrl;
},
2018-05-09 12:01:36 +05:30
isAuthoredByCurrentUser() {
return this.authorId === this.currentUserId;
},
currentUserId() {
return this.getUserDataByProp('id');
},
2020-06-23 00:09:42 +05:30
isUserAssigned() {
return this.assignees && this.assignees.some(({ id }) => id === this.author.id);
},
displayAssignUserText() {
return this.isUserAssigned
? __('Unassign from commenting user')
: __('Assign to commenting user');
},
sidebarAction() {
return this.isUserAssigned ? 'sidebar.addAssignee' : 'sidebar.removeAssignee';
},
targetType() {
return this.getNoteableData.targetType;
},
2020-11-24 15:15:51 +05:30
noteableDisplayName() {
return splitCamelCase(this.noteableType).toLowerCase();
},
2020-06-23 00:09:42 +05:30
assignees() {
return this.getNoteableData.assignees || [];
},
isIssue() {
return this.targetType === 'issue';
},
2020-07-28 23:09:34 +05:30
canAssign() {
return this.getNoteableData.current_user?.can_update && this.isIssue;
},
2020-11-24 15:15:51 +05:30
displayAuthorBadgeText() {
return sprintf(__('This user is the author of this %{noteable}.'), {
noteable: this.noteableDisplayName,
});
},
displayMemberBadgeText() {
2021-01-03 14:25:43 +05:30
return sprintf(__('This user has the %{access} role in the %{name} project.'), {
2020-11-24 15:15:51 +05:30
access: this.accessLevel.toLowerCase(),
name: this.projectName,
});
},
displayContributorBadgeText() {
return sprintf(__('This user has previously committed to the %{name} project.'), {
name: this.projectName,
});
},
2021-01-29 00:20:46 +05:30
resolveIcon() {
if (!this.isResolving) {
return this.isResolved ? 'check-circle-filled' : 'check-circle';
}
return null;
},
resolveVariant() {
return this.isResolved ? 'success' : 'default';
},
2018-05-09 12:01:36 +05:30
},
methods: {
onEdit() {
this.$emit('handleEdit');
},
onDelete() {
this.$emit('handleDelete');
},
onResolve() {
this.$emit('handleResolve');
},
2019-07-07 11:18:12 +05:30
closeTooltip() {
this.$nextTick(() => {
this.$root.$emit('bv::hide::tooltip');
});
},
2020-06-23 00:09:42 +05:30
handleAssigneeUpdate(assignees) {
this.$emit('updateAssignees', assignees);
eventHub.$emit(this.sidebarAction, this.author);
eventHub.$emit('sidebar.saveAssignees');
},
assignUser() {
let { assignees } = this;
const { project_id, iid } = this.getNoteableData;
if (this.isUserAssigned) {
assignees = assignees.filter(assignee => assignee.id !== this.author.id);
} else {
assignees.push({ id: this.author.id });
}
if (this.targetType === 'issue') {
Api.updateIssue(project_id, iid, {
assignee_ids: assignees.map(assignee => assignee.id),
})
.then(() => this.handleAssigneeUpdate(assignees))
.catch(() => flash(__('Something went wrong while updating assignees')));
}
},
2018-05-09 12:01:36 +05:30
},
};
2018-03-17 18:26:18 +05:30
</script>
<template>
<div class="note-actions">
2020-11-24 15:15:51 +05:30
<span
v-if="isAuthor"
class="note-role user-access-role has-tooltip d-none d-md-inline-block"
:title="displayAuthorBadgeText"
>{{ __('Author') }}</span
>
<span
v-if="accessLevel"
class="note-role user-access-role has-tooltip"
:title="displayMemberBadgeText"
>{{ accessLevel }}</span
>
<span
v-else-if="isContributor"
class="note-role user-access-role has-tooltip"
:title="displayContributorBadgeText"
>{{ __('Contributor') }}</span
>
2021-01-29 00:20:46 +05:30
<div v-if="canResolve" class="gl-ml-2">
<gl-button
2019-07-07 11:18:12 +05:30
ref="resolveButton"
2019-02-15 15:39:39 +05:30
v-gl-tooltip
2021-01-29 00:20:46 +05:30
size="small"
category="tertiary"
:variant="resolveVariant"
2018-03-27 19:54:05 +05:30
:class="{ 'is-disabled': !resolvable, 'is-active': isResolved }"
:title="resolveButtonTitle"
:aria-label="resolveButtonTitle"
2021-01-29 00:20:46 +05:30
:icon="resolveIcon"
:loading="isResolving"
2018-11-08 19:23:39 +05:30
class="line-resolve-btn note-action-button"
2019-02-15 15:39:39 +05:30
@click="onResolve"
2021-01-29 00:20:46 +05:30
/>
2018-03-27 19:54:05 +05:30
</div>
2021-01-29 00:20:46 +05:30
<div v-if="canAwardEmoji" class="gl-ml-3 gl-mr-2">
2018-03-17 18:26:18 +05:30
<a
2019-03-02 22:35:43 +05:30
v-gl-tooltip
2018-03-17 18:26:18 +05:30
:class="{ 'js-user-authored': isAuthoredByCurrentUser }"
class="note-action-button note-emoji-button js-add-award js-note-emoji"
href="#"
title="Add reaction"
2019-09-04 21:01:54 +05:30
data-position="right"
2018-03-17 18:26:18 +05:30
>
2020-11-24 15:15:51 +05:30
<gl-icon class="link-highlight award-control-icon-neutral" name="slight-smile" />
<gl-icon class="link-highlight award-control-icon-positive" name="smiley" />
2021-01-29 00:20:46 +05:30
<gl-icon class="link-highlight award-control-icon-super-positive" name="smile" />
2018-03-17 18:26:18 +05:30
</a>
</div>
2019-03-02 22:35:43 +05:30
<reply-button
2019-07-07 11:18:12 +05:30
v-if="showReply"
2019-03-02 22:35:43 +05:30
ref="replyButton"
class="js-reply-button"
2019-07-07 11:18:12 +05:30
@startReplying="$emit('startReplying')"
2019-03-02 22:35:43 +05:30
/>
2021-01-29 00:20:46 +05:30
<div v-if="canEdit" class="gl-ml-2">
<gl-button
2019-03-02 22:35:43 +05:30
v-gl-tooltip
2018-03-17 18:26:18 +05:30
title="Edit comment"
2021-01-29 00:20:46 +05:30
icon="pencil"
size="small"
category="tertiary"
2021-01-03 14:25:43 +05:30
class="note-action-button js-note-edit btn btn-transparent"
data-qa-selector="note_edit_button"
2019-02-15 15:39:39 +05:30
@click="onEdit"
2021-01-29 00:20:46 +05:30
/>
2018-03-17 18:26:18 +05:30
</div>
2021-01-29 00:20:46 +05:30
<div v-if="showDeleteAction" class="gl-ml-2">
<gl-button
2019-03-02 22:35:43 +05:30
v-gl-tooltip
2018-12-05 23:21:45 +05:30
title="Delete comment"
2021-01-29 00:20:46 +05:30
size="small"
icon="remove"
category="tertiary"
2018-12-05 23:21:45 +05:30
class="note-action-button js-note-delete btn btn-transparent"
@click="onDelete"
2021-01-29 00:20:46 +05:30
/>
2018-12-05 23:21:45 +05:30
</div>
2021-01-29 00:20:46 +05:30
<div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions gl-ml-2">
<gl-button
2019-03-02 22:35:43 +05:30
v-gl-tooltip
2018-03-17 18:26:18 +05:30
title="More actions"
2021-01-29 00:20:46 +05:30
icon="ellipsis_v"
size="small"
category="tertiary"
2018-03-17 18:26:18 +05:30
class="note-action-button more-actions-toggle btn btn-transparent"
data-toggle="dropdown"
2019-07-07 11:18:12 +05:30
@click="closeTooltip"
2021-01-29 00:20:46 +05:30
/>
2018-03-17 18:26:18 +05:30
<ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
2021-01-29 00:20:46 +05:30
<gl-dropdown-item v-if="canReportAsAbuse" :href="reportAbusePath">
{{ __('Report abuse to admin') }}
</gl-dropdown-item>
<gl-dropdown-item
v-if="noteUrl"
class="js-btn-copy-note-link"
:data-clipboard-text="noteUrl"
>
{{ __('Copy link') }}
</gl-dropdown-item>
<gl-dropdown-item v-if="canAssign" data-testid="assign-user" @click="assignUser">
{{ displayAssignUserText }}
</gl-dropdown-item>
<gl-dropdown-item v-if="canEdit" class="js-note-delete" @click.prevent="onDelete">
<span class="text-danger">{{ __('Delete comment') }}</span>
</gl-dropdown-item>
2018-03-17 18:26:18 +05:30
</ul>
</div>
</div>
</template>