diff options
Diffstat (limited to 'app/assets/javascripts/notes/components/note_actions.vue')
-rw-r--r-- | app/assets/javascripts/notes/components/note_actions.vue | 80 |
1 files changed, 68 insertions, 12 deletions
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue index a8ae7fb48f0..a8057276f1a 100644 --- a/app/assets/javascripts/notes/components/note_actions.vue +++ b/app/assets/javascripts/notes/components/note_actions.vue @@ -1,18 +1,18 @@ <script> import { mapGetters } from 'vuex'; -import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; -import { __ } from '~/locale'; +import { GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; import resolvedStatusMixin from '~/batch_comments/mixins/resolved_status'; -import Icon from '~/vue_shared/components/icon.vue'; import ReplyButton from './note_actions/reply_button.vue'; import eventHub from '~/sidebar/event_hub'; import Api from '~/api'; import { deprecatedCreateFlash as flash } from '~/flash'; +import { splitCamelCase } from '../../lib/utils/text_utility'; export default { name: 'NoteActions', components: { - Icon, + GlIcon, ReplyButton, GlLoadingIcon, }, @@ -48,6 +48,26 @@ export default { required: false, default: null, }, + 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: '', + }, showReply: { type: Boolean, required: true, @@ -122,6 +142,9 @@ export default { targetType() { return this.getNoteableData.targetType; }, + noteableDisplayName() { + return splitCamelCase(this.noteableType).toLowerCase(); + }, assignees() { return this.getNoteableData.assignees || []; }, @@ -131,6 +154,22 @@ export default { canAssign() { return this.getNoteableData.current_user?.can_update && this.isIssue; }, + displayAuthorBadgeText() { + return sprintf(__('This user is the author of this %{noteable}.'), { + noteable: this.noteableDisplayName, + }); + }, + displayMemberBadgeText() { + return sprintf(__('This user is a %{access} of the %{name} project.'), { + access: this.accessLevel.toLowerCase(), + name: this.projectName, + }); + }, + displayContributorBadgeText() { + return sprintf(__('This user has previously committed to the %{name} project.'), { + name: this.projectName, + }); + }, }, methods: { onEdit() { @@ -176,7 +215,24 @@ export default { <template> <div class="note-actions"> - <span v-if="accessLevel" class="note-role user-access-role">{{ accessLevel }}</span> + <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 + > <div v-if="canResolve" class="note-actions-item"> <button ref="resolveButton" @@ -189,7 +245,7 @@ export default { @click="onResolve" > <template v-if="!isResolving"> - <icon :name="isResolved ? 'check-circle-filled' : 'check-circle'" /> + <gl-icon :name="isResolved ? 'check-circle-filled' : 'check-circle'" /> </template> <gl-loading-icon v-else inline /> </button> @@ -203,9 +259,9 @@ export default { title="Add reaction" data-position="right" > - <icon class="link-highlight award-control-icon-neutral" name="slight-smile" /> - <icon class="link-highlight award-control-icon-positive" name="smiley" /> - <icon class="link-highlight award-control-icon-super-positive" name="smiley" /> + <gl-icon class="link-highlight award-control-icon-neutral" name="slight-smile" /> + <gl-icon class="link-highlight award-control-icon-positive" name="smiley" /> + <gl-icon class="link-highlight award-control-icon-super-positive" name="smiley" /> </a> </div> <reply-button @@ -222,7 +278,7 @@ export default { class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button" @click="onEdit" > - <icon name="pencil" class="link-highlight" /> + <gl-icon name="pencil" class="link-highlight" /> </button> </div> <div v-if="showDeleteAction" class="note-actions-item"> @@ -233,7 +289,7 @@ export default { class="note-action-button js-note-delete btn btn-transparent" @click="onDelete" > - <icon name="remove" class="link-highlight" /> + <gl-icon name="remove" class="link-highlight" /> </button> </div> <div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions note-actions-item"> @@ -245,7 +301,7 @@ export default { data-toggle="dropdown" @click="closeTooltip" > - <icon class="icon" name="ellipsis_v" /> + <gl-icon class="icon" name="ellipsis_v" /> </button> <ul class="dropdown-menu more-actions-dropdown dropdown-open-left"> <li v-if="canReportAsAbuse"> |