From f400afa1e94f74c3bb211dfb3780426ed40b1cd3 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 26 Mar 2024 14:28:09 +0100
Subject: [PATCH] load server extensions to make modal work

---
 .../.storybook/preview.js                     |  3 ---
 .../current-user-mfa-modal.stories.ts         | 23 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js
index 3c12b07bcd..1c50643fbe 100644
--- a/src/Umbraco.Web.UI.Client/.storybook/preview.js
+++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js
@@ -10,7 +10,6 @@ import { setCustomElements } from '@storybook/web-components';
 import { startMockServiceWorker } from '../src/mocks';
 
 import '../src/libs/controller-api/controller-host-provider.element';
-import { UmbServerExtensionRegistrator } from '../src/libs/extension-api/controller/server-extension-registrator.controller';
 import { UmbModalManagerContext } from '../src/packages/core/modal';
 import { UmbDataTypeTreeStore } from '../src/packages/data-type/tree/data-type-tree.store';
 import { UmbDocumentDetailStore } from '../src/packages/documents/documents/repository/detail/document-detail.store';
@@ -45,8 +44,6 @@ class UmbStoryBookElement extends UmbLitElement {
 
 		this._registerExtensions(localizationManifests);
 		umbLocalizationRegistry.loadLanguage('en-us'); // register default language
-
-		new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerAllExtensions();
 	}
 
 	_registerExtensions(manifests) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-provider/current-user-mfa-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-provider/current-user-mfa-modal.stories.ts
index 3a5746267f..5fb2862f7f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-provider/current-user-mfa-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-provider/current-user-mfa-modal.stories.ts
@@ -1,14 +1,35 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import type { UmbCurrentUserMfaProviderModalElement } from './current-user-mfa-provider-modal.element.js';
 import { html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbServerExtensionRegistrator } from '@umbraco-cms/backoffice/extension-api';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 import './current-user-mfa-provider-modal.element.js';
 
+class UmbServerExtensionsHostElement extends UmbLitElement {
+	constructor() {
+		super();
+		new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerAllExtensions();
+	}
+
+	render() {
+		return html`<slot></slot>`;
+	}
+}
+
+if (window.customElements.get('umb-server-extensions-host') === undefined) {
+	customElements.define('umb-server-extensions-host', UmbServerExtensionsHostElement);
+}
+
 const meta: Meta<UmbCurrentUserMfaProviderModalElement> = {
 	id: 'umb-current-user-mfa-provider-modal',
 	title: 'Current User/Modals/MFA Provider Modal',
 	component: 'umb-current-user-mfa-provider-modal',
-	decorators: [(Story) => html`<div style="width: 500px; height: 500px;">${Story()}</div>`],
+	decorators: [
+		(Story) =>
+			html`<umb-server-extensions-host style="width: 500px; height: 500px;">${Story()}</umb-server-extensions-host>`,
+	],
 	args: {
 		data: {
 			providerName: 'SMS',