Add links to backup overview settings (#23368)

src/panels/config/backup/components/config/ha-backup-config-data.ts

@@ -53,6 +53,12 @@ export type BackupConfigData = {
   include_addons?: string[];
 };
 
+declare global {
+  interface HASSDomEvents {
+    "backup-addons-fetched": void;
+  }
+}
+
 @customElement("ha-backup-config-data")
 class HaBackupConfigData extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -89,6 +95,7 @@ class HaBackupConfigData extends LitElement {
   private async _fetchAddons() {
     const { addons } = await fetchHassioAddonsInfo(this.hass);
     this._addons = addons;
+    fireEvent(this, "backup-addons-fetched");
   }
 
   private _hasLocalAddons(addons: BackupAddonItem[]): boolean {

src/panels/config/backup/components/overview/ha-backup-overview-settings.ts

@@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators";
 import { navigate } from "../../../../../common/navigate";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-card";
+import "../../../../../components/ha-icon-next";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
 import "../../../../../components/ha-svg-icon";
@@ -103,7 +104,10 @@ class HaBackupBackupsSummary extends LitElement {
         <div class="card-header">Automatic backups</div>
         <div class="card-content">
           <ha-md-list>
-            <ha-md-list-item>
+            <ha-md-list-item
+              type="link"
+              href="/config/backup/settings#schedule"
+            >
               <ha-svg-icon slot="start" .path=${mdiCalendar}></ha-svg-icon>
               <div slot="headline">
                 ${this._scheduleDescription(this.config)}
@@ -111,8 +115,9 @@ class HaBackupBackupsSummary extends LitElement {
               <div slot="supporting-text">
                 Schedule and number of backups to keep
               </div>
+              <ha-icon-next slot="end"></ha-icon-next>
             </ha-md-list-item>
-            <ha-md-list-item>
+            <ha-md-list-item type="link" href="/config/backup/settings#data">
               <ha-svg-icon slot="start" .path=${mdiDatabase}></ha-svg-icon>
               <div slot="headline">
                 ${this.config.create_backup.include_database
@@ -122,27 +127,34 @@ class HaBackupBackupsSummary extends LitElement {
               <div slot="supporting-text">
                 Home Assistant data that is included
               </div>
+              <ha-icon-next slot="end"></ha-icon-next>
             </ha-md-list-item>
             ${isHassio
               ? html`
-                  <ha-md-list-item>
+                  <ha-md-list-item
+                    type="link"
+                    href="/config/backup/settings#data"
+                  >
                     <ha-svg-icon slot="start" .path=${mdiPuzzle}></ha-svg-icon>
                     <div slot="headline">
                       ${this._addonsDescription(this.config)}
                     </div>
                     <div slot="supporting-text">Add-ons that are included</div>
-                  </ha-md-list-item>
-                  <ha-md-list-item>
-                    <ha-svg-icon slot="start" .path=${mdiUpload}></ha-svg-icon>
-                    <div slot="headline">
-                      ${this._agentsDescription(this.config)}
-                    </div>
-                    <div slot="supporting-text">
-                      Locations where backup is uploaded to
-                    </div>
+                    <ha-icon-next slot="end"></ha-icon-next>
                   </ha-md-list-item>
                 `
               : nothing}
+            <ha-md-list-item
+              type="link"
+              href="/config/backup/settings#locations"
+            >
+              <ha-svg-icon slot="start" .path=${mdiUpload}></ha-svg-icon>
+              <div slot="headline">${this._agentsDescription(this.config)}</div>
+              <div slot="supporting-text">
+                Locations where backup is uploaded to
+              </div>
+              <ha-icon-next slot="end"></ha-icon-next>
+            </ha-md-list-item>
           </ha-md-list>
         </div>
         <div class="card-actions">

src/panels/config/backup/ha-config-backup-settings.ts

@@ -1,8 +1,10 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { debounce } from "../../../common/util/debounce";
+import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
@@ -38,6 +40,47 @@ class HaConfigBackupSettings extends LitElement {
     }
   }
 
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+    this._scrollToSection();
+  }
+
+  private async _scrollToSection() {
+    const hash = window.location.hash.substring(1);
+    if (
+      hash === "locations" &&
+      isComponentLoaded(this.hass, "hassio") &&
+      !this._config?.create_backup.include_all_addons &&
+      this._config?.create_backup.include_addons?.length
+    ) {
+      // Wait for the addons to be loaded before scrolling because the height can change and location section is below addons.
+      this.addEventListener("backup-addons-fetched", async () => {
+        await nextRender();
+        this._scrolltoHash();
+      });
+      // Clear hash to cancel the scroll after 500ms if addons doesn't load
+      setTimeout(() => {
+        this._clearHash();
+      }, 500);
+      return;
+    }
+    await nextRender();
+    this._scrolltoHash();
+  }
+
+  private _scrolltoHash() {
+    const hash = window.location.hash.substring(1);
+    if (hash) {
+      const element = this.shadowRoot!.getElementById(hash);
+      element?.scrollIntoView();
+      this._clearHash();
+    }
+  }
+
+  private _clearHash() {
+    history.replaceState(null, "", window.location.pathname);
+  }
+
   protected render() {
     if (!this._config) {
       return nothing;
@@ -51,7 +94,7 @@ class HaConfigBackupSettings extends LitElement {
         .header=${"Automatic backups"}
       >
         <div class="content">
-          <ha-card>
+          <ha-card id="schedule">
             <div class="card-header">Automatic backups</div>
             <div class="card-content">
               <p>
@@ -65,7 +108,7 @@ class HaConfigBackupSettings extends LitElement {
               ></ha-backup-config-schedule>
             </div>
           </ha-card>
-          <ha-card>
+          <ha-card id="data">
             <div class="card-header">Backup data</div>
             <div class="card-content">
               <ha-backup-config-data
@@ -78,7 +121,7 @@ class HaConfigBackupSettings extends LitElement {
             </div>
           </ha-card>
 
-          <ha-card class="agents">
+          <ha-card class="agents" id="locations">
             <div class="card-header">Locations</div>
             <div class="card-content">
               <p>
@@ -199,6 +242,9 @@ class HaConfigBackupSettings extends LitElement {
   }
 
   static styles = css`
+    ha-card {
+      scroll-margin-top: 16px;
+    }
     .content {
       padding: 28px 20px 0;
       max-width: 690px;