Hide supervisor only config, fix backup config page (#12401)

src/layouts/hass-tabs-subpage-data-table.ts

@@ -130,7 +130,7 @@ export class HaTabsSubpageDataTable extends LitElement {
    * Array of tabs to show on the page.
    * @type {Array}
    */
-  @property() public tabs!: PageNavigation[];
+  @property() public tabs: PageNavigation[] = [];
 
   /**
    * Force hides the filter menu.

src/panels/config/core/ha-config-system-navigation.ts

@@ -1,5 +1,6 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { canShowPage } from "../../../common/config/can_show_page";
 import "../../../components/ha-card";
 import "../../../components/ha-navigation-list";
 import { CloudStatus } from "../../../data/cloud";
@@ -23,12 +24,14 @@ class HaConfigSystemNavigation extends LitElement {
   @property({ type: Boolean }) public showAdvanced!: boolean;
 
   protected render(): TemplateResult {
-    const pages = configSections.general.map((page) => ({
+    const pages = configSections.general
-      ...page,
+      .filter((page) => canShowPage(this.hass, page))
-      name: page.translationKey
+      .map((page) => ({
-        ? this.hass.localize(page.translationKey)
+        ...page,
-        : page.name,
+        name: page.translationKey
-    }));
+          ? this.hass.localize(page.translationKey)
+          : page.name,
+      }));
 
     return html`
       <hass-subpage

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

@@ -306,12 +306,14 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       translationKey: "ui.panel.config.storage.caption",
       iconPath: mdiServer,
       iconColor: "#518C43",
+      component: "hassio",
     },
     {
       path: "/config/hardware",
       translationKey: "ui.panel.config.hardware.caption",
       iconPath: mdiCpu32Bit,
       iconColor: "#301A8E",
+      component: "hassio",
     },
   ],
   about: [