Merge update dialogs (#8516)

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -50,6 +50,7 @@ import {
   startHassioAddon,
   stopHassioAddon,
   uninstallHassioAddon,
+  updateHassioAddon,
   validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import {
@@ -68,8 +69,8 @@ import { HomeAssistant } from "../../../../src/types";
 import { bytesToString } from "../../../../src/util/bytes-to-string";
 import "../../components/hassio-card-content";
 import "../../components/supervisor-metric";
-import { showDialogSupervisorAddonUpdate } from "../../dialogs/addon/show-dialog-addon-update";
 import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
+import { showDialogSupervisorUpdate } from "../../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../../resources/hassio-style";
 import { addonArchIsSupported } from "../../util/addon";
 
@@ -983,7 +984,27 @@ class HassioAddonInfo extends LitElement {
   }
 
   private async _updateClicked(): Promise<void> {
-    showDialogSupervisorAddonUpdate(this, { addon: this.addon });
+    showDialogSupervisorUpdate(this, {
+      supervisor: this.supervisor,
+      name: this.addon.name,
+      version: this.addon.version_latest,
+      snapshotParams: {
+        name: `addon_${this.addon.slug}_${this.addon.version}`,
+        addons: [this.addon.slug],
+        homeassistant: false,
+      },
+      updateHandler: async () => await this._updateAddon(),
+    });
+  }
+
+  private async _updateAddon(): Promise<void> {
+    await updateHassioAddon(this.hass, this.addon.slug);
+    fireEvent(this, "supervisor-colllection-refresh", {
+      colllection: "addon",
+    });
+    fireEvent(this, "supervisor-colllection-refresh", {
+      colllection: "supervisor",
+    });
   }
 
   private async _startClicked(ev: CustomEvent): Promise<void> {

hassio/src/dashboard/hassio-update.ts

@@ -26,6 +26,7 @@ import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
+import { updateCore } from "../../../src/data/supervisor/core";
 import {
   Supervisor,
   supervisorApiWsRequest,
@@ -36,7 +37,7 @@ import {
 } from "../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
-import { showDialogSupervisorCoreUpdate } from "../dialogs/core/show-dialog-core-update";
+import { showDialogSupervisorUpdate } from "../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../resources/hassio-style";
 
 const computeVersion = (key: string, version: string): string => {
@@ -164,7 +165,17 @@ export class HassioUpdate extends LitElement {
   private async _confirmUpdate(ev): Promise<void> {
     const item = ev.currentTarget;
     if (item.key === "core") {
-      showDialogSupervisorCoreUpdate(this, { core: this.supervisor.core });
+      showDialogSupervisorUpdate(this, {
+        supervisor: this.supervisor,
+        name: "Home Assistant Core",
+        version: this.supervisor.core.version,
+        snapshotParams: {
+          name: `core_${this.supervisor.core.version}`,
+          folders: ["homeassistant"],
+          homeassistant: true,
+        },
+        updateHandler: async () => this._updateCore(),
+      });
       return;
     }
     item.progress = true;
@@ -219,6 +230,13 @@ export class HassioUpdate extends LitElement {
     item.progress = false;
   }
 
+  private async _updateCore(): Promise<void> {
+    await updateCore(this.hass);
+    fireEvent(this, "supervisor-colllection-refresh", {
+      colllection: "core",
+    });
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,

hassio/src/dialogs/addon/show-dialog-addon-update.ts

@@ -1,17 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
-
-export interface SupervisorDialogSupervisorAddonUpdateParams {
-  addon: HassioAddonDetails;
-}
-
-export const showDialogSupervisorAddonUpdate = (
-  element: HTMLElement,
-  dialogParams: SupervisorDialogSupervisorAddonUpdateParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-supervisor-addon-update",
-    dialogImport: () => import("./dialog-supervisor-addon-update"),
-    dialogParams,
-  });
-};

hassio/src/dialogs/core/dialog-supervisor-core-update.ts

@@ -1,175 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-circular-progress";
-import "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-settings-row";
-import "../../../../src/components/ha-svg-icon";
-import "../../../../src/components/ha-switch";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
-import { createHassioPartialSnapshot } from "../../../../src/data/hassio/snapshot";
-import { HassioHomeAssistantInfo } from "../../../../src/data/hassio/supervisor";
-import { updateCore } from "../../../../src/data/supervisor/core";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import { SupervisorDialogSupervisorCoreUpdateParams } from "./show-dialog-core-update";
-
-@customElement("dialog-supervisor-core-update")
-class DialogSupervisorCoreUpdate extends LitElement {
-  public hass!: HomeAssistant;
-
-  public core!: HassioHomeAssistantInfo;
-
-  @internalProperty() private _opened = false;
-
-  @internalProperty() private _createSnapshot = true;
-
-  @internalProperty() private _action: "snapshot" | "update" | null = null;
-
-  @internalProperty() private _error?: string;
-
-  public async showDialog(
-    params: SupervisorDialogSupervisorCoreUpdateParams
-  ): Promise<void> {
-    this._opened = true;
-    this.core = params.core;
-    await this.updateComplete;
-  }
-
-  public closeDialog(): void {
-    this._action = null;
-    this._createSnapshot = true;
-    this._opened = false;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  public focus(): void {
-    this.updateComplete.then(() =>
-      (this.shadowRoot?.querySelector(
-        "[dialogInitialFocus]"
-      ) as HTMLElement)?.focus()
-    );
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-dialog .open=${this._opened} scrimClickAction escapeKeyAction>
-        ${this._action === null
-          ? html`<slot name="heading">
-                <h2 id="title" class="header_title">
-                  Update Home Assistant Core
-                </h2>
-              </slot>
-              <div>
-                Are you sure you want to update Home Assistant Core to version
-                ${this.core.version_latest}?
-              </div>
-
-              <ha-settings-row three-rows>
-                <span slot="heading">
-                  Snapshot
-                </span>
-                <span slot="description">
-                  Create a snapshot of Home Assistant Core before updating
-                </span>
-                <ha-switch
-                  .checked=${this._createSnapshot}
-                  haptic
-                  title="Create snapshot"
-                  @click=${this._toggleSnapshot}
-                >
-                </ha-switch>
-              </ha-settings-row>
-              <mwc-button @click=${this.closeDialog} slot="secondaryAction">
-                Cancel
-              </mwc-button>
-              <mwc-button @click=${this._update} slot="primaryAction">
-                Update
-              </mwc-button>`
-          : html`<ha-circular-progress alt="Updating" size="large" active>
-              </ha-circular-progress>
-              <p class="progress-text">
-                ${this._action === "update"
-                  ? `Updating Home Assistant Core to version ${this.core.version_latest}`
-                  : "Creating snapshot of Home Assistant Core"}
-              </p>`}
-        ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-      </ha-dialog>
-    `;
-  }
-
-  private _toggleSnapshot() {
-    this._createSnapshot = !this._createSnapshot;
-  }
-
-  private async _update() {
-    if (this._createSnapshot) {
-      this._action = "snapshot";
-      try {
-        await createHassioPartialSnapshot(this.hass, {
-          name: `core_${this.core.version}`,
-          folders: ["homeassistant"],
-          homeassistant: true,
-        });
-      } catch (err) {
-        this._error = extractApiErrorMessage(err);
-        this._action = null;
-        return;
-      }
-    }
-
-    this._action = "update";
-    try {
-      await updateCore(this.hass);
-    } catch (err) {
-      if (this.hass.connection.connected) {
-        this._error = extractApiErrorMessage(err);
-        this._action = null;
-        return;
-      }
-    }
-    fireEvent(this, "supervisor-colllection-refresh", { colllection: "core" });
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        .form {
-          color: var(--primary-text-color);
-        }
-
-        ha-settings-row {
-          margin-top: 32px;
-          padding: 0;
-        }
-
-        ha-circular-progress {
-          display: block;
-          margin: 32px;
-          text-align: center;
-        }
-
-        .progress-text {
-          text-align: center;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-supervisor-core-update": DialogSupervisorCoreUpdate;
-  }
-}

hassio/src/dialogs/core/show-dialog-core-update.ts

@@ -1,17 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { HassioHomeAssistantInfo } from "../../../../src/data/hassio/supervisor";
-
-export interface SupervisorDialogSupervisorCoreUpdateParams {
-  core: HassioHomeAssistantInfo;
-}
-
-export const showDialogSupervisorCoreUpdate = (
-  element: HTMLElement,
-  dialogParams: SupervisorDialogSupervisorCoreUpdateParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-supervisor-core-update",
-    dialogImport: () => import("./dialog-supervisor-core-update"),
-    dialogParams,
-  });
-};

hassio/src/dialogs/update/dialog-supervisor-update.ts

@@ -14,22 +14,16 @@ import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
-import {
-  HassioAddonDetails,
-  updateHassioAddon,
-} from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { createHassioPartialSnapshot } from "../../../../src/data/hassio/snapshot";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
-import { SupervisorDialogSupervisorAddonUpdateParams } from "./show-dialog-addon-update";
+import { SupervisorDialogSupervisorUpdateParams } from "./show-dialog-update";
 
-@customElement("dialog-supervisor-addon-update")
+@customElement("dialog-supervisor-update")
-class DialogSupervisorAddonUpdate extends LitElement {
+class DialogSupervisorUpdate extends LitElement {
   public hass!: HomeAssistant;
 
-  public addon!: HassioAddonDetails;
-
   @internalProperty() private _opened = false;
 
   @internalProperty() private _createSnapshot = true;
@@ -38,18 +32,22 @@ class DialogSupervisorAddonUpdate extends LitElement {
 
   @internalProperty() private _error?: string;
 
+  @internalProperty()
+  private _dialogParams?: SupervisorDialogSupervisorUpdateParams;
+
   public async showDialog(
-    params: SupervisorDialogSupervisorAddonUpdateParams
+    params: SupervisorDialogSupervisorUpdateParams
   ): Promise<void> {
     this._opened = true;
-    this.addon = params.addon;
+    this._dialogParams = params;
     await this.updateComplete;
   }
 
   public closeDialog(): void {
     this._action = null;
     this._createSnapshot = true;
-    this._opened = false;
+    this._error = undefined;
+    this._dialogParams = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -62,47 +60,77 @@ class DialogSupervisorAddonUpdate extends LitElement {
   }
 
   protected render(): TemplateResult {
+    if (!this._dialogParams) {
+      return html``;
+    }
     return html`
       <ha-dialog .open=${this._opened} scrimClickAction escapeKeyAction>
         ${this._action === null
           ? html`<slot name="heading">
                 <h2 id="title" class="header_title">
-                  Update ${this.addon.name}
+                  ${this._dialogParams.supervisor.localize(
+                    "confirm.update.title",
+                    "name",
+                    this._dialogParams.name
+                  )}
                 </h2>
               </slot>
               <div>
-                Are you sure you want to update the ${this.addon.name} add-on to
+                ${this._dialogParams.supervisor.localize(
-                version ${this.addon.version_latest}?
+                  "confirm.update.text",
+                  "name",
+                  this._dialogParams.name,
+                  "version",
+                  this._dialogParams.version
+                )}
               </div>
 
               <ha-settings-row>
                 <span slot="heading">
-                  Snapshot
+                  ${this._dialogParams.supervisor.localize(
+                    "dialog.update.snapshot"
+                  )}
                 </span>
                 <span slot="description">
-                  Create a snapshot of the ${this.addon.name} add-on before
+                  ${this._dialogParams.supervisor.localize(
-                  updating
+                    "dialog.update.create_snapshot",
+                    "name",
+                    this._dialogParams.name
+                  )}
                 </span>
                 <ha-switch
                   .checked=${this._createSnapshot}
                   haptic
-                  title="Create snapshot"
                   @click=${this._toggleSnapshot}
                 >
                 </ha-switch>
               </ha-settings-row>
               <mwc-button @click=${this.closeDialog} slot="secondaryAction">
-                Cancel
+                ${this._dialogParams.supervisor.localize("common.cancel")}
               </mwc-button>
-              <mwc-button @click=${this._update} slot="primaryAction">
+              <mwc-button
-                Update
+                .disabled=${this._error !== undefined}
+                @click=${this._update}
+                slot="primaryAction"
+              >
+                ${this._dialogParams.supervisor.localize("common.update")}
               </mwc-button>`
           : html`<ha-circular-progress alt="Updating" size="large" active>
               </ha-circular-progress>
               <p class="progress-text">
                 ${this._action === "update"
-                  ? `Updating ${this.addon.name} to version ${this.addon.version_latest}`
+                  ? this._dialogParams.supervisor.localize(
-                  : "Creating snapshot of Home Assistant Core"}
+                      "dialog.update.updating",
+                      "name",
+                      this._dialogParams.name,
+                      "version",
+                      this._dialogParams.version
+                    )
+                  : this._dialogParams.supervisor.localize(
+                      "dialog.update.snapshotting",
+                      "name",
+                      this._dialogParams.name
+                    )}
               </p>`}
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
       </ha-dialog>
@@ -117,11 +145,10 @@ class DialogSupervisorAddonUpdate extends LitElement {
     if (this._createSnapshot) {
       this._action = "snapshot";
       try {
-        await createHassioPartialSnapshot(this.hass, {
+        await createHassioPartialSnapshot(
-          name: `addon_${this.addon.slug}_${this.addon.version}`,
+          this.hass,
-          addons: [this.addon.slug],
+          this._dialogParams!.snapshotParams
-          homeassistant: false,
+        );
-        });
       } catch (err) {
         this._error = extractApiErrorMessage(err);
         this._action = null;
@@ -131,16 +158,13 @@ class DialogSupervisorAddonUpdate extends LitElement {
 
     this._action = "update";
     try {
-      await updateHassioAddon(this.hass, this.addon.slug);
+      await this._dialogParams!.updateHandler!();
     } catch (err) {
       this._error = extractApiErrorMessage(err);
       this._action = null;
       return;
     }
-    fireEvent(this, "supervisor-colllection-refresh", { colllection: "addon" });
+
-    fireEvent(this, "supervisor-colllection-refresh", {
-      colllection: "supervisor",
-    });
     this.closeDialog();
   }
 
@@ -174,6 +198,6 @@ class DialogSupervisorAddonUpdate extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dialog-supervisor-addon-update": DialogSupervisorAddonUpdate;
+    "dialog-supervisor-update": DialogSupervisorUpdate;
   }
 }

hassio/src/dialogs/update/show-dialog-update.ts

@@ -0,0 +1,21 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+
+export interface SupervisorDialogSupervisorUpdateParams {
+  supervisor: Supervisor;
+  name: string;
+  version: string;
+  snapshotParams: any;
+  updateHandler: () => Promise<void>;
+}
+
+export const showDialogSupervisorUpdate = (
+  element: HTMLElement,
+  dialogParams: SupervisorDialogSupervisorUpdateParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-supervisor-update",
+    dialogImport: () => import("./dialog-supervisor-update"),
+    dialogParams,
+  });
+};

hassio/src/system/hassio-core-info.ts

@@ -10,6 +10,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
@@ -19,7 +20,7 @@ import {
   fetchHassioStats,
   HassioStats,
 } from "../../../src/data/hassio/common";
-import { restartCore } from "../../../src/data/supervisor/core";
+import { restartCore, updateCore } from "../../../src/data/supervisor/core";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
@@ -29,7 +30,7 @@ import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { bytesToString } from "../../../src/util/bytes-to-string";
 import "../components/supervisor-metric";
-import { showDialogSupervisorCoreUpdate } from "../dialogs/core/show-dialog-core-update";
+import { showDialogSupervisorUpdate } from "../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-core-info")
@@ -168,7 +169,24 @@ class HassioCoreInfo extends LitElement {
   }
 
   private async _coreUpdate(): Promise<void> {
-    showDialogSupervisorCoreUpdate(this, { core: this.supervisor.core });
+    showDialogSupervisorUpdate(this, {
+      supervisor: this.supervisor,
+      name: "Home Assistant Core",
+      version: this.supervisor.core.version,
+      snapshotParams: {
+        name: `core_${this.supervisor.core.version}`,
+        folders: ["homeassistant"],
+        homeassistant: true,
+      },
+      updateHandler: async () => await this._updateCore(),
+    });
+  }
+
+  private async _updateCore(): Promise<void> {
+    await updateCore(this.hass);
+    fireEvent(this, "supervisor-colllection-refresh", {
+      colllection: "core",
+    });
   }
 
   static get styles(): CSSResult[] {

src/data/hassio/addon.ts

@@ -309,13 +309,12 @@ export const updateHassioAddon = async (
       method: "post",
       timeout: null,
     });
-    return;
+  } else {
+    await hass.callApi<HassioResponse<void>>(
+      "POST",
+      `hassio/addons/${slug}/update`
+    );
   }
-
-  await hass.callApi<HassioResponse<void>>(
-    "POST",
-    `hassio/addons/${slug}/update`
-  );
 };
 
 export const restartHassioAddon = async (

src/data/supervisor/core.ts

@@ -14,8 +14,7 @@ export const updateCore = async (hass: HomeAssistant) => {
       method: "post",
       timeout: null,
     });
-    return;
+  } else {
+    await hass.callApi<HassioResponse<void>>("POST", `hassio/core/update`);
   }
-
-  await hass.callApi<HassioResponse<void>>("POST", `hassio/core/update`);
 };

src/translations/en.json

@@ -3801,6 +3801,12 @@
       "restart_addon": {
         "confirm_text": "Restart add-on",
         "text": "Do you want to restart the add-on with your changes?"
+      },
+      "update": {
+        "snapshot": "Snapshot",
+        "create_snapshot": "Create a snapshot of {name} before updating",
+        "updating": "Updating {name} to version {version}",
+        "snapshotting": "Creating snapshot of {name}"
       }
     }
   }