gr-linked-text to lit
Change-Id: I10d79d9146cd808710d8c80377636eaac5c689e7
diff --git a/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text.ts b/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text.ts
index 2812b47..287ed1b 100644
--- a/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text.ts
+++ b/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text.ts
@@ -14,12 +14,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import '../../../styles/shared-styles';
-import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-linked-text_html';
import {GrLinkTextParser, LinkTextParserConfig} from './link-text-parser';
import {GerritNav} from '../../core/gr-navigation/gr-navigation';
-import {customElement, property, observe} from '@polymer/decorators';
+import {GrLitElement} from '../../lit/gr-lit-element';
+import {css, customElement, html, property, query} from 'lit-element';
declare global {
interface HTMLElementTagNameMap {
@@ -27,17 +25,10 @@
}
}
-export interface GrLinkedText {
- $: {
- output: HTMLSpanElement;
- };
-}
-
@customElement('gr-linked-text')
-export class GrLinkedText extends PolymerElement {
- static get template() {
- return htmlTemplate;
- }
+export class GrLinkedText extends GrLitElement {
+ @query('#output')
+ outputElement?: HTMLSpanElement;
@property({type: Boolean})
removeZeroWidthSpace?: boolean;
@@ -46,61 +37,63 @@
@property({type: String})
content: string | null = null;
- @property({type: Boolean, reflectToAttribute: true})
+ @property({type: Boolean, reflect: true})
pre = false;
- @property({type: Boolean, reflectToAttribute: true})
+ @property({type: Boolean, reflect: true})
disabled = false;
@property({type: Object})
config?: LinkTextParserConfig;
- @observe('content')
- _contentChanged(content: string | null) {
- // In the case where the config may not be set (perhaps due to the
- // request for it still being in flight), set the content anyway to
- // prevent waiting on the config to display the text.
+ static get styles() {
+ return [
+ css`
+ :host {
+ display: block;
+ }
+ :host([pre]) span {
+ white-space: var(--linked-text-white-space, pre-wrap);
+ word-wrap: var(--linked-text-word-wrap, break-word);
+ }
+ :host([disabled]) a {
+ color: inherit;
+ text-decoration: none;
+ pointer-events: none;
+ }
+ a {
+ color: var(--link-color);
+ }
+ `,
+ ];
+ }
+
+ render() {
if (!this.config) {
return;
}
- this.$.output.textContent = content;
+ return html`<span id="output">${this.content}</span>`;
}
- /**
- * Because either the source text or the linkification config has changed,
- * the content should be re-parsed.
- *
- * @param content The raw, un-linkified source string to parse.
- * @param config The server config specifying commentLink patterns
- */
- @observe('content', 'config')
- _contentOrConfigChanged(
- content: string | null,
- config?: LinkTextParserConfig
- ) {
- if (!config) {
- return;
- }
-
+ updated() {
+ if (!this.outputElement || !this.config) return;
+ this.outputElement.textContent = '';
// TODO(TS): mapCommentlinks always has value, remove
if (!GerritNav.mapCommentlinks) return;
- config = GerritNav.mapCommentlinks(config);
- const output = this.$.output;
- output.textContent = '';
+ const config = GerritNav.mapCommentlinks(this.config);
const parser = new GrLinkTextParser(
config,
(text: string | null, href: string | null, fragment?: DocumentFragment) =>
this._handleParseResult(text, href, fragment),
this.removeZeroWidthSpace
);
- parser.parse(content);
-
+ parser.parse(this.content);
// Ensure that external links originating from HTML commentlink configs
// open in a new tab. @see Issue 5567
// Ensure links to the same host originating from commentlink configs
// open in the same tab. When target is not set - default is _self
// @see Issue 4616
- output.querySelectorAll('a').forEach(anchor => {
+ this.outputElement.querySelectorAll('a').forEach(anchor => {
if (anchor.hostname === window.location.hostname) {
anchor.removeAttribute('target');
} else {
@@ -124,7 +117,8 @@
href: string | null,
fragment?: DocumentFragment
) {
- const output = this.$.output;
+ const output = this.outputElement;
+ if (!output) return;
if (href) {
const a = document.createElement('a');
a.setAttribute('href', href);
diff --git a/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text_html.ts b/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text_html.ts
deleted file mode 100644
index 0d44bc8..0000000
--- a/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text_html.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * @license
- * Copyright (C) 2020 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import {html} from '@polymer/polymer/lib/utils/html-tag';
-
-export const htmlTemplate = html`
- <style>
- :host {
- display: block;
- }
- :host([pre]) span {
- white-space: var(--linked-text-white-space, pre-wrap);
- word-wrap: var(--linked-text-word-wrap, break-word);
- }
- :host([disabled]) a {
- color: inherit;
- text-decoration: none;
- pointer-events: none;
- }
- a {
- color: var(--link-color);
- }
- </style>
- <span id="output"></span>
-`;
diff --git a/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text_test.ts b/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text_test.ts
index b2cdba1..c97c168 100644
--- a/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text_test.ts
@@ -85,10 +85,11 @@
window.CANONICAL_PATH = originalCanonicalPath;
});
- test('URL pattern was parsed and linked.', () => {
+ test('URL pattern was parsed and linked.', async () => {
// Regular inline link.
const url = 'https://bugs.chromium.org/p/gerrit/issues/detail?id=3650';
element.content = url;
+ await flush();
const linkEl = queryAndAssert(element, '#output')
.childNodes[0] as HTMLAnchorElement;
assert.equal(linkEl.target, '_blank');
@@ -97,9 +98,10 @@
assert.equal(linkEl.textContent, url);
});
- test('Bug pattern was parsed and linked', () => {
+ test('Bug pattern was parsed and linked', async () => {
// "Issue/Bug" pattern.
element.content = 'Issue 3650';
+ await flush();
let linkEl = queryAndAssert(element, '#output')
.childNodes[0] as HTMLAnchorElement;
@@ -109,6 +111,7 @@
assert.equal(linkEl.textContent, 'Issue 3650');
element.content = 'Bug 3650';
+ await flush();
linkEl = queryAndAssert(element, '#output')
.childNodes[0] as HTMLAnchorElement;
assert.equal(linkEl.target, '_blank');
@@ -117,10 +120,10 @@
assert.equal(linkEl.textContent, 'Bug 3650');
});
- test('Pattern with same prefix as link was correctly parsed', () => {
+ test('Pattern with same prefix as link was correctly parsed', async () => {
// Pattern starts with the same prefix (`http`) as the url.
element.content = 'httpexample 3650';
-
+ await flush();
assert.equal(queryAndAssert(element, '#output').childNodes.length, 1);
const linkEl = queryAndAssert(element, '#output')
.childNodes[0] as HTMLAnchorElement;
@@ -130,12 +133,12 @@
assert.equal(linkEl.textContent, 'httpexample 3650');
});
- test('Change-Id pattern was parsed and linked', () => {
+ test('Change-Id pattern was parsed and linked', async () => {
// "Change-Id:" pattern.
const changeID = 'I11d6a37f5e9b5df0486f6c922d8836dfa780e03e';
const prefix = 'Change-Id: ';
element.content = prefix + changeID;
-
+ await flush();
const textNode = queryAndAssert(element, '#output').childNodes[0];
const linkEl = queryAndAssert(element, '#output')
.childNodes[1] as HTMLAnchorElement;
@@ -147,14 +150,14 @@
assert.equal(linkEl.textContent, changeID);
});
- test('Change-Id pattern was parsed and linked with base url', () => {
+ test('Change-Id pattern was parsed and linked with base url', async () => {
window.CANONICAL_PATH = '/r';
// "Change-Id:" pattern.
const changeID = 'I11d6a37f5e9b5df0486f6c922d8836dfa780e03e';
const prefix = 'Change-Id: ';
element.content = prefix + changeID;
-
+ await flush();
const textNode = queryAndAssert(element, '#output').childNodes[0];
const linkEl = queryAndAssert(element, '#output')
.childNodes[1] as HTMLAnchorElement;
@@ -166,8 +169,9 @@
assert.equal(linkEl.textContent, changeID);
});
- test('Multiple matches', () => {
+ test('Multiple matches', async () => {
element.content = 'Issue 3650\nIssue 3450';
+ await flush();
const linkEl1 = queryAndAssert(element, '#output')
.childNodes[0] as HTMLAnchorElement;
const linkEl2 = queryAndAssert(element, '#output')
@@ -188,7 +192,7 @@
assert.equal(linkEl2.textContent, 'Issue 3450');
});
- test('Change-Id pattern parsed before bug pattern', () => {
+ test('Change-Id pattern parsed before bug pattern', async () => {
// "Change-Id:" pattern.
const changeID = 'I11d6a37f5e9b5df0486f6c922d8836dfa780e03e';
const prefix = 'Change-Id: ';
@@ -200,7 +204,7 @@
const bugUrl = 'https://bugs.chromium.org/p/gerrit/issues/detail?id=3650';
element.content = prefix + changeID + bug;
-
+ await flush();
const textNode = queryAndAssert(element, '#output').childNodes[0];
const changeLinkEl = queryAndAssert(element, '#output')
.childNodes[1] as HTMLAnchorElement;
@@ -218,8 +222,9 @@
assert.equal(bugLinkEl.textContent, 'Issue 3650');
});
- test('html field in link config', () => {
+ test('html field in link config', async () => {
element.content = 'google:do a barrel roll';
+ await flush();
const linkEl = queryAndAssert(element, '#output')
.childNodes[0] as HTMLAnchorElement;
assert.equal(
@@ -229,52 +234,58 @@
assert.equal(linkEl.textContent, 'do a barrel roll');
});
- test('removing hash from links', () => {
+ test('removing hash from links', async () => {
element.content = 'hash:foo';
+ await flush();
const linkEl = queryAndAssert(element, '#output')
.childNodes[0] as HTMLAnchorElement;
assert.isTrue(linkEl.href.endsWith('/awesomesauce'));
assert.equal(linkEl.textContent, 'foo');
});
- test('html with base url', () => {
+ test('html with base url', async () => {
window.CANONICAL_PATH = '/r';
element.content = 'test foo';
+ await flush();
const linkEl = queryAndAssert(element, '#output')
.childNodes[0] as HTMLAnchorElement;
assert.isTrue(linkEl.href.endsWith('/r/awesomesauce'));
assert.equal(linkEl.textContent, 'foo');
});
- test('a is not at start', () => {
+ test('a is not at start', async () => {
window.CANONICAL_PATH = '/r';
element.content = 'a test foo';
+ await flush();
const linkEl = queryAndAssert(element, '#output')
.childNodes[1] as HTMLAnchorElement;
assert.isTrue(linkEl.href.endsWith('/r/awesomesauce'));
assert.equal(linkEl.textContent, 'foo');
});
- test('hash html with base url', () => {
+ test('hash html with base url', async () => {
window.CANONICAL_PATH = '/r';
element.content = 'hash:foo';
+ await flush();
const linkEl = queryAndAssert(element, '#output')
.childNodes[0] as HTMLAnchorElement;
assert.isTrue(linkEl.href.endsWith('/r/awesomesauce'));
assert.equal(linkEl.textContent, 'foo');
});
- test('disabled config', () => {
+ test('disabled config', async () => {
element.content = 'foo:baz';
+ await flush();
assert.equal(queryAndAssert(element, '#output').innerHTML, 'foo:baz');
});
- test('R=email labels link correctly', () => {
+ test('R=email labels link correctly', async () => {
element.removeZeroWidthSpace = true;
element.content = 'R=\u200Btest@google.com';
+ await flush();
assert.equal(
queryAndAssert(element, '#output').textContent,
'R=test@google.com'
@@ -285,9 +296,10 @@
);
});
- test('CC=email labels link correctly', () => {
+ test('CC=email labels link correctly', async () => {
element.removeZeroWidthSpace = true;
element.content = 'CC=\u200Btest@google.com';
+ await flush();
assert.equal(
queryAndAssert(element, '#output').textContent,
'CC=test@google.com'
@@ -298,36 +310,42 @@
);
});
- test('only {http,https,mailto} protocols are linkified', () => {
+ test('only {http,https,mailto} protocols are linkified', async () => {
element.content = 'xx mailto:test@google.com yy';
+ await flush();
let links = queryAndAssert(element, '#output').querySelectorAll('a');
assert.equal(links.length, 1);
assert.equal(links[0].getAttribute('href'), 'mailto:test@google.com');
assert.equal(links[0].innerHTML, 'mailto:test@google.com');
element.content = 'xx http://google.com yy';
+ await flush();
links = queryAndAssert(element, '#output').querySelectorAll('a');
assert.equal(links.length, 1);
assert.equal(links[0].getAttribute('href'), 'http://google.com');
assert.equal(links[0].innerHTML, 'http://google.com');
element.content = 'xx https://google.com yy';
+ await flush();
links = queryAndAssert(element, '#output').querySelectorAll('a');
assert.equal(links.length, 1);
assert.equal(links[0].getAttribute('href'), 'https://google.com');
assert.equal(links[0].innerHTML, 'https://google.com');
element.content = 'xx ssh://google.com yy';
+ await flush();
links = queryAndAssert(element, '#output').querySelectorAll('a');
assert.equal(links.length, 0);
element.content = 'xx ftp://google.com yy';
+ await flush();
links = queryAndAssert(element, '#output').querySelectorAll('a');
assert.equal(links.length, 0);
});
- test('links without leading whitespace are linkified', () => {
+ test('links without leading whitespace are linkified', async () => {
element.content = 'xx abcmailto:test@google.com yy';
+ await flush();
assert.equal(
queryAndAssert(element, '#output').innerHTML.substr(0, 6),
'xx abc'
@@ -338,6 +356,7 @@
assert.equal(links[0].innerHTML, 'mailto:test@google.com');
element.content = 'xx defhttp://google.com yy';
+ await flush();
assert.equal(
queryAndAssert(element, '#output').innerHTML.substr(0, 6),
'xx def'
@@ -348,6 +367,7 @@
assert.equal(links[0].innerHTML, 'http://google.com');
element.content = 'xx qwehttps://google.com yy';
+ await flush();
assert.equal(
queryAndAssert(element, '#output').innerHTML.substr(0, 6),
'xx qwe'
@@ -359,6 +379,7 @@
// Non-latin character
element.content = 'xx абвhttps://google.com yy';
+ await flush();
assert.equal(
queryAndAssert(element, '#output').innerHTML.substr(0, 6),
'xx абв'
@@ -369,15 +390,17 @@
assert.equal(links[0].innerHTML, 'https://google.com');
element.content = 'xx ssh://google.com yy';
+ await flush();
links = queryAndAssert(element, '#output').querySelectorAll('a');
assert.equal(links.length, 0);
element.content = 'xx ftp://google.com yy';
+ await flush();
links = queryAndAssert(element, '#output').querySelectorAll('a');
assert.equal(links.length, 0);
});
- test('overlapping links', () => {
+ test('overlapping links', async () => {
element.config = {
b1: {
match: '(B:\\s*)(\\d+)',
@@ -389,7 +412,8 @@
},
};
element.content = '- B: 123, 45';
- const links = element.root!.querySelectorAll('a');
+ await flush();
+ const links = element.shadowRoot!.querySelectorAll('a');
assert.equal(links.length, 2);
assert.equal(
@@ -403,12 +427,4 @@
assert.equal(links[1].href, 'ftp://foo/45');
assert.equal(links[1].textContent, '45');
});
-
- test('_contentOrConfigChanged called with config', () => {
- const contentStub = sinon.stub(element, '_contentChanged');
- const contentConfigStub = sinon.stub(element, '_contentOrConfigChanged');
- element.content = 'some text';
- assert.isTrue(contentStub.called);
- assert.isTrue(contentConfigStub.called);
- });
});
