feat: register new modal to show version info

src/Umbraco.Web.UI.Client/src/packages/sysinfo/components/new-version.element.ts

@@ -0,0 +1,61 @@
+import { UmbSysinfoRepository } from '../repository/sysinfo.repository.js';
+import type { UmbServerUpgradeCheck } from '../types.js';
+import { customElement, html, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+
+@customElement('umb-new-version')
+export class UmbNewVersionElement extends UmbModalBaseElement {
+	@state()
+	private _serverUpgradeCheck: UmbServerUpgradeCheck | null = null;
+
+	#sysinfoRepository = new UmbSysinfoRepository(this);
+
+	override async connectedCallback() {
+		super.connectedCallback();
+		this._serverUpgradeCheck = await this.#sysinfoRepository.serverUpgradeCheck();
+	}
+
+	override render() {
+		return html`
+			<uui-dialog>
+				<uui-dialog-layout headline=${this.localize.term('general_newVersionAvailable')}>
+					${when(
+						this._serverUpgradeCheck === null,
+						() => html`<uui-loader-bar></uui-loader-bar>`,
+						() => html` <div>${this._serverUpgradeCheck!.comment}</div> `,
+					)}
+
+					<uui-button
+						@click=${this._submitModal}
+						slot="actions"
+						look="secondary"
+						label=${this.localize.term('general_close')}></uui-button>
+
+					${this._serverUpgradeCheck?.url
+						? html` <uui-button
+								.href=${this._serverUpgradeCheck.url}
+								target="_blank"
+								slot="actions"
+								look="primary"
+								color="positive"
+								label=${this.localize.term('general_readMore')}>
+								<umb-localize key="general_readMore">Read more</umb-localize>
+								<umb-icon name="icon-out"></umb-icon>
+							</uui-button>`
+						: ''}
+				</uui-dialog-layout>
+			</uui-dialog>
+		`;
+	}
+
+	static override readonly styles = [UmbTextStyles];
+}
+
+export default UmbNewVersionElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-new-version': UmbNewVersionElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/sysinfo/index.ts

@@ -1,4 +1,3 @@
-export * from './components/sysinfo.element.js';
 export * from './modals/index.js';
 export * from './repository/index.js';
 export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/sysinfo/manifests.ts

@@ -1,12 +1,18 @@
 import type { ManifestModal, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
-export const UMB_SYSINFO_MODAL_ALIAS = 'Umb.Modal.Sysinfo';
+const modalManifests: Array<ManifestModal> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Sysinfo.Modal',
+		name: 'Sysinfo Modal',
+		js: () => import('./components/sysinfo.element.js'),
+	},
+	{
+		type: 'modal',
+		alias: 'Umb.NewVersion.Modal',
+		name: 'New Version Modal',
+		js: () => import('./components/new-version.element.js'),
+	},
+];
 
-const modalManifest: ManifestModal = {
-	type: 'modal',
-	alias: UMB_SYSINFO_MODAL_ALIAS,
-	name: 'Sysinfo Modal',
-	js: () => import('./components/sysinfo.element.js'),
-};
-
-export const manifests: Array<ManifestTypes> = [modalManifest];
+export const manifests: Array<ManifestTypes> = [...modalManifests];

src/Umbraco.Web.UI.Client/src/packages/sysinfo/modals/index.ts

@@ -1 +1,2 @@
+export * from './new-version-modal.token.js';
 export * from './sysinfo-modal.token.js';

src/Umbraco.Web.UI.Client/src/packages/sysinfo/modals/new-version-modal.token.ts

@@ -0,0 +1,8 @@
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export const UMB_NEWVERSION_MODAL = new UmbModalToken('Umb.NewVersion.Modal', {
+	modal: {
+		type: 'dialog',
+		size: 'medium',
+	},
+});

src/Umbraco.Web.UI.Client/src/packages/sysinfo/modals/sysinfo-modal.token.ts

@@ -1,7 +1,6 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
-import { UMB_SYSINFO_MODAL_ALIAS } from '../manifests.js';
 
-export const UMB_SYSINFO_MODAL = new UmbModalToken(UMB_SYSINFO_MODAL_ALIAS, {
+export const UMB_SYSINFO_MODAL = new UmbModalToken('Umb.Sysinfo.Modal', {
 	modal: {
 		type: 'dialog',
 		size: 'medium',