Combine component/components PageNavigation keys (#19890)

* Combine component/components PageNavigation keys

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

src/common/config/can_show_page.ts

@@ -9,13 +9,10 @@ export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
   isNotLoadedIntegration(hass, page);
 
 const isLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
-  page.component
+  !page.component ||
-    ? isComponentLoaded(hass, page.component)
+  ensureArray(page.component).some((integration) =>
-    : page.components
+    isComponentLoaded(hass, integration)
-      ? page.components.some((integration) =>
+  );
-          isComponentLoaded(hass, integration)
-        )
-      : true;
 
 const isNotLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
   !page.not_component ||

src/layouts/hass-tabs-subpage.ts

@@ -10,7 +10,6 @@ import {
 import { customElement, eventOptions, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
-import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-icon-button-arrow-prev";
@@ -19,12 +18,12 @@ import "../components/ha-svg-icon";
 import "../components/ha-tab";
 import { HomeAssistant, Route } from "../types";
 import { haStyleScrollbar } from "../resources/styles";
+import { canShowPage } from "../common/config/can_show_page";
 
 export interface PageNavigation {
   path: string;
   translationKey?: string;
-  component?: string;
+  component?: string | string[];
-  components?: string[];
   name?: string;
   not_component?: string | string[];
   core?: boolean;
@@ -67,19 +66,12 @@ class HassTabsSubpage extends LitElement {
     (
       tabs: PageNavigation[],
       activeTab: PageNavigation | undefined,
-      showAdvanced: boolean | undefined,
       _components,
       _language,
       _narrow,
       localizeFunc
     ) => {
-      const shownTabs = tabs.filter(
+      const shownTabs = tabs.filter((page) => canShowPage(this.hass, page));
-        (page) =>
-          (!page.component ||
-            page.core ||
-            isComponentLoaded(this.hass, page.component)) &&
-          (!page.advancedOnly || showAdvanced)
-      );
 
       if (shownTabs.length < 2) {
         if (shownTabs.length === 1) {
@@ -128,7 +120,6 @@ class HassTabsSubpage extends LitElement {
     const tabs = this._getTabs(
       this.tabs,
       this._activeTab,
-      this.hass.userData?.showAdvanced,
       this.hass.config.components,
       this.hass.language,
       this.narrow,

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

@@ -74,7 +74,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       translationKey: "areas",
       iconPath: mdiSofa,
       iconColor: "#E48629",
-      components: ["zone"],
+      component: "zone",
     },
     {
       path: "/hassio",
@@ -108,7 +108,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       translationKey: "people",
       iconPath: mdiAccount,
       iconColor: "#5A87FA",
-      components: ["person", "users"],
+      component: ["person", "users"],
     },
     {
       path: "#external-app-configuration",
@@ -342,7 +342,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       translationKey: "hardware",
       iconPath: mdiMemory,
       iconColor: "#301A8E",
-      components: ["hassio", "hardware"],
+      component: ["hassio", "hardware"],
     },
   ],
   about: [