From 37cc6709d47ac386f08a18fc57001adb7c774fcf Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Sat, 15 May 2021 03:25:28 -0700
Subject: [PATCH] If we have a link, make it a link (#9181)

---
 hassio/src/snapshots/hassio-snapshots.ts    |  2 +
 src/components/ha-tab.ts                    |  2 -
 src/entrypoints/custom-panel.ts             |  9 ++++
 src/layouts/hass-tabs-subpage-data-table.ts |  6 +++
 src/layouts/hass-tabs-subpage.ts            | 60 +++++++++++----------
 5 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/hassio/src/snapshots/hassio-snapshots.ts b/hassio/src/snapshots/hassio-snapshots.ts
index 8fd5a9ed15..b6bb3486f0 100644
--- a/hassio/src/snapshots/hassio-snapshots.ts
+++ b/hassio/src/snapshots/hassio-snapshots.ts
@@ -157,6 +157,8 @@ export class HassioSnapshots extends LitElement {
         @row-click=${this._handleRowClicked}
         clickable
         hasFab
+        main-page
+        supervisor
       >
         <ha-button-menu
           corner="BOTTOM_START"
diff --git a/src/components/ha-tab.ts b/src/components/ha-tab.ts
index 7ab6364e09..1306c7cb4e 100644
--- a/src/components/ha-tab.ts
+++ b/src/components/ha-tab.ts
@@ -122,8 +122,6 @@ export class HaTab extends LitElement {
 
       :host([narrow]) {
         padding: 0 16px;
-        width: 20%;
-        min-width: 0;
       }
     `;
   }
diff --git a/src/entrypoints/custom-panel.ts b/src/entrypoints/custom-panel.ts
index 711bb6db64..28b068fadc 100644
--- a/src/entrypoints/custom-panel.ts
+++ b/src/entrypoints/custom-panel.ts
@@ -11,6 +11,8 @@ import { loadCustomPanel } from "../util/custom-panel/load-custom-panel";
 import { setCustomPanelProperties } from "../util/custom-panel/set-custom-panel-properties";
 import { baseEntrypointStyles } from "../resources/styles";
 import { CSSResult } from "lit-element";
+import { isNavigationClick } from "../common/dom/is-navigation-click";
+import { navigate } from "../common/navigate";
 
 declare global {
   interface Window {
@@ -109,6 +111,13 @@ function initialize(
         document.body.appendChild(errorScreen);
       }
     );
+
+  document.body.addEventListener("click", (ev) => {
+    const href = isNavigationClick(ev);
+    if (href) {
+      navigate(document.body, href);
+    }
+  });
 }
 
 document.addEventListener(
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 179b221515..de56e096cd 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -42,6 +42,10 @@ export class HaTabsSubpageDataTable extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
+  @property({ type: Boolean }) public supervisor = false;
+
+  @property({ type: Boolean, attribute: "main-page" }) public mainPage = false;
+
   /**
    * Object with the columns.
    * @type {Object}
@@ -195,6 +199,8 @@ export class HaTabsSubpageDataTable extends LitElement {
         .backCallback=${this.backCallback}
         .route=${this.route}
         .tabs=${this.tabs}
+        .mainPage=${this.mainPage}
+        .supervisor=${this.supervisor}
       >
         <div slot="toolbar-icon"><slot name="toolbar-icon"></slot></div>
         ${this.narrow
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 448c6e3e17..9b77850e4d 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -15,7 +15,6 @@ import { classMap } from "lit-html/directives/class-map";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { restoreScroll } from "../common/decorators/restore-scroll";
-import { navigate } from "../common/navigate";
 import { LocalizeFunc } from "../common/translations/localize";
 import { computeRTL } from "../common/util/compute_rtl";
 import "../components/ha-icon";
@@ -88,23 +87,23 @@ class HassTabsSubpage extends LitElement {
       return shownTabs.map(
         (page) =>
           html`
-            <ha-tab
-              .hass=${this.hass}
-              @click=${this._tabTapped}
-              .path=${page.path}
-              .active=${page === activeTab}
-              .narrow=${this.narrow}
-              .name=${page.translationKey
-                ? localizeFunc(page.translationKey)
-                : page.name}
-            >
-              ${page.iconPath
-                ? html`<ha-svg-icon
-                    slot="icon"
-                    .path=${page.iconPath}
-                  ></ha-svg-icon>`
-                : html`<ha-icon slot="icon" .icon=${page.icon}></ha-icon>`}
-            </ha-tab>
+            <a href=${page.path}>
+              <ha-tab
+                .hass=${this.hass}
+                .active=${page === activeTab}
+                .narrow=${this.narrow}
+                .name=${page.translationKey
+                  ? localizeFunc(page.translationKey)
+                  : page.name}
+              >
+                ${page.iconPath
+                  ? html`<ha-svg-icon
+                      slot="icon"
+                      .path=${page.iconPath}
+                    ></ha-svg-icon>`
+                  : html`<ha-icon slot="icon" .icon=${page.icon}></ha-icon>`}
+              </ha-tab>
+            </a>
           `
       );
     }
@@ -148,6 +147,14 @@ class HassTabsSubpage extends LitElement {
                 .narrow=${this.narrow}
               ></ha-menu-button>
             `
+          : this.backPath
+          ? html`
+              <a href=${this.backPath}>
+                <ha-icon-button-arrow-prev
+                  .hass=${this.hass}
+                ></ha-icon-button-arrow-prev>
+              </a>
+            `
           : html`
               <ha-icon-button-arrow-prev
                 .hass=${this.hass}
@@ -185,15 +192,7 @@ class HassTabsSubpage extends LitElement {
     this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
   }
 
-  private _tabTapped(ev: Event): void {
-    navigate(this, (ev.currentTarget as any).path);
-  }
-
   private _backTapped(): void {
-    if (this.backPath) {
-      navigate(this, this.backPath);
-      return;
-    }
     if (this.backCallback) {
       this.backCallback();
       return;
@@ -225,11 +224,14 @@ class HassTabsSubpage extends LitElement {
         height: var(--header-height);
         background-color: var(--sidebar-background-color);
         font-weight: 400;
-        color: var(--sidebar-text-color);
         border-bottom: 1px solid var(--divider-color);
         padding: 0 16px;
         box-sizing: border-box;
       }
+      .toolbar a {
+        color: var(--sidebar-text-color);
+        text-decoration: none;
+      }
       #tabbar {
         display: flex;
         font-size: 14px;
@@ -259,6 +261,10 @@ class HassTabsSubpage extends LitElement {
         min-width: 40px;
       }
 
+      ha-tab {
+        display: block;
+      }
+
       ha-menu-button,
       ha-icon-button-arrow-prev,
       ::slotted([slot="toolbar-icon"]) {