Commit c0841e77 authored by Winnie Hellmann's avatar Winnie Hellmann
Browse files

Highlight current user in comments and system notes

parent 63ff5f253152
/**
* Highlights the current user in existing elements with a user ID data attribute.
*
* @param elements DOM elements that represent user mentions
*/
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');
}
});
}
......@@ -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;
};
......
......@@ -11,6 +11,7 @@ import commentForm from './comment_form.vue';
import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue';
import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
export default {
name: 'NotesApp',
......@@ -96,6 +97,9 @@ export default {
});
}
},
updated() {
this.$nextTick(() => highlightCurrentUser(this.$el.querySelectorAll('.gfm-project_member')));
},
methods: {
...mapActions({
fetchDiscussions: 'fetchDiscussions',
......
......@@ -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 {
......
---
title: Highlight current user in comments
merge_request: 21406
author:
type: changed
......@@ -3,6 +3,12 @@
describe 'Create notes on issues', :js do
let(:user) { create(:user) }
def submit_comment(text)
fill_in 'note[note]', with: text
click_button 'Comment'
wait_for_requests
end
shared_examples 'notes with reference' do
let(:issue) { create(:issue, project: project) }
let(:note_text) { "Check #{mention.to_reference}" }
......@@ -12,10 +18,7 @@
sign_in(user)
visit project_issue_path(project, issue)
fill_in 'note[note]', with: note_text
click_button 'Comment'
wait_for_requests
submit_comment(note_text)
end
it 'creates a note with reference and cross references the issue' do
......@@ -74,4 +77,16 @@
let(:mention) { create(:merge_request, source_project: project) }
end
end
it 'highlights the current user in a comment' do
project = create(:project)
issue = create(:issue, project: project)
project.add_developer(user)
sign_in(user)
visit project_issue_path(project, issue)
submit_comment("@#{user.username} note to self")
expect(page).to have_selector '.gfm-project_member.current-user', text: user.username
end
end
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;
});
afterEach(() => {
delete window.gon.current_user_id;
});
it('does not highlight the user', () => {
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;
});
afterEach(() => {
delete window.gon.current_user_id;
});
it('highlights current user', () => {
highlightCurrentUser(elements);
expect(elements.length).toBe(2);
expect(elements[0]).not.toHaveClass('current-user');
expect(elements[1]).toHaveClass('current-user');
});
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment