Handle 0 updates and show back on supervisor panels (#10744)

hassio/src/backups/hassio-backups.ts

@@ -173,7 +173,8 @@ export class HassioBackups extends LitElement {
         clickable
         selectable
         hasFab
-        main-page
+        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
+        back-path="/config"
         supervisor
       >
         <ha-button-menu

hassio/src/dashboard/hassio-dashboard.ts

@@ -29,7 +29,8 @@ class HassioDashboard extends LitElement {
         .narrow=${this.narrow}
         .route=${this.route}
         .tabs=${supervisorTabs(this.hass)}
-        main-page
+        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
+        back-path="/config"
         supervisor
         hasFab
       >

hassio/src/system/hassio-system.ts

@@ -1,5 +1,6 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { atLeastVersion } from "../../../src/common/config/version";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
@@ -29,7 +30,8 @@ class HassioSystem extends LitElement {
         .narrow=${this.narrow}
         .route=${this.route}
         .tabs=${supervisorTabs(this.hass)}
-        main-page
+        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
+        back-path="/config"
         supervisor
       >
         <span slot="header"> ${this.supervisor.localize("panel.system")} </span>

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

@@ -76,7 +76,7 @@ class HaConfigDashboard extends LitElement {
           ${isComponentLoaded(this.hass, "hassio") &&
           this.supervisorUpdates === undefined
             ? html``
-            : html`${this.supervisorUpdates !== null
+            : html`${this.supervisorUpdates?.length
                   ? html`<ha-card>
                       <ha-config-updates
                         .hass=${this.hass}
@@ -86,7 +86,7 @@ class HaConfigDashboard extends LitElement {
                     </ha-card>`
                   : ""}
                 <ha-card>
-                  ${this.narrow && this.supervisorUpdates !== null
+                  ${this.narrow && this.supervisorUpdates?.length
                     ? html`<div class="title">
                         ${this.hass.localize("panel.config")}
                       </div>`

src/panels/config/dashboard/ha-config-updates.ts

@@ -29,7 +29,7 @@ class HaConfigUpdates extends LitElement {
   @state() private _showAll = false;
 
   protected render(): TemplateResult {
-    if (!this.supervisorUpdates) {
+    if (!this.supervisorUpdates?.length) {
       return html``;
     }
 

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

@@ -64,7 +64,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
     },
     {
       path: "/config/helpers",
-      name: "Helpers",
+      name: "Automation Helpers",
       description: "Elements that help build automations",
       iconPath: mdiTools,
       iconColor: "#4D2EA4",