Fix routetail + config subrouting (#2951)

* Fix routetail + config subrouting

* Do not update panel when loading a new one

* Fix init skeleton not removed during loading

src/layouts/ha-init-page.ts

@@ -8,6 +8,7 @@ import {
   CSSResult,
   css,
 } from "lit-element";
+import { removeInitSkeleton } from "../util/init-skeleton";
 
 class HaInitPage extends LitElement {
   public error?: boolean;
@@ -35,6 +36,10 @@ class HaInitPage extends LitElement {
     `;
   }
 
+  protected firstUpdated() {
+    removeInitSkeleton();
+  }
+
   private _retry() {
     location.reload();
   }

src/layouts/hass-router-page.ts

@@ -52,7 +52,9 @@ export class HassRouterPage extends UpdatingElement {
     super.update(changedProps);
 
     if (!changedProps.has("route")) {
-      if (this.lastChild) {
+      // Do not update if we have a currentLoadProm, because that means
+      // that there is still an old panel shown and we're moving to a new one.
+      if (this.lastChild && !this._currentLoadProm) {
         this.updatePageEl(this.lastChild, changedProps);
       }
       return;
@@ -214,11 +216,11 @@ export class HassRouterPage extends UpdatingElement {
     const dividerPos = route.path.indexOf("/", 1);
     return dividerPos === -1
       ? {
-          prefix: route.path,
+          prefix: route.prefix + route.path,
           path: "",
         }
       : {
-          prefix: route.path.substr(0, dividerPos),
+          prefix: route.prefix + route.path.substr(0, dividerPos),
           path: route.path.substr(dividerPos),
         };
   }

src/layouts/partial-panel-resolver.ts

@@ -7,6 +7,7 @@ import {
   RouterOptions,
   RouteOptions,
 } from "./hass-router-page";
+import { removeInitSkeleton } from "../util/init-skeleton";
 
 const CACHE_COMPONENTS = ["lovelace", "states"];
 const COMPONENTS = {
@@ -113,11 +114,7 @@ class PartialPanelResolver extends HassRouterPage {
     this.routerOptions = getRoutes(this.hass!.panels);
     await this.rebuild();
     await this.pageRendered;
-
-    const initEl = document.getElementById("ha-init-skeleton");
-    if (initEl) {
-      initEl.parentElement!.removeChild(initEl);
-    }
+    removeInitSkeleton();
   }
 }
 

src/panels/config/automation/ha-config-automation.js

@@ -18,13 +18,13 @@ class HaConfigAutomation extends PolymerElement {
       </style>
       <app-route
         route="[[route]]"
-        pattern="/automation/edit/:automation"
+        pattern="/edit/:automation"
         data="{{_routeData}}"
         active="{{_edittingAutomation}}"
       ></app-route>
       <app-route
         route="[[route]]"
-        pattern="/automation/new"
+        pattern="/new"
         active="{{_creatingNew}}"
       ></app-route>
 

src/panels/config/cloud/ha-config-cloud.js

@@ -11,12 +11,8 @@ import "./ha-config-cloud-login";
 import "./ha-config-cloud-register";
 import NavigateMixin from "../../../mixins/navigate-mixin";
 
-const LOGGED_IN_URLS = ["/cloud/account"];
-const NOT_LOGGED_IN_URLS = [
-  "/cloud/login",
-  "/cloud/register",
-  "/cloud/forgot-password",
-];
+const LOGGED_IN_URLS = ["/account"];
+const NOT_LOGGED_IN_URLS = ["/login", "/register", "/forgot-password"];
 
 /*
  * @appliesMixin NavigateMixin
@@ -26,7 +22,7 @@ class HaConfigCloud extends NavigateMixin(PolymerElement) {
     return html`
       <app-route
         route="[[route]]"
-        pattern="/cloud/:page"
+        pattern="/:page"
         data="{{_routeData}}"
         tail="{{_routeTail}}"
       ></app-route>
@@ -121,8 +117,6 @@ class HaConfigCloud extends NavigateMixin(PolymerElement) {
   }
 
   _checkRoute(route) {
-    if (!route || route.path.substr(0, 6) !== "/cloud") return;
-
     this._debouncer = Debouncer.debounce(
       this._debouncer,
       timeOut.after(0),

src/panels/config/ha-panel-config.ts

@@ -121,7 +121,7 @@ class HaPanelConfig extends HassRouterPage {
   }
 
   protected updatePageEl(el) {
-    el.route = this.route;
+    el.route = this.routeTail;
     el.hass = this.hass;
     el.isWide = this.hass.dockedSidebar ? this._wideSidebar : this._wide;
     el.cloudStatus = this._cloudStatus;

src/panels/config/integrations/ha-config-integrations.js

@@ -15,7 +15,7 @@ class HaConfigIntegrations extends NavigateMixin(PolymerElement) {
     return html`
       <app-route
         route="[[route]]"
-        pattern="/integrations/:page"
+        pattern="/:page"
         data="{{_routeData}}"
         tail="{{_routeTail}}"
       ></app-route>

src/panels/config/script/ha-config-script.js

@@ -19,13 +19,13 @@ class HaConfigScript extends PolymerElement {
       </style>
       <app-route
         route="[[route]]"
-        pattern="/script/edit/:script"
+        pattern="/edit/:script"
         data="{{_routeData}}"
         active="{{_edittingScript}}"
       ></app-route>
       <app-route
         route="[[route]]"
-        pattern="/script/new"
+        pattern="/new"
         active="{{_creatingNew}}"
       ></app-route>
 

src/panels/config/users/ha-config-users.js

@@ -19,7 +19,7 @@ class HaConfigUsers extends NavigateMixin(PolymerElement) {
     return html`
       <app-route
         route="[[route]]"
-        pattern="/users/:user"
+        pattern="/:user"
         data="{{_routeData}}"
       ></app-route>
 
@@ -72,8 +72,6 @@ class HaConfigUsers extends NavigateMixin(PolymerElement) {
   }
 
   _checkRoute(route) {
-    if (!route || route.path.substr(0, 6) !== "/users") return;
-
     // prevent list getting under toolbar
     fireEvent(this, "iron-resize");
 
@@ -81,8 +79,8 @@ class HaConfigUsers extends NavigateMixin(PolymerElement) {
       this._debouncer,
       timeOut.after(0),
       () => {
-        if (route.path === "/users") {
-          this.navigate("/config/users/picker", true);
+        if (route.path === "") {
+          this.navigate(`${route.prefix}/picker`, true);
         }
       }
     );

src/panels/custom/ha-panel-custom.js

@@ -38,7 +38,7 @@ class HaPanelCustom extends NavigateMixin(EventsMixin(PolymerElement)) {
     delete window.customPanel;
     this._setProperties = null;
     while (this.lastChild) {
-      this.remove(this.lastChild);
+      this.removeChild(this.lastChild);
     }
 
     const config = panel.config._panel_custom;
@@ -95,7 +95,7 @@ It will have access to all data in Home Assistant.
       }
     </style>
     <iframe></iframe>
-    `;
+    `.trim();
     const iframeDoc = this.querySelector("iframe").contentWindow.document;
     iframeDoc.open();
     iframeDoc.write(`<script src='${window.customPanelJS}'></script>`);

src/util/init-skeleton.ts

@@ -0,0 +1,6 @@
+export const removeInitSkeleton = () => {
+  const initEl = document.getElementById("ha-init-skeleton");
+  if (initEl) {
+    initEl.parentElement!.removeChild(initEl);
+  }
+};