From 2734b9a966c403cb342c1a6b36fe0326800d2c2b Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 29 Feb 2024 11:53:16 +0100
Subject: [PATCH] Bugfix: Health Check Dashboard

---
 .../health-check/dashboard-health-check.element.ts   |  3 ++-
 .../health-check/health-check-dashboard.context.ts   |  7 ++++---
 .../packages/health-check/health-check.context.ts    |  7 ++++++-
 .../views/health-check-overview.element.ts           | 12 +++++++++---
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/health-check/dashboard-health-check.element.ts b/src/Umbraco.Web.UI.Client/src/packages/health-check/dashboard-health-check.element.ts
index 5f536cd031..d042b0a625 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/health-check/dashboard-health-check.element.ts
+++ b/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,
 				},
 			};
 		});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/health-check/health-check-dashboard.context.ts b/src/Umbraco.Web.UI.Client/src/packages/health-check/health-check-dashboard.context.ts
index 75c362096c..2a3ebf0db0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/health-check/health-check-dashboard.context.ts
+++ b/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));
 		});
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/health-check/health-check.context.ts b/src/Umbraco.Web.UI.Client/src/packages/health-check/health-check.context.ts
index ed0672d484..79252bee48 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/health-check/health-check.context.ts
+++ b/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;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-overview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-overview.element.ts
index d05a3f7022..730f35f8d4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-overview.element.ts
+++ b/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);