yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

divide the upgrader into a logic and a view component

Browse Source
This commit is contained in:
Jacob Overgaard
2022-07-29 11:04:25 +02:00
parent 1f3e296a71
commit 00246ce5fc
2 changed files with 122 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts Normal file
View File

@@ -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`
<h1>Upgrading Umbraco</h1>
<p>
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.
</p>
<p>
Detected current version <strong>${this.settings?.oldVersion}</strong> (${this.settings?.currentState}),
which needs to be upgraded to <strong>${this.settings?.newVersion}</strong> (${this.settings?.newState}).
To compare versions and read a report of changes between versions, use the View Report button below.
</p>
${
this.settings?.reportUrl
? html`
<p>
<uui-button
look="secondary"
href="${this.settings.reportUrl}"
target="_blank"
label="View Report"></uui-button>
</p>
`
: ''
}
<p>Simply click <strong>continue</strong> below to be guided through the rest of the upgrade.</p>
<form id="authorizeUpgradeForm" @submit=${this._handleSubmit}>
<p>
<uui-button
id="authorizeUpgrade"
type="submit"
look="primary"
color="positive"
label="Continue"
state=${ifDefined(this.upgrading ? 'waiting' : undefined)}></uui-button>
</p>
</form>
${this._renderError()}
</div>
`;
}
private _renderError() {
return html` ${this.errorMessage ? html`<p class="error">${this.errorMessage}</p>` : ''} `;
}
render() {
return html` <umb-installer-layout>
<div id="container" class="uui-text">
${this.fetching ? html`<div class="center"><uui-loader></uui-loader></div>` : this._renderLayout()}
</div>
</umb-installer-layout>`;
}
_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;
}
}

74
src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts
View File

@@ -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`
<h1>Upgrading Umbraco</h1>
<p>
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.
</p>
<p>
Detected current version <strong>${this.upgradeSettings?.oldVersion}</strong> (${this.upgradeSettings?.currentState}),
which needs to be upgraded to <strong>${this.upgradeSettings?.newVersion}</strong> (${this.upgradeSettings?.newState}).
To compare versions and read a report of changes between versions, use the View Report button below.
</p>
<p>
<uui-button
look="secondary"
href="${ifDefined(this.upgradeSettings?.reportUrl)}"
target="_blank"
label="View Report"></uui-button>
</p>
<p>Simply click <strong>continue</strong> below to be guided through the rest of the upgrade.</p>
<form @submit=${this._handleSubmit}>
<p>
<uui-button
type="submit"
look="primary"
color="positive"
label="Continue"
state=${ifDefined(this.upgrading ? 'waiting' : undefined)}></uui-button>
</p>
</form>
${this._renderError()}
</div>
`;
}
private _renderError() {
return html` ${this.errorMessage ? html`<p class="error">${this.errorMessage}</p>` : ''} `;
}
render() {
return html` <umb-installer-layout>
<div id="container" class="uui-text">${this.fetching ? html`<div>Loading...</div>` : this._renderLayout()}</div>
</umb-installer-layout>`;
return html`<umb-upgrader-view
.fetching=${this.fetching}
.upgrading=${this.upgrading}
.settings=${this.upgradeSettings}
.errorMessage=${this.errorMessage}
@onAuthorizeUpgrade=${this._handleSubmit}></umb-upgrader-view>`;
}
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;