Hide the core backup integration if hassio is loaded (#19833)

* Hide the core backup integration if hassio is loaded

* Combine to single entry

src/common/config/can_show_page.ts

@@ -1,10 +1,12 @@
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../types";
+import { ensureArray } from "../array/ensure-array";
 import { isComponentLoaded } from "./is_component_loaded";
 
 export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
   (isCore(page) || isLoadedIntegration(hass, page)) &&
-  !hideAdvancedPage(hass, page);
+  !hideAdvancedPage(hass, page) &&
+  isNotLoadedIntegration(hass, page);
 
 const isLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
   page.component
@@ -14,6 +16,13 @@ const isLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
           isComponentLoaded(hass, integration)
         )
       : true;
+
+const isNotLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
+  !page.not_component ||
+  !ensureArray(page.not_component).some((integration) =>
+    isComponentLoaded(hass, integration)
+  );
+
 const isCore = (page: PageNavigation) => page.core;
 const isAdvancedPage = (page: PageNavigation) => page.advancedOnly;
 const userWantsAdvanced = (hass: HomeAssistant) => hass.userData?.showAdvanced;

src/layouts/hass-tabs-subpage.ts

@@ -26,6 +26,7 @@ export interface PageNavigation {
   component?: string;
   components?: string[];
   name?: string;
+  not_component?: string | string[];
   core?: boolean;
   advancedOnly?: boolean;
   iconPath?: string;

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

@@ -309,6 +309,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconPath: mdiBackupRestore,
       iconColor: "#0D47A1",
       component: "backup",
+      not_component: "hassio",
     },
     {
       path: "/hassio/backups",