Fix circular dependency by introducing UmbModalRouteHandler abstraction

Co-authored-by: nielslyngsoe <[email protected]>

Author: Copilot

src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts

@@ -15,9 +15,9 @@ import {
 	type UUIModalSidebarElement,
 	type UUIModalSidebarSize,
 } from '@umbraco-cms/backoffice/external/uui';
-import { UMB_ROUTE_CONTEXT, type UmbRouterSlotElement } from '@umbraco-cms/backoffice/router';
+import type { UmbRouterSlotElement } from '@umbraco-cms/backoffice/router';
 import { createExtensionElement, loadManifestElement } from '@umbraco-cms/backoffice/extension-api';
-import { UmbContextBoundary, UmbContextProvider } from '@umbraco-cms/backoffice/context-api';
+import { UmbContextProvider } from '@umbraco-cms/backoffice/context-api';
 import { UmbContextProxyController } from '@umbraco-cms/backoffice/context-proxy';
 
 @customElement('umb-modal')
@@ -93,7 +93,8 @@ export class UmbModalElement extends UmbLitElement {
 			this.#modalRouterElement = document.createElement('div');
 			// Notice inline styling here is used cause the element is not appended into this elements shadowDom but outside and there by gets into the element via a slot.
 			this.#modalRouterElement.style.display = 'contents';
-			new UmbContextBoundary(this.#modalRouterElement, UMB_ROUTE_CONTEXT).hostConnected();
+			// TODO: Consider if this context boundary is necessary for modals without router
+			// new UmbContextBoundary(this.#modalRouterElement, UMB_ROUTE_CONTEXT).hostConnected();
 		}
 
 		this.element.appendChild(this.#modalRouterElement);

src/Umbraco.Web.UI.Client/src/packages/core/modal/context/index.ts

@@ -1,3 +1,4 @@
 export type { UmbModalContext, UmbModalRejectReason, UmbModalContextClassArgs } from './modal.context.js';
+export type { UmbModalRouteHandler } from './modal-route-handler.interface.js';
 export { UMB_MODAL_CONTEXT } from './modal.context-token.js';
 export * from './modal-manager.context.js';

src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal-route-handler.interface.ts

@@ -0,0 +1,12 @@
+/**
+ * Interface for handling modal route operations.
+ * This abstraction allows modal contexts to interact with routing
+ * without directly depending on router implementations.
+ */
+export interface UmbModalRouteHandler {
+	/**
+	 * Removes a modal path from the current route
+	 * @param path - The modal path to remove
+	 */
+	removeModalPath(path?: string): void;
+}

src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts

@@ -1,13 +1,13 @@
 import { UmbModalToken } from '../token/modal-token.js';
 import type { UmbModalConfig, UmbModalType } from '../types.js';
+import type { UmbModalRouteHandler } from './modal-route-handler.interface.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UUIModalElement, UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import { umbDeepMerge } from '@umbraco-cms/backoffice/utils';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import { UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbViewController } from '@umbraco-cms/backoffice/view';
-import { UMB_ROUTE_CONTEXT } from '@umbraco-cms/backoffice/router';
 import type { ElementLoaderProperty } from '@umbraco-cms/backoffice/extension-api';
 import type { IRouterSlot } from '@umbraco-cms/backoffice/router';
 import type { UmbDeepPartialObject } from '@umbraco-cms/backoffice/utils';
@@ -26,6 +26,7 @@ export type UmbModalContextClassArgs<
 	data?: ModalAliasTypeAsToken['DATA'];
 	value?: ModalAliasTypeAsToken['VALUE'];
 	modal?: UmbModalConfig;
+	routeHandler?: UmbModalRouteHandler;
 };
 
 // TODO: consider splitting this into two separate handlers
@@ -55,6 +56,7 @@ export class UmbModalContext<
 	public readonly backdropBackground?: string;
 	public readonly router: IRouterSlot | null = null;
 	public readonly alias: string | UmbModalToken<ModalData, ModalValue>;
+	public readonly routeHandler?: UmbModalRouteHandler;
 
 	#value;
 	public readonly value;
@@ -73,6 +75,7 @@ export class UmbModalContext<
 		this.key = args.modal?.key || UmbId.new();
 		this.router = args.router ?? null;
 		this.alias = modalAlias;
+		this.routeHandler = args.routeHandler;
 
 		this.view = new UmbViewController(this, modalAlias.toString());
 
@@ -127,8 +130,7 @@ export class UmbModalContext<
 
 	// eslint-disable-next-line @typescript-eslint/naming-convention
 	async _internal_removeCurrentModal() {
-		const routeContext = await this.getContext(UMB_ROUTE_CONTEXT);
-		routeContext?._internal_removeModalPath(this.#activeModalPath);
+		this.routeHandler?.removeModalPath(this.#activeModalPath);
 	}
 
 	forceResolve() {

src/Umbraco.Web.UI.Client/src/packages/core/router/index.ts

@@ -4,5 +4,6 @@ export * from './encode-folder-name.function.js';
 export * from './modal-registration/modal-route-registration.controller.js';
 export * from './path-pattern.class.js';
 export * from './router-slot/index.js';
+export * from './route/route-modal-handler.class.js';
 export type * from './modal-registration/modal-route-registration.interface.js';
 export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/core/router/modal-registration/modal-route-registration.controller.ts

@@ -8,6 +8,7 @@ import type {
 	UmbModalContext,
 	UmbModalContextClassArgs,
 	UmbModalManagerContext,
+	UmbModalRouteHandler,
 	UmbModalToken,
 } from '@umbraco-cms/backoffice/modal';
 import type { UmbControllerAlias, UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
@@ -327,7 +328,12 @@ export class UmbModalRouteRegistrationController<
 		this.#modalContext = undefined;
 	};
 
-	async routeSetup(router: IRouterSlot, modalManagerContext: UmbModalManagerContext, params: Params) {
+	async routeSetup(
+		router: IRouterSlot,
+		modalManagerContext: UmbModalManagerContext,
+		params: Params,
+		routeHandler: UmbModalRouteHandler,
+	) {
 		// If already open, don't do anything:
 		if (this.active) return;
 
@@ -337,6 +343,7 @@ export class UmbModalRouteRegistrationController<
 				modal: {},
 				...modalData,
 				router,
+				routeHandler,
 			} as UmbModalContextClassArgs<UmbModalToken<UmbModalTokenData, UmbModalTokenValue>>;
 			args.modal!.key = this.#key;
 

src/Umbraco.Web.UI.Client/src/packages/core/router/modal-registration/modal-route-registration.interface.ts

@@ -1,6 +1,11 @@
 import type { IRouterSlot, Params } from '../router-slot/index.js';
 import type { UmbModalRouteBuilder } from './modal-route-registration.controller.js';
-import type { UmbModalContext, UmbModalManagerContext, UmbModalToken } from '@umbraco-cms/backoffice/modal';
+import type {
+	UmbModalContext,
+	UmbModalManagerContext,
+	UmbModalToken,
+	UmbModalRouteHandler,
+} from '@umbraco-cms/backoffice/modal';
 
 export interface UmbModalRouteRegistration<
 	UmbModalTokenData extends { [key: string]: any } = { [key: string]: any },
@@ -18,6 +23,7 @@ export interface UmbModalRouteRegistration<
 		router: IRouterSlot,
 		modalManagerContext: UmbModalManagerContext,
 		params: Params,
+		routeHandler: UmbModalRouteHandler,
 	): Promise<undefined | UmbModalContext<UmbModalTokenData, UmbModalTokenValue>>;
 
 	// eslint-disable-next-line @typescript-eslint/naming-convention

src/Umbraco.Web.UI.Client/src/packages/core/router/route/route-modal-handler.class.ts

@@ -0,0 +1,16 @@
+import type { UmbModalRouteHandler } from '@umbraco-cms/backoffice/modal';
+
+/**
+ * Implementation of UmbModalRouteHandler that delegates to a route context
+ */
+export class UmbRouteModalHandler implements UmbModalRouteHandler {
+	readonly #removeModalPath: (path?: string) => void;
+
+	constructor(removeModalPath: (path?: string) => void) {
+		this.#removeModalPath = removeModalPath;
+	}
+
+	removeModalPath(path?: string): void {
+		this.#removeModalPath(path);
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/router/route/route.context.ts

@@ -3,6 +3,7 @@ import type { IRouterSlot } from '../router-slot/index.js';
 import type { UmbModalRouteRegistration } from '../modal-registration/modal-route-registration.interface.js';
 import { umbGenerateRoutePathBuilder } from '../generate-route-path-builder.function.js';
 import type { UmbRoute } from './route.interface.js';
+import { UmbRouteModalHandler } from './route-modal-handler.class.js';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
@@ -19,6 +20,7 @@ export class UmbRouteContext extends UmbContextBase {
 	#modalContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE;
 	#modalRoutes: UmbRoutePlusModalKey[] = [];
 	#activeModalPath?: string;
+	#routeHandler: UmbRouteModalHandler;
 
 	#basePath = new UmbStringState(undefined);
 	public readonly basePath = this.#basePath.asObservable();
@@ -32,6 +34,7 @@ export class UmbRouteContext extends UmbContextBase {
 	constructor(host: UmbControllerHost, mainRouter: IRouterSlot, modalRouter: IRouterSlot) {
 		super(host, UMB_ROUTE_CONTEXT);
 		this.#modalRouter = modalRouter;
+		this.#routeHandler = new UmbRouteModalHandler((path) => this._internal_removeModalPath(path));
 		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (context) => {
 			this.#modalContext = context;
 			this.#generateModalRoutes();
@@ -70,6 +73,7 @@ export class UmbRouteContext extends UmbContextBase {
 					this.#modalRouter,
 					this.#modalContext,
 					info.match.params,
+					this.#routeHandler,
 				);
 				if (modalContext) {
 					modalContext._internal_setCurrentModalPath(info.match.fragments.consumed);

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.ts

@@ -136,7 +136,9 @@ export abstract class UmbTreeItemElementBase<
 				.loading=${this._isLoading}
 				.hasChildren=${this._hasChildren}
 				.showChildren=${this._isOpen}
-				.caretLabel=${this._isOpen ? this.localize.term('visuallyHiddenTexts_collapseChildItems') +  ' ' + this._label: this.localize.term('visuallyHiddenTexts_expandChildItems') + ' ' + this._label}
+				.caretLabel=${this._isOpen
+					? this.localize.term('visuallyHiddenTexts_collapseChildItems') + ' ' + this._label
+					: this.localize.term('visuallyHiddenTexts_expandChildItems') + ' ' + this._label}
 				label=${this._label}
 				href="${ifDefined(this._isSelectableContext ? undefined : this._href)}">
 				${this.renderIconContainer()} ${this.renderLabel()} ${this.#renderActions()} ${this.#renderChildItems()}