Feature: Version check

src/apps/backoffice/backoffice.context.ts

@@ -10,6 +10,7 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbExtensionManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth';
 import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';
+import { UmbSysinfoRepository } from '@umbraco-cms/backoffice/sysinfo';
 
 export class UmbBackofficeContext extends UmbContextBase<UmbBackofficeContext> {
 	#activeSectionAlias = new UmbStringState(undefined);
@@ -76,6 +77,12 @@ export class UmbBackofficeContext extends UmbContextBase<UmbBackofficeContext> {
 	public setActiveSectionAlias(alias: string) {
 		this.#activeSectionAlias.setValue(alias);
 	}
+
+	public async serverUpgradeCheck(): Promise<boolean> {
+		const repository = new UmbSysinfoRepository(this);
+		const check = await repository.serverUpgradeCheck();
+		return !!check;
+	}
 }
 
 export const UMB_BACKOFFICE_CONTEXT = new UmbContextToken<UmbBackofficeContext>('UmbBackofficeContext');

src/apps/backoffice/components/backoffice-header-logo.element.ts

@@ -1,10 +1,10 @@
-import { isCurrentUserAnAdmin } from '@umbraco-cms/backoffice/current-user';
 import { UMB_BACKOFFICE_CONTEXT } from '../backoffice.context.js';
+import { isCurrentUserAnAdmin } from '@umbraco-cms/backoffice/current-user';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
-import { UMB_SYSINFO_MODAL } from '@umbraco-cms/backoffice/sysinfo';
+import { UMB_NEWVERSION_MODAL, UMB_SYSINFO_MODAL } from '@umbraco-cms/backoffice/sysinfo';
 
 @customElement('umb-backoffice-header-logo')
 export class UmbBackofficeHeaderLogoElement extends UmbLitElement {
@@ -14,6 +14,11 @@ export class UmbBackofficeHeaderLogoElement extends UmbLitElement {
 	@state()
 	private _isUserAdmin = false;
 
+	@state()
+	private _serverUpgradeCheck = false;
+
+	#backofficeContext?: typeof UMB_BACKOFFICE_CONTEXT.TYPE;
+
 	constructor() {
 		super();
 
@@ -26,13 +31,19 @@ export class UmbBackofficeHeaderLogoElement extends UmbLitElement {
 				},
 				'_observeVersion',
 			);
+
+			this.#backofficeContext = context;
 		});
 
 		this.#isAdmin();
 	}
 
 	async #isAdmin() {
 		this._isUserAdmin = await isCurrentUserAnAdmin(this);
+
+		if (this._isUserAdmin) {
+			this._serverUpgradeCheck = this.#backofficeContext ? await this.#backofficeContext.serverUpgradeCheck() : false;
+		}
 	}
 
 	override render() {
@@ -50,6 +61,14 @@ export class UmbBackofficeHeaderLogoElement extends UmbLitElement {
 							height="82"
 							loading="lazy" />
 						<span>${this._version}</span>
+
+						${this._serverUpgradeCheck
+							? html`<uui-button
+									@click=${this.#openNewVersion}
+									color="danger"
+									label=${this.localize.term('general_newVersionAvailable')}></uui-button>`
+							: ''}
+
 						<a href="https://umbraco.com" target="_blank" rel="noopener">Umbraco.com</a>
 
 						${this._isUserAdmin
@@ -72,6 +91,14 @@ export class UmbBackofficeHeaderLogoElement extends UmbLitElement {
 			.catch(() => {});
 	}
 
+	async #openNewVersion() {
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+		modalManager
+			.open(this, UMB_NEWVERSION_MODAL)
+			.onSubmit()
+			.catch(() => {});
+	}
+
 	static override styles = [
 		UmbTextStyles,
 		css`

src/assets/lang/da-dk.ts

@@ -907,6 +907,7 @@ export default {
 		lastUpdated: 'Last Updated',
 		skipToMenu: 'Skip to menu',
 		skipToContent: 'Skip to content',
+		newVersionAvailable: 'Ny version tilgængelig',
 	},
 	colors: {
 		blue: 'Blå',

src/assets/lang/de-de.ts

@@ -879,6 +879,7 @@ export default {
 		header: 'Kopf',
 		systemField: 'System Feld',
 		lastUpdated: 'Zuletzt geändert',
+		newVersionAvailable: 'Neue Version verfügbar',
 	},
 	colors: {
 		blue: 'Blau',

src/assets/lang/en-us.ts

@@ -918,6 +918,7 @@ export default {
 		skipToMenu: 'Skip to menu',
 		skipToContent: 'Skip to content',
 		restore: 'Restore',
+		newVersionAvailable: 'New version available',
 	},
 	colors: {
 		blue: 'Blue',

src/assets/lang/en.ts

@@ -934,6 +934,7 @@ export default {
 		media: 'Media',
 		revert: 'Revert',
 		validate: 'Validate',
+		newVersionAvailable: 'New version available',
 	},
 	colors: {
 		blue: 'Blue',

src/external/backend-api/src/types.gen.ts

@@ -2149,6 +2149,7 @@ export type ServerConfigurationItemResponseModel = {
 
 export type ServerConfigurationResponseModel = {
     allowPasswordReset: boolean;
+    versionCheckPeriod: number;
 };
 
 export type ServerInformationResponseModel = {
@@ -2608,6 +2609,12 @@ export type UpdateWebhookRequestModel = {
     events: Array<(string)>;
 };
 
+export type UpgradeCheckResponseModel = {
+    type: string;
+    comment: string;
+    url: string;
+};
+
 export type UpgradeSettingsResponseModel = {
     currentState: string;
     newState: string;
@@ -4667,6 +4674,8 @@ export type GetServerStatusResponse = ((ServerStatusResponseModel));
 
 export type GetServerTroubleshootingResponse = ((ServerTroubleshootingResponseModel));
 
+export type GetServerUpgradeCheckResponse = ((UpgradeCheckResponseModel));
+
 export type GetItemStaticFileData = {
     path?: Array<(string)>;
 };

src/mocks/handlers/server.handlers.ts

@@ -1,18 +1,20 @@
 const { rest } = window.MockServiceWorker;
 import {
-	type ServerStatusResponseModel,
-	type ServerInformationResponseModel,
-	type ServerTroubleshootingResponseModel,
 	RuntimeLevelModel,
 	RuntimeModeModel,
+	type GetServerUpgradeCheckResponse,
+	type GetServerTroubleshootingResponse,
+	type GetServerInformationResponse,
+	type GetServerConfigurationResponse,
+	type GetServerStatusResponse,
 } from '@umbraco-cms/backoffice/external/backend-api';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 
 export const serverRunningHandler = rest.get(umbracoPath('/server/status'), (_req, res, ctx) => {
 	return res(
 		// Respond with a 200 status code
 		ctx.status(200),
-		ctx.json<ServerStatusResponseModel>({
+		ctx.json<GetServerStatusResponse>({
 			serverStatus: RuntimeLevelModel.RUN,
 		}),
 	);
@@ -22,7 +24,7 @@ export const serverMustInstallHandler = rest.get(umbracoPath('/server/status'),
 	return res(
 		// Respond with a 200 status code
 		ctx.status(200),
-		ctx.json<ServerStatusResponseModel>({
+		ctx.json<GetServerStatusResponse>({
 			serverStatus: RuntimeLevelModel.INSTALL,
 		}),
 	);
@@ -32,20 +34,41 @@ export const serverMustUpgradeHandler = rest.get(umbracoPath('/server/status'),
 	return res(
 		// Respond with a 200 status code
 		ctx.status(200),
-		ctx.json<ServerStatusResponseModel>({
+		ctx.json<GetServerStatusResponse>({
 			serverStatus: RuntimeLevelModel.UPGRADE,
 		}),
 	);
 });
 
 export const serverInformationHandlers = [
+	rest.get(umbracoPath('/server/configuration'), (_req, res, ctx) => {
+		return res(
+			// Respond with a 200 status code
+			ctx.status(200),
+			ctx.json<GetServerConfigurationResponse>({
+				allowPasswordReset: true,
+				versionCheckPeriod: 7, // days
+			}),
+		);
+	}),
+	rest.get(umbracoPath('/server/upgrade-check'), (_req, res, ctx) => {
+		return res(
+			// Respond with a 200 status code
+			ctx.status(200),
+			ctx.json<GetServerUpgradeCheckResponse>({
+				type: 'Minor',
+				comment: "14.2.0.0 is released. Upgrade today - it's free!",
+				url: 'https://our.umbraco.com/download/releases/1420',
+			}),
+		);
+	}),
 	rest.get(umbracoPath('/server/information'), (_req, res, ctx) => {
 		return res(
 			// Respond with a 200 status code
 			ctx.status(200),
-			ctx.json<ServerInformationResponseModel>({
-				version: '14.0.0-preview004',
-				assemblyVersion: '14.0.0-preview004',
+			ctx.json<GetServerInformationResponse>({
+				version: '14.0.0',
+				assemblyVersion: '14.0.0',
 				baseUtcOffset: '01:00:00',
 				runtimeMode: RuntimeModeModel.BACKOFFICE_DEVELOPMENT,
 			}),
@@ -55,7 +78,7 @@ export const serverInformationHandlers = [
 		return res(
 			// Respond with a 200 status code
 			ctx.status(200),
-			ctx.json<ServerTroubleshootingResponseModel>({
+			ctx.json<GetServerTroubleshootingResponse>({
 				items: [
 					{ name: 'Umbraco base url', data: location.origin },
 					{ name: 'Mocked server', data: 'true' },

src/packages/sysinfo/components/new-version.element.ts

@@ -0,0 +1,68 @@
+import { UmbSysinfoRepository } from '../repository/sysinfo.repository.js';
+import type { UmbServerUpgradeCheck } from '../types.js';
+import { css, 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 slot="extra" name="icon-out"></umb-icon>
+							</uui-button>`
+						: ''}
+				</uui-dialog-layout>
+			</uui-dialog>
+		`;
+	}
+
+	static override readonly styles = [
+		UmbTextStyles,
+		css`
+			umb-icon {
+				margin-left: var(--uui-size-2);
+			}
+		`,
+	];
+}
+
+export default UmbNewVersionElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-new-version': UmbNewVersionElement;
+	}
+}

src/packages/sysinfo/index.ts

@@ -1,2 +1,3 @@
 export * from './modals/index.js';
 export * from './repository/index.js';
+export type * from './types.js';

src/packages/sysinfo/manifests.ts

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

src/packages/sysinfo/modals/index.ts

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

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.Modal.NewVersion', {
+	modal: {
+		type: 'dialog',
+		size: 'medium',
+	},
+});