blob: a81be654e510725952e81132924d709fe03864ce [file] [log] [blame]
// 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 'elements/chops/chops-dialog/chops-dialog.js';
import {store, connectStore} from 'reducers/base.js';
import * as issueV0 from 'reducers/issueV0.js';
import * as projectV0 from 'reducers/projectV0.js';
import '../mr-approval-card/mr-approval-card.js';
import {valueForField, valuesForField} from 'shared/metadata-helpers.js';
import 'elements/issue-detail/metadata/mr-edit-metadata/mr-edit-metadata.js';
import 'elements/issue-detail/metadata/mr-metadata/mr-field-values.js';
const TARGET_PHASE_MILESTONE_MAP = {
'Beta': 'feature_freeze',
'Stable-Exp': 'final_beta_cut',
'Stable': 'stable_cut',
'Stable-Full': 'stable_cut',
};
const APPROVED_PHASE_MILESTONE_MAP = {
'Beta': 'earliest_beta',
'Stable-Exp': 'final_beta',
'Stable': 'stable_date',
'Stable-Full': 'stable_date',
};
// The following milestones are unique to ios.
const IOS_APPROVED_PHASE_MILESTONE_MAP = {
'Beta': 'earliest_beta_ios',
};
// See monorail:4692 and the use of PHASES_WITH_MILESTONES
// in tracker/issueentry.py
const PHASES_WITH_MILESTONES = ['Beta', 'Stable', 'Stable-Exp', 'Stable-Full'];
/**
* `<mr-phase>`
*
* This is the component for a single phase.
*
*/
export class MrPhase extends connectStore(LitElement) {
/** @override */
render() {
const isPhaseWithMilestone = PHASES_WITH_MILESTONES.includes(
this.phaseName);
const noApprovals = !this.approvals || !this.approvals.length;
return html`
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
mr-phase {
display: block;
}
mr-phase chops-dialog {
--chops-dialog-theme: {
width: 500px;
max-width: 100%;
};
}
mr-phase h2 {
margin: 0;
font-size: var(--chops-large-font-size);
font-weight: normal;
padding: 0.5em 8px;
box-sizing: border-box;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
mr-phase h2 em {
margin-left: 16px;
font-size: var(--chops-main-font-size);
}
mr-phase .chip {
display: inline-block;
font-size: var(--chops-main-font-size);
padding: 0.25em 8px;
margin: 0 2px;
border-radius: 16px;
background: var(--chops-blue-gray-50);
}
.phase-edit {
padding: 0.1em 8px;
}
</style>
<h2>
<div>
Approvals<span ?hidden=${!this.phaseName || !this.phaseName.length}>:
${this.phaseName}
</span>
${isPhaseWithMilestone ? html`${this.fieldDefs &&
this.fieldDefs.map((field) => this._renderPhaseField(field))}
<em ?hidden=${!this._nextDate}>
${this._dateDescriptor}
<chops-timestamp .timestamp=${this._nextDate}></chops-timestamp>
</em>
<em ?hidden=${!this._nextUniqueiOSDate}>
<b>iOS</b> ${this._dateDescriptor}
<chops-timestamp .timestamp=${this._nextUniqueiOSDate}
></chops-timestamp>
</em>
`: ''}
</div>
${isPhaseWithMilestone ? html`
<chops-button @click=${this.edit} class="de-emphasized phase-edit">
<i class="material-icons" role="presentation">create</i>
Edit
</chops-button>
`: ''}
</h2>
${this.approvals && this.approvals.map((approval) => html`
<mr-approval-card
.approvers=${approval.approverRefs}
.setter=${approval.setterRef}
.fieldName=${approval.fieldRef.fieldName}
.phaseName=${this.phaseName}
.statusEnum=${approval.status}
.survey=${approval.survey}
.surveyTemplate=${approval.surveyTemplate}
.urls=${approval.urls}
.labels=${approval.labels}
.users=${approval.users}
></mr-approval-card>
`)}
${noApprovals ? html`No tasks for this phase.` : ''}
<!-- TODO(ehmaldonado): Move to /issue-detail/dialogs -->
<chops-dialog id="editPhase" aria-labelledby="phaseDialogTitle">
<h3 id="phaseDialogTitle" class="medium-heading">
Editing phase: ${this.phaseName}
</h3>
<mr-edit-metadata
id="metadataForm"
class="edit-actions-right"
.formName=${this.phaseName}
.fieldDefs=${this.fieldDefs}
.phaseName=${this.phaseName}
?disabled=${this._updatingIssue}
.error=${this._updateIssueError && this._updateIssueError.description}
@save=${this.save}
@discard=${this.cancel}
isApproval
disableAttachments
></mr-edit-metadata>
</chops-dialog>
`;
}
/**
*
* @param {FieldDef} field The field to be rendered.
* @return {TemplateResult}
* @private
*/
_renderPhaseField(field) {
const values = valuesForField(this._fieldValueMap, field.fieldRef.fieldName,
this.phaseName);
return html`
<div class="chip">
${field.fieldRef.fieldName}:
<mr-field-values
.name=${field.fieldRef.fieldName}
.type=${field.fieldRef.type}
.values=${values}
.projectName=${this.issueRef.projectName}
></mr-field-values>
</div>
`;
}
/** @override */
static get properties() {
return {
issue: {type: Object},
issueRef: {type: Object},
phaseName: {type: String},
approvals: {type: Array},
fieldDefs: {type: Array},
_updatingIssue: {type: Boolean},
_updateIssueError: {type: Object},
_fieldValueMap: {type: Object},
_milestoneData: {type: Object},
_isFetchingMilestone: {type: Boolean},
_fetchedMilestone: {type: String},
};
}
/** @override */
createRenderRoot() {
return this;
}
/** @override */
constructor() {
super();
this.issue = {};
this.issueRef = {};
this.phaseName = '';
this.approvals = [];
this.fieldDefs = [];
this._updatingIssue = false;
this._updateIssueError = undefined;
// A response Object from
// https://chromiumdash.appspot.com/fetch_milestone_schedule?mstone=xx
this._milestoneData = {};
this._isFetchingMilestone = false;
this._fetchedMilestone = undefined;
/**
* @type {Promise} Used for testing to allow waiting for milestone
* fetch operations to finish.
*/
this._fetchMilestoneComplete = undefined;
}
/** @override */
stateChanged(state) {
this.issue = issueV0.viewedIssue(state);
this.issueRef = issueV0.viewedIssueRef(state);
this.fieldDefs = projectV0.fieldDefsForPhases(state);
this._updatingIssue = issueV0.requests(state).update.requesting;
this._updateIssueError = issueV0.requests(state).update.error;
this._fieldValueMap = issueV0.fieldValueMap(state);
}
/** @override */
updated(changedProperties) {
if (changedProperties.has('issue')) {
this.reset();
}
if (changedProperties.has('_updatingIssue')) {
if (!this._updatingIssue && !this._updateIssueError) {
// Close phase edit modal only after a request finishes without errors.
this.cancel();
}
}
if (!this._isFetchingMilestone) {
const milestoneToFetch = this._milestoneToFetch;
if (milestoneToFetch && this._fetchedMilestone !== milestoneToFetch) {
this._fetchMilestoneComplete = this.fetchMilestoneData(
milestoneToFetch);
}
}
}
/**
* Makes an XHR request to Chromium Dash to find Chrome-specific launch data.
* eg. when certain Chrome milestones are planned for release.
* @param {string} milestone A string containing a Chrome milestone number.
* @return {Promise<void>}
*/
async fetchMilestoneData(milestone) {
this._isFetchingMilestone = true;
try {
const resp = await window.fetch(
`https://chromiumdash.appspot.com/fetch_milestone_schedule?mstone=${
milestone}`);
this._milestoneData = await resp.json();
} catch (error) {
console.error(`Error when fetching milestone data: ${error}`);
}
this._fetchedMilestone = milestone;
this._isFetchingMilestone = false;
}
/**
* Opens the phase editing dialog when the user clicks the edit button.
*/
edit() {
this.reset();
this.querySelector('#editPhase').open();
}
/**
* Stops editing the phase.
*/
cancel() {
this.querySelector('#editPhase').close();
this.reset();
}
/**
* Resets the edit form to its default values.
*/
reset() {
const form = this.querySelector('#metadataForm');
form.reset();
}
/**
* Saves the changes the user has made.
*/
save() {
const form = this.querySelector('#metadataForm');
const delta = form.delta;
if (delta.fieldValsAdd) {
delta.fieldValsAdd = delta.fieldValsAdd.map(
(fv) => Object.assign({phaseRef: {phaseName: this.phaseName}}, fv));
}
if (delta.fieldValsRemove) {
delta.fieldValsRemove = delta.fieldValsRemove.map(
(fv) => Object.assign({phaseRef: {phaseName: this.phaseName}}, fv));
}
const message = {
issueRef: this.issueRef,
delta: delta,
sendEmail: form.sendEmail,
commentContent: form.getCommentContent(),
};
if (message.commentContent || message.delta) {
store.dispatch(issueV0.update(message));
}
}
/**
* Shows the next relevant Chrome Milestone date for this phase. Depending
* on the M-Target, M-Approved, or M-Launched values, this date means
* different things.
* @return {number} Unix timestamp in seconds.
* @private
*/
get _nextDate() {
const phaseName = this.phaseName;
const status = this._status;
let data = this._milestoneData && this._milestoneData.mstones;
// Data pulled from https://chromiumdash.appspot.com/fetch_milestone_schedule?mstone=xx
if (!phaseName || !status || !data || !data.length) return 0;
data = data[0];
let key = TARGET_PHASE_MILESTONE_MAP[phaseName];
if (['Approved', 'Launched'].includes(status)) {
const osValues = this._fieldValueMap.get('OS');
// If iOS is the only OS and the phase is one where iOS has unique
// milestones, the only date we show should be this._nextUniqueiOSDate.
if (osValues && osValues.every((os) => {
return os === 'iOS';
}) && phaseName in IOS_APPROVED_PHASE_MILESTONE_MAP) {
return 0;
}
key = APPROVED_PHASE_MILESTONE_MAP[phaseName];
}
if (!key || !(key in data)) return 0;
return Math.floor((new Date(data[key])).getTime() / 1000);
}
/**
* For issues where iOS is the OS, this function finds the relevant iOS
* launch date.
* @return {number} Unix timestamp in seconds.
* @private
*/
get _nextUniqueiOSDate() {
const phaseName = this.phaseName;
const status = this._status;
let data = this._milestoneData && this._milestoneData.mstones;
// Data pull from https://chromiumdash.appspot.com/fetch_milestone_schedule?mstone=xx
if (!phaseName || !status || !data || !data.length) return 0;
data = data[0];
const osValues = this._fieldValueMap.get('OS');
if (['Approved', 'Launched'].includes(status) &&
osValues && osValues.includes('iOS')) {
const key = IOS_APPROVED_PHASE_MILESTONE_MAP[phaseName];
if (key) {
return Math.floor((new Date(data[key])).getTime() / 1000);
}
}
return 0;
}
/**
* Depending on what kind of date we're showing, we want to include
* different text to describe the date.
* @return {string}
* @private
*/
get _dateDescriptor() {
const status = this._status;
if (status === 'Approved') {
return 'Launching on ';
} else if (status === 'Launched') {
return 'Launched on ';
}
return 'Due by ';
}
/**
* The Chrome-specific status of a gate, computed from M-Approved,
* M-Launched, and M-Target fields.
* @return {string}
* @private
*/
get _status() {
const target = this._targetMilestone;
const approved = this._approvedMilestone;
const launched = this._launchedMilestone;
if (approved >= target) {
if (launched >= approved) {
return 'Launched';
}
return 'Approved';
}
return 'Target';
}
/**
* The Chrome Milestone that this phase was approved for.
* @return {string}
* @private
*/
get _approvedMilestone() {
return valueForField(this._fieldValueMap, 'M-Approved', this.phaseName);
}
/**
* The Chrome Milestone that this phase was launched on.
* @return {string}
* @private
*/
get _launchedMilestone() {
return valueForField(this._fieldValueMap, 'M-Launched', this.phaseName);
}
/**
* The Chrome Milestone that this phase is targeting.
* @return {string}
* @private
*/
get _targetMilestone() {
return valueForField(this._fieldValueMap, 'M-Target', this.phaseName);
}
/**
* The Chrome Milestone that's used to decide what date to show the user.
* @return {string}
* @private
*/
get _milestoneToFetch() {
const target = Number.parseInt(this._targetMilestone) || 0;
const approved = Number.parseInt(this._approvedMilestone) || 0;
const launched = Number.parseInt(this._launchedMilestone) || 0;
const latestMilestone = Math.max(target, approved, launched);
return latestMilestone > 0 ? `${latestMilestone}` : '';
}
}
customElements.define('mr-phase', MrPhase);