New upcoming page (GoogleChrome#1426)

* Created Upcoming page by duplicating code from schedule page

* The new upcoming page now uses Features and Channels API to fetch data

* Fetching features of each milestone separately

* Using csClient for fetching information

* Removed unreferenced variable set from upcoming-page.js

Author: shivamag00

app.yaml

@@ -77,6 +77,10 @@ handlers:
   script: pages.featurelist.app
   secure: always
 
+- url: /upcoming
+  script: pages.upcoming.app
+  secure: always
+
 - url: /features/schedule
   script: pages.schedule.app
   secure: always

pages/upcoming.py

@@ -0,0 +1,34 @@
+from __future__ import division
+from __future__ import print_function
+
+# -*- coding: utf-8 -*-
+# Copyright 2021 Google Inc.
+#
+# Licensed under the Apache License, Version 2.0 (the "License")
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+__author__ = 'shivam.agrawal.2000@gmail.com (Shivam Agarwal)'
+
+from framework import basehandlers
+import settings
+
+class UpcomingHandler(basehandlers.FlaskHandler):
+
+  TEMPLATE_PATH = 'upcoming.html'
+
+  def get_template_data(self):
+    return {}
+
+
+app = basehandlers.FlaskApplication([
+  ('/upcoming', UpcomingHandler),
+], debug=settings.DEBUG)

static/js-src/cs-client.js

@@ -194,6 +194,16 @@ class ChromeStatusClient {
         `/features/${featureId}/approvals/${fieldId}/comments`,
         {state, comment});
   }
+
+  // Features API
+  getFeaturesInMilestone(milestone) {
+    return this.doGet(`/features?milestone?=${milestone}`);
+  }
+
+  // Channels API
+  getChannels() {
+    return this.doGet('/channels');
+  }
 };
 
 exports.ChromeStatusClient = ChromeStatusClient;

static/js-src/upcoming-page.js

@@ -0,0 +1,85 @@
+// Start fetching right away.
+const channelsArray = ['stable', 'beta', 'dev'];
+
+const channelsPromise = window.csClient.getChannels();
+
+
+document.querySelector('.show-blink-checkbox').addEventListener('change', e => {
+  e.stopPropagation();
+  document.querySelector('chromedash-schedule').showBlink = e.target.checked;
+});
+
+const header = document.querySelector('app-header-layout app-header');
+if (header) {
+  header.fixed = false;
+}
+
+async function init() {
+  // Prepare data for chromedash-schedule
+  const channels = await channelsPromise;
+  let featuresPromise = {};
+
+  channelsArray.forEach((channel) => {
+    featuresPromise[channel] = window.csClient.getFeaturesInMilestone(channels[channel].version);
+  });
+
+  const features = {};
+
+  for (let channel of channelsArray) {
+    features[channel] = await featuresPromise[channel];
+  }
+
+  // Remove the loading sign once the data has been fetched from the APIs
+  document.body.classList.remove('loading');
+
+  channelsArray.forEach((channel) => {
+    channels[channel].components = mapFeaturesToComponents(features[channel].filter(f =>
+      f.browsers.chrome.status.milestone_str === channels[channel].version));
+  });
+
+  const scheduleEl = document.querySelector('chromedash-schedule');
+  scheduleEl.channels = channels;
+
+  window.csClient.getStars().then((starredFeatureIds) => {
+    scheduleEl.starredFeatures = new Set(starredFeatureIds);
+  });
+}
+
+function mapFeaturesToComponents(features) {
+  const featuresMappedToComponents = {};
+  features.forEach(f => {
+    const components = f.browsers.chrome.blink_components;
+    components.forEach(component => {
+      if (!featuresMappedToComponents[component]) {
+        featuresMappedToComponents[component] = [];
+      }
+      featuresMappedToComponents[component].push(f);
+    });
+  });
+
+  for (let [, feautreList] of Object.entries(featuresMappedToComponents)) {
+    sortFeaturesByName(feautreList);
+  }
+
+  return featuresMappedToComponents;
+}
+
+
+/**
+ *  @param {!Array<!Object>} features
+ */
+function sortFeaturesByName(features) {
+  features.sort((a, b) => {
+    a = a.name.toLowerCase();
+    b = b.name.toLowerCase();
+    if (a < b) {
+      return -1;
+    }
+    if (a > b) {
+      return 1;
+    }
+    return 0;
+  });
+}
+
+init();

static/sass/upcoming.scss

@@ -0,0 +1,24 @@
+@import "vars";
+@import "layout";
+
+body[data-path*='features/schedule'] {
+  --app-drawer-width: 0;
+
+  app-drawer {
+    display: none;
+  }
+
+  #spinner {
+    display: none;
+  }
+
+}
+
+.hide-blink-checkbox {
+  margin-right: 8px;
+}
+
+#subheader {
+  max-width: 100%;
+  justify-content: center;
+}

templates/upcoming.html

@@ -0,0 +1,39 @@
+{% extends "_base.html" %}
+{% load inline_file %}
+
+{% block css %}
+  <style>{% inline_file "/static/css/upcoming.css" %}</style>
+{% endblock %}
+
+{% block subheader %}
+  <div id="subheader">
+    <!--<h2>Chrome release timeline</h2>-->
+    <div style="flex:1">
+      <h3>Release timeline</h3>
+      <!-- p class="description">Please note, all dates are estimates and are subject to change.</p -->
+    </div>
+    <!-- <paper-toggle-button> doesn't working here. Related links:
+      https://github.com/PolymerElements/paper-toggle-button/pull/132 -->
+    <label><input type="checkbox" class="show-blink-checkbox">Show Blink components</label>
+  </div>
+{% endblock %}
+
+{% block content %}
+  <section id="releases-section">
+    <chromedash-schedule
+      {% if user %}signedin{% endif %}
+      {# TODO(jrobbins): Fix to work with google sign-in #}
+      loginurl="#"
+    ></chromedash-schedule>
+  </section>
+{% endblock %}
+
+{% block js %}
+  <script nonce="{{nonce}}">
+    (function() {
+      'use strict';
+
+      {% inline_file "/static/js/upcoming-page.min.js" %}
+    })();
+  </script>
+{% endblock %}