From 85dc423f7090da0a52c73eb66faf22ddb20efff9 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Sat, 19 Sep 2020 01:45:44 +0000
Subject: Add latest changes from gitlab-org/gitlab@13-4-stable-ee

---
 .../javascripts/notes/components/note_actions.vue  | 80 ++++++++++++++++++----
 1 file changed, 68 insertions(+), 12 deletions(-)

(limited to 'app/assets/javascripts/notes/components/note_actions.vue')

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">
-- 
cgit v1.2.1