move current user modal

src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts

@@ -28,7 +28,7 @@ export class UmbModalHandler {
 	constructor(
 		host: UmbControllerHostInterface,
 		modalAlias: string | UmbModalToken,
-		data: unknown,
+		data?: unknown,
 		config?: UmbModalConfig
 	) {
 		this.#host = host;
@@ -68,10 +68,15 @@ export class UmbModalHandler {
 		return modalDialogElement;
 	}
 
-	async #createLayoutElement(manifest: ManifestModal, data: unknown) {
+	async #createLayoutElement(manifest: ManifestModal, data?: unknown) {
+		// TODO: add fallback element if no layout is found
 		const layoutElement = (await createExtensionElement(manifest)) as any;
-		layoutElement.data = data;
-		layoutElement.modalHandler = this;
+
+		if (layoutElement) {
+			layoutElement.data = data;
+			layoutElement.modalHandler = this;
+		}
+
 		return layoutElement;
 	}
 
@@ -88,7 +93,7 @@ export class UmbModalHandler {
 	 It makes this code a bit more complex. The main idea is to have the element as part of the modalHandler so it is possible to dispatch events from within the modal element to the one that opened it.
 	 Now when the element is an observable it makes it more complex because this host needs to subscribe to updates to the element, instead of just having a reference to it.
 	 If we find a better generic solution to communicate between the modal and the host, then we can remove the element as part of the modalHandler. */
-	#observeModal(modalAlias: string, data: unknown) {
+	#observeModal(modalAlias: string, data?: unknown) {
 		new UmbObserverController(
 			this.#host,
 			umbExtensionsRegistry.getByTypeAndAlias('modal', modalAlias),

src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts

@@ -3,7 +3,7 @@ import './layouts/confirm/modal-layout-confirm.element';
 import '../../src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element';
 import './layouts/media-picker/modal-layout-media-picker.element';
 import './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
-import './layouts/modal-layout-current-user.element';
+import '../../src/backoffice/users/current-user/modals/current-user/current-user-modal.element';
 import './layouts/icon-picker/modal-layout-icon-picker.element';
 import '../../src/backoffice/settings/languages/language-picker/language-picker-modal-layout.element';
 import './layouts/link-picker/modal-layout-link-picker.element';
@@ -204,7 +204,7 @@ export class UmbModalContext {
 	 * @return {*}  {UmbModalHandler}
 	 * @memberof UmbModalContext
 	 */
-	public open<T = unknown>(modalAlias: string | UmbModalToken<T>, data: T, config?: UmbModalConfig): UmbModalHandler {
+	public open<T = unknown>(modalAlias: string | UmbModalToken<T>, data?: T, config?: UmbModalConfig): UmbModalHandler {
 		const modalHandler = new UmbModalHandler(this.host, modalAlias, data, config);
 
 		modalHandler.containerElement.addEventListener('close-end', () => this.#onCloseEnd(modalHandler));

src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts

@@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, CSSResultGroup, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from './current-user.store';
+import { UMB_CURRENT_USER_MODAL_TOKEN } from './modals/current-user';
 import type { UserDetails } from '@umbraco-cms/models';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from 'libs/modal';
 import { UmbLitElement } from '@umbraco-cms/element';
@@ -46,7 +47,7 @@ export class UmbCurrentUserHeaderApp extends UmbLitElement {
 	}
 
 	private _handleUserClick() {
-		this._modalContext?.userSettings();
+		this._modalContext?.open(UMB_CURRENT_USER_MODAL_TOKEN);
 	}
 
 	render() {

src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/manifests.ts

@@ -1,3 +1,4 @@
+import { manifests as modalManifests } from './modals/manifests';
 import type { ManifestHeaderApp, ManifestUserDashboard } from '@umbraco-cms/models';
 
 export const userDashboards: Array<ManifestUserDashboard> = [
@@ -29,4 +30,4 @@ export const headerApps: Array<ManifestHeaderApp> = [
 	},
 ];
 
-export const manifests = [...userDashboards, ...headerApps];
+export const manifests = [...userDashboards, ...headerApps, ...modalManifests];

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

@@ -1,21 +1,18 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, CSSResultGroup, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '..';
+import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../../libs/modal';
 import {
 	UmbCurrentUserHistoryStore,
 	UmbCurrentUserHistoryItem,
 	UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN,
-} from '../../../src/backoffice/users/current-user/current-user-history.store';
-import {
-	UmbCurrentUserStore,
-	UMB_CURRENT_USER_STORE_CONTEXT_TOKEN,
-} from '../../../src/backoffice/users/current-user/current-user.store';
+} from '../../current-user-history.store';
+import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from '../../current-user.store';
 import type { UserDetails } from '@umbraco-cms/models';
 import { UmbLitElement } from '@umbraco-cms/element';
 
-@customElement('umb-modal-layout-current-user')
-export class UmbModalLayoutCurrentUserElement extends UmbLitElement {
+@customElement('umb-current-user-modal')
+export class UmbCurrentUserModalElement extends UmbLitElement {
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
@@ -202,8 +199,10 @@ export class UmbModalLayoutCurrentUserElement extends UmbLitElement {
 	}
 }
 
+export default UmbCurrentUserModalElement;
+
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-modal-layout-current-user': UmbModalLayoutCurrentUserElement;
+		'umb-current-user-modal': UmbCurrentUserModalElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/index.ts

@@ -0,0 +1,6 @@
+import { UmbModalToken } from 'libs/modal';
+
+export const UMB_CURRENT_USER_MODAL_TOKEN = new UmbModalToken('Umb.Modal.CurrentUser', {
+	type: 'sidebar',
+	size: 'small',
+});

src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/manifests.ts

@@ -0,0 +1,12 @@
+import type { ManifestModal } from '@umbraco-cms/extensions-registry';
+
+const modals: Array<ManifestModal> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.CurrentUser',
+		name: 'Current User Modal',
+		loader: () => import('./current-user/current-user-modal.element'),
+	},
+];
+
+export const manifests = [...modals];