GitLab wurde erfolgreich aktualisiert. Dank regelmäßiger Updates bleibt das THM GitLab sicher und Sie profitieren von den neuesten Funktionen. Danke für Ihre Geduld.

Commit 23563f5e authored by Winnie Hellmann's avatar Winnie Hellmann

Highlight current user in comments and system notes

parent 7c1cfd0b
/**
* 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