Fix issues with restoring snapshot during onboarding (#9385)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

hassio/src/components/supervisor-snapshot-content.ts

@@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { formatDate } from "../../../src/common/datetime/format_date";
 import { formatDateTime } from "../../../src/common/datetime/format_date_time";
+import { LocalizeFunc } from "../../../src/common/translations/localize";
 import "../../../src/components/ha-checkbox";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-radio";
@@ -67,6 +68,8 @@ const _computeAddons = (addons): AddonCheckboxItem[] =>
 export class SupervisorSnapshotContent extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property() public localize?: LocalizeFunc;
+
   @property({ attribute: false }) public supervisor?: Supervisor;
 
   @property({ attribute: false }) public snapshot?: HassioSnapshotDetail;
@@ -81,6 +84,8 @@ export class SupervisorSnapshotContent extends LitElement {
 
   @property({ type: Boolean }) public snapshotHasPassword = false;
 
+  @property({ type: Boolean }) public onboarding = false;
+
   @property() public snapshotName = "";
 
   @property() public snapshotPassword = "";
@@ -106,8 +111,12 @@ export class SupervisorSnapshotContent extends LitElement {
     }
   }
 
+  private _localize = (string: string) =>
+    this.supervisor?.localize(`snapshot.${string}`) ||
+    this.localize!(`ui.panel.page-onboarding.restore.${string}`);
+
   protected render(): TemplateResult {
-    if (!this.supervisor) {
+    if (!this.onboarding && !this.supervisor) {
       return html``;
     }
     const foldersSection =
@@ -119,14 +128,16 @@ export class SupervisorSnapshotContent extends LitElement {
       ${this.snapshot
         ? html`<div class="details">
             ${this.snapshot.type === "full"
-              ? this.supervisor.localize("snapshot.full_snapshot")
+              ? this._localize("full_snapshot")
-              : this.supervisor.localize("snapshot.partial_snapshot")}
+              : this._localize("partial_snapshot")}
             (${Math.ceil(this.snapshot.size * 10) / 10 + " MB"})<br />
-            ${formatDateTime(new Date(this.snapshot.date), this.hass.locale)}
+            ${this.hass
+              ? formatDateTime(new Date(this.snapshot.date), this.hass.locale)
+              : this.snapshot.date}
           </div>`
         : html`<paper-input
             name="snapshotName"
-            .label=${this.supervisor.localize("snapshot.name")}
+            .label=${this.supervisor?.localize("snapshot.name") || "Name"}
             .value=${this.snapshotName}
             @value-changed=${this._handleTextValueChanged}
           >
@@ -134,13 +145,11 @@ export class SupervisorSnapshotContent extends LitElement {
       ${!this.snapshot || this.snapshot.type === "full"
         ? html`<div class="sub-header">
               ${!this.snapshot
-                ? this.supervisor.localize("snapshot.type")
+                ? this._localize("type")
-                : this.supervisor.localize("snapshot.select_type")}
+                : this._localize("select_type")}
             </div>
             <div class="snapshot-types">
-              <ha-formfield
+              <ha-formfield .label=${this._localize("full_snapshot")}>
-                .label=${this.supervisor.localize("snapshot.full_snapshot")}
-              >
                 <ha-radio
                   @change=${this._handleRadioValueChanged}
                   value="full"
@@ -149,9 +158,7 @@ export class SupervisorSnapshotContent extends LitElement {
                 >
                 </ha-radio>
               </ha-formfield>
-              <ha-formfield
+              <ha-formfield .label=${this._localize("partial_snapshot")}>
-                .label=${this.supervisor!.localize("snapshot.partial_snapshot")}
-              >
                 <ha-radio
                   @change=${this._handleRadioValueChanged}
                   value="partial"
@@ -188,7 +195,7 @@ export class SupervisorSnapshotContent extends LitElement {
               ? html`
                   <ha-formfield
                     .label=${html`<supervisor-formfield-label
-                      .label=${this.supervisor.localize("snapshot.folders")}
+                      .label=${this._localize("folders")}
                       .iconPath=${mdiFolder}
                     >
                     </supervisor-formfield-label>`}
@@ -208,7 +215,7 @@ export class SupervisorSnapshotContent extends LitElement {
               ? html`
                   <ha-formfield
                     .label=${html`<supervisor-formfield-label
-                      .label=${this.supervisor.localize("snapshot.addons")}
+                      .label=${this._localize("addons")}
                       .iconPath=${mdiPuzzle}
                     >
                     </supervisor-formfield-label>`}
@@ -233,7 +240,7 @@ export class SupervisorSnapshotContent extends LitElement {
       ${!this.snapshot
         ? html`<ha-formfield
             class="password"
-            .label=${this.supervisor.localize("snapshot.password_protection")}
+            .label=${this._localize("password_protection")}
           >
             <ha-checkbox
               .checked=${this.snapshotHasPassword}
@@ -245,7 +252,7 @@ export class SupervisorSnapshotContent extends LitElement {
       ${this.snapshotHasPassword
         ? html`
             <paper-input
-              .label=${this.supervisor.localize("snapshot.password")}
+              .label=${this._localize("password")}
               type="password"
               name="snapshotPassword"
               .value=${this.snapshotPassword}
@@ -254,9 +261,7 @@ export class SupervisorSnapshotContent extends LitElement {
             </paper-input>
             ${!this.snapshot
               ? html` <paper-input
-                  .label=${this.supervisor.localize(
+                  .label=${this.supervisor?.localize("confirm_password")}
-                    "snapshot.confirm_password"
-                  )}
                   type="password"
                   name="confirmSnapshotPassword"
                   .value=${this.confirmSnapshotPassword}
@@ -357,7 +362,7 @@ export class SupervisorSnapshotContent extends LitElement {
     const addons =
       section === "addons"
         ? new Map(
-            this.supervisor!.addon.addons.map((item) => [item.slug, item])
+            this.supervisor?.addon.addons.map((item) => [item.slug, item])
           )
         : undefined;
     let checkedItems = 0;
@@ -367,6 +372,7 @@ export class SupervisorSnapshotContent extends LitElement {
           .label=${item.name}
           .iconPath=${section === "addons" ? mdiPuzzle : mdiFolder}
           .imageUrl=${section === "addons" &&
+          !this.onboarding &&
           atLeastVersion(this.hass.config.version, 0, 105) &&
           addons?.get(item.slug)?.icon
             ? `/api/hassio/addons/${item.slug}/icon`

hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts

@@ -1,13 +1,13 @@
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiDotsVertical } from "@mdi/js";
+import { mdiClose, mdiDotsVertical } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { slugify } from "../../../../src/common/string/slugify";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-button-menu";
-import { createCloseHeading } from "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-header-bar";
 import "../../../../src/components/ha-svg-icon";
 import { getSignedPath } from "../../../../src/data/auth";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -67,14 +67,24 @@ class HassioSnapshotDialog
         open
         scrimClickAction
         @closed=${this.closeDialog}
-        .heading=${createCloseHeading(this.hass, this._computeName)}
+        .heading=${true}
       >
+        <div slot="heading">
+          <ha-header-bar>
+            <span slot="title">${this._snapshot.name}</span>
+            <mwc-icon-button slot="actionItems" dialogAction="cancel">
+              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+            </mwc-icon-button>
+          </ha-header-bar>
+        </div>
         ${this._restoringSnapshot
           ? html` <ha-circular-progress active></ha-circular-progress>`
           : html`<supervisor-snapshot-content
               .hass=${this.hass}
               .supervisor=${this._dialogParams.supervisor}
               .snapshot=${this._snapshot}
+              .onboarding=${this._dialogParams.onboarding || false}
+              .localize=${this._dialogParams.localize}
             >
             </supervisor-snapshot-content>`}
         ${this._error ? html`<p class="error">Error: ${this._error}</p>` : ""}
@@ -87,18 +97,20 @@ class HassioSnapshotDialog
           Restore
         </mwc-button>
 
-        <ha-button-menu
+        ${!this._dialogParams.onboarding
-          fixed
+          ? html`<ha-button-menu
-          slot="primaryAction"
+              fixed
-          @action=${this._handleMenuAction}
+              slot="primaryAction"
-          @closed=${(ev: Event) => ev.stopPropagation()}
+              @action=${this._handleMenuAction}
-        >
+              @closed=${(ev: Event) => ev.stopPropagation()}
-          <mwc-icon-button slot="trigger" alt="menu">
+            >
-            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+              <mwc-icon-button slot="trigger" alt="menu">
-          </mwc-icon-button>
+                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
-          <mwc-list-item>Download Snapshot</mwc-list-item>
+              </mwc-icon-button>
-          <mwc-list-item class="error">Delete Snapshot</mwc-list-item>
+              <mwc-list-item>Download Snapshot</mwc-list-item>
-        </ha-button-menu>
+              <mwc-list-item class="error">Delete Snapshot</mwc-list-item>
+            </ha-button-menu>`
+          : ""}
       </ha-dialog>
     `;
   }
@@ -115,6 +127,12 @@ class HassioSnapshotDialog
           display: block;
           text-align: center;
         }
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--mdc-theme-surface);
+          flex-shrink: 0;
+          display: block;
+        }
       `,
     ];
   }

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

@@ -1,4 +1,5 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { LocalizeFunc } from "../../../../src/common/translations/localize";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 
 export interface HassioSnapshotDialogParams {
@@ -6,6 +7,7 @@ export interface HassioSnapshotDialogParams {
   onDelete?: () => void;
   onboarding?: boolean;
   supervisor?: Supervisor;
+  localize?: LocalizeFunc;
 }
 
 export const showHassioSnapshotDialog = (

src/onboarding/ha-onboarding.ts

@@ -12,7 +12,10 @@ import { HASSDomEvent } from "../common/dom/fire_event";
 import { extractSearchParamsObject } from "../common/url/search-params";
 import { subscribeOne } from "../common/util/subscribe-one";
 import { AuthUrlSearchParams, hassUrl } from "../data/auth";
-import { fetchDiscoveryInformation } from "../data/discovery";
+import {
+  DiscoveryInformation,
+  fetchDiscoveryInformation,
+} from "../data/discovery";
 import {
   fetchOnboardingOverview,
   OnboardingResponses,
@@ -68,6 +71,8 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
 
   @state() private _steps?: OnboardingStep[];
 
+  @state() private _discoveryInformation?: DiscoveryInformation;
+
   protected render(): TemplateResult {
     const step = this._curStep()!;
 
@@ -87,6 +92,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
           ? html`<onboarding-restore-snapshot
               .localize=${this.localize}
               .restoring=${this._restoring}
+              .discoveryInformation=${this._discoveryInformation}
               @restoring=${this._restoringSnapshot}
             >
             </onboarding-restore-snapshot>`

src/onboarding/onboarding-restore-snapshot.ts

@@ -4,9 +4,12 @@ import { customElement, property } from "lit/decorators";
 import "../../hassio/src/components/hassio-ansi-to-html";
 import { showHassioSnapshotDialog } from "../../hassio/src/dialogs/snapshot/show-dialog-hassio-snapshot";
 import { showSnapshotUploadDialog } from "../../hassio/src/dialogs/snapshot/show-dialog-snapshot-upload";
-import { navigate } from "../common/navigate";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-card";
+import {
+  DiscoveryInformation,
+  fetchDiscoveryInformation,
+} from "../data/discovery";
 import { makeDialogManager } from "../dialogs/make-dialog-manager";
 import { ProvideHassLitMixin } from "../mixins/provide-hass-lit-mixin";
 import { haStyle } from "../resources/styles";
@@ -26,6 +29,9 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
 
   @property({ type: Boolean }) public restoring = false;
 
+  @property({ attribute: false })
+  public discoveryInformation?: DiscoveryInformation;
+
   protected render(): TemplateResult {
     return this.restoring
       ? html`<ha-card
@@ -58,13 +64,14 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
   private async _checkRestoreStatus(): Promise<void> {
     if (this.restoring) {
       try {
-        const response = await fetch("/api/hassio/supervisor/info", {
+        const response = await fetchDiscoveryInformation();
-          method: "GET",
+
-        });
+        if (
-        if (response.status === 401) {
+          !this.discoveryInformation ||
-          // If we get a unauthorized response, the restore is done
+          this.discoveryInformation.uuid !== response.uuid
-          navigate("/", { replace: true });
+        ) {
-          location.reload();
+          // When the UUID changes, the restore is complete
+          window.location.replace("/");
         }
       } catch (err) {
         // We fully expected issues with fetching info untill restore is complete.
@@ -76,6 +83,7 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
     showHassioSnapshotDialog(this, {
       slug,
       onboarding: true,
+      localize: this.localize,
     });
   }
 

src/translations/en.json

@@ -3569,7 +3569,16 @@
           "description": "Alternatively you can restore from a previous snapshot.",
           "in_progress": "Restore in progress",
           "show_log": "Show full log",
-          "hide_log": "Hide full log"
+          "hide_log": "Hide full log",
+          "full_snapshot": "[%key:supervisor::snapshot::full_snapshot%]",
+          "partial_snapshot": "[%key:supervisor::snapshot::partial_snapshot%]",
+          "type": "[%key:supervisor::snapshot::type%]",
+          "select_type": "[%key:supervisor::snapshot::select_type%]",
+          "folders": "[%key:supervisor::snapshot::folders%]",
+          "addons": "[%key:supervisor::snapshot::addons%]",
+          "password_protection": "[%key:supervisor::snapshot::password_protection%]",
+          "password": "[%key:supervisor::snapshot::password%]",
+          "confirm_password": "[%key:supervisor::snapshot::confirm_password%]"
         }
       },
       "custom": {