Start improve restore backup in onboarding (#17813)

hassio/src/components/hassio-upload-backup.ts

@@ -33,7 +33,6 @@ export class HassioUploadBackup extends LitElement {
         label="Upload backup"
         supports="Supports .TAR files"
         @file-picked=${this._uploadFile}
-        auto-open-file-dialog
       ></ha-file-upload>
     `;
   }

src/onboarding/ha-onboarding.ts

@@ -15,7 +15,11 @@ import {
 } from "../common/auth/token_storage";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { HASSDomEvent } from "../common/dom/fire_event";
-import { extractSearchParamsObject } from "../common/url/search-params";
+import {
+  addSearchParam,
+  extractSearchParam,
+  extractSearchParamsObject,
+} from "../common/url/search-params";
 import { subscribeOne } from "../common/util/subscribe-one";
 import "../components/ha-card";
 import "../components/ha-language-picker";
@@ -39,6 +43,8 @@ import "./onboarding-loading";
 import "./onboarding-welcome";
 import "./onboarding-welcome-links";
 import { makeDialogManager } from "../dialogs/make-dialog-manager";
+import { navigate } from "../common/navigate";
+import { mainWindow } from "../common/dom/get_main_window";
 
 type OnboardingEvent =
   | {
@@ -96,6 +102,27 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
 
   @state() private _steps?: OnboardingStep[];
 
+  @state() private _page = extractSearchParam("page");
+
+  private _mobileApp =
+    extractSearchParam("redirect_uri") === "homeassistant://auth-callback";
+
+  connectedCallback() {
+    super.connectedCallback();
+    mainWindow.addEventListener("location-changed", this._updatePage);
+    mainWindow.addEventListener("popstate", this._updatePage);
+  }
+
+  disconnectedCallback() {
+    super.connectedCallback();
+    mainWindow.removeEventListener("location-changed", this._updatePage);
+    mainWindow.removeEventListener("popstate", this._updatePage);
+  }
+
+  private _updatePage = () => {
+    this._page = extractSearchParam("page");
+  };
+
   protected render() {
     return html`<mwc-linear-progress
         .progress=${this._progress}
@@ -103,9 +130,10 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
       <ha-card>
         <div class="card-content">${this._renderStep()}</div>
       </ha-card>
-      ${this._init
+      ${this._init && !this._restoring
         ? html`<onboarding-welcome-links
             .localize=${this.localize}
+            .mobileApp=${this._mobileApp}
           ></onboarding-welcome-links>`
         : nothing}
       <div class="footer">
@@ -125,6 +153,14 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
   }
 
   private _renderStep() {
+    if (this._restoring) {
+      return html`<onboarding-restore-backup
+        .hass=${this.hass}
+        .localize=${this.localize}
+      >
+      </onboarding-restore-backup>`;
+    }
+
     if (this._init) {
       return html`<onboarding-welcome
         .localize=${this.localize}
@@ -133,11 +169,6 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
       ></onboarding-welcome>`;
     }
 
-    if (this._restoring) {
-      return html`<onboarding-restore-backup .localize=${this.localize}>
-      </onboarding-restore-backup>`;
-    }
-
     const step = this._curStep()!;
 
     if (this._loading || !step) {
@@ -195,6 +226,12 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
 
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
+    if (changedProps.has("_page")) {
+      this._restoring = this._page === "restore_backup";
+      if (this._page === null && this._steps && !this._steps[0].done) {
+        this._init = true;
+      }
+    }
     if (changedProps.has("language")) {
       document.querySelector("html")!.setAttribute("lang", this.language!);
     }
@@ -312,6 +349,10 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
       this._restoring = stepResult.result.restore;
       if (!this._restoring) {
         this._progress = 0.25;
+      } else {
+        navigate(
+          `${location.pathname}?${addSearchParam({ page: "restore_backup" })}`
+        );
       }
     } else if (stepResult.type === "user") {
       const result = stepResult.result as OnboardingResponses["user"];

src/onboarding/onboarding-restore-backup.ts

@@ -1,42 +1,55 @@
 import "@material/mwc-button/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { showBackupUploadDialog } from "../../hassio/src/dialogs/backup/show-dialog-backup-upload";
 import { showHassioBackupDialog } from "../../hassio/src/dialogs/backup/show-dialog-hassio-backup";
+import "../../hassio/src/components/hassio-upload-backup";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-ansi-to-html";
 import "../components/ha-card";
 import { fetchInstallationType } from "../data/onboarding";
+import { HomeAssistant } from "../types";
 import "./onboarding-loading";
 import { onBoardingStyles } from "./styles";
+import { removeSearchParam } from "../common/url/search-params";
+import { navigate } from "../common/navigate";
 
 @customElement("onboarding-restore-backup")
 class OnboardingRestoreBackup extends LitElement {
-  @property() public localize!: LocalizeFunc;
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public localize!: LocalizeFunc;
 
   @property() public language!: string;
 
   @state() public _restoring = false;
 
   protected render(): TemplateResult {
-    return this._restoring
+    return html`${this._restoring
         ? html`<h1>
               ${this.localize("ui.panel.page-onboarding.restore.in_progress")}
             </h1>
             <onboarding-loading></onboarding-loading>`
-      : html`
+        : html` <h1>
-          <h1>${this.localize("ui.panel.page-onboarding.restore.header")}</h1>
+              ${this.localize("ui.panel.page-onboarding.restore.header")}
-          <ha-button unelevated @click=${this._uploadBackup}>
+            </h1>
-            ${this.localize("ui.panel.page-onboarding.restore.upload_backup")}
+            <hassio-upload-backup
-          </ha-button>
+              @backup-uploaded=${this._backupUploaded}
-        `;
+              .hass=${this.hass}
+            ></hassio-upload-backup>`}
+      <div class="footer">
+        <mwc-button @click=${this._back} .disabled=${this._restoring}>
+          ${this.localize("ui.panel.page-onboarding.back")}
+        </mwc-button>
+      </div> `;
   }
 
-  private _uploadBackup(): void {
+  private _back(): void {
-    showBackupUploadDialog(this, {
+    navigate(`${location.pathname}?${removeSearchParam("page")}`);
-      showBackup: (slug: string) => this._showBackupDialog(slug),
+  }
-      onboarding: true,
+
-    });
+  private _backupUploaded(ev) {
+    const backup = ev.detail.backup;
+    this._showBackupDialog(backup.slug);
   }
 
   protected firstUpdated(changedProps) {
@@ -76,6 +89,13 @@ class OnboardingRestoreBackup extends LitElement {
           flex-direction: column;
           align-items: center;
         }
+        hassio-upload-backup {
+          width: 100%;
+        }
+        .footer {
+          width: 100%;
+          text-align: left;
+        }
       `,
     ];
   }

src/onboarding/onboarding-welcome-link.ts

@@ -94,6 +94,7 @@ class OnboardingWelcomeLink extends LitElement {
         text-align: center;
         font-weight: 500;
         padding: 32px 16px;
+        height: 100%;
       }
       ha-svg-icon {
         color: var(--text-primary-color);

src/onboarding/onboarding-welcome-links.ts

@@ -1,5 +1,12 @@
 import { mdiAccountGroup, mdiFileDocument, mdiTabletCellphone } from "@mdi/js";
-import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
+import {
+  CSSResultGroup,
+  LitElement,
+  TemplateResult,
+  css,
+  html,
+  nothing,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-card";
@@ -14,6 +21,8 @@ class OnboardingWelcomeLinks extends LitElement {
 
   @property() public localize!: LocalizeFunc;
 
+  @property({ type: Boolean }) public mobileApp!: boolean;
+
   protected render(): TemplateResult {
     return html`<a
         target="_blank"
@@ -34,13 +43,17 @@ class OnboardingWelcomeLinks extends LitElement {
         .label=${this.localize("ui.panel.page-onboarding.welcome.community")}
       >
       </onboarding-welcome-link>
-      <onboarding-welcome-link
+      ${this.mobileApp
+        ? nothing
+        : html`<onboarding-welcome-link
             class="app"
             @click=${this._openApp}
             .iconPath=${mdiTabletCellphone}
-        .label=${this.localize("ui.panel.page-onboarding.welcome.download_app")}
+            .label=${this.localize(
+              "ui.panel.page-onboarding.welcome.download_app"
+            )}
           >
-      </onboarding-welcome-link>`;
+          </onboarding-welcome-link>`}`;
   }
 
   private _openCommunity(): void {

src/translations/en.json

@@ -5690,6 +5690,7 @@
       },
       "page-onboarding": {
         "intro": "Are you ready to awaken your home, reclaim your privacy and join a worldwide community of tinkerers?",
+        "back": "Back",
         "next": "Next",
         "finish": "Finish",
         "help": "Help",