Commit 45f43023 authored by Łukasz Groszkowski's avatar Łukasz Groszkowski Committed by Phil Hughes

Added jest specs, rel, handle only http(s) in linkify, fix color

Credit goes to: @mrincon
parent def87658
<script> <script>
import linkifyHtml from 'linkifyjs/html';
import { sanitize } from '~/lib/dompurify';
import { isAbsolute } from '~/lib/utils/url_utility';
import LineNumber from './line_number.vue'; import LineNumber from './line_number.vue';
const linkifyOptions = {
attributes: {
// eslint-disable-next-line @gitlab/require-i18n-strings
rel: 'nofollow noopener',
},
className: 'gl-reset-color!',
defaultProtocol: 'https',
validate: {
email: false,
url(value) {
return isAbsolute(value);
},
},
};
export default { export default {
functional: true, functional: true,
props: { props: {
...@@ -17,13 +35,15 @@ export default { ...@@ -17,13 +35,15 @@ export default {
const { line, path } = props; const { line, path } = props;
const chars = line.content.map(content => { const chars = line.content.map(content => {
return h( const linkfied = linkifyHtml(content.text, linkifyOptions);
'span', return h('span', {
{ class: ['gl-white-space-pre-wrap', content.style],
class: ['gl-white-space-pre-wrap', content.style], domProps: {
innerHTML: sanitize(linkfied, {
ALLOWED_TAGS: ['a'],
}),
}, },
content.text, });
);
}); });
return h('div', { class: 'js-line log-line' }, [ return h('div', { class: 'js-line log-line' }, [
......
---
title: Make URL links in job logs clickable
merge_request: 40175
author: Łukasz Groszkowski @falxcerebri
type: added
...@@ -106,6 +106,7 @@ ...@@ -106,6 +106,7 @@
"jszip": "^3.1.3", "jszip": "^3.1.3",
"jszip-utils": "^0.0.2", "jszip-utils": "^0.0.2",
"katex": "^0.10.0", "katex": "^0.10.0",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.20", "lodash": "^4.17.20",
"marked": "^0.3.12", "marked": "^0.3.12",
"mermaid": "^8.5.2", "mermaid": "^8.5.2",
......
...@@ -2,21 +2,25 @@ import { shallowMount } from '@vue/test-utils'; ...@@ -2,21 +2,25 @@ import { shallowMount } from '@vue/test-utils';
import Line from '~/jobs/components/log/line.vue'; import Line from '~/jobs/components/log/line.vue';
import LineNumber from '~/jobs/components/log/line_number.vue'; import LineNumber from '~/jobs/components/log/line_number.vue';
const httpUrl = 'http://example.com';
const httpsUrl = 'https://example.com';
const mockProps = ({ text = 'Running with gitlab-runner 12.1.0 (de7731dd)' } = {}) => ({
line: {
content: [
{
text,
style: 'term-fg-l-green',
},
],
lineNumber: 0,
},
path: '/jashkenas/underscore/-/jobs/335',
});
describe('Job Log Line', () => { describe('Job Log Line', () => {
let wrapper; let wrapper;
let data;
const data = {
line: {
content: [
{
text: 'Running with gitlab-runner 12.1.0 (de7731dd)',
style: 'term-fg-l-green',
},
],
lineNumber: 0,
},
path: '/jashkenas/underscore/-/jobs/335',
};
const createComponent = (props = {}) => { const createComponent = (props = {}) => {
wrapper = shallowMount(Line, { wrapper = shallowMount(Line, {
...@@ -27,6 +31,7 @@ describe('Job Log Line', () => { ...@@ -27,6 +31,7 @@ describe('Job Log Line', () => {
}; };
beforeEach(() => { beforeEach(() => {
data = mockProps();
createComponent(data); createComponent(data);
}); });
...@@ -45,4 +50,38 @@ describe('Job Log Line', () => { ...@@ -45,4 +50,38 @@ describe('Job Log Line', () => {
it('renders the provided style as a class attribute', () => { it('renders the provided style as a class attribute', () => {
expect(wrapper.find('span').classes()).toContain(data.line.content[0].style); expect(wrapper.find('span').classes()).toContain(data.line.content[0].style);
}); });
describe('when the line contains a link', () => {
const findLink = () => wrapper.find('span a');
it('renders an http link', () => {
createComponent(mockProps({ text: httpUrl }));
expect(findLink().text()).toBe(httpUrl);
expect(findLink().attributes().href).toEqual(httpUrl);
});
it('renders an https link', () => {
createComponent(mockProps({ text: httpsUrl }));
expect(findLink().text()).toBe(httpsUrl);
expect(findLink().attributes().href).toEqual(httpsUrl);
});
it('renders a link with rel nofollow and noopener', () => {
createComponent(mockProps({ text: httpsUrl }));
expect(findLink().attributes().rel).toBe('nofollow noopener');
});
test.each`
type | text
${'ftp'} | ${'ftp://example.com/file'}
${'email'} | ${'email@example.com'}
${'no scheme'} | ${'example.com/page'}
`('does not render a $type link', ({ text }) => {
createComponent(mockProps({ text }));
expect(findLink().exists()).toBe(false);
});
});
}); });
...@@ -7602,6 +7602,11 @@ linkify-it@^2.0.0: ...@@ -7602,6 +7602,11 @@ linkify-it@^2.0.0:
dependencies: dependencies:
uc.micro "^1.0.1" uc.micro "^1.0.1"
linkifyjs@^2.1.9:
version "2.1.9"
resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.9.tgz#af06e45a2866ff06c4766582590d098a4d584702"
integrity sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==
load-json-file@^1.0.0: load-json-file@^1.0.0:
version "1.1.0" version "1.1.0"
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
......
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