Add update actions card feature (#19110)

* Add update tile feature

* Fix translations

* Add confirmation dialog

* Remove unused styles

* Fix gallery

* Update wording

* Update src/translations/en.json

src/dialogs/update_backup/dialog-update-backup.ts

@@ -0,0 +1,92 @@
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-button";
+import { createCloseHeading } from "../../components/ha-dialog";
+import { HomeAssistant } from "../../types";
+import { UpdateBackupDialogParams } from "./show-update-backup-dialog";
+
+@customElement("dialog-update-backup")
+class DialogBox extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: UpdateBackupDialogParams;
+
+  public async showDialog(params: UpdateBackupDialogParams): Promise<void> {
+    this._params = params;
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this._cancel}
+        defaultAction="ignore"
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.dialogs.update_backup.title")
+        )}
+      >
+        <p>${this.hass.localize("ui.dialogs.update_backup.text")}</p>
+        <ha-button @click=${this._no} slot="secondaryAction">
+          ${this.hass!.localize("ui.common.no")}
+        </ha-button>
+        <ha-button @click=${this._yes} slot="primaryAction">
+          ${this.hass.localize("ui.dialogs.update_backup.create")}
+        </ha-button>
+      </ha-dialog>
+    `;
+  }
+
+  private _no(): void {
+    if (this._params!.submit) {
+      this._params!.submit(false);
+    }
+    this.closeDialog();
+  }
+
+  private _yes(): void {
+    if (this._params!.submit) {
+      this._params!.submit(true);
+    }
+    this.closeDialog();
+  }
+
+  private _cancel(): void {
+    this._params?.cancel?.();
+    this.closeDialog();
+  }
+
+  public closeDialog(): void {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      p {
+        margin: 0;
+        color: var(--primary-text-color);
+      }
+      ha-dialog {
+        /* Place above other dialogs */
+        --dialog-z-index: 104;
+      }
+      @media all and (min-width: 600px) {
+        ha-dialog {
+          --mdc-dialog-min-width: 400px;
+        }
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-update-backup": DialogBox;
+  }
+}

src/dialogs/update_backup/show-update-backup-dialog.ts

@@ -0,0 +1,35 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export interface UpdateBackupDialogParams {
+  submit?: (response: boolean) => void;
+  cancel?: () => void;
+}
+
+export const showUpdateBackupDialogParams = (
+  element: HTMLElement,
+  dialogParams: UpdateBackupDialogParams
+) =>
+  new Promise<boolean | null>((resolve) => {
+    const origCancel = dialogParams.cancel;
+    const origSubmit = dialogParams.submit;
+
+    fireEvent(element, "show-dialog", {
+      dialogTag: "dialog-update-backup",
+      dialogImport: () => import("./dialog-update-backup"),
+      dialogParams: {
+        ...dialogParams,
+        cancel: () => {
+          resolve(null);
+          if (origCancel) {
+            origCancel();
+          }
+        },
+        submit: (response: boolean) => {
+          resolve(response);
+          if (origSubmit) {
+            origSubmit(response);
+          }
+        },
+      },
+    });
+  });