Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/help/mr-cue/mr-cue.js b/static_src/elements/help/mr-cue/mr-cue.js
new file mode 100644
index 0000000..22b1290
--- /dev/null
+++ b/static_src/elements/help/mr-cue/mr-cue.js
@@ -0,0 +1,282 @@
+// 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 qs from 'qs';
+import {store, connectStore} from 'reducers/base.js';
+import * as userV0 from 'reducers/userV0.js';
+import * as issueV0 from 'reducers/issueV0.js';
+import * as projectV0 from 'reducers/projectV0.js';
+import 'elements/chops/chops-button/chops-button.js';
+import 'elements/chops/chops-dialog/chops-dialog.js';
+import {SHARED_STYLES} from 'shared/shared-styles.js';
+import {cueNames} from './cue-helpers.js';
+
+
+/**
+ * `<mr-cue>`
+ *
+ * An element that displays one of a set of predefined help messages
+ * iff that message is appropriate to the current user and page.
+ *
+ * TODO: Factor this class out into a base view component and separate
+ * usage-specific components, such as those for user prefs.
+ *
+ */
+export class MrCue extends connectStore(LitElement) {
+ /** @override */
+ constructor() {
+ super();
+ this.prefs = new Map();
+ this.issue = null;
+ this.referencedUsers = new Map();
+ this.nondismissible = false;
+ this.cuePrefName = '';
+ this.loginUrl = '';
+ this.hidden = this._shouldBeHidden(this.signedIn, this.prefsLoaded,
+ this.cuePrefName, this.message);
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ issue: {type: Object},
+ referencedUsers: {type: Object},
+ user: {type: Object},
+ cuePrefName: {type: String},
+ nondismissible: {type: Boolean},
+ prefs: {type: Object},
+ prefsLoaded: {type: Boolean},
+ jumpLocalId: {type: Number},
+ loginUrl: {type: String},
+ hidden: {
+ type: Boolean,
+ reflect: true,
+ },
+ };
+ }
+
+ /** @override */
+ static get styles() {
+ return [SHARED_STYLES, css`
+ :host {
+ display: block;
+ margin: 2px 0;
+ padding: 2px 4px 2px 8px;
+ background: var(--chops-notice-bubble-bg);
+ border: var(--chops-notice-border);
+ text-align: center;
+ }
+ :host([centered]) {
+ display: flex;
+ justify-content: center;
+ }
+ :host([hidden]) {
+ display: none;
+ }
+ button[hidden] {
+ visibility: hidden;
+ }
+ i.material-icons {
+ font-size: 14px;
+ }
+ button {
+ background: none;
+ border: none;
+ float: right;
+ padding: 2px;
+ cursor: pointer;
+ border-radius: 50%;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ }
+ button:hover {
+ background: rgba(0, 0, 0, .2);
+ }
+ `];
+ }
+
+ /** @override */
+ render() {
+ return html`
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <button
+ @click=${this.dismiss}
+ title="Don't show this message again."
+ ?hidden=${this.nondismissible}>
+ <i class="material-icons">close</i>
+ </button>
+ <div id="message">${this.message}</div>
+ `;
+ }
+
+ /**
+ * @return {TemplateResult} lit-html template for the cue message a user
+ * should see.
+ */
+ get message() {
+ if (this.cuePrefName === cueNames.CODE_OF_CONDUCT) {
+ return html`
+ Please keep discussions respectful and constructive.
+ See our
+ <a href="${this.codeOfConductUrl}"
+ target="_blank">code of conduct</a>.
+ `;
+ } else if (this.cuePrefName === cueNames.AVAILABILITY_MSGS) {
+ if (this._availablityMsgsRelevant(this.issue)) {
+ return html`
+ <b>Note:</b>
+ Clock icons indicate that users may not be available.
+ Tooltips show the reason.
+ `;
+ }
+ } else if (this.cuePrefName === cueNames.SWITCH_TO_PARENT_ACCOUNT) {
+ if (this._switchToParentAccountRelevant()) {
+ return html`
+ You are signed in to a linked account.
+ <a href="${this.loginUrl}">
+ Switch to ${this.user.linkedParentRef.displayName}</a>.
+ `;
+ }
+ } else if (this.cuePrefName === cueNames.SEARCH_FOR_NUMBERS) {
+ if (this._searchForNumbersRelevant(this.jumpLocalId)) {
+ return html`
+ <b>Tip:</b>
+ To find issues containing "${this.jumpLocalId}", use quotes.
+ `;
+ }
+ }
+ return;
+ }
+
+ /**
+ * Conditionally returns a hardcoded code of conduct URL for
+ * different projects.
+ * @return {string} the URL for the code of conduct.
+ */
+ get codeOfConductUrl() {
+ // TODO(jrobbins): Store this in the DB and pass it via the API.
+ if (this.projectName === 'fuchsia') {
+ return 'https://fuchsia.dev/fuchsia-src/CODE_OF_CONDUCT';
+ }
+ return ('https://chromium.googlesource.com/' +
+ 'chromium/src/+/main/CODE_OF_CONDUCT.md');
+ }
+
+ /** @override */
+ updated(changedProperties) {
+ const hiddenWatchProps = ['prefsLoaded', 'cuePrefName', 'signedIn',
+ 'prefs'];
+ const shouldUpdateHidden = Array.from(changedProperties.keys())
+ .some((propName) => hiddenWatchProps.includes(propName));
+ if (shouldUpdateHidden) {
+ this.hidden = this._shouldBeHidden(this.signedIn, this.prefsLoaded,
+ this.cuePrefName, this.message);
+ }
+ }
+
+ /**
+ * Checks if there are any unavailable users and only displays this cue if so.
+ * @param {Issue} issue
+ * @return {boolean} Whether the User Availability cue should be
+ * displayed or not.
+ */
+ _availablityMsgsRelevant(issue) {
+ if (!issue) return false;
+ return (this._anyUnvailable([issue.ownerRef]) ||
+ this._anyUnvailable(issue.ccRefs));
+ }
+
+ /**
+ * Checks if a given list of users contains any unavailable users.
+ * @param {Array<UserRef>} userRefList
+ * @return {boolean} Whether there are unavailable users.
+ */
+ _anyUnvailable(userRefList) {
+ if (!userRefList) return false;
+ for (const userRef of userRefList) {
+ if (userRef) {
+ const participant = this.referencedUsers.get(userRef.displayName);
+ if (participant && participant.availability) return true;
+ }
+ }
+ }
+
+ /**
+ * Finds if the user has a linked parent account that's separate from the
+ * one they are logged into and conditionally hides the cue if so.
+ * @return {boolean} Whether to show the cue to switch to a parent account.
+ */
+ _switchToParentAccountRelevant() {
+ return this.user && this.user.linkedParentRef;
+ }
+
+ /**
+ * Determines whether the user should see a cue telling them how to avoid the
+ * "jump to issue" feature.
+ * @param {number} jumpLocalId the ID of the issue the user jumped to.
+ * @return {boolean} Whether the user jumped to a number or not.
+ */
+ _searchForNumbersRelevant(jumpLocalId) {
+ return !!jumpLocalId;
+ }
+
+ /**
+ * Checks the user's preferences to hide a particular cue if they have
+ * dismissed it.
+ * @param {boolean} signedIn Whether the user is signed in.
+ * @param {boolean} prefsLoaded Whether the user's prefs have been fetched
+ * from the API.
+ * @param {string} cuePrefName The name of the cue being checked.
+ * @param {string} message
+ * @return {boolean} Whether the cue should be hidden.
+ */
+ _shouldBeHidden(signedIn, prefsLoaded, cuePrefName, message) {
+ if (signedIn && !prefsLoaded) return true;
+ if (this.alreadyDismissed(cuePrefName)) return true;
+ return !message;
+ }
+
+ /** @override */
+ stateChanged(state) {
+ this.projectName = projectV0.viewedProjectName(state);
+ this.issue = issueV0.viewedIssue(state);
+ this.referencedUsers = issueV0.referencedUsers(state);
+ this.user = userV0.currentUser(state);
+ this.prefs = userV0.prefs(state);
+ this.signedIn = this.user && this.user.userId;
+ this.prefsLoaded = userV0.currentUser(state).prefsLoaded;
+
+ const queryString = window.location.search.substring(1);
+ const queryParams = qs.parse(queryString);
+ const q = queryParams.q;
+ if (q && q.match(new RegExp('^\\d+$'))) {
+ this.jumpLocalId = Number(q);
+ }
+ }
+
+ /**
+ * Check whether a cue has already been dismissed in a user's
+ * preferences.
+ * @param {string} pref The name of the user preference to check.
+ * @return {boolean} Whether the cue was dismissed or not.
+ */
+ alreadyDismissed(pref) {
+ return this.prefs && this.prefs.get(pref);
+ }
+
+ /**
+ * Sends a request to the API to save that a user has dismissed a cue.
+ * The results of this request update Redux's state, which leads to
+ * the cue disappearing for the user after the request finishes.
+ * @return {void}
+ */
+ dismiss() {
+ const newPrefs = [{name: this.cuePrefName, value: 'true'}];
+ store.dispatch(userV0.setPrefs(newPrefs, this.signedIn));
+ }
+}
+
+customElements.define('mr-cue', MrCue);