Feature detail page UI

client-src/elements/chromedash-feature-page.ts

@@ -7,13 +7,15 @@ import {
   FeatureLink,
   FeatureNotFoundError,
   User,
+  StageDict,
 } from '../js-src/cs-client.js';
 import './chromedash-feature-detail';
 import {DETAILS_STYLES} from './chromedash-feature-detail';
 import './chromedash-feature-highlights.js';
 import {GateDict} from './chromedash-gate-chip.js';
 import {Process, ProgressItem} from './chromedash-gate-column.js';
 import {showToastMessage} from './utils.js';
+import {STAGE_TYPES_SHIPPING} from './form-field-enums';
 
 const INACTIVE_STATES = ['No longer pursuing', 'Deprecated', 'Removed'];
 declare var ga: Function;
@@ -109,6 +111,10 @@ export class ChromedashFeaturePage extends LitElement {
   starred = false;
   @state()
   loading = true;
+  @state()
+  isUpcoming = false;
+  @state()
+  currentDate: number = Date.now();
 
   connectedCallback() {
     super.connectedCallback();
@@ -119,6 +125,53 @@ export class ChromedashFeaturePage extends LitElement {
     return this.feature && Object.keys(this.feature).length !== 0;
   }
 
+  isFeatureUpcoming(latestStableVersion: number, stages: Array<StageDict>) {
+    if (!latestStableVersion || !stages) {
+      return;
+    }
+
+    const shippingMilestones = new Set<number | undefined>();
+    // Get milestones from all shipping stages, STAGE_TYPES_SHIPPING.
+    // TODO: Do we have to check stage.extensions?
+    for (const stage of stages) {
+      if (STAGE_TYPES_SHIPPING.has(stage.stage_type)) {
+        shippingMilestones.add(stage.desktop_first);
+        shippingMilestones.add(stage.android_first);
+        shippingMilestones.add(stage.ios_first);
+        shippingMilestones.add(stage.webview_first);
+      }
+    }
+    // Check if this feature is shipped within two milestones.
+    if (
+      shippingMilestones.has(latestStableVersion + 1) ||
+      shippingMilestones.has(latestStableVersion + 2)
+    ) {
+      this.isUpcoming = true;
+    }
+  }
+
+  /**
+   * A feature is outdated if it is scheduled to ship in the next 2 milestones,
+   * and its accurate_as_of date is at least 4 weeks ago.*/
+  isFeatureOutdated(): boolean {
+    if (!this.isUpcoming) {
+      return false;
+    }
+
+    if (!this.feature.accurate_as_of) {
+      return true;
+    }
+
+    const accurateDate = Date.parse(this.feature.accurate_as_of);
+    // 4-week period.
+    const gracePeriod = 4 * 7 * 24 * 60 * 60 * 1000;
+    if (accurateDate + gracePeriod < this.currentDate) {
+      return true;
+    }
+
+    return false;
+  }
+
   fetchData() {
     this.loading = true;
     Promise.all([
@@ -128,6 +181,7 @@ export class ChromedashFeaturePage extends LitElement {
       window.csClient.getFeatureProcess(this.featureId),
       window.csClient.getStars(),
       window.csClient.getFeatureProgress(this.featureId),
+      window.csClient.getChannels(),
     ])
       .then(
         ([
@@ -137,6 +191,7 @@ export class ChromedashFeaturePage extends LitElement {
           process,
           starredFeatures,
           progress,
+          channels,
         ]) => {
           this.feature = feature;
           this.gates = gatesRes.gates;
@@ -149,6 +204,7 @@ export class ChromedashFeaturePage extends LitElement {
           if (this.feature.name) {
             document.title = `${this.feature.name} - ${this.appTitle}`;
           }
+          this.isFeatureUpcoming(channels['stable'].version, feature.stages);
           this.loading = false;
         }
       )
@@ -299,6 +355,10 @@ export class ChromedashFeaturePage extends LitElement {
     );
   }
 
+  showAccuracyWarning() {
+    return this.userCanEdit() && this.isFeatureOutdated();
+  }
+
   renderSubHeader() {
     const canShare = typeof navigator.share === 'function';
     return html`
@@ -371,6 +431,17 @@ export class ChromedashFeaturePage extends LitElement {
           <a href="/feature/${this.featureId}">
             Feature: ${this.feature.name}
           </a>
+          ${this.isFeatureOutdated()
+            ? html`
+                <span
+                  class="tooltip"
+                  id="outdated-icon"
+                  title="Feature outdated - last checked for overall accuracy more than four weeks ago"
+                >
+                  <iron-icon icon="chromestatus:error" data-tooltip></iron-icon>
+                </span>
+              `
+            : nothing}
           ${this.featureIsInactive()
             ? html`(${this.feature.browsers.chrome.status.text})`
             : nothing}
@@ -420,6 +491,18 @@ export class ChromedashFeaturePage extends LitElement {
         </div>
       `);
     }
+    if (this.showAccuracyWarning()) {
+      warnings.push(html`
+        <div class="warning">
+          Your feature is oudated, but slated to launch soon. Please click the
+          link below to update your feature entry.
+          <br />
+          <a href="/guide/verify_accuracy/${this.featureId}"
+            >Verify feature accuracy</a
+          >
+        </div>
+      `);
+    }
     return warnings;
   }