Add reload buttons to store and snapshot (#5714)

hassio/src/addon-store/hassio-addon-store.ts

@@ -13,11 +13,14 @@ import {
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
 import "../../../src/layouts/loading-screen";
-import { HomeAssistant } from "../../../src/types";
+import "../../../src/layouts/hass-tabs-subpage";
+import { HomeAssistant, Route } from "../../../src/types";
 import "../components/hassio-search-input";
 import "./hassio-addon-repository";
 import "./hassio-repositories-editor";
 
+import { supervisorTabs } from "../hassio-panel";
+
 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
   if (a.slug === "local") {
     return -1;
@@ -35,11 +38,15 @@ const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
 };
 
 class HassioAddonStore extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() private _addons?: HassioAddonInfo[];
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @property() private _repos?: HassioAddonRepository[];
+  @property({ attribute: false }) public route!: Route;
+
+  @property({ attribute: false }) private _addons?: HassioAddonInfo[];
+
+  @property({ attribute: false }) private _repos?: HassioAddonRepository[];
 
   @property() private _filter?: string;
 
@@ -52,11 +59,9 @@ class HassioAddonStore extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (!this._addons || !this._repos) {
-      return html` <loading-screen></loading-screen> `;
-    }
     const repos: TemplateResult[] = [];
 
+    if (this._repos) {
       for (const repo of this._repos) {
         const addons = this._addons!.filter(
           (addon) => addon.repository === repo.slug
@@ -75,11 +80,30 @@ class HassioAddonStore extends LitElement {
           ></hassio-addon-repository>
         `);
       }
+    }
 
     return html`
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+        hassio
+        .tabs=${supervisorTabs}
+      >
+        <span slot="header">Add-on store</span>
+        <paper-icon-button
+          icon="hassio:reload"
+          slot="toolbar-icon"
+          aria-label="Reload add-ons"
+          @click=${this.refreshData}
+        ></paper-icon-button>
+
+        ${repos.length === 0
+          ? html`<loading-screen></loading-screen>`
+          : html`
               <hassio-repositories-editor
                 .hass=${this.hass}
-        .repos=${this._repos}
+                .repos=${this._repos!}
               ></hassio-repositories-editor>
 
               <hassio-search-input
@@ -88,6 +112,8 @@ class HassioAddonStore extends LitElement {
               ></hassio-search-input>
 
               ${repos}
+            `}
+      </hass-tabs-subpage>
     `;
   }
 

hassio/src/addon-view/hassio-addon-dashboard.ts

@@ -59,7 +59,7 @@ class HassioAddonDashboard extends LitElement {
       {
         name: "Info",
         path: `/hassio/addon/${this.addon.slug}/info`,
-        icon: "mdi:information-variant",
+        icon: "hassio:information-variant",
       },
     ];
 
@@ -67,7 +67,7 @@ class HassioAddonDashboard extends LitElement {
       addonTabs.push({
         name: "Documentation",
         path: `/hassio/addon/${this.addon.slug}/documentation`,
-        icon: "mdi:file-document",
+        icon: "hassio:file-document",
       });
     }
 
@@ -76,12 +76,12 @@ class HassioAddonDashboard extends LitElement {
         {
           name: "Configuration",
           path: `/hassio/addon/${this.addon.slug}/config`,
-          icon: "mdi:cogs",
+          icon: "hassio:cogs",
         },
         {
           name: "Log",
           path: `/hassio/addon/${this.addon.slug}/logs`,
-          icon: "mdi:math-log",
+          icon: "hassio:math-log",
         }
       );
     }
@@ -94,7 +94,7 @@ class HassioAddonDashboard extends LitElement {
         .narrow=${this.narrow}
         .backPath=${this.addon.version ? "/hassio/dashboard" : "/hassio/store"}
         .route=${route}
-        .hassio=${true}
+        hassio
         .tabs=${addonTabs}
       >
         <span slot="header">${this.addon.name}</span>

hassio/src/dashboard/hassio-dashboard.ts

@@ -13,22 +13,37 @@ import {
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
 import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
+import { HomeAssistant, Route } from "../../../src/types";
+import "../../../src/layouts/hass-tabs-subpage";
 import "./hassio-addons";
 import "./hassio-update";
 
+import { supervisorTabs } from "../hassio-panel";
+
 @customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public supervisorInfo!: HassioSupervisorInfo;
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @property() public hassInfo!: HassioHomeAssistantInfo;
+  @property({ attribute: false }) public route!: Route;
 
-  @property() public hassOsInfo!: HassioHassOSInfo;
+  @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
+
+  @property({ attribute: false }) public hassInfo!: HassioHomeAssistantInfo;
+
+  @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
 
   protected render(): TemplateResult {
     return html`
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        hassio
+        .route=${this.route}
+        .tabs=${supervisorTabs}
+      >
+        <span slot="header">Dashboard</span>
         <div class="content">
           <hassio-update
             .hass=${this.hass}
@@ -41,6 +56,7 @@ class HassioDashboard extends LitElement {
             .addons=${this.supervisorInfo.addons}
           ></hassio-addons>
         </div>
+      </hass-tabs-subpage>
     `;
   }
 

hassio/src/hassio-panel-router.ts

@@ -8,7 +8,7 @@ import {
   HassRouterPage,
   RouterOptions,
 } from "../../src/layouts/hass-router-page";
-import { HomeAssistant } from "../../src/types";
+import { HomeAssistant, Route } from "../../src/types";
 import "./addon-store/hassio-addon-store";
 // Don't codesplit it, that way the dashboard always loads fast.
 import "./dashboard/hassio-dashboard";
@@ -20,6 +20,10 @@ import "./system/hassio-system";
 class HassioPanelRouter extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public route!: Route;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
   @property({ attribute: false }) public supervisorInfo: HassioSupervisorInfo;
 
   @property({ attribute: false }) public hostInfo: HassioHostInfo;
@@ -47,6 +51,8 @@ class HassioPanelRouter extends HassRouterPage {
 
   protected updatePageEl(el) {
     el.hass = this.hass;
+    el.route = this.route;
+    el.narrow = this.narrow;
     el.supervisorInfo = this.supervisorInfo;
     el.hostInfo = this.hostInfo;
     el.hassInfo = this.hassInfo;

hassio/src/hassio-panel.ts

@@ -15,7 +15,29 @@ import "../../src/resources/ha-style";
 import { HomeAssistant, Route } from "../../src/types";
 import "./hassio-panel-router";
 import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
-import "../../src/layouts/hass-tabs-subpage";
+
+export const supervisorTabs: PageNavigation[] = [
+  {
+    name: "Dashboard",
+    path: `/hassio/dashboard`,
+    icon: "hassio:view-dashboard",
+  },
+  {
+    name: "Add-on store",
+    path: `/hassio/store`,
+    icon: "hassio:store",
+  },
+  {
+    name: "Snapshots",
+    path: `/hassio/snapshots`,
+    icon: "hassio:backup-restore",
+  },
+  {
+    name: "System",
+    path: `/hassio/system`,
+    icon: "hassio:cogs",
+  },
+];
 
 @customElement("hassio-panel")
 class HassioPanel extends LitElement {
@@ -34,46 +56,16 @@ class HassioPanel extends LitElement {
   @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
 
   protected render(): TemplateResult {
-    const supervisorTabs: PageNavigation[] = [
-      {
-        name: "Dashboard",
-        path: `/hassio/dashboard`,
-        icon: "mdi:view-dashboard",
-      },
-      {
-        name: "Add-on store",
-        path: `/hassio/store`,
-        icon: "mdi:store",
-      },
-      {
-        name: "Snapshots",
-        path: `/hassio/snapshots`,
-        icon: "mdi:backup-restore",
-      },
-      {
-        name: "System",
-        path: `/hassio/system`,
-        icon: "mdi:cogs",
-      },
-    ];
-
     return html`
-      <hass-tabs-subpage
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .route=${this.route}
-        .tabs=${supervisorTabs}
-      >
-        <span slot="header">Supervisor</span>
       <hassio-panel-router
         .route=${this.route}
         .hass=${this.hass}
+        .narrow=${this.narrow}
         .supervisorInfo=${this.supervisorInfo}
         .hostInfo=${this.hostInfo}
         .hassInfo=${this.hassInfo}
         .hassOsInfo=${this.hassOsInfo}
       ></hassio-panel-router>
-      </hass-tabs-subpage>
     `;
   }
 }

hassio/src/snapshots/hassio-snapshots.ts

@@ -30,11 +30,14 @@ import {
 import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
 import { PolymerChangedEvent } from "../../../src/polymer-types";
 import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
+import { HomeAssistant, Route } from "../../../src/types";
+import "../../../src/layouts/hass-tabs-subpage";
 import "../components/hassio-card-content";
 import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
 import { hassioStyle } from "../resources/hassio-style";
 
+import { supervisorTabs } from "../hassio-panel";
+
 interface CheckboxItem {
   slug: string;
   name: string;
@@ -43,9 +46,13 @@ interface CheckboxItem {
 
 @customElement("hassio-snapshots")
 class HassioSnapshots extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public supervisorInfo!: HassioSupervisorInfo;
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public route!: Route;
+
+  @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
 
   @property() private _snapshotName = "";
 
@@ -81,13 +88,29 @@ class HassioSnapshots extends LitElement {
 
   protected render(): TemplateResult {
     return html`
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        hassio
+        .route=${this.route}
+        .tabs=${supervisorTabs}
+      >
+        <span slot="header">Snapshots</span>
+
+        <paper-icon-button
+          icon="hassio:reload"
+          slot="toolbar-icon"
+          aria-label="Reload snapshots"
+          @click=${this.refreshData}
+        ></paper-icon-button>
+
         <div class="content">
           <h1>
             Create snapshot
           </h1>
           <p class="description">
-          Snapshots allow you to easily backup and restore all data of your Home
+            Snapshots allow you to easily backup and restore all data of your
-          Assistant instance.
+            Home Assistant instance.
           </p>
           <div class="card-group">
             <paper-card>
@@ -210,6 +233,7 @@ class HassioSnapshots extends LitElement {
                 )}
           </div>
         </div>
+      </hass-tabs-subpage>
     `;
   }
 

hassio/src/system/hassio-system.ts

@@ -14,15 +14,22 @@ import {
 } from "../../../src/data/hassio/host";
 import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
 import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
+import "../../../src/layouts/hass-tabs-subpage";
+import { HomeAssistant, Route } from "../../../src/types";
 import { hassioStyle } from "../resources/hassio-style";
 import "./hassio-host-info";
 import "./hassio-supervisor-info";
 import "./hassio-supervisor-log";
 
+import { supervisorTabs } from "../hassio-panel";
+
 @customElement("hassio-system")
 class HassioSystem extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public route!: Route;
 
   @property() public supervisorInfo!: HassioSupervisorInfo;
 
@@ -32,6 +39,14 @@ class HassioSystem extends LitElement {
 
   public render(): TemplateResult | void {
     return html`
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        hassio
+        .route=${this.route}
+        .tabs=${supervisorTabs}
+      >
+        <span slot="header">System</span>
         <div class="content">
           <h1>Information</h1>
           <div class="card-group">
@@ -48,6 +63,7 @@ class HassioSystem extends LitElement {
           <h1>System log</h1>
           <hassio-supervisor-log .hass=${this.hass}></hassio-supervisor-log>
         </div>
+      </hass-tabs-subpage>
     `;
   }