Bugfix: Health Check Dashboard

src/Umbraco.Web.UI.Client/src/packages/health-check/dashboard-health-check.element.ts

@@ -1,3 +1,4 @@
+import { UmbHealthCheckContext } from './health-check.context.js';
 import type { UmbDashboardHealthCheckGroupElement } from './views/health-check-group.element.js';
 import { UmbHealthCheckDashboardContext, UMB_HEALTHCHECK_DASHBOARD_CONTEXT } from './health-check-dashboard.context.js';
 import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
@@ -58,7 +59,7 @@ export class UmbDashboardHealthCheckElement extends UmbLitElement {
 				weight: 500,
 				meta: {
 					label: group.name || '',
-					api: () => import('./health-check.context.js'),
+					api: UmbHealthCheckContext,
 				},
 			};
 		});

src/Umbraco.Web.UI.Client/src/packages/health-check/health-check-dashboard.context.ts

@@ -1,6 +1,7 @@
 import type { UmbHealthCheckContext } from './health-check.context.js';
 import type { ManifestHealthCheck } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import { loadManifestApi } from '@umbraco-cms/backoffice/extension-api';
 
 export class UmbHealthCheckDashboardContext {
 	#manifests: ManifestHealthCheck[] = [];
@@ -27,9 +28,9 @@ export class UmbHealthCheckDashboardContext {
 
 	#registerApis() {
 		this.apis.clear();
-		this.#manifests.forEach((manifest) => {
-			// the group name (label) is the unique key for a health check group
-			this.apis.set(manifest.meta.label, new manifest.meta.api(this.host));
+		this.#manifests.forEach(async (manifest) => {
+			const api = await loadManifestApi<UmbHealthCheckContext>(manifest.meta.api);
+			if (api) this.apis.set(manifest.meta.label, new api(this.host));
 		});
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/health-check/health-check.context.ts

@@ -7,8 +7,9 @@ import { HealthCheckResource } from '@umbraco-cms/backoffice/external/backend-ap
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
+import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 
-export class UmbHealthCheckContext {
+export class UmbHealthCheckContext implements UmbApi {
 	private _checks = new BehaviorSubject<HealthCheckGroupPresentationModel | undefined>(undefined);
 	public readonly checks = this._checks.asObservable();
 
@@ -43,6 +44,10 @@ export class UmbHealthCheckContext {
 			this._results.next(undefined);
 		}
 	}
+
+	public destroy(): void {
+		this.destroy();
+	}
 }
 
 export default UmbHealthCheckContext;

src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-overview.element.ts

@@ -29,8 +29,8 @@ export class UmbDashboardHealthCheckOverviewElement extends UmbLitElement {
 	render() {
 		return html`
 			<uui-box>
-				<div slot="headline" class="flex">
-					Health Check
+				<div id="header" slot="header">
+					<h2>Health Check</h2>
 					<uui-button
 						label="Perform all checks"
 						color="positive"
@@ -60,12 +60,18 @@ export class UmbDashboardHealthCheckOverviewElement extends UmbLitElement {
 				margin-top: var(--uui-size-space-5);
 			}
 
-			.flex {
+			#header {
+				width: 100%;
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
 			}
 
+			#header h2 {
+				font-size: var(--uui-type-h5-size);
+				margin: 0;
+			}
+
 			.grid {
 				display: grid;
 				gap: var(--uui-size-space-4);