Don't show back button when no history (#8822)

* Don't show back button when no history

* Update src/translations/en.json

Co-authored-by: Philip Allgaier <mail@spacegaier.de>

Co-authored-by: Philip Allgaier <mail@spacegaier.de>

src/layouts/hass-error-screen.ts

@@ -28,7 +28,7 @@ class HassErrorScreen extends LitElement {
     return html`
       ${this.toolbar
         ? html`<div class="toolbar">
-            ${this.rootnav
+            ${this.rootnav || history.state?.root
               ? html`
                   <ha-menu-button
                     .hass=${this.hass}

src/layouts/hass-loading-screen.ts

@@ -30,7 +30,7 @@ class HassLoadingScreen extends LitElement {
       ${this.noToolbar
         ? ""
         : html`<div class="toolbar">
-            ${this.rootnav
+            ${this.rootnav || history.state?.root
               ? html`
                   <ha-menu-button
                     .hass=${this.hass}

src/layouts/hass-subpage.ts

@@ -8,7 +8,6 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
@@ -20,9 +19,11 @@ class HassSubpage extends LitElement {
 
   @property() public header?: string;
 
-  @property({ type: Boolean }) public showBackButton = true;
+  @property({ type: Boolean, attribute: "main-page" }) public mainPage = false;
 
-  @property({ type: Boolean }) public hassio = false;
+  @property({ type: Boolean, reflect: true }) public narrow = false;
+
+  @property({ type: Boolean }) public supervisor = false;
 
   // @ts-ignore
   @restoreScroll(".content") private _savedScrollPos?: number;
@@ -30,11 +31,20 @@ class HassSubpage extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="toolbar">
+        ${this.mainPage || history.state?.root
+          ? html`
+              <ha-menu-button
+                .hassio=${this.supervisor}
+                .hass=${this.hass}
+                .narrow=${this.narrow}
+              ></ha-menu-button>
+            `
+          : html`
               <ha-icon-button-arrow-prev
                 .hass=${this.hass}
                 @click=${this._backTapped}
-          class=${classMap({ hidden: !this.showBackButton })}
               ></ha-icon-button-arrow-prev>
+            `}
 
         <div class="main-title">${this.header}</div>
         <slot name="toolbar-icon"></slot>

src/layouts/hass-tabs-subpage.ts

@@ -140,7 +140,7 @@ class HassTabsSubpage extends LitElement {
     const showTabs = tabs.length > 1 || !this.narrow;
     return html`
       <div class="toolbar">
-        ${this.mainPage
+        ${this.mainPage || history.state?.root
           ? html`
               <ha-menu-button
                 .hassio=${this.supervisor}

src/layouts/supervisor-error-screen.ts

@@ -11,12 +11,11 @@ import {
   TemplateResult,
 } from "lit-element";
 import { HomeAssistant } from "../types";
-import "./hass-subpage";
 import "../resources/ha-style";
-import "../resources/roboto";
 import { haStyle } from "../resources/styles";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { atLeastVersion } from "../common/config/version";
+import "./hass-subpage";
 
 @customElement("supervisor-error-screen")
 class SupervisorErrorScreen extends LitElement {
@@ -41,21 +40,15 @@ class SupervisorErrorScreen extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="toolbar">
+      <hass-subpage
-        <ha-icon-button-arrow-prev
         .hass=${this.hass}
-          @click=${this._handleBack}
+        .header=${this.hass.localize("ui.errors.supervisor.title")}
-        ></ha-icon-button-arrow-prev>
+      >
-      </div>
-      <div class="content">
-        <div class="title">
-          ${this.hass.localize("ui.panel.error.supervisor.title")}
-        </div>
         <ha-card header="Troubleshooting">
           <div class="card-content">
             <ol>
               <li>
-                ${this.hass.localize("ui.panel.error.supervisor.wait")}
+                ${this.hass.localize("ui.errors.supervisor.wait")}
               </li>
               <li>
                 <a
@@ -64,17 +57,15 @@ class SupervisorErrorScreen extends LitElement {
                   target="_blank"
                   rel="noreferrer"
                 >
-                  ${this.hass.localize("ui.panel.error.supervisor.observer")}
+                  ${this.hass.localize("ui.errors.supervisor.observer")}
                 </a>
               </li>
               <li>
-                ${this.hass.localize("ui.panel.error.supervisor.reboot")}
+                ${this.hass.localize("ui.errors.supervisor.reboot")}
               </li>
               <li>
                 <a href="/config/info" target="_parent">
-                  ${this.hass.localize(
+                  ${this.hass.localize("ui.errors.supervisor.system_health")}
-                    "ui.panel.error.supervisor.system_health"
-                  )}
                 </a>
               </li>
               <li>
@@ -83,13 +74,13 @@ class SupervisorErrorScreen extends LitElement {
                   target="_blank"
                   rel="noreferrer"
                 >
-                  ${this.hass.localize("ui.panel.error.supervisor.ask")}
+                  ${this.hass.localize("ui.errors.supervisor.ask")}
                 </a>
               </li>
             </ol>
           </div>
         </ha-card>
-      </div>
+      </hass-subpage>
     `;
   }
 
@@ -125,50 +116,17 @@ class SupervisorErrorScreen extends LitElement {
     );
   }
 
-  private _handleBack(): void {
-    history.back();
-  }
-
   static get styles(): CSSResultArray {
     return [
       haStyle,
       css`
-        .toolbar {
-          display: flex;
-          align-items: center;
-          font-size: 20px;
-          height: var(--header-height);
-          padding: 0 16px;
-          pointer-events: none;
-          background-color: var(--app-header-background-color);
-          font-weight: 400;
-          box-sizing: border-box;
-        }
-        ha-icon-button-arrow-prev {
-          pointer-events: auto;
-        }
-        .content {
-          color: var(--primary-text-color);
-          display: flex;
-          padding: 16px;
-          align-items: center;
-          justify-content: center;
-          flex-direction: column;
-        }
-        .title {
-          font-size: 24px;
-          font-weight: 400;
-          line-height: 32px;
-          padding-bottom: 16px;
-        }
-
         a {
           color: var(--mdc-theme-primary);
         }
 
         ha-card {
           width: 600px;
-          margin: 16px;
+          margin: auto;
           padding: 8px;
         }
         @media all and (max-width: 500px) {

src/panels/config/automation/trace/ha-automation-trace.ts

@@ -103,7 +103,6 @@ export class HaAutomationTrace extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
-        .backCallback=${() => this._backTapped()}
         .tabs=${configSections.automation}
       >
         ${this.narrow
@@ -388,10 +387,6 @@ export class HaAutomationTrace extends LitElement {
     this._trace = trace;
   }
 
-  private _backTapped(): void {
-    history.back();
-  }
-
   private _downloadTrace() {
     const aEl = document.createElement("a");
     aEl.download = `trace ${this._entityId} ${

src/panels/config/cloud/alexa/cloud-alexa.ts

@@ -214,9 +214,9 @@ class CloudAlexa extends LitElement {
     }
 
     return html`
-      <hass-subpage .hass=${this.hass} header="${this.hass!.localize(
+      <hass-subpage .hass=${this.hass} .narrow=${
-      "ui.panel.config.cloud.alexa.title"
+      this.narrow
-    )}">
+    } .header=${this.hass!.localize("ui.panel.config.cloud.alexa.title")}>
         ${
           emptyFilter
             ? html`

src/panels/config/cloud/google-assistant/cloud-google-assistant.ts

@@ -239,7 +239,8 @@ class CloudGoogleAssistant extends LitElement {
     return html`
       <hass-subpage
         .hass=${this.hass}
-        .header=${this.hass!.localize("ui.panel.config.cloud.google.title")}>
+        .header=${this.hass!.localize("ui.panel.config.cloud.google.title")}
+        .narrow=${this.narrow}>
         ${
           emptyFilter
             ? html`

src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts

@@ -23,6 +23,8 @@ import "./mqtt-subscribe-card";
 class HaPanelDevMqtt extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ type: Boolean }) public narrow!: boolean;
+
   @internalProperty() private topic = "";
 
   @internalProperty() private payload = "";
@@ -41,7 +43,7 @@ class HaPanelDevMqtt extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <hass-subpage .hass=${this.hass}>
+      <hass-subpage .narrow=${this.narrow} .hass=${this.hass}>
         <div class="content">
           <ha-card header="MQTT settings">
             <div class="card-actions">

src/state/url-sync-mixin.ts

@@ -25,6 +25,9 @@ export const urlSyncMixin = <
 
         public connectedCallback(): void {
           super.connectedCallback();
+          if (history.length === 1) {
+            history.replaceState({ ...history.state, root: true }, "");
+          }
           window.addEventListener("popstate", this._popstateChangeListener);
           this.addEventListener("dialog-closed", this._dialogClosedListener);
         }

src/translations/en.json

@@ -823,6 +823,14 @@
         "key_not_expected": "Key \"{key}\" is not expected or not supported by the visual editor.",
         "key_wrong_type": "The provided value for \"{key}\" is not supported by the visual editor. We support ({type_correct}) but received ({type_wrong}).",
         "no_template_editor_support": "Templates not supported in visual editor"
+      },
+      "supervisor": {
+        "title": "Could not load the Supervisor panel!",
+        "wait": "If you just started, make sure you have given the Supervisor enough time to start.",
+        "ask": "Ask for help",
+        "reboot": "Try a reboot of the host",
+        "observer": "Check the Observer",
+        "system_health": "Check System Health"
       }
     },
     "login-form": {
@@ -3521,17 +3529,6 @@
           "complete_access": "It will have access to all data in Home Assistant.",
           "hide_message": "Check docs for the panel_custom component to hide this message"
         }
-      },
-      "error": {
-        "go_back": "Go back",
-        "supervisor": {
-          "title": "Could not load the Supervisor panel!",
-          "wait": "If you just started, make sure you have given the supervisor enough time to start.",
-          "ask": "Ask for help",
-          "reboot": "Try a reboot of the host",
-          "observer": "Check the Observer",
-          "system_health": "Check System Health"
-        }
       }
     }
   },