Close active modal if its begin unregistered (#18285)

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/partial-update-frozen-array.function.ts

@@ -1,11 +1,12 @@
 /**
  * @function partialUpdateFrozenArray
  * @param {Observable<T>} source - RxJS Subject to use for this Observable.
- * @param data
- * @param partialEntry
- * @param findMethod
+ * @param {T} data - Initial data for this Observable.
+ * @param {Partial<T>} partialEntry - New data to be added in this Observable.
+ * @param {(entry: T) => boolean} findMethod - Method to find the data to be updated.
  * @param {(mappable: T) => R} mappingFunction - Method to return the part for this Observable to return.
  * @param {(previousResult: R, currentResult: R) => boolean} [memoizationFunction] - Method to Compare if the data has changed. Should return true when data is different.
+ * @returns {T[]} - New data set with the updated entry.
  * @description - Creates a RxJS Observable from RxJS Subject.
  * @example <caption>Example append new entry for a ArrayState or a part of UmbDeepState/UmbObjectState it which is an array. Where the key is unique and the item will be updated if matched with existing.</caption>
  * const partialEntry = {value: 'myValue'};

src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-move-root-containers-into-first-tab-helper.class.ts

@@ -1,4 +1,4 @@
-import type { UmbContentTypeModel, UmbPropertyTypeContainerModel } from '../types.js';
+import type { UmbContentTypeModel } from '../types.js';
 import type { UmbContentTypeStructureManager } from './content-type-structure-manager.class.js';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
@@ -10,38 +10,37 @@ const MoveRootContainersIntoFirstTabHelperControllerAlias = Symbol('moveRootCont
  */
 export class UmbContentTypeMoveRootGroupsIntoFirstTabHelper<T extends UmbContentTypeModel> extends UmbControllerBase {
 	#structure?: UmbContentTypeStructureManager<T>;
-	#tabContainers?: Array<UmbPropertyTypeContainerModel>;
 
 	constructor(host: UmbControllerHost, structure: UmbContentTypeStructureManager<T>) {
 		super(host, MoveRootContainersIntoFirstTabHelperControllerAlias);
 		this.#structure = structure;
 		this.#observeContainers();
 	}
 
-	#observeContainers() {
+	async #observeContainers() {
 		if (!this.#structure) return;
 
-		this.observe(
+		await this.observe(
 			this.#structure.ownerContainersOf('Tab', null),
 			(tabContainers) => {
-				const old = this.#tabContainers;
-				this.#tabContainers = tabContainers;
-				// If the amount of containers was 0 before and now becomes 1, we should move all root containers into this tab:
-				if (old?.length === 0 && tabContainers?.length === 1) {
+				// If the amount of containers now became 1, we should move all root containers into this tab:
+				if (tabContainers?.length === 1) {
 					const firstTabId = tabContainers[0].id;
 					const rootContainers = this.#structure?.getOwnerContainers('Group', null);
 					rootContainers?.forEach((groupContainer) => {
 						this.#structure?.updateContainer(null, groupContainer.id, { parent: { id: firstTabId } });
 					});
+					this.destroy();
 				}
 			},
 			'_observeMainContainer',
-		);
+		).asPromise();
+
+		this.destroy();
 	}
 
 	override destroy() {
 		super.destroy();
 		this.#structure = undefined;
-		this.#tabContainers = undefined;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-structure-manager.class.ts

@@ -317,8 +317,7 @@ export class UmbContentTypeStructureManager<
 		if (!contentType) {
 			throw new Error('Could not find the Content Type to ensure containers for');
 		}
-		const containers = contentType?.containers;
-		const container = containers?.find((x) => x.id === containerId);
+		const container = contentType?.containers?.find((x) => x.id === containerId);
 		if (!container) {
 			return this.cloneContainerTo(containerId, contentTypeUnique);
 		}
@@ -346,6 +345,7 @@ export class UmbContentTypeStructureManager<
 			...container,
 			id: UmbId.new(),
 		};
+
 		if (container.parent) {
 			// Investigate parent container. (See if we have one that matches if not, then clone it.)
 			const parentContainer = await this.ensureContainerOf(container.parent.id, toContentTypeUnique);
@@ -361,6 +361,7 @@ export class UmbContentTypeStructureManager<
 		const containers = [
 			...(this.#contentTypes.getValue().find((x) => x.unique === toContentTypeUnique)?.containers ?? []),
 		];
+
 		//.filter((x) => x.name !== clonedContainer.name && x.type === clonedContainer.type);
 		containers.push(clonedContainer);
 
@@ -541,7 +542,9 @@ export class UmbContentTypeStructureManager<
 
 		// If we have a container, we need to ensure it exists, and then update the container with the new parent id. [NL]
 		if (property.container) {
+			this.#contentTypes.mute();
 			const container = await this.ensureContainerOf(property.container.id, contentTypeUnique);
+			this.#contentTypes.unmute();
 			if (!container) {
 				throw new Error('Container for inserting property could not be found or created');
 			}

src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts

@@ -140,7 +140,6 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 		this.consumeContext(UMB_CONTENT_TYPE_WORKSPACE_CONTEXT, (workspaceContext) => {
 			this.#workspaceContext = workspaceContext;
 			this.#tabsStructureHelper.setStructureManager(workspaceContext.structure);
-			new UmbContentTypeMoveRootGroupsIntoFirstTabHelper(this, workspaceContext.structure);
 
 			this.#observeRootGroups();
 		});
@@ -281,11 +280,19 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 			return;
 		}
 
+		if (!this.#workspaceContext) {
+			throw new Error('Workspace context has not been found');
+		}
+
 		if (!this._tabs) return;
 
 		const len = this._tabs.length;
 		const sortOrder = len === 0 ? 0 : this._tabs[len - 1].sortOrder + 1;
-		const tab = await this.#workspaceContext?.structure.createContainer(null, null, 'Tab', sortOrder);
+		const tab = await this.#workspaceContext.structure.createContainer(null, null, 'Tab', sortOrder);
+		// If length was 0 before, then we need to move the root groups into the first tab: [NL]
+		if (len === 0) {
+			new UmbContentTypeMoveRootGroupsIntoFirstTabHelper(this, this.#workspaceContext.structure);
+		}
 		if (tab) {
 			const path = this._routerPath + '/tab/' + encodeFolderName(tab.name && tab.name !== '' ? tab.name : '-');
 			window.history.replaceState(null, '', path);

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

@@ -91,6 +91,14 @@ export class UmbRouteContext extends UmbContextBase<UmbRouteContext> {
 		const routesToRemove = this.#modalRoutes.filter(
 			(route) => !this.#modalRegistrations.find((x) => x.key === route.__modalKey),
 		);
+		// If one the of the removed modals are active we should close it.
+		routesToRemove.some((route) => {
+			if (route.path === this.#activeModalPath) {
+				this.#modalContext?.close(route.__modalKey);
+				return true;
+			}
+			return false;
+		});
 
 		const cleanedRoutes = this.#modalRoutes.filter((route) => !routesToRemove.includes(route));