Commit 3eb55972 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '26543-add-word-diff-highlight-to-rich-text' into 'master'

Decorate rich_text with word-diff highlights

See merge request gitlab-org/gitlab!22182
parents 2e3c2345 a10c3bcb
...@@ -12,6 +12,7 @@ function cleanSuggestionLine(line = {}) { ...@@ -12,6 +12,7 @@ function cleanSuggestionLine(line = {}) {
return { return {
...line, ...line,
text: trimFirstCharOfLineContent(line.text), text: trimFirstCharOfLineContent(line.text),
rich_text: trimFirstCharOfLineContent(line.rich_text),
}; };
} }
......
...@@ -24,7 +24,8 @@ export default { ...@@ -24,7 +24,8 @@ export default {
{{ line.new_line }} {{ line.new_line }}
</td> </td>
<td class="line_content" :class="lineType"> <td class="line_content" :class="lineType">
<span v-if="line.text">{{ line.text }}</span> <span v-if="line.rich_text" v-html="line.rich_text"></span>
<span v-else-if="line.text">{{ line.text }}</span>
<!-- TODO: replace this hack with zero-width whitespace when we have rich_text from BE --> <!-- TODO: replace this hack with zero-width whitespace when we have rich_text from BE -->
<span v-else>&#8203;</span> <span v-else>&#8203;</span>
</td> </td>
......
...@@ -4,7 +4,9 @@ class SuggestionEntity < API::Entities::Suggestion ...@@ -4,7 +4,9 @@ class SuggestionEntity < API::Entities::Suggestion
include RequestAwareEntity include RequestAwareEntity
unexpose :from_line, :to_line, :from_content, :to_content unexpose :from_line, :to_line, :from_content, :to_content
expose :diff_lines, using: DiffLineEntity expose :diff_lines, using: DiffLineEntity do |suggestion|
Gitlab::Diff::Highlight.new(suggestion.diff_lines).highlight
end
expose :current_user do expose :current_user do
expose :can_apply do |suggestion| expose :can_apply do |suggestion|
Ability.allowed?(current_user, :apply_suggestion, suggestion) Ability.allowed?(current_user, :apply_suggestion, suggestion)
......
---
title: Apply word-diff highlighting to Suggestions
merge_request: 22182
author:
type: changed
...@@ -7,8 +7,8 @@ const oldLine = { ...@@ -7,8 +7,8 @@ const oldLine = {
meta_data: null, meta_data: null,
new_line: null, new_line: null,
old_line: 5, old_line: 5,
rich_text: '-oldtext', rich_text: 'oldrichtext',
text: '-oldtext', text: 'oldplaintext',
type: 'old', type: 'old',
}; };
...@@ -18,8 +18,8 @@ const newLine = { ...@@ -18,8 +18,8 @@ const newLine = {
meta_data: null, meta_data: null,
new_line: 6, new_line: 6,
old_line: null, old_line: null,
rich_text: '-newtext', rich_text: 'newrichtext',
text: '-newtext', text: 'newplaintext',
type: 'new', type: 'new',
}; };
...@@ -42,7 +42,8 @@ describe('SuggestionDiffRow', () => { ...@@ -42,7 +42,8 @@ describe('SuggestionDiffRow', () => {
wrapper.destroy(); wrapper.destroy();
}); });
it('renders correctly', () => { describe('renders correctly', () => {
it('has the right classes on the wrapper', () => {
factory({ factory({
propsData: { propsData: {
line: oldLine, line: oldLine,
...@@ -52,6 +53,37 @@ describe('SuggestionDiffRow', () => { ...@@ -52,6 +53,37 @@ describe('SuggestionDiffRow', () => {
expect(wrapper.is('.line_holder')).toBe(true); expect(wrapper.is('.line_holder')).toBe(true);
}); });
it('renders the rich text when it is available', () => {
factory({
propsData: {
line: newLine,
},
});
expect(wrapper.find('td.line_content').text()).toEqual('newrichtext');
});
it('renders the plain text when it is available but rich text is not', () => {
factory({
propsData: {
line: Object.assign({}, newLine, { rich_text: undefined }),
},
});
expect(wrapper.find('td.line_content').text()).toEqual('newplaintext');
});
it('renders a zero-width space when it has no plain or rich texts', () => {
factory({
propsData: {
line: Object.assign({}, newLine, { rich_text: undefined, text: undefined }),
},
});
expect(wrapper.find('td.line_content').text()).toEqual('\u200B');
});
});
describe('when passed line has type old', () => { describe('when passed line has type old', () => {
beforeEach(() => { beforeEach(() => {
factory({ factory({
......
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