From 9aa0e2c585ddf785c4835c88f543150b344148fb Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Wed, 11 Sep 2024 16:36:31 +0200
Subject: [PATCH] feat: register new modal to show version info

---
 .../sysinfo/components/new-version.element.ts | 61 +++++++++++++++++++
 .../src/packages/sysinfo/index.ts             |  1 -
 .../src/packages/sysinfo/manifests.ts         | 24 +++++---
 .../src/packages/sysinfo/modals/index.ts      |  1 +
 .../sysinfo/modals/new-version-modal.token.ts |  8 +++
 .../sysinfo/modals/sysinfo-modal.token.ts     |  3 +-
 6 files changed, 86 insertions(+), 12 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sysinfo/components/new-version.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sysinfo/modals/new-version-modal.token.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/sysinfo/components/new-version.element.ts b/src/Umbraco.Web.UI.Client/src/packages/sysinfo/components/new-version.element.ts
new file mode 100644
index 0000000000..616b1b347c
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sysinfo/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sysinfo/index.ts
index cbcf692b21..92548a8dd7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sysinfo/index.ts
+++ b/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';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sysinfo/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sysinfo/manifests.ts
index fa57d5b840..6539cf9e67 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sysinfo/manifests.ts
+++ b/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];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sysinfo/modals/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sysinfo/modals/index.ts
index 575d63fbd5..64dd56f433 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sysinfo/modals/index.ts
+++ b/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';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sysinfo/modals/new-version-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/sysinfo/modals/new-version-modal.token.ts
new file mode 100644
index 0000000000..047bcbbf68
--- /dev/null
+++ b/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',
+	},
+});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sysinfo/modals/sysinfo-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/sysinfo/modals/sysinfo-modal.token.ts
index d68114a4e3..b177c57851 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sysinfo/modals/sysinfo-modal.token.ts
+++ b/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',