Move local location backup setting (#23548)

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

@@ -1,8 +1,7 @@
-import { mdiDotsVertical, mdiHarddisk, mdiPlus, mdiUpload } from "@mdi/js";
+import { mdiDotsVertical, mdiPlus, mdiUpload } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-button";
@@ -33,7 +32,6 @@ import "./components/overview/ha-backup-overview-settings";
 import "./components/overview/ha-backup-overview-summary";
 import { showBackupOnboardingDialog } from "./dialogs/show-dialog-backup_onboarding";
 import { showGenerateBackupDialog } from "./dialogs/show-dialog-generate-backup";
-import { showLocalBackupLocationDialog } from "./dialogs/show-dialog-local-backup-location";
 import { showNewBackupDialog } from "./dialogs/show-dialog-new-backup";
 import { showUploadBackupDialog } from "./dialogs/show-dialog-upload-backup";
 
@@ -63,14 +61,6 @@ class HaConfigBackupOverview extends LitElement {
     await showUploadBackupDialog(this, {});
   }
 
-  private async _changeLocalLocation(ev) {
-    if (!shouldHandleRequestSelectedEvent(ev)) {
-      return;
-    }
-
-    showLocalBackupLocationDialog(this, {});
-  }
-
   private _handleOnboardingButtonClick(ev) {
     ev.stopPropagation();
     this._setupAutomaticBackup(true);
@@ -135,8 +125,6 @@ class HaConfigBackupOverview extends LitElement {
     const backupInProgress =
       "state" in this.manager && this.manager.state === "in_progress";
 
-    const isHassio = isComponentLoaded(this.hass, "hassio");
-
     return html`
       <hass-subpage
         back-path="/config/system"
@@ -144,34 +132,17 @@ class HaConfigBackupOverview extends LitElement {
         .narrow=${this.narrow}
         .header=${"Backup"}
       >
-        <div slot="toolbar-icon">
+        <ha-button-menu slot="toolbar-icon">
-          <ha-button-menu>
+          <ha-icon-button
-            <ha-icon-button
+            slot="trigger"
-              slot="trigger"
+            .label=${this.hass.localize("ui.common.menu")}
-              .label=${this.hass.localize("ui.common.menu")}
+            .path=${mdiDotsVertical}
-              .path=${mdiDotsVertical}
+          ></ha-icon-button>
-            ></ha-icon-button>
+          <ha-list-item graphic="icon" @request-selected=${this._uploadBackup}>
-            ${isHassio
+            <ha-svg-icon slot="graphic" .path=${mdiUpload}></ha-svg-icon>
-              ? html`<ha-list-item
+            Upload backup
-                  graphic="icon"
+          </ha-list-item>
-                  @request-selected=${this._changeLocalLocation}
+        </ha-button-menu>
-                >
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiHarddisk}
-                  ></ha-svg-icon>
-                  Change local location
-                </ha-list-item>`
-              : nothing}
-            <ha-list-item
-              graphic="icon"
-              @request-selected=${this._uploadBackup}
-            >
-              <ha-svg-icon slot="graphic" .path=${mdiUpload}></ha-svg-icon>
-              Upload backup
-            </ha-list-item>
-          </ha-button-menu>
-        </div>
         <div class="content">
           ${backupInProgress
             ? html`

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

@@ -1,15 +1,21 @@
+import { mdiDotsVertical, mdiHarddisk } from "@mdi/js";
 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 { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import { debounce } from "../../../common/util/debounce";
 import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
+import "../../../components/ha-list-item";
 import "../../../components/ha-alert";
 import "../../../components/ha-password-field";
+import "../../../components/ha-svg-icon";
 import type { BackupConfig } from "../../../data/backup";
 import { updateBackupConfig } from "../../../data/backup";
 import type { CloudStatus } from "../../../data/cloud";
@@ -21,6 +27,7 @@ import type { BackupConfigData } from "./components/config/ha-backup-config-data
 import "./components/config/ha-backup-config-encryption-key";
 import "./components/config/ha-backup-config-schedule";
 import type { BackupConfigSchedule } from "./components/config/ha-backup-config-schedule";
+import { showLocalBackupLocationDialog } from "./dialogs/show-dialog-local-backup-location";
 
 @customElement("ha-config-backup-settings")
 class HaConfigBackupSettings extends LitElement {
@@ -94,6 +101,28 @@ class HaConfigBackupSettings extends LitElement {
         .narrow=${this.narrow}
         .header=${"Backup settings"}
       >
+        ${isComponentLoaded(this.hass, "hassio")
+          ? html`
+              <ha-button-menu slot="toolbar-icon">
+                <ha-icon-button
+                  slot="trigger"
+                  .label=${this.hass.localize("ui.common.menu")}
+                  .path=${mdiDotsVertical}
+                ></ha-icon-button>
+                <ha-list-item
+                  graphic="icon"
+                  @request-selected=${this._changeLocalLocation}
+                >
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiHarddisk}
+                  ></ha-svg-icon>
+                  Change default action location
+                </ha-list-item>
+              </ha-button-menu>
+            `
+          : nothing}
+
         <div class="content">
           <ha-card id="schedule">
             <div class="card-header">Automatic backups</div>
@@ -166,6 +195,14 @@ class HaConfigBackupSettings extends LitElement {
     `;
   }
 
+  private async _changeLocalLocation(ev) {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
+
+    showLocalBackupLocationDialog(this, {});
+  }
+
   private _scheduleConfigChanged(ev) {
     const value = ev.detail.value as BackupConfigSchedule;
     this._config = {

src/translations/en.json

@@ -2215,7 +2215,7 @@
           },
           "dialogs": {
             "local_backup_location": {
-              "title": "Change local backup location",
+              "title": "Change default local backup location",
               "description": "Change the default location where local backups are stored on your Home Assistant instance.",
               "note": "This location will be used when you create a backup using the supervisor actions in an automation for example.",
               "options": {