config_service: add routing for config-set page.

appengine/config_service/ui/src/config-ui/config-ui.html

+<!--
+  Copyright 2017 The LUCI Authors. All rights reserved.
+  Use of this source code is governed under the Apache License, Version 2.0
+  that can be found in the LICENSE file.
+-->
+
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/app-layout/app-layout.html">
+<link rel="import" href="../../bower_components/paper-search/paper-search-bar.html">
+<link rel="import" href="../../bower_components/app-route/app-location.html">
+<link rel="import" href="../../bower_components/app-route/app-route.html">
+
+<link rel="import" href="config-set.html">
+<link rel="import" href="front-page.html">
+
+<dom-module id="config-ui">
+  <template>
+    <style>
+      app-toolbar {
+        background-color: #efefef;
+        color: #232323;
+      }
+
+      app-header {
+        @apply --layout-fixed-top;
+      }
+
+      .logo {
+        height: 100%;
+      }
+
+      .title {
+        padding-left: 1%;
+        padding-bottom: 0.5%;
+        font-size: 150%;
+        font-family: sans-serif;
+      }
+    </style>
+
+    <app-header reveals>
+      <app-toolbar>
+        <image class="logo" src="/static/images/chromium.png"/>
+        <div class="title" main-title>Configuration Service (not fully implemented)</div>

[seanmccullough1, 2017/06/15 19:50:00]

80char

[ayanaadylova, 2017/06/15 21:26:00]

Done.

+      </app-toolbar>
+    </app-header>
+
+
+    <app-location route="{{route}}" use-hash-as-path></app-location>

[seanmccullough1, 2017/06/15 19:50:00]

Every browser we care about supports html5 navigation API.

What breaks when you take use-hash-as-path out and go with the default? Does the
server-side routing not handle it well?

[Ryan Tseng, 2017/06/15 20:01:54]

We're doing it this way because for example "/" is cached differently than
"/projects/blah".  So even with the page cached, if the browser hits a different
URL, it'll try to fetch the whole app again.  I think this can be fixed with
service workers, but that's more complexity than we want to do initially for
now.

[ayanaadylova, 2017/06/15 21:26:00]

Done.

[ayanaadylova, 2017/06/15 21:26:00]

Done.

+    <app-route  route="{{route}}" 
+                pattern="/services/:serviceName" 
+                data="{{serviceData}}" 
+                tail="{{serviceTail}}" 
+                active="{{serviceActive}}"></app-route>
+
+    <app-route  route="{{route}}" 
+                pattern="/projects/:projectName" 
+                data="{{projectData}}" 
+                tail="{{projectTail}}" 
+                active="{{projectActive}}"></app-route>
+
+    <app-route  route="{{route}}" 
+                pattern="/" 
+                active="{{frontPageActive}}"></app-route>
+
+    <div hidden$="{{!frontPageActive}}">

[seanmccullough1, 2017/06/15 19:50:01]

[[ ]] instead of {{ }}. You don't need two-way binding for this property. Same
with the other *PageActive attributes below.

[ayanaadylova, 2017/06/15 21:26:00]

Done.

+      <front-page></front-page>
+    </div>
+    <div hidden$="{{!serviceActive}}">
+      <config-set category="Service" config-set-name="{{serviceData.serviceName}}" route="{{serviceTail}}" ></config-set>

[Ryan Tseng, 2017/06/15 18:55:56]

nit: 80 char.  The indentation style you used in Line 49 is fine.

[ayanaadylova, 2017/06/15 21:26:00]

Done.

+    </div>      
+    <div hidden$="{{!projectActive}}">
+      <config-set category="Project"  config-set-name="{{projectData.projectName}}" route="{{projectTail}}"></config-set>

[Ryan Tseng, 2017/06/15 18:55:56]

nit: same here, 80 char

[ayanaadylova, 2017/06/15 21:26:00]

Done.

+    </div>        
+
+  </template>
+
+  <script>
+    Polymer({

[seanmccullough1, 2017/06/15 19:50:01]

IIUC you can use native ES6 classes instead of the Polymer({}) factory with
polymer 2.0. This should work too though.

[ayanaadylova, 2017/06/15 21:26:00]

Acknowledged.

+      is: 'config-ui',
+      
+      ready: function() {
+        this.async(function() {
+          // If the path is blank, redirect to /
+          if (!this.route.path) {
+            this.set('route.path', '/');
+          }
+        });
+      },
+
+    });
+  </script>
+</dom-module>