Highlight current user in comments and system noteswinh-highlight-current-user

6 files changed, 75 insertions, 4 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/highlight_current_user.js b/app/assets/javascripts/behaviors/markdown/highlight_current_user.js
new file mode 100644
index 00000000000..65a32e4f01a
--- /dev/null
+++ b/app/assets/javascripts/behaviors/markdown/highlight_current_user.js
@@ -0,0 +1,12 @@
+export default function highlightCurrentUser(elements) {
+  const currentUserId = gon && gon.current_user_id;
+  if (!currentUserId) {
+    return;
+  }
+
+  elements.forEach(element => {
+    if (parseInt(element.dataset.user, 10) === currentUserId) {
+      element.classList.add('current-user');
+    }
+  });
+}
diff --git a/app/assets/javascripts/behaviors/markdown/render_gfm.js b/app/assets/javascripts/behaviors/markdown/render_gfm.js
index 429455f97ec..a2d4331b6d1 100644
--- a/app/assets/javascripts/behaviors/markdown/render_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/render_gfm.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
 import syntaxHighlight from '~/syntax_highlight';
 import renderMath from './render_math';
 import renderMermaid from './render_mermaid';
+import highlightCurrentUser from './highlight_current_user';
 
 // Render GitLab flavoured Markdown
 //
@@ -11,6 +12,7 @@ $.fn.renderGFM = function renderGFM() {
   syntaxHighlight(this.find('.js-syntax-highlight'));
   renderMath(this.find('.js-render-math'));
   renderMermaid(this.find('.js-render-mermaid'));
+  highlightCurrentUser(this.find('.gfm-project_member').get());
   return this;
 };
 
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 2122d0a508e..b8a8583a29f 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -20,7 +20,8 @@ import $ from 'jquery';
 import { mapGetters } from 'vuex';
 import noteHeader from '~/notes/components/note_header.vue';
 import Icon from '~/vue_shared/components/icon.vue';
-import { spriteIcon } from '../../../lib/utils/common_utils';
+import { spriteIcon } from '~/lib/utils/common_utils';
+import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
 
 const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
 
@@ -57,9 +58,9 @@ export default {
     },
     // following 2 methods taken from code in `collapseLongCommitList` of notes.js:
     actionTextHtml() {
-      return $(this.note.note_html)
-        .unwrap()
-        .html();
+      const $noteHtml = $(this.note.note_html).unwrap();
+      highlightCurrentUser($noteHtml.find('.gfm-project_member').get());
+      return $noteHtml.html();
     },
     hasMoreCommits() {
       return (
diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss
index d2ba76f5160..50d4298d418 100644
--- a/app/assets/stylesheets/framework/gfm.scss
+++ b/app/assets/stylesheets/framework/gfm.scss
@@ -11,6 +11,10 @@
   padding: 0 2px;
   background-color: $blue-100;
   border-radius: $border-radius-default;
+
+  &.current-user {
+    background-color: $orange-100;
+  }
 }
 
 .gfm-color_chip {
diff --git a/changelogs/unreleased/winh-highlight-current-user.yml b/changelogs/unreleased/winh-highlight-current-user.yml
new file mode 100644
index 00000000000..125a5c08c4e
--- /dev/null
+++ b/changelogs/unreleased/winh-highlight-current-user.yml
@@ -0,0 +1,5 @@
+---
+title: Highlight current user in comments
+merge_request: 21406
+author:
+type: changed
diff --git a/spec/javascripts/behaviors/markdown/highlight_current_user_spec.js b/spec/javascripts/behaviors/markdown/highlight_current_user_spec.js
new file mode 100644
index 00000000000..cdeb3e0889c
--- /dev/null
+++ b/spec/javascripts/behaviors/markdown/highlight_current_user_spec.js
@@ -0,0 +1,47 @@
+import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
+
+describe('highlightCurrentUser', () => {
+  let rootElement;
+  let elements;
+
+  beforeEach(() => {
+    setFixtures(`
+      <div id="dummy-root-element">
+        <div data-user="1">@first</div>
+        <div data-user="2">@second</div>
+      </div>
+    `);
+    rootElement = document.getElementById('dummy-root-element');
+    elements = rootElement.querySelectorAll('[data-user]');
+  });
+
+  describe('without current user', () => {
+    beforeEach(() => {
+      window.gon = window.gon || {};
+      window.gon.current_user_id = null;
+    });
+
+    it('does nothing', () => {
+      const initialHtml = rootElement.outerHTML;
+
+      highlightCurrentUser(elements);
+
+      expect(rootElement.outerHTML).toBe(initialHtml);
+    });
+  });
+
+  describe('with current user', () => {
+    beforeEach(() => {
+      window.gon = window.gon || {};
+      window.gon.current_user_id = 2;
+    });
+
+    it('highlights current user', () => {
+      highlightCurrentUser(elements);
+
+      expect(elements.length).toBe(2);
+      expect(elements[0]).not.toHaveClass('current-user');
+      expect(elements[1]).toHaveClass('current-user');
+    });
+  });
+});