Member workspace: Fix for loading inside modal (#20163)

* Member workspace (in modal) fix

Fixes #20085.

* Updated with member workspace constants

src/Umbraco.Web.UI.Client/src/packages/members/member/item/member-item-ref.element.ts

@@ -48,6 +48,7 @@ export class UmbMemberItemRefElement extends UmbLitElement {
 		]);
 
 		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+			.addUniquePaths(['unique'])
 			.onSetup(() => {
 				return { data: { entityType: UMB_MEMBER_ENTITY_TYPE, preset: {} } };
 			})

src/Umbraco.Web.UI.Client/src/packages/members/member/paths.ts

@@ -17,4 +17,7 @@ export const UMB_CREATE_MEMBER_WORKSPACE_PATH_PATTERN = new UmbPathPattern<{
 	memberTypeUnique: string;
 }>('create/:memberTypeUnique', UMB_MEMBER_WORKSPACE_PATH);
 
-export const UMB_EDIT_MEMBER_WORKSPACE_PATH_PATTERN = new UmbPathPattern<{ unique: string }>('edit/:unique');
+export const UMB_EDIT_MEMBER_WORKSPACE_PATH_PATTERN = new UmbPathPattern<{ unique: string }>(
+	'edit/:unique',
+	UMB_MEMBER_WORKSPACE_PATH,
+);

src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/member-workspace-editor.element.ts

@@ -14,6 +14,8 @@ export class UmbMemberWorkspaceEditorElement extends UmbLitElement {
 
 	#workspaceContext?: typeof UMB_MEMBER_WORKSPACE_CONTEXT.TYPE;
 
+	#workspaceRoute?: string;
+
 	@state()
 	private _isForbidden = false;
 
@@ -34,7 +36,7 @@ export class UmbMemberWorkspaceEditorElement extends UmbLitElement {
 		// TODO: the variantOptions observable is like too broad as this will be triggered then there is any change in the variant options, we need to only update routes when there is a relevant change to them. [NL]
 		this.observe(
 			this.#workspaceContext?.variantOptions,
-			(variants) => this._generateRoutes(variants ?? []),
+			(variants) => this.#generateRoutes(variants ?? []),
 			'_observeVariants',
 		);
 	}
@@ -47,7 +49,7 @@ export class UmbMemberWorkspaceEditorElement extends UmbLitElement {
 		);
 	}
 
-	private async _generateRoutes(variants: Array<UmbMemberVariantOptionModel>) {
+	#generateRoutes(variants: Array<UmbMemberVariantOptionModel>) {
 		// Generate split view routes for all available routes
 		const routes: Array<UmbRoute> = [];
 
@@ -81,11 +83,19 @@ export class UmbMemberWorkspaceEditorElement extends UmbLitElement {
 		});
 
 		if (routes.length !== 0) {
-			// Using first single view as the default route for now (hence the math below):
 			routes.push({
 				path: '',
 				pathMatch: 'full',
-				redirectTo: routes[variants.length * variants.length]?.path,
+				//redirectTo: routes[variants.length * variants.length]?.path,
+				resolve: async () => {
+					if (!this.#workspaceContext) {
+						throw new Error('Workspace context is not available when resolving the default route.');
+					}
+
+					// Using first single view as the default route for now (hence the math below):
+					const path = routes[variants.length * variants.length]?.path;
+					history.replaceState({}, '', `${this.#workspaceRoute}/${path}`);
+				},
 			});
 		}
 
@@ -98,7 +108,8 @@ export class UmbMemberWorkspaceEditorElement extends UmbLitElement {
 	}
 
 	private _gotWorkspaceRoute = (e: UmbRouterSlotInitEvent) => {
-		this.#workspaceContext?.splitView.setWorkspaceRoute(e.target.absoluteRouterPath);
+		this.#workspaceRoute = e.target.absoluteRouterPath;
+		this.#workspaceContext?.splitView.setWorkspaceRoute(this.#workspaceRoute);
 	};
 
 	override render() {

src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/member-workspace.context-token.ts

@@ -1,3 +1,4 @@
+import { UMB_MEMBER_ENTITY_TYPE } from '../../entity.js';
 import type { UmbMemberWorkspaceContext } from './member-workspace.context.js';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { UmbSubmittableWorkspaceContext } from '@umbraco-cms/backoffice/workspace';
@@ -8,5 +9,5 @@ export const UMB_MEMBER_WORKSPACE_CONTEXT = new UmbContextToken<
 >(
 	'UmbWorkspaceContext',
 	undefined,
-	(context): context is UmbMemberWorkspaceContext => context.getEntityType?.() === 'member',
+	(context): context is UmbMemberWorkspaceContext => context.getEntityType?.() === UMB_MEMBER_ENTITY_TYPE,
 );

src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/member-workspace.context.ts

@@ -3,12 +3,12 @@ import type { UmbMemberDetailModel, UmbMemberVariantModel } from '../../types.js
 import { UmbMemberPropertyDatasetContext } from '../../property-dataset-context/member-property-dataset.context.js';
 import { UMB_MEMBER_ENTITY_TYPE, UMB_MEMBER_ROOT_ENTITY_TYPE } from '../../entity.js';
 import { UMB_MEMBER_DETAIL_REPOSITORY_ALIAS } from '../../repository/detail/manifests.js';
+import { UMB_CREATE_MEMBER_WORKSPACE_PATH_PATTERN, UMB_EDIT_MEMBER_WORKSPACE_PATH_PATTERN } from '../../paths.js';
 import {
 	UMB_MEMBER_WORKSPACE_ALIAS,
 	UMB_MEMBER_WORKSPACE_VIEW_MEMBER_ALIAS,
 	UMB_MEMBER_DETAIL_MODEL_VARIANT_SCAFFOLD,
 } from './constants.js';
-import { UmbMemberWorkspaceEditorElement } from './member-workspace-editor.element.js';
 import { UmbMemberTypeDetailRepository, type UmbMemberTypeDetailModel } from '@umbraco-cms/backoffice/member-type';
 import {
 	UmbWorkspaceIsNewRedirectController,
@@ -65,8 +65,8 @@ export class UmbMemberWorkspaceContext
 
 		this.routes.setRoutes([
 			{
-				path: 'create/:memberTypeUnique',
-				component: () => new UmbMemberWorkspaceEditorElement(),
+				path: UMB_CREATE_MEMBER_WORKSPACE_PATH_PATTERN.toString(),
+				component: () => import('./member-workspace-editor.element.js'),
 				setup: async (_component, info) => {
 					const memberTypeUnique = info.match.params.memberTypeUnique;
 					await this.create(memberTypeUnique);
@@ -79,12 +79,12 @@ export class UmbMemberWorkspaceContext
 				},
 			},
 			{
-				path: 'edit/:unique',
-				component: () => new UmbMemberWorkspaceEditorElement(),
-				setup: (_component, info) => {
+				path: UMB_EDIT_MEMBER_WORKSPACE_PATH_PATTERN.toString(),
+				component: () => import('./member-workspace-editor.element.js'),
+				setup: async (_component, info) => {
 					this.removeUmbControllerByAlias(UmbWorkspaceIsNewRedirectControllerAlias);
 					const unique = info.match.params.unique;
-					this.load(unique);
+					await this.load(unique);
 				},
 			},
 		]);