From 45f430233e5428fdba9da1225816a8b2bb6831cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Groszkowski?= <l@groszkow.ski>
Date: Thu, 15 Oct 2020 14:40:06 +0000
Subject: [PATCH] Added jest specs, rel, handle only http(s) in linkify, fix
color
Credit goes to: @mrincon
---
.../javascripts/jobs/components/log/line.vue | 32 +++++++--
.../18324-add-links-to-urls-in-job-logs.yml | 5 ++
package.json | 1 +
.../frontend/jobs/components/log/line_spec.js | 65 +++++++++++++++----
yarn.lock | 5 ++
5 files changed, 89 insertions(+), 19 deletions(-)
create mode 100644 changelogs/unreleased/18324-add-links-to-urls-in-job-logs.yml
diff --git a/app/assets/javascripts/jobs/components/log/line.vue b/app/assets/javascripts/jobs/components/log/line.vue
index e68d5b8eda4d..791664c05d98 100644
--- a/app/assets/javascripts/jobs/components/log/line.vue
+++ b/app/assets/javascripts/jobs/components/log/line.vue
@@ -1,6 +1,24 @@
<script>
+import linkifyHtml from 'linkifyjs/html';
+import { sanitize } from '~/lib/dompurify';
+import { isAbsolute } from '~/lib/utils/url_utility';
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 {
functional: true,
props: {
@@ -17,13 +35,15 @@ export default {
const { line, path } = props;
const chars = line.content.map(content => {
- return h(
- 'span',
- {
- class: ['gl-white-space-pre-wrap', content.style],
+ const linkfied = linkifyHtml(content.text, linkifyOptions);
+ return h('span', {
+ 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' }, [
diff --git a/changelogs/unreleased/18324-add-links-to-urls-in-job-logs.yml b/changelogs/unreleased/18324-add-links-to-urls-in-job-logs.yml
new file mode 100644
index 000000000000..884022e7f869
--- /dev/null
+++ b/changelogs/unreleased/18324-add-links-to-urls-in-job-logs.yml
@@ -0,0 +1,5 @@
+---
+title: Make URL links in job logs clickable
+merge_request: 40175
+author: Åukasz Groszkowski @falxcerebri
+type: added
diff --git a/package.json b/package.json
index ed0d631a036b..e38dc541bc76 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,7 @@
"jszip": "^3.1.3",
"jszip-utils": "^0.0.2",
"katex": "^0.10.0",
+ "linkifyjs": "^2.1.9",
"lodash": "^4.17.20",
"marked": "^0.3.12",
"mermaid": "^8.5.2",
diff --git a/spec/frontend/jobs/components/log/line_spec.js b/spec/frontend/jobs/components/log/line_spec.js
index c2412a807c35..1a30921fece2 100644
--- a/spec/frontend/jobs/components/log/line_spec.js
+++ b/spec/frontend/jobs/components/log/line_spec.js
@@ -2,21 +2,25 @@ import { shallowMount } from '@vue/test-utils';
import Line from '~/jobs/components/log/line.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', () => {
let wrapper;
-
- 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',
- };
+ let data;
const createComponent = (props = {}) => {
wrapper = shallowMount(Line, {
@@ -27,6 +31,7 @@ describe('Job Log Line', () => {
};
beforeEach(() => {
+ data = mockProps();
createComponent(data);
});
@@ -45,4 +50,38 @@ describe('Job Log Line', () => {
it('renders the provided style as a class attribute', () => {
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);
+ });
+ });
});
diff --git a/yarn.lock b/yarn.lock
index 912ecb18167e..b83f3632fba9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7602,6 +7602,11 @@ linkify-it@^2.0.0:
dependencies:
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:
version "1.1.0"
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
--
GitLab