From 0a070a3fdaf2992a5a99292ed3e1c645230e89dd Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Tue, 20 Feb 2018 17:53:35 -0800
Subject: [PATCH] Nav fixes (#908)

* Fail if script is not editable

* Fix config nav
---
 panels/config/cloud/ha-config-cloud.html   |  54 +++++----
 panels/config/ha-panel-config.html         | 130 +++++++++------------
 panels/config/script/ha-script-editor.html |  20 ++--
 3 files changed, 93 insertions(+), 111 deletions(-)

diff --git a/panels/config/cloud/ha-config-cloud.html b/panels/config/cloud/ha-config-cloud.html
index fe5d6930a6..96eb70dee5 100644
--- a/panels/config/cloud/ha-config-cloud.html
+++ b/panels/config/cloud/ha-config-cloud.html
@@ -23,7 +23,7 @@
       tail="{{_routeTail}}"
     ></app-route>
 
-    <template is='dom-if' if='[[account]]' restamp>
+    <template is='dom-if' if='[[_equals(routeData.page, "account")]]' restamp>
       <ha-config-cloud-account
         hass='[[hass]]'
         account='[[account]]'
@@ -31,33 +31,31 @@
       ></ha-config-cloud-account>
     </template>
 
-    <template is='dom-if' if='[[!account]]' restamp>
-      <template is='dom-if' if='[[_equals(_routeData.page, "login")]]' restamp>
-        <ha-config-cloud-login
-          page-name='login'
-          hass='[[hass]]'
-          is-wide='[[isWide]]'
-          email='{{_loginEmail}}'
-        ></ha-config-cloud-login>
-      </template>
+    <template is='dom-if' if='[[_equals(_routeData.page, "login")]]' restamp>
+      <ha-config-cloud-login
+        page-name='login'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+        email='{{_loginEmail}}'
+      ></ha-config-cloud-login>
+    </template>
 
-      <template is='dom-if' if='[[_equals(_routeData.page, "register")]]' restamp>
-        <ha-config-cloud-register
-          page-name='register'
-          hass='[[hass]]'
-          is-wide='[[isWide]]'
-          email='{{_loginEmail}}'
-        ></ha-config-cloud-register>
-      </template>
+    <template is='dom-if' if='[[_equals(_routeData.page, "register")]]' restamp>
+      <ha-config-cloud-register
+        page-name='register'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+        email='{{_loginEmail}}'
+      ></ha-config-cloud-register>
+    </template>
 
-      <template is='dom-if' if='[[_equals(_routeData.page, "forgot-password")]]' restamp>
-        <ha-config-cloud-forgot-password
-          page-name='forgot-password'
-          hass='[[hass]]'
-          is-wide='[[isWide]]'
-          email='{{_loginEmail}}'
-        ></ha-config-cloud-forgot-password>
-      </template>
+    <template is='dom-if' if='[[_equals(_routeData.page, "forgot-password")]]' restamp>
+      <ha-config-cloud-forgot-password
+        page-name='forgot-password'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+        email='{{_loginEmail}}'
+      ></ha-config-cloud-forgot-password>
     </template>
   </template>
 </dom-module>
@@ -98,10 +96,10 @@
       if (!route || route.path.substr(0, 6) !== '/cloud') return;
 
       if (!account && ['/cloud/forgot-password', '/cloud/register'].indexOf(route.path) === -1) {
-        this.navigate('/config/cloud/login', true);
+        setTimeout(() => this.navigate('/config/cloud/login', true), 0);
       } else if (account &&
                  ['/cloud/login', '/cloud/register', '/cloud/forgot-password'].indexOf(route.path) !== -1) {
-        this.navigate('/config/cloud/account', true);
+        setTimeout(() => this.navigate('/config/cloud/account', true), 0);
       }
     }
 
diff --git a/panels/config/ha-panel-config.html b/panels/config/ha-panel-config.html
index 72e3be53df..f8255bfe27 100644
--- a/panels/config/ha-panel-config.html
+++ b/panels/config/ha-panel-config.html
@@ -1,7 +1,6 @@
 <link rel="import" href='../../bower_components/polymer/polymer-element.html'>
 <link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
 <link rel='import' href='../../bower_components/app-route/app-route.html'>
-<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
 
 <link rel="import" href="../../src/layouts/hass-error-screen.html">
 <link rel="import" href="../../src/util/hass-mixins.html">
@@ -17,11 +16,6 @@
 
 <dom-module id="ha-panel-config">
   <template>
-    <style>
-      iron-pages {
-        height: 100%;
-      }
-    </style>
     <app-route
       route='[[route]]'
       pattern='/:page'
@@ -33,30 +27,25 @@
     <iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
     </iron-media-query>
 
-    <iron-pages
-      selected='[[_routeData.page]]'
-      attr-for-selected='page-name'
-      fallback-selection='not-found'
-      selected-attribute='visible'
-    >
-      <template is="dom-if" if='[[_equals(_routeData.page, "core")]]' restamp>
-        <ha-config-core
-          page-name='core'
-          hass='[[hass]]'
-          is-wide='[[isWide]]'
-        ></ha-config-core>
-      </template>
+    <template is="dom-if" if='[[_equals(_routeData.page, "core")]]' restamp>
+      <ha-config-core
+        page-name='core'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+      ></ha-config-core>
+    </template>
 
-      <template is="dom-if" if='[[_equals(_routeData.page, "cloud")]]' restamp>
-        <ha-config-cloud
-          page-name='cloud'
-          route='[[route]]'
-          hass='[[hass]]'
-          is-wide='[[isWide]]'
-          account='[[account]]'
-        ></ha-config-cloud>
-      </template>
+    <template is="dom-if" if='[[_equals(_routeData.page, "cloud")]]' restamp>
+      <ha-config-cloud
+        page-name='cloud'
+        route='[[route]]'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+        account='[[account]]'
+      ></ha-config-cloud>
+    </template>
 
+    <template is="dom-if" if='[[_equals(_routeData.page, "dashboard")]]'>
       <ha-config-dashboard
         page-name='dashboard'
         hass='[[hass]]'
@@ -65,59 +54,53 @@
         narrow='[[narrow]]'
         show-menu='[[showMenu]]'
       ></ha-config-dashboard>
+    </template>
 
-      <template is="dom-if" if='[[_equals(_routeData.page, "automation")]]' restamp>
-        <ha-config-automation
-          page-name='automation'
-          route='[[route]]'
-          hass='[[hass]]'
-          is-wide='[[isWide]]'
-        ></ha-config-automation>
-      </template>
+    <template is="dom-if" if='[[_equals(_routeData.page, "automation")]]' restamp>
+      <ha-config-automation
+        page-name='automation'
+        route='[[route]]'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+      ></ha-config-automation>
+    </template>
 
-      <template is="dom-if" if='[[_equals(_routeData.page, "script")]]' restamp>
-        <ha-config-script
-          page-name='script'
-          route='[[route]]'
-          hass='[[hass]]'
-          is-wide='[[isWide]]'
-        ></ha-config-script>
-      </template>
+    <template is="dom-if" if='[[_equals(_routeData.page, "script")]]' restamp>
+      <ha-config-script
+        page-name='script'
+        route='[[route]]'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+      ></ha-config-script>
+    </template>
 
-      <template is="dom-if" if='[[_equals(_routeData.page, "zwave")]]' restamp>
-        <ha-config-zwave
-          page-name='zwave'
-          hass='[[hass]]'
-          is-wide='[[isWide]]'
-        ></ha-config-zwave>
-      </template>
+    <template is="dom-if" if='[[_equals(_routeData.page, "zwave")]]' restamp>
+      <ha-config-zwave
+        page-name='zwave'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+      ></ha-config-zwave>
+    </template>
 
-      <template is="dom-if" if='[[_equals(_routeData.page, "customize")]]' restamp>
-        <ha-config-customize
-          page-name='customize'
-          hass='[[hass]]'
-          is-wide='[[isWide]]'
-        ></ha-config-customize>
-      </template>
+    <template is="dom-if" if='[[_equals(_routeData.page, "customize")]]' restamp>
+      <ha-config-customize
+        page-name='customize'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+      ></ha-config-customize>
+    </template>
 
-      <template is="dom-if" if='[[_equals(_routeData.page, "integrations")]]' restamp>
-        <ha-config-entries
-          page-name='integrations'
-          hass='[[hass]]'
-        ></ha-config-entries>
-      </template>
-
-      <hass-error-screen
-        page-name='not-found'
-        error='Page not found.'
-        title='Configuration'
-      ></hass-error-screen>
-    </iron-pages>
+    <template is="dom-if" if='[[_equals(_routeData.page, "integrations")]]' restamp>
+      <ha-config-entries
+        page-name='integrations'
+        hass='[[hass]]'
+      ></ha-config-entries>
+    </template>
   </template>
 </dom-module>
 
 <script>
-class HaPanelConfig extends window.hassMixins.EventsMixin(Polymer.Element) {
+class HaPanelConfig extends window.hassMixins.NavigateMixin(Polymer.Element) {
   static get is() { return 'ha-panel-config'; }
 
   static get properties() {
@@ -163,8 +146,7 @@ class HaPanelConfig extends window.hassMixins.EventsMixin(Polymer.Element) {
 
   _routeChanged(route) {
     if (route.path === '' && route.prefix === '/config') {
-      history.replaceState(null, null, '/config/dashboard');
-      this.fire('location-changed');
+      this.navigate('/config/dashboard', true);
     }
   }
 
diff --git a/panels/config/script/ha-script-editor.html b/panels/config/script/ha-script-editor.html
index d7bdc7b94d..64a2ec92cb 100644
--- a/panels/config/script/ha-script-editor.html
+++ b/panels/config/script/ha-script-editor.html
@@ -110,7 +110,7 @@
 </dom-module>
 
 <script>
-class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
+class HaScriptEditor extends window.hassMixins.NavigateMixin(Polymer.Element) {
   static get is() { return 'ha-script-editor'; }
 
   static get properties() {
@@ -194,7 +194,7 @@ class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
     this.config = config;
     this.errors = null;
     this.dirty = true;
-    this._updateComponent(config);
+    this._updateComponent();
   }
 
   scriptChanged(newVal, oldVal) {
@@ -207,7 +207,7 @@ class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
       return;
     }
     this.hass.callApi('get', 'config/script/config/' + window.hassUtil.computeObjectId(newVal))
-      .then(function (config) {
+      .then((config) => {
         // Normalize data: ensure sequence is a list
         // Happens when people copy paste their scripts into the config
         var value = config.sequence;
@@ -218,7 +218,10 @@ class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
         this.dirty = false;
         this.config = config;
         this._updateComponent();
-      }.bind(this));
+      }, () => {
+        alert('Only scripts inside scripts.yaml are editable.');
+        history.back();
+      });
   }
 
   creatingNewChanged(newVal) {
@@ -260,17 +263,16 @@ class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
 
   saveScript() {
     var id = this.creatingNew ? '' + Date.now() : window.hassUtil.computeObjectId(this.script);
-    this.hass.callApi('post', 'config/script/config/' + id, this.config).then(function () {
+    this.hass.callApi('post', 'config/script/config/' + id, this.config).then(() => {
       this.dirty = false;
 
       if (this.creatingNew) {
-        history.replaceState(null, null, '/config/script/edit/' + id);
-        this.fire('location-changed');
+        this.navigate(`/config/script/edit/${id}`, true);
       }
-    }.bind(this), function (errors) {
+    }, (errors) => {
       this.errors = errors.body.message;
       throw errors;
-    }.bind(this));
+    });
   }
 
   computeName(script) {