Add cloud info to backup locations (#25065)

* Add cloud info to backup agents

* Add ha cloud translation

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

@@ -35,6 +35,7 @@ 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";
+import { brandsUrl } from "../../../util/brands-url";
 
 @customElement("ha-config-backup-settings")
 class HaConfigBackupSettings extends LitElement {
@@ -243,6 +244,53 @@ class HaConfigBackupSettings extends LitElement {
                   `
                 : nothing}
             </div>
+            ${!this.cloudStatus.logged_in
+              ? html`<ha-card class="cloud-info">
+                  <div class="cloud-header">
+                    <img
+                      .src=${brandsUrl({
+                        domain: "cloud",
+                        type: "icon",
+                        useFallback: true,
+                        darkOptimized: this.hass.themes?.darkMode,
+                      })}
+                      crossorigin="anonymous"
+                      referrerpolicy="no-referrer"
+                      alt="Nabu Casa logo"
+                      slot="start"
+                    />
+                    <span
+                      >${this.hass.localize(
+                        "ui.panel.config.backup.settings.locations.ha_cloud_backup",
+                        {
+                          home_assistant_cloud: "Home Assistant Cloud",
+                        }
+                      )}</span
+                    >
+                  </div>
+                  <div class="card-content">
+                    ${this.hass.localize(
+                      "ui.panel.config.backup.settings.locations.ha_cloud_description"
+                    )}
+                  </div>
+                  <div class="card-actions">
+                    <a href="/config/cloud/login">
+                      <ha-button>
+                        ${this.hass.localize(
+                          "ui.panel.config.voice_assistants.assistants.cloud.sign_in"
+                        )}
+                      </ha-button>
+                    </a>
+                    <a href="/config/cloud/register">
+                      <ha-button unelevated>
+                        ${this.hass.localize(
+                          "ui.panel.config.voice_assistants.assistants.cloud.try_one_month"
+                        )}
+                      </ha-button>
+                    </a>
+                  </div>
+                </ha-card>`
+              : nothing}
             <div class="card-actions">
               <a
                 href=${documentationUrl(this.hass, "/integrations/#backup")}
@@ -481,6 +529,26 @@ class HaConfigBackupSettings extends LitElement {
     a {
       text-decoration: none;
     }
+    .cloud-info {
+      margin: 0 16px 16px;
+    }
+    .cloud-info .cloud-header {
+      display: flex;
+      gap: 16px;
+      font-size: 22px;
+      align-items: center;
+      padding: 16px;
+    }
+    .cloud-info .cloud-header img {
+      width: 48px;
+    }
+    .cloud-info .card-content {
+      padding-bottom: 16px;
+    }
+    .cloud-info .card-actions {
+      display: flex;
+      justify-content: space-between;
+    }
   `;
 }
 

src/translations/en.json

@@ -2700,7 +2700,9 @@
               "no_location": "No location selected",
               "no_location_description": "You have to select at least one location to create a backup.",
               "more_locations": "Explore more locations",
-              "manage_network_storage": "Manage network storage"
+              "manage_network_storage": "Manage network storage",
+              "ha_cloud_backup": "{home_assistant_cloud} backup",
+              "ha_cloud_description": "Stores an encrypted backup offsite. Ideal if your local backup can not be used to restore your system. Thats why it stores one backup with a maximum size of 5 GB. The oldest backups are automatically deleted."
             },
             "encryption_key": {
               "title": "Encryption key",