From 6afcd4d770ee9b8ab5a9ecf9a54d3d93dee4fc1a Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 23 Dec 2024 11:53:31 +0100
Subject: [PATCH] Add icon and description for network mount locations (#23390)

* Use custom icon and name for network storage

* Add note to local backup location dialog
---
 src/data/backup.ts                            | 28 ++++++++++-
 .../config/ha-backup-config-agents.ts         | 41 +++++++++++------
 .../components/ha-backup-agents-picker.ts     | 38 ++++++++-------
 .../dialogs/dialog-local-backup-location.ts   | 10 ++++
 .../config/backup/ha-config-backup-backups.ts | 11 +++++
 .../config/backup/ha-config-backup-details.ts | 46 ++++++++++++-------
 src/translations/en.json                      |  1 +
 7 files changed, 127 insertions(+), 48 deletions(-)

diff --git a/src/data/backup.ts b/src/data/backup.ts
index 2cda20eb49..247cf8f3be 100644
--- a/src/data/backup.ts
+++ b/src/data/backup.ts
@@ -220,6 +220,11 @@ export const CLOUD_AGENT = "cloud.cloud";
 export const isLocalAgent = (agentId: string) =>
   [CORE_LOCAL_AGENT, HASSIO_LOCAL_AGENT].includes(agentId);
 
+export const isNetworkMountAgent = (agentId: string) => {
+  const [domain, name] = agentId.split(".");
+  return domain === "hassio" && name !== "local";
+};
+
 export const computeBackupAgentName = (
   localize: LocalizeFunc,
   agentId: string,
@@ -229,6 +234,11 @@ export const computeBackupAgentName = (
     return "This system";
   }
   const [domain, name] = agentId.split(".");
+
+  if (isNetworkMountAgent(agentId)) {
+    return name;
+  }
+
   const domainName = domainToName(localize, domain);
 
   // If there are multiple agents for a domain, show the name
@@ -242,7 +252,23 @@ export const computeBackupAgentName = (
 export const compareAgents = (a: string, b: string) => {
   const isLocalA = isLocalAgent(a);
   const isLocalB = isLocalAgent(b);
-  return isLocalA === isLocalB ? a.localeCompare(b) : isLocalA ? -1 : 1;
+  const isNetworkMountAgentA = isNetworkMountAgent(a);
+  const isNetworkMountAgentB = isNetworkMountAgent(b);
+
+  const getPriority = (isLocal: boolean, isNetworkMount: boolean) => {
+    if (isLocal) return 1;
+    if (isNetworkMount) return 2;
+    return 3;
+  };
+
+  const priorityA = getPriority(isLocalA, isNetworkMountAgentA);
+  const priorityB = getPriority(isLocalB, isNetworkMountAgentB);
+
+  if (priorityA !== priorityB) {
+    return priorityA - priorityB;
+  }
+
+  return a.localeCompare(b);
 };
 
 export const generateEncryptionKey = () => {
diff --git a/src/panels/config/backup/components/config/ha-backup-config-agents.ts b/src/panels/config/backup/components/config/ha-backup-config-agents.ts
index f20aa8878b..925b4f8f2d 100644
--- a/src/panels/config/backup/components/config/ha-backup-config-agents.ts
+++ b/src/panels/config/backup/components/config/ha-backup-config-agents.ts
@@ -1,4 +1,4 @@
-import { mdiHarddisk } from "@mdi/js";
+import { mdiHarddisk, mdiNas } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -14,6 +14,7 @@ import {
   computeBackupAgentName,
   fetchBackupAgentsInfo,
   isLocalAgent,
+  isNetworkMountAgent,
 } from "../../../../../data/backup";
 import type { CloudStatus } from "../../../../../data/cloud";
 import type { HomeAssistant } from "../../../../../types";
@@ -52,6 +53,9 @@ class HaBackupConfigAgents extends LitElement {
     if (agentId === CLOUD_AGENT) {
       return "It stores one backup. The oldest backups are deleted.";
     }
+    if (isNetworkMountAgent(agentId)) {
+      return "Network storage";
+    }
     return "";
   }
 
@@ -75,20 +79,27 @@ class HaBackupConfigAgents extends LitElement {
                           <ha-svg-icon .path=${mdiHarddisk} slot="start">
                           </ha-svg-icon>
                         `
-                      : html`
-                          <img
-                            .src=${brandsUrl({
-                              domain,
-                              type: "icon",
-                              useFallback: true,
-                              darkOptimized: this.hass.themes?.darkMode,
-                            })}
-                            crossorigin="anonymous"
-                            referrerpolicy="no-referrer"
-                            alt=""
-                            slot="start"
-                          />
-                        `}
+                      : isNetworkMountAgent(agentId)
+                        ? html`
+                            <ha-svg-icon
+                              .path=${mdiNas}
+                              slot="start"
+                            ></ha-svg-icon>
+                          `
+                        : html`
+                            <img
+                              .src=${brandsUrl({
+                                domain,
+                                type: "icon",
+                                useFallback: true,
+                                darkOptimized: this.hass.themes?.darkMode,
+                              })}
+                              crossorigin="anonymous"
+                              referrerpolicy="no-referrer"
+                              alt=""
+                              slot="start"
+                            />
+                          `}
                     <div slot="headline">${name}</div>
                     ${description
                       ? html`<div slot="supporting-text">${description}</div>`
diff --git a/src/panels/config/backup/components/ha-backup-agents-picker.ts b/src/panels/config/backup/components/ha-backup-agents-picker.ts
index acf486dd6d..7c032dce79 100644
--- a/src/panels/config/backup/components/ha-backup-agents-picker.ts
+++ b/src/panels/config/backup/components/ha-backup-agents-picker.ts
@@ -1,4 +1,4 @@
-import { mdiHarddisk } from "@mdi/js";
+import { mdiHarddisk, mdiNas } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -7,7 +7,11 @@ import { computeDomain } from "../../../../common/entity/compute_domain";
 import "../../../../components/ha-checkbox";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-svg-icon";
-import { computeBackupAgentName, isLocalAgent } from "../../../../data/backup";
+import {
+  computeBackupAgentName,
+  isLocalAgent,
+  isNetworkMountAgent,
+} from "../../../../data/backup";
 import type { HomeAssistant } from "../../../../types";
 import { brandsUrl } from "../../../../util/brands-url";
 
@@ -54,20 +58,22 @@ class HaBackupAgentsPicker extends LitElement {
             ? html`
                 <ha-svg-icon .path=${mdiHarddisk} slot="start"> </ha-svg-icon>
               `
-            : html`
-                <img
-                  .src=${brandsUrl({
-                    domain,
-                    type: "icon",
-                    useFallback: true,
-                    darkOptimized: this.hass.themes?.darkMode,
-                  })}
-                  crossorigin="anonymous"
-                  referrerpolicy="no-referrer"
-                  alt=""
-                  slot="start"
-                />
-              `}
+            : isNetworkMountAgent(agentId)
+              ? html` <ha-svg-icon .path=${mdiNas} slot="start"></ha-svg-icon> `
+              : html`
+                  <img
+                    .src=${brandsUrl({
+                      domain,
+                      type: "icon",
+                      useFallback: true,
+                      darkOptimized: this.hass.themes?.darkMode,
+                    })}
+                    crossorigin="anonymous"
+                    referrerpolicy="no-referrer"
+                    alt=""
+                    slot="start"
+                  />
+                `}
           ${name}
         </span>
         <ha-checkbox
diff --git a/src/panels/config/backup/dialogs/dialog-local-backup-location.ts b/src/panels/config/backup/dialogs/dialog-local-backup-location.ts
index 9ef762c8a3..3e171a5490 100644
--- a/src/panels/config/backup/dialogs/dialog-local-backup-location.ts
+++ b/src/panels/config/backup/dialogs/dialog-local-backup-location.ts
@@ -5,6 +5,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-form/ha-form";
+import "../../../../components/ha-alert";
 import type {
   HaFormSchema,
   SchemaUnion,
@@ -83,6 +84,11 @@ class LocalBackupLocationDialog extends LitElement {
           @value-changed=${this._valueChanged}
           dialogInitialFocus
         ></ha-form>
+        <ha-alert alert-type="info">
+          ${this.hass.localize(
+            `ui.panel.config.backup.dialogs.local_backup_location.note`
+          )}
+        </ha-alert>
         <ha-button
           slot="secondaryAction"
           @click=${this.closeDialog}
@@ -139,6 +145,10 @@ class LocalBackupLocationDialog extends LitElement {
         ha-dialog {
           --mdc-dialog-max-width: 500px;
         }
+        ha-form {
+          display: block;
+          margin-bottom: 16px;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/backup/ha-config-backup-backups.ts b/src/panels/config/backup/ha-config-backup-backups.ts
index 62203b7e01..8c3cf4a1ef 100644
--- a/src/panels/config/backup/ha-config-backup-backups.ts
+++ b/src/panels/config/backup/ha-config-backup-backups.ts
@@ -3,6 +3,7 @@ import {
   mdiDotsVertical,
   mdiDownload,
   mdiHarddisk,
+  mdiNas,
   mdiPlus,
   mdiUpload,
 } from "@mdi/js";
@@ -43,6 +44,7 @@ import {
   getBackupDownloadUrl,
   getPreferredAgentForDownload,
   isLocalAgent,
+  isNetworkMountAgent,
 } from "../../../data/backup";
 import type { ManagerStateEvent } from "../../../data/backup_manager";
 import type { CloudStatus } from "../../../data/cloud";
@@ -183,6 +185,15 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
                   ></ha-svg-icon>
                 `;
               }
+              if (isNetworkMountAgent(agentId)) {
+                return html`
+                  <ha-svg-icon
+                    .path=${mdiNas}
+                    title=${name}
+                    slot="graphic"
+                  ></ha-svg-icon>
+                `;
+              }
               const domain = computeDomain(agentId);
               return html`
                 <img
diff --git a/src/panels/config/backup/ha-config-backup-details.ts b/src/panels/config/backup/ha-config-backup-details.ts
index 002f6a0e7e..9cb06c1e5c 100644
--- a/src/panels/config/backup/ha-config-backup-details.ts
+++ b/src/panels/config/backup/ha-config-backup-details.ts
@@ -1,5 +1,11 @@
 import type { ActionDetail } from "@material/mwc-list";
-import { mdiDelete, mdiDotsVertical, mdiDownload, mdiHarddisk } from "@mdi/js";
+import {
+  mdiDelete,
+  mdiDotsVertical,
+  mdiDownload,
+  mdiHarddisk,
+  mdiNas,
+} from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
@@ -24,6 +30,7 @@ import {
   getBackupDownloadUrl,
   getPreferredAgentForDownload,
   isLocalAgent,
+  isNetworkMountAgent,
 } from "../../../data/backup";
 import type { HassioAddonInfo } from "../../../data/hassio/addon";
 import "../../../layouts/hass-subpage";
@@ -184,21 +191,28 @@ class HaConfigBackupDetails extends LitElement {
                                     >
                                     </ha-svg-icon>
                                   `
-                                : html`
-                                    <img
-                                      .src=${brandsUrl({
-                                        domain,
-                                        type: "icon",
-                                        useFallback: true,
-                                        darkOptimized:
-                                          this.hass.themes?.darkMode,
-                                      })}
-                                      crossorigin="anonymous"
-                                      referrerpolicy="no-referrer"
-                                      alt=""
-                                      slot="start"
-                                    />
-                                  `}
+                                : isNetworkMountAgent(agentId)
+                                  ? html`
+                                      <ha-svg-icon
+                                        .path=${mdiNas}
+                                        slot="start"
+                                      ></ha-svg-icon>
+                                    `
+                                  : html`
+                                      <img
+                                        .src=${brandsUrl({
+                                          domain,
+                                          type: "icon",
+                                          useFallback: true,
+                                          darkOptimized:
+                                            this.hass.themes?.darkMode,
+                                        })}
+                                        crossorigin="anonymous"
+                                        referrerpolicy="no-referrer"
+                                        alt=""
+                                        slot="start"
+                                      />
+                                    `}
                               <div slot="headline">${name}</div>
                               <div slot="supporting-text">
                                 <span
diff --git a/src/translations/en.json b/src/translations/en.json
index 91d388eca7..23a4d33023 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2214,6 +2214,7 @@
             "local_backup_location": {
               "title": "Change 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": {
                 "default_backup_mount": {
                   "name": "Default location"