Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/framework/links/mr-issue-link/mr-issue-link.js b/static_src/elements/framework/links/mr-issue-link/mr-issue-link.js
new file mode 100644
index 0000000..029de6c
--- /dev/null
+++ b/static_src/elements/framework/links/mr-issue-link/mr-issue-link.js
@@ -0,0 +1,119 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html, css} from 'lit-element';
+import {ifDefined} from 'lit-html/directives/if-defined';
+import {issueRefToString, issueRefToUrl} from 'shared/convertersV0.js';
+import {SHARED_STYLES} from 'shared/shared-styles.js';
+import '../../mr-dropdown/mr-dropdown.js';
+import '../../../help/mr-cue/mr-fed-ref-cue.js';
+
+/**
+ * `<mr-issue-link>`
+ *
+ * Displays a link to an issue.
+ *
+ */
+export class MrIssueLink extends LitElement {
+ /** @override */
+ static get styles() {
+ return [
+ SHARED_STYLES,
+ css`
+ a[is-closed] {
+ text-decoration: line-through;
+ }
+ mr-dropdown {
+ width: var(--chops-main-font-size);
+ --mr-dropdown-icon-font-size: var(--chops-main-font-size);
+ --mr-dropdown-menu-min-width: 100px;
+ }
+ `,
+ ];
+ }
+
+ /** @override */
+ render() {
+ let fedRefInfo;
+ if (this.issue && this.issue.extIdentifier) {
+ fedRefInfo = html`
+ <!-- TODO(jeffcarp): Figure out CSS to enable menuAlignment=left -->
+ <mr-dropdown
+ label="Federated Reference Info"
+ icon="info_outline"
+ menuAlignment="right"
+ >
+ <mr-fed-ref-cue
+ cuePrefName="federated_reference"
+ fedRefShortlink=${this.issue.extIdentifier}
+ nondismissible>
+ </mr-fed-ref-cue>
+ </mr-dropdown>
+ `;
+ }
+ return html`
+ <a
+ id="bugLink"
+ href=${this.href}
+ title=${ifDefined(this.issue && this.issue.summary)}
+ ?is-closed=${this.isClosed}
+ >${this._linkText}</a>${fedRefInfo}`;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ // The issue being viewed. Falls back gracefully if this is only a ref.
+ issue: {type: Object},
+ text: {type: String},
+ // The global current project name. NOT the issue's project name.
+ projectName: {type: String},
+ queryParams: {type: Object},
+ short: {type: Boolean},
+ };
+ }
+
+ /** @override */
+ constructor() {
+ super();
+
+ this.issue = {};
+ this.queryParams = {};
+ this.short = false;
+ }
+
+ click() {
+ const link = this.shadowRoot.querySelector('a');
+ if (!link) return;
+ link.click();
+ }
+
+ /**
+ * @return {string} Where this issue links to.
+ */
+ get href() {
+ return issueRefToUrl(this.issue, this.queryParams);
+ }
+
+ get isClosed() {
+ if (!this.issue || !this.issue.statusRef) return false;
+
+ return this.issue.statusRef.meansOpen === false;
+ }
+
+ get _linkText() {
+ const {projectName, issue, text, short} = this;
+ if (text) return text;
+
+ if (issue && issue.extIdentifier) {
+ return issue.extIdentifier;
+ }
+
+ const prefix = short ? '' : 'Issue ';
+
+ return prefix + issueRefToString(issue, projectName);
+ }
+}
+
+customElements.define('mr-issue-link', MrIssueLink);
diff --git a/static_src/elements/framework/links/mr-issue-link/mr-issue-link.test.js b/static_src/elements/framework/links/mr-issue-link/mr-issue-link.test.js
new file mode 100644
index 0000000..1bd3ae9
--- /dev/null
+++ b/static_src/elements/framework/links/mr-issue-link/mr-issue-link.test.js
@@ -0,0 +1,147 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {assert} from 'chai';
+import {MrIssueLink} from './mr-issue-link.js';
+
+let element;
+
+describe('mr-issue-link', () => {
+ beforeEach(() => {
+ element = document.createElement('mr-issue-link');
+ document.body.appendChild(element);
+ });
+
+ afterEach(() => {
+ document.body.removeChild(element);
+ });
+
+ it('initializes', () => {
+ assert.instanceOf(element, MrIssueLink);
+ });
+
+ it('strikethrough when closed', async () => {
+ await element.updateComplete;
+ const link = element.shadowRoot.querySelector('#bugLink');
+ assert.isFalse(
+ window.getComputedStyle(link).getPropertyValue(
+ 'text-decoration').includes('line-through'));
+ element.issue = {statusRef: {meansOpen: false}};
+
+ await element.updateComplete;
+
+ assert.isTrue(
+ window.getComputedStyle(link).getPropertyValue(
+ 'text-decoration').includes('line-through'));
+ });
+
+ it('shortens link text when short is true', () => {
+ element.issue = {
+ projectName: 'test',
+ localId: 13,
+ };
+
+ assert.equal(element._linkText, 'Issue test:13');
+
+ element.short = true;
+
+ assert.equal(element._linkText, 'test:13');
+ });
+
+ it('shows projectName only when different from global', async () => {
+ element.issue = {
+ projectName: 'test',
+ localId: 11,
+ };
+ await element.updateComplete;
+
+ const link = element.shadowRoot.querySelector('#bugLink');
+ assert.equal(link.textContent.trim(), 'Issue test:11');
+
+ element.projectName = 'test';
+ await element.updateComplete;
+
+ assert.equal(link.textContent.trim(), 'Issue 11');
+
+ element.projectName = 'other';
+ await element.updateComplete;
+
+ await element.updateComplete;
+
+ assert.equal(link.textContent.trim(), 'Issue test:11');
+ });
+
+ it('shows links for issues', async () => {
+ element.issue = {
+ projectName: 'test',
+ localId: 11,
+ };
+
+ await element.updateComplete;
+
+ const link = element.shadowRoot.querySelector('#bugLink');
+ assert.include(link.href.trim(), '/p/test/issues/detail?id=11');
+ assert.equal(link.title, '');
+ });
+
+ it('shows links for federated issues', async () => {
+ element.issue = {
+ extIdentifier: 'b/5678',
+ };
+
+ await element.updateComplete;
+
+ const link = element.shadowRoot.querySelector('#bugLink');
+ assert.include(link.href.trim(), 'https://issuetracker.google.com/issues/5678');
+ assert.equal(link.title, '');
+ });
+
+ it('displays an icon for federated references', async () => {
+ element.issue = {
+ extIdentifier: 'b/5678',
+ };
+
+ await element.updateComplete;
+
+ const dropdown = element.shadowRoot.querySelector('mr-dropdown');
+ assert.isNotNull(dropdown);
+ const anchor = dropdown.shadowRoot.querySelector('.anchor');
+ assert.isNotNull(anchor);
+ assert.include(anchor.innerText, 'info_outline');
+ });
+
+ it('displays an info popup for federated references', async () => {
+ element.issue = {
+ extIdentifier: 'b/5678',
+ };
+
+ await element.updateComplete;
+
+ const dropdown = element.shadowRoot.querySelector('mr-dropdown');
+ const anchor = dropdown.shadowRoot.querySelector('.anchor');
+ anchor.click();
+
+ await dropdown.updateComplete;
+
+ assert.isTrue(dropdown.opened);
+
+ const cue = dropdown.querySelector('mr-fed-ref-cue');
+ assert.isNotNull(cue);
+ const message = cue.shadowRoot.querySelector('#message');
+ assert.isNotNull(message);
+ assert.include(message.innerText, 'Buganizer issue tracker');
+ });
+
+ it('shows title when summary is defined', async () => {
+ element.issue = {
+ projectName: 'test',
+ localId: 11,
+ summary: 'Summary',
+ };
+
+ await element.updateComplete;
+ const link = element.shadowRoot.querySelector('#bugLink');
+ assert.equal(link.title, 'Summary');
+ });
+});