Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/issue-detail/mr-launch-overview/mr-launch-overview.js b/static_src/elements/issue-detail/mr-launch-overview/mr-launch-overview.js
new file mode 100644
index 0000000..741baaa
--- /dev/null
+++ b/static_src/elements/issue-detail/mr-launch-overview/mr-launch-overview.js
@@ -0,0 +1,102 @@
+// 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} from 'lit-element';
+
+import {connectStore} from 'reducers/base.js';
+import * as issueV0 from 'reducers/issueV0.js';
+import './mr-phase.js';
+
+/**
+ * `<mr-launch-overview>`
+ *
+ * This is a shorthand view of the phases for a user to see a quick overview.
+ *
+ */
+export class MrLaunchOverview extends connectStore(LitElement) {
+ /** @override */
+ render() {
+ return html`
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+ rel="stylesheet">
+ <style>
+ mr-launch-overview {
+ max-width: 100%;
+ display: flex;
+ flex-flow: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+ mr-launch-overview[hidden] {
+ display: none;
+ }
+ mr-phase {
+ margin-bottom: 0.75em;
+ }
+ </style>
+ ${this.phases.map((phase) => html`
+ <mr-phase
+ .phaseName=${phase.phaseRef.phaseName}
+ .approvals=${this._approvalsForPhase(this.approvals, phase.phaseRef.phaseName)}
+ ></mr-phase>
+ `)}
+ ${this._phaselessApprovals.length ? html`
+ <mr-phase .approvals=${this._phaselessApprovals}></mr-phase>
+ `: ''}
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ approvals: {type: Array},
+ phases: {type: Array},
+ hidden: {
+ type: Boolean,
+ reflect: true,
+ },
+ };
+ }
+
+ /** @override */
+ createRenderRoot() {
+ return this;
+ }
+
+ /** @override */
+ constructor() {
+ super();
+ this.approvals = [];
+ this.phases = [];
+ this.hidden = true;
+ }
+
+ /** @override */
+ stateChanged(state) {
+ if (!issueV0.viewedIssue(state)) return;
+
+ this.approvals = issueV0.viewedIssue(state).approvalValues || [];
+ this.phases = issueV0.viewedIssue(state).phases || [];
+ }
+
+ /** @override */
+ update(changedProperties) {
+ if (changedProperties.has('phases') || changedProperties.has('approvals')) {
+ this.hidden = !this.phases.length && !this.approvals.length;
+ }
+ super.update(changedProperties);
+ }
+
+ get _phaselessApprovals() {
+ return this._approvalsForPhase(this.approvals);
+ }
+
+ _approvalsForPhase(approvals, phaseName) {
+ return (approvals || []).filter((a) => {
+ // We can assume phase names will be unique.
+ return a.phaseRef.phaseName == phaseName;
+ });
+ }
+}
+customElements.define('mr-launch-overview', MrLaunchOverview);