From d4872b177ffcd94fe1d326df2d6f65dd55ef157c Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 4 Sep 2023 20:08:33 +0200 Subject: [PATCH] Start improve restore backup in onboarding (#17813) --- hassio/src/components/hassio-upload-backup.ts | 1 - src/onboarding/ha-onboarding.ts | 55 +++++++++++++++--- src/onboarding/onboarding-restore-backup.ts | 56 +++++++++++++------ src/onboarding/onboarding-welcome-link.ts | 1 + src/onboarding/onboarding-welcome-links.ts | 29 +++++++--- src/translations/en.json | 1 + 6 files changed, 109 insertions(+), 34 deletions(-) diff --git a/hassio/src/components/hassio-upload-backup.ts b/hassio/src/components/hassio-upload-backup.ts index 57046f2818..3cc379438e 100644 --- a/hassio/src/components/hassio-upload-backup.ts +++ b/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 > `; } diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts index 7a06c0e3cf..8cd3f0fab4 100644 --- a/src/onboarding/ha-onboarding.ts +++ b/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`
${this._renderStep()}
- ${this._init + ${this._init && !this._restoring ? html`` : nothing}
@@ -125,6 +153,14 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { } private _renderStep() { + if (this._restoring) { + return html` + `; + } + if (this._init) { return html``; } - if (this._restoring) { - return html` - `; - } - 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"]; diff --git a/src/onboarding/onboarding-restore-backup.ts b/src/onboarding/onboarding-restore-backup.ts index 006ebeadb8..58fd1dcb97 100644 --- a/src/onboarding/onboarding-restore-backup.ts +++ b/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 - ? html`

- ${this.localize("ui.panel.page-onboarding.restore.in_progress")} -

- ` - : html` -

${this.localize("ui.panel.page-onboarding.restore.header")}

- - ${this.localize("ui.panel.page-onboarding.restore.upload_backup")} - - `; + return html`${this._restoring + ? html`

+ ${this.localize("ui.panel.page-onboarding.restore.in_progress")} +

+ ` + : html`

+ ${this.localize("ui.panel.page-onboarding.restore.header")} +

+ `} +
+ + ${this.localize("ui.panel.page-onboarding.back")} + +
`; } - private _uploadBackup(): void { - showBackupUploadDialog(this, { - showBackup: (slug: string) => this._showBackupDialog(slug), - onboarding: true, - }); + private _back(): void { + navigate(`${location.pathname}?${removeSearchParam("page")}`); + } + + 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; + } `, ]; } diff --git a/src/onboarding/onboarding-welcome-link.ts b/src/onboarding/onboarding-welcome-link.ts index 5969178c2a..7d4dbdd79d 100644 --- a/src/onboarding/onboarding-welcome-link.ts +++ b/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); diff --git a/src/onboarding/onboarding-welcome-links.ts b/src/onboarding/onboarding-welcome-links.ts index 0dd336a734..8be8372879 100644 --- a/src/onboarding/onboarding-welcome-links.ts +++ b/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` - - `; + ${this.mobileApp + ? nothing + : html` + `}`; } private _openCommunity(): void { diff --git a/src/translations/en.json b/src/translations/en.json index c47e6ae5b4..685e8c2e30 100644 --- a/src/translations/en.json +++ b/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",