Address review feedback

- Extract shared supervisor update config plumbing into a reactive
  controller to deduplicate logic between the settings and the new
  app-update-backups pages.
- Don't show the misleading "local only" headline on the overview card
  before the supervisor config has loaded; surface fetch errors via
  ha-alert instead of swallowing them silently.
- Redirect the app-update-backups sub-page back to the overview when
  hassio isn't loaded, so direct navigation can't reach a non-functional
  form.
- Drop the duplicate settings.schedule.error_load/error_save translation
  keys and use the canonical settings.app_update_backup.* ones.
- Align overview card title with the sub-page header (plural) and add a
  proper plural-aware translation for the backup-before-update summary.

Author: MindFreeze

src/data/supervisor/update-controller.ts

@@ -0,0 +1,70 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+import { debounce } from "../../common/util/debounce";
+import type { HomeAssistant } from "../../types";
+import {
+  getSupervisorUpdateConfig,
+  updateSupervisorUpdateConfig,
+  type SupervisorUpdateConfig,
+} from "./update";
+
+export interface SupervisorUpdateConfigHost extends ReactiveControllerHost {
+  hass: HomeAssistant;
+}
+
+export class SupervisorUpdateConfigController implements ReactiveController {
+  public config?: SupervisorUpdateConfig;
+
+  public error?: string;
+
+  private _host: SupervisorUpdateConfigHost;
+
+  constructor(host: SupervisorUpdateConfigHost) {
+    this._host = host;
+    host.addController(this);
+  }
+
+  hostConnected() {
+    // Callers invoke `fetch()` explicitly to gate on prerequisites (e.g. hassio loaded).
+  }
+
+  public async fetch() {
+    try {
+      this.config = await getSupervisorUpdateConfig(this._host.hass);
+      this.error = undefined;
+    } catch (err: any) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+      this.error = this._host.hass.localize(
+        "ui.panel.config.backup.settings.app_update_backup.error_load",
+        { error: err?.message || err }
+      );
+    }
+    this._host.requestUpdate();
+  }
+
+  public update(partial: Partial<SupervisorUpdateConfig>) {
+    this.config = { ...this.config, ...partial } as SupervisorUpdateConfig;
+    this._host.requestUpdate();
+    this._debouncedSave();
+  }
+
+  private _debouncedSave = debounce(() => this._save(), 500);
+
+  private async _save() {
+    if (!this.config) {
+      return;
+    }
+    try {
+      await updateSupervisorUpdateConfig(this._host.hass, this.config);
+      this.error = undefined;
+    } catch (err: any) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+      this.error = this._host.hass.localize(
+        "ui.panel.config.backup.settings.app_update_backup.error_save",
+        { error: err?.message || err?.toString() }
+      );
+    }
+    this._host.requestUpdate();
+  }
+}

src/panels/config/backup/components/overview/ha-backup-overview-app-update-backup.ts

@@ -1,63 +1,50 @@
 import { mdiPuzzle } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../../../components/ha-alert";
 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";
-import {
-  getSupervisorUpdateConfig,
-  type SupervisorUpdateConfig,
-} from "../../../../../data/supervisor/update";
+import { SupervisorUpdateConfigController } from "../../../../../data/supervisor/update-controller";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 
 @customElement("ha-backup-overview-app-update-backup")
 class HaBackupOverviewAppUpdateBackup extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _supervisorUpdateConfig?: SupervisorUpdateConfig;
+  private _supervisorUpdateConfig = new SupervisorUpdateConfigController(this);
 
   protected firstUpdated() {
-    this._fetchSupervisorUpdateConfig();
+    this._supervisorUpdateConfig.fetch();
   }
 
-  private async _fetchSupervisorUpdateConfig() {
-    try {
-      this._supervisorUpdateConfig = await getSupervisorUpdateConfig(this.hass);
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(err);
-    }
-  }
-
-  private _appUpdateBackupDescription() {
-    if (!this._supervisorUpdateConfig) {
-      return this.hass.localize(
-        "ui.panel.config.backup.settings.app_update_backup.local_only"
-      );
+  private _appUpdateBackupHeadline() {
+    const config = this._supervisorUpdateConfig.config;
+    if (!config) {
+      return nothing;
     }
 
-    if (!this._supervisorUpdateConfig.add_on_backup_before_update) {
+    if (!config.add_on_backup_before_update) {
       return this.hass.localize(
         "ui.panel.config.backup.schedule.update_preference.skip_backups"
       );
     }
 
-    const copies =
-      this._supervisorUpdateConfig.add_on_backup_retain_copies || 1;
+    const copies = config.add_on_backup_retain_copies || 1;
 
-    return `${this.hass.localize(
-      "ui.panel.config.backup.schedule.update_preference.backup_before_update"
-    )} ${this.hass.localize(
-      "ui.panel.config.backup.overview.settings.schedule_copies_backups",
+    return this.hass.localize(
+      "ui.panel.config.backup.overview.app_update_backup.backup_before_update_summary",
       { count: copies }
-    )}`;
+    );
   }
 
   protected render() {
+    const error = this._supervisorUpdateConfig.error;
+
     return html`
       <ha-card>
         <div class="card-header">
@@ -66,13 +53,16 @@ class HaBackupOverviewAppUpdateBackup extends LitElement {
           )}
         </div>
         <div class="card-content">
+          ${error
+            ? html`<ha-alert alert-type="error">${error}</ha-alert>`
+            : nothing}
           <ha-md-list>
             <ha-md-list-item
               type="link"
               href="/config/backup/app-update-backups"
             >
               <ha-svg-icon slot="start" .path=${mdiPuzzle}></ha-svg-icon>
-              <div slot="headline">${this._appUpdateBackupDescription()}</div>
+              <div slot="headline">${this._appUpdateBackupHeadline()}</div>
               <div slot="supporting-text">
                 ${this.hass.localize(
                   "ui.panel.config.backup.overview.app_update_backup.description"
@@ -100,6 +90,11 @@ class HaBackupOverviewAppUpdateBackup extends LitElement {
           padding-top: 0;
         }
 
+        ha-alert {
+          display: block;
+          margin: 0 16px 8px;
+        }
+
         ha-md-list {
           padding-top: 0;
           padding-bottom: 0;

src/panels/config/backup/ha-config-backup-app-update-backups.ts

@@ -1,15 +1,12 @@
 import { css, html, LitElement, nothing } from "lit";
 import type { PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { debounce } from "../../../common/util/debounce";
+import { navigate } from "../../../common/navigate";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
-import {
-  getSupervisorUpdateConfig,
-  updateSupervisorUpdateConfig,
-  type SupervisorUpdateConfig,
-} from "../../../data/supervisor/update";
+import { SupervisorUpdateConfigController } from "../../../data/supervisor/update-controller";
+import type { SupervisorUpdateConfig } from "../../../data/supervisor/update";
 import "../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../types";
 import "./components/config/ha-backup-config-addon";
@@ -20,19 +17,17 @@ class HaConfigBackupAppUpdateBackups extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @state() private _supervisorUpdateConfig?: SupervisorUpdateConfig;
-
-  @state() private _error?: string;
+  private _supervisorUpdateConfig = new SupervisorUpdateConfigController(this);
 
   protected willUpdate(changedProps: PropertyValues<this>): void {
     super.willUpdate(changedProps);
 
-    if (
-      !this.hasUpdated &&
-      this.hass &&
-      isComponentLoaded(this.hass.config, "hassio")
-    ) {
-      this._getSupervisorUpdateConfig();
+    if (!this.hasUpdated && this.hass) {
+      if (isComponentLoaded(this.hass.config, "hassio")) {
+        this._supervisorUpdateConfig.fetch();
+      } else {
+        navigate("/config/backup/overview", { replace: true });
+      }
     }
   }
 
@@ -59,12 +54,14 @@ class HaConfigBackupAppUpdateBackups extends LitElement {
                   "ui.panel.config.backup.settings.app_update_backup.local_only"
                 )}
               </p>
-              ${this._error
-                ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+              ${this._supervisorUpdateConfig.error
+                ? html`<ha-alert alert-type="error"
+                    >${this._supervisorUpdateConfig.error}</ha-alert
+                  >`
                 : nothing}
               <ha-backup-config-addon
                 .hass=${this.hass}
-                .supervisorUpdateConfig=${this._supervisorUpdateConfig}
+                .supervisorUpdateConfig=${this._supervisorUpdateConfig.config}
                 @update-config-changed=${this._supervisorUpdateConfigChanged}
               ></ha-backup-config-addon>
             </div>
@@ -74,56 +71,10 @@ class HaConfigBackupAppUpdateBackups extends LitElement {
     `;
   }
 
-  private async _getSupervisorUpdateConfig() {
-    try {
-      this._supervisorUpdateConfig = await getSupervisorUpdateConfig(this.hass);
-      this._error = undefined;
-    } catch (err: any) {
-      // eslint-disable-next-line no-console
-      console.error(err);
-      this._error = this.hass.localize(
-        "ui.panel.config.backup.settings.app_update_backup.error_load",
-        {
-          error: err?.message || err,
-        }
-      );
-    }
-  }
-
-  private async _supervisorUpdateConfigChanged(ev) {
-    const config = ev.detail.value as SupervisorUpdateConfig;
-    this._supervisorUpdateConfig = {
-      ...this._supervisorUpdateConfig,
-      ...config,
-    } as SupervisorUpdateConfig;
-    this._debounceSaveSupervisorUpdateConfig();
-  }
-
-  private _debounceSaveSupervisorUpdateConfig = debounce(
-    () => this._saveSupervisorUpdateConfig(),
-    500
-  );
-
-  private async _saveSupervisorUpdateConfig() {
-    if (!this._supervisorUpdateConfig) {
-      return;
-    }
-    try {
-      await updateSupervisorUpdateConfig(
-        this.hass,
-        this._supervisorUpdateConfig
-      );
-      this._error = undefined;
-    } catch (err: any) {
-      // eslint-disable-next-line no-console
-      console.error(err);
-      this._error = this.hass.localize(
-        "ui.panel.config.backup.settings.app_update_backup.error_save",
-        {
-          error: err?.message || err?.toString(),
-        }
-      );
-    }
+  private _supervisorUpdateConfigChanged(
+    ev: CustomEvent<{ value: SupervisorUpdateConfig }>
+  ) {
+    this._supervisorUpdateConfig.update(ev.detail.value);
   }
 
   static styles = css`

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

@@ -33,13 +33,13 @@ import "../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import { showAlertDialog } from "../../lovelace/custom-card-helpers";
-import "./components/overview/ha-backup-overview-backups";
+import "./components/config/ha-backup-config-encryption-key";
 import "./components/overview/ha-backup-overview-app-update-backup";
+import "./components/overview/ha-backup-overview-backups";
 import "./components/overview/ha-backup-overview-onboarding";
 import "./components/overview/ha-backup-overview-progress";
 import "./components/overview/ha-backup-overview-settings";
 import "./components/overview/ha-backup-overview-summary";
-import "./components/config/ha-backup-config-encryption-key";
 import { showBackupOnboardingDialog } from "./dialogs/show-dialog-backup_onboarding";
 import { showGenerateBackupDialog } from "./dialogs/show-dialog-generate-backup";
 import { showNewBackupDialog } from "./dialogs/show-dialog-new-backup";