Fix calculating title if panels not loaded yet (#5262)

src/common/const.ts

@@ -7,9 +7,6 @@
 /** Icon to use when no icon specified for domain. */
 export const DEFAULT_DOMAIN_ICON = "hass:bookmark";
 
-/** Panel to show when no panel is picked. */
-export const DEFAULT_PANEL = "lovelace";
-
 /** Domains that have a state card. */
 export const DOMAINS_WITH_CARD = [
   "climate",

src/components/ha-sidebar.ts

@@ -18,7 +18,6 @@ import "../components/user/ha-user-badge";
 import "../components/ha-menu-button";
 import { HomeAssistant, PanelInfo } from "../types";
 import { fireEvent } from "../common/dom/fire_event";
-import { DEFAULT_PANEL } from "../common/const";
 import {
   getExternalConfig,
   ExternalConfig,
@@ -33,6 +32,7 @@ import { classMap } from "lit-html/directives/class-map";
 import { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item";
 import { computeRTL } from "../common/util/compute_rtl";
 import { compare } from "../common/string/compare";
+import { getDefaultPanelUrlPath, getDefaultPanel } from "../data/panel";
 
 const SHOW_AFTER_SPACER = ["config", "developer-tools", "hassio"];
 
@@ -77,7 +77,6 @@ const panelSorter = (a: PanelInfo, b: PanelInfo) => {
   // both not built in, sort by title
   return compare(a.title!, b.title!);
 };
-const DEFAULT_PAGE = localStorage.defaultPage || DEFAULT_PANEL;
 
 const computePanels = (hass: HomeAssistant): [PanelInfo[], PanelInfo[]] => {
   const panels = hass.panels;
@@ -88,8 +87,10 @@ const computePanels = (hass: HomeAssistant): [PanelInfo[], PanelInfo[]] => {
   const beforeSpacer: PanelInfo[] = [];
   const afterSpacer: PanelInfo[] = [];
 
+  const defaultPage = getDefaultPanelUrlPath();
+
   Object.values(panels).forEach((panel) => {
-    if (!panel.title || panel.url_path === DEFAULT_PAGE) {
+    if (!panel.title || panel.url_path === defaultPage) {
       return;
     }
     (SHOW_AFTER_SPACER.includes(panel.url_path)
@@ -142,8 +143,7 @@ class HaSidebar extends LitElement {
       }
     }
 
-    const defaultPanel =
-      this.hass.panels[DEFAULT_PAGE] || this.hass.panels[DEFAULT_PANEL];
+    const defaultPanel = getDefaultPanel(hass.panels);
 
     return html`
       <div class="menu">

src/data/panel.ts

@@ -1,23 +1,35 @@
 import { HomeAssistant, PanelInfo } from "../types";
-import { DEFAULT_PANEL } from "../common/const";
+
+/** Panel to show when no panel is picked. */
+const DEFAULT_PANEL = "lovelace";
+
+export const getDefaultPanelUrlPath = () =>
+  localStorage.defaultPage || DEFAULT_PANEL;
+
+export const getDefaultPanel = (panels: HomeAssistant["panels"]) =>
+  panels[localStorage.defaultPage] || panels[DEFAULT_PANEL];
 
 export const getPanelTitle = (hass: HomeAssistant): string | undefined => {
-  let title: string = "";
+  if (!hass.panels) {
+    return;
+  }
+
   const panel = Object.values(hass.panels).find(
     (p: PanelInfo): boolean => p.url_path === hass.panelUrl
   );
+
   if (!panel) {
     return;
   }
-  const defaultPanel =
-    hass.panels[localStorage.defaultPage || DEFAULT_PANEL] ||
-    hass.panels[DEFAULT_PANEL];
-  title =
-    panel.url_path === "profile"
-      ? hass.localize("panel.profile")
-      : hass.localize(`panel.${panel.title}`) ||
-        panel.title ||
-        defaultPanel.title ||
-        hass.localize("panel.states");
-  return title;
+
+  if (panel.url_path === "profile") {
+    return hass.localize("panel.profile");
+  }
+
+  return (
+    hass.localize(`panel.${panel.title}`) ||
+    panel.title ||
+    // default panel
+    (hass.panels[localStorage.defaultPage] || hass.panels[DEFAULT_PANEL]).title!
+  );
 };

src/layouts/home-assistant.ts

@@ -6,11 +6,11 @@ import "./ha-init-page";
 import "../resources/ha-style";
 import "../resources/custom-card-support";
 import { registerServiceWorker } from "../util/register-service-worker";
-import { DEFAULT_PANEL } from "../common/const";
 
 import { Route, HomeAssistant } from "../types";
 import { navigate } from "../common/navigate";
 import { HassElement } from "../state/hass-element";
+import { getDefaultPanelUrlPath } from "../data/panel";
 
 export class HomeAssistantAppEl extends HassElement {
   @property() private _route?: Route;
@@ -86,7 +86,7 @@ export class HomeAssistantAppEl extends HassElement {
       this._route === undefined &&
       (route.path === "" || route.path === "/")
     ) {
-      navigate(window, `/${localStorage.defaultPage || DEFAULT_PANEL}`, true);
+      navigate(window, `/${getDefaultPanelUrlPath()}`, true);
       return;
     }
 

src/state/panel-title-mixin.ts

@@ -2,29 +2,28 @@ import { getPanelTitle } from "../data/panel";
 import { HassBaseEl } from "./hass-base-mixin";
 import { HomeAssistant, Constructor } from "../types";
 
+const setTitle = (title: string | undefined) => {
+  document.title = title ? `${title} - Home Assistant` : "Home Assistant";
+};
+
 export const panelTitleMixin = <T extends Constructor<HassBaseEl>>(
   superClass: T
 ) =>
   class extends superClass {
-    private _oldHass?: HomeAssistant;
-
     protected updated(changedProps) {
       super.updated(changedProps);
       if (!changedProps.has("hass") || !this.hass) {
         return;
       }
-      if (!this._oldHass) {
-        this.setTitle(getPanelTitle(this.hass));
-      }
-      this._oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!this._oldHass || this._oldHass.panelUrl !== this.hass.panelUrl) {
-        this.setTitle(getPanelTitle(this.hass));
-      }
-    }
 
-    private setTitle(title: string | undefined) {
-      document.title = title
-        ? `${title} - ${this.hass!.localize("domain.homeassistant")}`
-        : this.hass!.localize("domain.homeassistant");
+      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+
+      if (
+        !oldHass ||
+        oldHass.panels !== this.hass.panels ||
+        oldHass.panelUrl !== this.hass.panelUrl
+      ) {
+        setTitle(getPanelTitle(this.hass));
+      }
     }
   };