From 00246ce5fcd76696d5bf6efd0d4328bb2b522100 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 29 Jul 2022 11:04:25 +0200 Subject: [PATCH] divide the upgrader into a logic and a view component --- .../src/upgrader/upgrader-view.element.ts | 111 ++++++++++++++++++ .../src/upgrader/upgrader.element.ts | 74 ++---------- 2 files changed, 122 insertions(+), 63 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts new file mode 100644 index 0000000000..0bd00a8250 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts @@ -0,0 +1,111 @@ +import '../installer/installer-layout.element'; + +import { css, CSSResultGroup, html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { UmbracoUpgrader } from '../core/models'; + +/** + * @element umb-upgrader-view + * @fires {SubmitEvent} onAuthorizeUpgrade - fires when the user clicks the continue button + */ +@customElement('umb-upgrader-view') +export class UmbUpgraderView extends LitElement { + static styles: CSSResultGroup = [ + css` + .center { + display: grid; + place-items: center; + height: 100vh; + } + .error { + color: var(--uui-color-danger); + } + `, + ]; + + @property({ type: Boolean }) + fetching = true; + + @property({ type: Boolean }) + upgrading = false; + + @property({ type: String }) + errorMessage = ''; + + @property({ type: Object, reflect: true }) + settings?: UmbracoUpgrader; + + private _renderLayout() { + return html` +

Upgrading Umbraco

+ +

+ Welcome to the Umbraco installer. You see this screen because your Umbraco installation needs a quick upgrade + of its database and files, which will ensure your website is kept as fast, secure and up to date as possible. +

+ +

+ Detected current version ${this.settings?.oldVersion} (${this.settings?.currentState}), + which needs to be upgraded to ${this.settings?.newVersion} (${this.settings?.newState}). + To compare versions and read a report of changes between versions, use the View Report button below. +

+ + ${ + this.settings?.reportUrl + ? html` +

+ +

+ ` + : '' + } + +

Simply click continue below to be guided through the rest of the upgrade.

+ +
+

+ +

+
+ + ${this._renderError()} + + `; + } + + private _renderError() { + return html` ${this.errorMessage ? html`

${this.errorMessage}

` : ''} `; + } + + render() { + return html` +
+ ${this.fetching ? html`
` : this._renderLayout()} +
+ `; + } + + _handleSubmit = async (e: SubmitEvent) => { + e.preventDefault(); + this.dispatchEvent(new CustomEvent('onAuthorizeUpgrade', { detail: e, bubbles: true })); + }; +} + +export default UmbUpgraderView; + +declare global { + interface HTMLElementTagNameMap { + 'umb-upgrader-view': UmbUpgraderView; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts index 51abec75aa..d7b1480841 100644 --- a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts +++ b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts @@ -1,23 +1,14 @@ -import '../installer/installer-layout.element'; +import './upgrader-view.element'; -import { css, CSSResultGroup, html, LitElement } from 'lit'; +import { html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { ifDefined } from 'lit/directives/if-defined.js'; import { getUpgradeSettings, PostUpgradeAuthorize } from '../core/api/fetcher'; -import { UmbContextProviderMixin } from '../core/context'; import { UmbracoUpgrader } from '../core/models'; @customElement('umb-upgrader') -export class UmbUpgrader extends UmbContextProviderMixin(LitElement) { - static styles: CSSResultGroup = [ - css` - .error { - color: var(--uui-color-danger); - } - `, - ]; - +export class UmbUpgrader extends LitElement { + @state() private upgradeSettings?: UmbracoUpgrader; @state() @@ -34,55 +25,13 @@ export class UmbUpgrader extends UmbContextProviderMixin(LitElement) { this._setup(); } - private _renderLayout() { - return html` -

Upgrading Umbraco

- -

- Welcome to the Umbraco installer. You see this screen because your Umbraco installation needs a quick upgrade - of its database and files, which will ensure your website is kept as fast, secure and up to date as possible. -

- -

- Detected current version ${this.upgradeSettings?.oldVersion} (${this.upgradeSettings?.currentState}), - which needs to be upgraded to ${this.upgradeSettings?.newVersion} (${this.upgradeSettings?.newState}). - To compare versions and read a report of changes between versions, use the View Report button below. -

- -

- -

- -

Simply click continue below to be guided through the rest of the upgrade.

- -
-

- -

-
- - ${this._renderError()} - - `; - } - - private _renderError() { - return html` ${this.errorMessage ? html`

${this.errorMessage}

` : ''} `; - } - render() { - return html` -
${this.fetching ? html`
Loading...
` : this._renderLayout()}
- `; + return html``; } private async _setup() { @@ -101,8 +50,7 @@ export class UmbUpgrader extends UmbContextProviderMixin(LitElement) { this.fetching = false; } - _handleSubmit = async (e: SubmitEvent) => { - e.preventDefault(); + _handleSubmit = async () => { this.errorMessage = ''; this.upgrading = true;