add class for the server status

src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts

@@ -10,7 +10,7 @@ export class UmbAppContext extends UmbBaseController {
 		super(host);
 		this.#serverUrl = config.serverUrl;
 		this.#backofficePath = config.backofficePath;
-		this.provideContext(UMB_APP, this);
+		this.provideContext(UMB_APP_CONTEXT, this);
 	}
 
 	getBackofficePath() {
@@ -22,4 +22,4 @@ export class UmbAppContext extends UmbBaseController {
 	}
 }
 
-export const UMB_APP = new UmbContextToken<UmbAppContext>('UMB_APP');
+export const UMB_APP_CONTEXT = new UmbContextToken<UmbAppContext>('UMB_APP');

src/Umbraco.Web.UI.Client/src/apps/app/app.element.ts

@@ -1,5 +1,6 @@
 import type { UmbAppErrorElement } from './app-error.element.js';
 import { UmbAppContext } from './app.context.js';
+import { UmbServerConnection } from './server-connection.js';
 import { UMB_AUTH_CONTEXT, UmbAuthContext } from '@umbraco-cms/backoffice/auth';
 import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UUIIconRegistryEssential } from '@umbraco-cms/backoffice/external/uui';
@@ -58,7 +59,7 @@ export class UmbAppElement extends UmbLitElement {
 	#authContext?: typeof UMB_AUTH_CONTEXT.TYPE;
 	#umbIconRegistry = new UmbIconRegistry();
 	#uuiIconRegistry = new UUIIconRegistryEssential();
-	#serverStatus = RuntimeLevelModel.UNKNOWN;
+	#serverConnection?: UmbServerConnection;
 
 	constructor() {
 		super();
@@ -74,21 +75,20 @@ export class UmbAppElement extends UmbLitElement {
 
 	async #setup() {
 		if (this.serverUrl === undefined) throw new Error('No serverUrl provided');
-
 		OpenAPI.BASE = this.serverUrl;
 		const redirectUrl = `${window.location.origin}${this.backofficePath}`;
 
+		this.#serverConnection = new UmbServerConnection(this.serverUrl);
+		await this.#serverConnection.connect();
+
 		this.#authContext = new UmbAuthContext(this, this.serverUrl, redirectUrl, this.bypassAuth);
 		new UmbAppContext(this, { backofficePath: this.backofficePath, serverUrl: this.serverUrl });
 
 		// Try to initialise the auth flow and get the runtime status
 		try {
-			// Get the current runtime level
-			await this.#setServerStatus();
-
 			// If the runtime level is "install" we should clear any cached tokens
 			// else we should try and set the auth status
-			if (this.#serverStatus === RuntimeLevelModel.INSTALL) {
+			if (this.#serverConnection.getStatus() === RuntimeLevelModel.INSTALL) {
 				await this.#authContext.signOut();
 			} else {
 				await this.#setAuthStatus();
@@ -141,14 +141,6 @@ export class UmbAppElement extends UmbLitElement {
 		});
 	}
 
-	async #setServerStatus() {
-		const { data, error } = await tryExecute(ServerResource.getServerStatus());
-		if (error) {
-			throw error;
-		}
-		this.#serverStatus = data?.serverStatus ?? RuntimeLevelModel.UNKNOWN;
-	}
-
 	async #setAuthStatus() {
 		if (this.bypassAuth) return;
 
@@ -165,7 +157,7 @@ export class UmbAppElement extends UmbLitElement {
 	}
 
 	#redirect() {
-		switch (this.#serverStatus) {
+		switch (this.#serverConnection?.getStatus()) {
 			case RuntimeLevelModel.INSTALL:
 				history.replaceState(null, '', 'install');
 				break;
@@ -197,7 +189,7 @@ export class UmbAppElement extends UmbLitElement {
 
 			default:
 				// Redirect to the error page
-				this.#errorPage(`Unsupported runtime level: ${this.#serverStatus}`);
+				this.#errorPage(`Unsupported runtime level: ${this.#serverConnection?.getStatus()}`);
 		}
 	}
 

src/Umbraco.Web.UI.Client/src/apps/app/server-connection.ts

@@ -0,0 +1,31 @@
+import { RuntimeLevelModel, ServerResource } from '@umbraco-cms/backoffice/backend-api';
+import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
+import { tryExecute } from '@umbraco-cms/backoffice/resources';
+
+export class UmbServerConnection {
+	#serverUrl: string;
+	#serverStatus: RuntimeLevelModel = RuntimeLevelModel.UNKNOWN;
+	#connected = new UmbBooleanState(false);
+
+	constructor(serverUrl: string) {
+		this.#serverUrl = serverUrl;
+	}
+
+	async connect() {
+		await this.#setStatus();
+	}
+
+	getStatus() {
+		return this.#serverStatus;
+	}
+
+	async #setStatus() {
+		const { data, error } = await tryExecute(ServerResource.getServerStatus());
+		if (error) {
+			throw error;
+		}
+
+		this.#connected.next(true);
+		this.#serverStatus = data?.serverStatus ?? RuntimeLevelModel.UNKNOWN;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts

@@ -12,7 +12,7 @@ import {
 	UMB_MODAL_MANAGER_CONTEXT_TOKEN,
 	UmbModalManagerContext,
 } from '@umbraco-cms/backoffice/modal';
-import { UMB_APP } from '@umbraco-cms/backoffice/app';
+import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 
 /**
  * @element umb-input-markdown
@@ -49,7 +49,7 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
 			this._modalContext = instance;
 		});
-		this.consumeContext(UMB_APP, (instance) => {
+		this.consumeContext(UMB_APP_CONTEXT, (instance) => {
 			this.serverUrl = instance.getServerUrl();
 		});
 	}

src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts

@@ -26,7 +26,7 @@ import { firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs';
 import { UmbMediaHelper } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
-import { UMB_APP } from '@umbraco-cms/backoffice/app';
+import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 import { UmbStylesheetRepository } from '@umbraco-cms/backoffice/stylesheet';
 
 // TODO => integrate macro picker, update stylesheet fetch when backend CLI exists (ref tinymce.service.js in existing backoffice)
@@ -56,7 +56,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 	constructor() {
 		super();
 
-		this.consumeContext(UMB_APP, (instance) => {
+		this.consumeContext(UMB_APP_CONTEXT, (instance) => {
 			this.#serverUrl = instance.getServerUrl();
 		});
 

src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user/current-user-modal.element.ts

@@ -1,6 +1,6 @@
 import { UMB_CURRENT_USER_CONTEXT } from '../../current-user.context.js';
 import { UmbCurrentUser } from '../../types.js';
-import { UMB_APP } from '@umbraco-cms/backoffice/app';
+import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, CSSResultGroup, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalContext } from '@umbraco-cms/backoffice/modal';
@@ -17,7 +17,7 @@ export class UmbCurrentUserModalElement extends UmbLitElement {
 
 	#authContext?: typeof UMB_AUTH_CONTEXT.TYPE;
 	#currentUserContext?: typeof UMB_CURRENT_USER_CONTEXT.TYPE;
-	#appContext?: typeof UMB_APP.TYPE;
+	#appContext?: typeof UMB_APP_CONTEXT.TYPE;
 
 	constructor() {
 		super();
@@ -31,7 +31,7 @@ export class UmbCurrentUserModalElement extends UmbLitElement {
 			this.#authContext = instance;
 		});
 
-		this.consumeContext(UMB_APP, (instance) => {
+		this.consumeContext(UMB_APP_CONTEXT, (instance) => {
 			this.#appContext = instance;
 		});
 	}