Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/framework/links/mr-user-link/mr-user-link.js b/static_src/elements/framework/links/mr-user-link/mr-user-link.js
new file mode 100644
index 0000000..c009f89
--- /dev/null
+++ b/static_src/elements/framework/links/mr-user-link/mr-user-link.js
@@ -0,0 +1,129 @@
+// 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 {connectStore} from 'reducers/base.js';
+import * as issueV0 from 'reducers/issueV0.js';
+import {EMPTY_FIELD_VALUE} from 'shared/issue-fields.js';
+import {SHARED_STYLES} from 'shared/shared-styles.js';
+
+
+const NULL_DISPLAY_NAME_VALUES = [EMPTY_FIELD_VALUE, 'a_deleted_user'];
+
+/**
+ * `<mr-user-link>`
+ *
+ * Displays a link to a user profile.
+ *
+ */
+export class MrUserLink extends connectStore(LitElement) {
+ /** @override */
+ static get styles() {
+ return [
+ SHARED_STYLES,
+ css`
+ :host {
+ display: inline-block;
+ white-space: nowrap;
+ }
+ i.inline-icon {
+ font-size: var(--chops-icon-font-size);
+ color: #B71C1C;
+ vertical-align: bottom;
+ cursor: pointer;
+ }
+ i.inline-icon-unseen {
+ color: var(--chops-purple-700);
+ }
+ i.material-icons[hidden] {
+ display: none;
+ }
+ .availability-notice {
+ color: #B71C1C;
+ font-weight: bold;
+ }
+ `,
+ ];
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ referencedUsers: {
+ type: Object,
+ },
+ showAvailabilityIcon: {
+ type: Boolean,
+ },
+ showAvailabilityText: {
+ type: Boolean,
+ },
+ userRef: {
+ type: Object,
+ attribute: 'userref',
+ },
+ };
+ }
+
+ /** @override */
+ constructor() {
+ super();
+ this.userRef = {};
+ this.referencedUsers = new Map();
+ this.showAvailabilityIcon = false;
+ this.showAvailabilityText = false;
+ }
+
+ /** @override */
+ stateChanged(state) {
+ this.referencedUsers = issueV0.referencedUsers(state);
+ }
+
+ /** @override */
+ render() {
+ const availability = this._getAvailability();
+ const userLink = this._getUserLink();
+ const user = this.referencedUsers.get(this.userRef.displayName) || {};
+ return html`
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+ rel="stylesheet">
+ <i
+ id="availability-icon"
+ class="material-icons inline-icon ${user.last_visit_timestamp ? "" : "inline-icon-unseen"}"
+ title="${availability}"
+ ?hidden="${!(this.showAvailabilityIcon && availability)}"
+ >schedule</i>
+ <a
+ id="user-link"
+ href="${userLink}"
+ title="${this.userRef.displayName}"
+ ?hidden="${!userLink}"
+ >${this.userRef.displayName}</a>
+ <span
+ id="user-text"
+ ?hidden="${userLink}"
+ >${this.userRef.displayName}</span>
+ <div
+ id="availability-text"
+ class="availability-notice"
+ title="${availability}"
+ ?hidden="${!(this.showAvailabilityText && availability)}"
+ >${availability}</div>
+ `;
+ }
+
+ _getAvailability() {
+ if (!this.userRef || !this.referencedUsers) return '';
+ const user = this.referencedUsers.get(this.userRef.displayName) || {};
+ return user.availability;
+ }
+
+ _getUserLink() {
+ if (!this.userRef || !this.userRef.displayName ||
+ NULL_DISPLAY_NAME_VALUES.includes(this.userRef.displayName)) return '';
+ return `/u/${this.userRef.userId || this.userRef.displayName}`;
+ }
+}
+customElements.define('mr-user-link', MrUserLink);
diff --git a/static_src/elements/framework/links/mr-user-link/mr-user-link.test.js b/static_src/elements/framework/links/mr-user-link/mr-user-link.test.js
new file mode 100644
index 0000000..77af246
--- /dev/null
+++ b/static_src/elements/framework/links/mr-user-link/mr-user-link.test.js
@@ -0,0 +1,156 @@
+// 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 {MrUserLink} from './mr-user-link.js';
+
+
+let element;
+let availabilityIcon;
+let userLink;
+let userText;
+let availabilityText;
+
+function getElements() {
+ availabilityIcon = element.shadowRoot.querySelector(
+ '#availability-icon');
+ userLink = element.shadowRoot.querySelector(
+ '#user-link');
+ userText = element.shadowRoot.querySelector(
+ '#user-text');
+ availabilityText = element.shadowRoot.querySelector(
+ '#availability-text');
+}
+
+describe('mr-user-link', () => {
+ beforeEach(() => {
+ element = document.createElement('mr-user-link');
+ document.body.appendChild(element);
+ });
+
+ afterEach(() => {
+ document.body.removeChild(element);
+ });
+
+ it('initializes', () => {
+ assert.instanceOf(element, MrUserLink);
+ });
+
+ it('no link when no userId and displayName is null value', async () => {
+ element.userRef = {displayName: '----'};
+
+ await element.updateComplete;
+ getElements();
+
+ assert.isFalse(userText.hidden);
+ assert.equal(userText.textContent, '----');
+
+ assert.isTrue(availabilityIcon.hidden);
+ assert.isTrue(userLink.hidden);
+ assert.isTrue(availabilityText.hidden);
+ });
+
+ it('link when displayName', async () => {
+ element.userRef = {displayName: 'test@example.com'};
+
+ await element.updateComplete;
+ getElements();
+
+ assert.isFalse(userLink.hidden);
+ assert.equal(userLink.textContent.trim(), 'test@example.com');
+ assert.isTrue(userLink.href.endsWith('/u/test@example.com'));
+
+ assert.isTrue(availabilityIcon.hidden);
+ assert.isTrue(userText.hidden);
+ assert.isTrue(availabilityText.hidden);
+ });
+
+ it('link when userId', async () => {
+ element.userRef = {userId: '1234', displayName: 'test@example.com'};
+
+ await element.updateComplete;
+ getElements();
+
+ assert.isFalse(userLink.hidden);
+ assert.equal(userLink.textContent.trim(), 'test@example.com');
+ assert.isTrue(userLink.href.endsWith('/u/1234'));
+
+ assert.isTrue(availabilityIcon.hidden);
+ assert.isTrue(userText.hidden);
+ assert.isTrue(availabilityText.hidden);
+ });
+
+ it('show availability', async () => {
+ element.userRef = {userId: '1234', displayName: 'test@example.com'};
+ element.referencedUsers = new Map(
+ [['test@example.com', {availability: 'foo'}]]);
+ element.showAvailabilityIcon = true;
+
+ await element.updateComplete;
+ getElements();
+
+ assert.isFalse(availabilityIcon.hidden);
+ assert.equal(availabilityIcon.title, 'foo');
+
+ assert.isFalse(userLink.hidden);
+ assert.isTrue(userText.hidden);
+ assert.isTrue(availabilityText.hidden);
+ });
+
+ it('dont show availability', async () => {
+ element.userRef = {userId: '1234', displayName: 'test@example.com'};
+ element.referencedUsers = new Map(
+ [['test@example.com', {availability: 'foo'}]]);
+
+ await element.updateComplete;
+ getElements();
+
+ assert.isTrue(availabilityIcon.hidden);
+
+ assert.isFalse(userLink.hidden);
+ assert.isTrue(userText.hidden);
+ assert.isTrue(availabilityText.hidden);
+ });
+
+ it('show availability text', async () => {
+ element.userRef = {userId: '1234', displayName: 'test@example.com'};
+ element.referencedUsers = new Map(
+ [['test@example.com', {availability: 'foo'}]]);
+ element.showAvailabilityText = true;
+
+ await element.updateComplete;
+ getElements();
+
+ assert.isFalse(availabilityText.hidden);
+ assert.equal(availabilityText.title, 'foo');
+ assert.equal(availabilityText.textContent, 'foo');
+
+ assert.isTrue(availabilityIcon.hidden);
+ assert.isFalse(userLink.hidden);
+ assert.isTrue(userText.hidden);
+ });
+
+ it('show availability user never visited', async () => {
+ element.userRef = {userId: '1234', displayName: 'test@example.com'};
+ element.referencedUsers = new Map(
+ [['test@example.com', {last_visit_timestamp: undefined}]]);
+
+ await element.updateComplete;
+ getElements();
+
+ assert.isTrue(availabilityIcon.classList.contains("inline-icon-unseen"));
+ });
+
+ it('show availability user visited', async () => {
+ element.userRef = {userId: '1234', displayName: 'test@example.com'};
+ element.referencedUsers = new Map(
+ [['test@example.com', {last_visit_timestamp: "35"}]]);
+
+ await element.updateComplete;
+ getElements();
+
+ assert.isTrue(availabilityIcon.classList.contains("inline-icon"));
+ assert.isFalse(availabilityIcon.classList.contains("inline-icon-unseen"));
+ });
+});