Add additional backup schedule description (#23843)

* Add additional backup schedule description

* Use ha-icon-button for description

* Remove tip style

---------

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

src/data/backup.ts

@@ -38,6 +38,7 @@ export interface BackupConfig {
   last_attempted_automatic_backup: string | null;
   last_completed_automatic_backup: string | null;
   next_automatic_backup: string | null;
+  next_automatic_backup_additional?: boolean;
   create_backup: {
     agent_ids: string[];
     include_addons: string[] | null;

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

@@ -1,4 +1,4 @@
-import { mdiBackupRestore, mdiCalendar } from "@mdi/js";
+import { mdiBackupRestore, mdiCalendar, mdiInformation } from "@mdi/js";
 import { addHours, differenceInDays, isToday, isTomorrow } from "date-fns";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -10,6 +10,7 @@ import "../../../../../components/ha-card";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
 import "../../../../../components/ha-svg-icon";
+import "../../../../../components/ha-icon-button";
 import type { BackupConfig, BackupContent } from "../../../../../data/backup";
 import {
   BackupScheduleRecurrence,
@@ -18,7 +19,11 @@ import {
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import "../ha-backup-summary-card";
-import { formatDateWeekday } from "../../../../../common/datetime/format_date";
+import {
+  formatDate,
+  formatDateWeekday,
+} from "../../../../../common/datetime/format_date";
+import { showAlertDialog } from "../../../../lovelace/custom-card-helpers";
 
 const OVERDUE_MARGIN_HOURS = 3;
 
@@ -95,6 +100,9 @@ class HaBackupOverviewBackups extends LitElement {
       nextAutomaticDate || this.config.schedule.time
     );
 
+    const showAdditionalBackupDescription =
+      this.config.next_automatic_backup_additional;
+
     const nextBackupDescription =
       this.config.schedule.recurrence === BackupScheduleRecurrence.NEVER ||
       (this.config.schedule.recurrence ===
@@ -202,7 +210,11 @@ class HaBackupOverviewBackups extends LitElement {
                 )}
               </span>
             </ha-md-list-item>
-            ${this._renderNextBackupDescription(nextBackupDescription)}
+            ${this._renderNextBackupDescription(
+              nextBackupDescription,
+              lastCompletedDate,
+              showAdditionalBackupDescription
+            )}
           </ha-md-list>
         </ha-backup-summary-card>
       `;
@@ -302,17 +314,51 @@ class HaBackupOverviewBackups extends LitElement {
             <ha-svg-icon slot="start" .path=${mdiBackupRestore}></ha-svg-icon>
             <span slot="headline">${lastSuccessfulBackupDescription}</span>
           </ha-md-list-item>
-          ${this._renderNextBackupDescription(nextBackupDescription)}
+          ${this._renderNextBackupDescription(
+            nextBackupDescription,
+            lastCompletedDate,
+            showAdditionalBackupDescription
+          )}
         </ha-md-list>
       </ha-backup-summary-card>
     `;
   }
 
-  private _renderNextBackupDescription(nextBackupDescription: string) {
+  private _renderNextBackupDescription(
+    nextBackupDescription: string,
+    lastCompletedDate: Date,
+    showTip = false
+  ) {
+    // handle edge case that there is an additional backup scheduled
+    const openAdditionalBackupDescriptionDialog = showTip
+      ? () => {
+          showAlertDialog(this, {
+            text: this.hass.localize(
+              "ui.panel.config.backup.overview.summary.additional_backup_description",
+              {
+                date: formatDate(
+                  lastCompletedDate,
+                  this.hass.locale,
+                  this.hass.config
+                ),
+              }
+            ),
+          });
+        }
+      : undefined;
+
     return nextBackupDescription
-      ? html` <ha-md-list-item>
+      ? html`<ha-md-list-item>
           <ha-svg-icon slot="start" .path=${mdiCalendar}></ha-svg-icon>
           <span slot="headline">${nextBackupDescription}</span>
+
+          ${showTip
+            ? html` <ha-icon-button
+                slot="end"
+                @click=${openAdditionalBackupDescriptionDialog}
+                .path=${mdiInformation}
+              ></ha-icon-button>`
+            : nothing}
         </ha-md-list-item>`
       : nothing;
   }

src/panels/config/backup/dialogs/dialog-backup-onboarding.ts

@@ -75,6 +75,7 @@ const RECOMMENDED_CONFIG: BackupConfig = {
   last_attempted_automatic_backup: null,
   last_completed_automatic_backup: null,
   next_automatic_backup: null,
+  next_automatic_backup_additional: false,
 };
 
 @customElement("ha-dialog-backup-onboarding")

src/translations/en.json

@@ -2544,7 +2544,8 @@
               "no_backup_heading": "No automatic backup available",
               "no_backup_description": "You have no automatic backups yet.",
               "backup_too_old_heading": "No backup for {count} {count, plural,\n one {day}\n other {days}\n}",
-              "backup_success_heading": "Backed up"
+              "backup_success_heading": "Backed up",
+              "additional_backup_description": "No successful automatic backup has been done since {date}. To avoid losing data, an additional backup has been scheduled."
             },
             "backups": {
               "title": "My backups",