Merge branch 'v14/feature/router-404' into v14/bugfix/hide-content-workspace-view-when-no-properties

Author: madsrasmussen

src/apps/backoffice/components/backoffice-main.element.ts

@@ -2,7 +2,7 @@ import type { UmbBackofficeContext } from '../backoffice.context.js';
 import { UMB_BACKOFFICE_CONTEXT } from '../backoffice.context.js';
 import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbSectionContext, UMB_SECTION_CONTEXT, UMB_SECTION_PATH_PATTERN } from '@umbraco-cms/backoffice/section';
-import type { UmbRoute, UmbRouterSlotChangeEvent } from '@umbraco-cms/backoffice/router';
+import type { PageComponent, UmbRoute, UmbRouterSlotChangeEvent } from '@umbraco-cms/backoffice/router';
 import type { ManifestSection, UmbSectionElement } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbExtensionManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { createExtensionElement } from '@umbraco-cms/backoffice/extension-api';
@@ -11,7 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 @customElement('umb-backoffice-main')
 export class UmbBackofficeMainElement extends UmbLitElement {
 	@state()
-	private _routes: Array<UmbRoute & { alias: string }> = [];
+	private _routes: Array<UmbRoute> = [];
 
 	@state()
 	private _sections: Array<UmbExtensionManifestInitializer<ManifestSection>> = [];
@@ -43,28 +43,39 @@ export class UmbBackofficeMainElement extends UmbLitElement {
 
 	private _createRoutes() {
 		if (!this._sections) return;
-		const oldValue = this._routes;
 
 		// TODO: Refactor this for re-use across the app where the routes are re-generated at any time.
-		this._routes = this._sections
+		const newRoutes = this._sections
 			.filter((x) => x.manifest)
 			.map((section) => {
-				const existingRoute = this._routes.find((r) => r.alias === section.alias);
+				const existingRoute = this._routes.find((r) => r.path === UMB_SECTION_PATH_PATTERN.generateLocal({ sectionName: section.manifest!.meta.pathname }));
 				if (existingRoute) {
 					return existingRoute;
 				} else {
 					return {
-						alias: section.alias,
+						//alias: section.alias,
 						path: UMB_SECTION_PATH_PATTERN.generateLocal({ sectionName: section.manifest!.meta.pathname }),
 						component: () => createExtensionElement(section.manifest!, 'umb-section-default'),
-						setup: (component) => {
-							(component as UmbSectionElement).manifest = section.manifest as ManifestSection;
+						setup: (component: PageComponent) => {
+							(component as UmbSectionElement).manifest = section.manifest;
 						},
 					};
 				}
 			});
 
-		this.requestUpdate('_routes', oldValue);
+		if(newRoutes.length > 0 ) {
+			newRoutes.push({
+				path: ``,
+				redirectTo: newRoutes[0].path
+			});
+		}
+
+		newRoutes.push({
+			path: `**`,
+			component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement,
+		});
+
+		this._routes = newRoutes;
 	}
 
 	private _onRouteChange = async (event: UmbRouterSlotChangeEvent) => {

src/assets/lang/en-us.ts

@@ -2524,4 +2524,8 @@ export default {
 		detailedLevelDescription:
 			'\n          We will send:\n          <ul>\n            <li>Anonymized site ID, Umbraco version, and packages installed.</li>\n            <li>Number of: Root nodes, Content nodes, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, Backoffice external login providers, and Property Editors in use.</li>\n            <li>System information: Webserver, server OS, server framework, server OS language, and database provider.</li>\n            <li>Configuration settings: Modelsbuilder mode, if custom Umbraco path exists, ASP environment, whether the delivery API is enabled, and allows public access, and if you are in debug mode.</li>\n          </ul>\n          <em>We might change what we send on the Detailed level in the future. If so, it will be listed above.\n          <br>By choosing "Detailed" you agree to current and future anonymized information being collected.</em>\n       ',
 	},
+	routing: {
+		routeNotFoundTitle: 'Not found',
+		routeNotFoundDescription: 'The requested route could not be found. Please check the URL and try again.'
+	}
 } as UmbLocalizationDictionary;

src/external/router-slot/router-slot.ts

@@ -45,6 +45,11 @@ ensureAnchorHistory();
  * @event changestate - Dispatched when the router slot state changes.
  */
 export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouterSlot<D, P> {
+	/**
+	 * Method to cancel navigation if changed.
+	 */
+	private _cancelNavigation ?:() => void;
+
 	/**
 	 * Listeners on the router.
 	 */
@@ -197,8 +202,17 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 		this._routes.push(...routes);
 
 		if (navigate === undefined) {
-			// If navigate is not determined, then we will check if we have a route match. If not then we will re-render.
+			// If navigate is not determined, then we will check if we have a route match. If not then we will re-render. [NL]
 			navigate = this._routeMatch === null;
+			if (navigate === false) {
+				if (this.isConnected) {
+					const newMatch = this.getRouteMatch();
+					// Check if this match matches the current match (aka. If the path has changed), if so we should navigate. [NL]
+					if(newMatch) {
+						navigate = shouldNavigate(this.match, newMatch);
+					}
+				}
+			}
 		}
 
 		// Navigate fallback:
@@ -232,13 +246,21 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 
 		// Either choose the parent fragment or the current path if no parent exists.
 		// The root router slot will always use the entire path.
-		const pathFragment =
-			this.parent != null && this.parent.fragments != null ? this.parent.fragments.rest : pathWithoutBasePath();
+		const pathFragment = this.getPathFragment();
 
 		// Route to the path
 		await this.renderPath(pathFragment);
 	}
 
+	protected getPathFragment() {
+		return this.parent != null && this.parent.fragments != null ? this.parent.fragments.rest : pathWithoutBasePath();
+	}
+
+	protected getRouteMatch() {
+		// Find the corresponding route.
+		return matchRoutes(this._routes, this.getPathFragment());
+	}
+
 	/**
 	 * Attaches listeners, either globally or on the parent router.
 	 */
@@ -296,6 +318,8 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 	 * Returns true if a navigation was made to a new page.
 	 */
 	protected async renderPath(path: string | PathFragment): Promise<boolean> {
+
+		// Notice: Since this is never called from any other place than one higher in this file(when writing this...), we could just retrieve the path and find a match by using this.getRouteMatch() [NL]
 		// Find the corresponding route.
 		const match = matchRoutes(this._routes, path);
 
@@ -312,10 +336,17 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 			// Only change route if its a new route.
 			const navigate = shouldNavigate(this.match, match);
 			if (navigate) {
+
+				// If another navigation is still begin resolved in this very moment, then we need to cancel that so it does not end up overriding this new navigation.[NL]
+				this._cancelNavigation?.();
 				// Listen for another push state event. If another push state event happens
 				// while we are about to navigate we have to cancel.
 				let navigationInvalidated = false;
-				const cancelNavigation = () => (navigationInvalidated = true);
+				const cancelNavigation = () => {
+					navigationInvalidated = true;
+					this._cancelNavigation = undefined;
+				};
+				this._cancelNavigation = cancelNavigation;
 				const removeChangeListener: EventListenerSubscription = addListener<Event, GlobalRouterEvent>(
 					GLOBAL_ROUTER_EVENTS_TARGET,
 					'changestate',
@@ -378,16 +409,23 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 						return cancel();
 					}
 
-					// Remove the old page by clearing the slot
-					this.clearChildren();
+					// We have some routes that share the same component instance, those should not be removed and re-appended [NL]
+					const isTheSameComponent = this.firstChild === page;
+
+					if(!isTheSameComponent) {
+						// Remove the old page by clearing the slot
+						this.clearChildren();
+					}
 
 					// Store the new route match before we append the new page to the DOM.
 					// We do this to ensure that we can find the match in the connectedCallback of the page.
 					this._routeMatch = match;
 
-					if (page) {
-						// Append the new page
-						this.appendChild(page);
+					if(!isTheSameComponent) {
+						if (page) {
+							// Append the new page
+							this.appendChild(page);
+						}
 					}
 				}
 

src/libs/extension-api/controller/base-extension-initializer.controller.ts

@@ -211,6 +211,8 @@ export abstract class UmbBaseExtensionInitializer<
 		// Check if we already have a controller for this config:
 		const existing = this.#conditionControllers.find((controller) => controller.config === conditionConfig);
 		if (!existing) {
+
+			// TODO: Be aware that we might not have a host element any longer at this moment, but I did not want to make a fix for it jet, as its a good indication to if something else is terrible wrong [NL]
 			const conditionController = await createExtensionApi(this, conditionManifest, [
 				{
 					manifest: conditionManifest,

src/libs/observable-api/observer.ts

@@ -5,12 +5,13 @@ export type ObserverCallback<T> = (value: T) => void;
 
 export class UmbObserver<T> {
 	#source!: Observable<T>;
-	#callback!: ObserverCallback<T>;
+	#callback?: ObserverCallback<T>;
 	#subscription!: Subscription;
 
 	constructor(source: Observable<T>, callback?: ObserverCallback<T>) {
 		this.#source = source;
 		if (callback) {
+			this.#callback = callback;
 			this.#subscription = source.subscribe(callback);
 		}
 	}
@@ -44,7 +45,7 @@ export class UmbObserver<T> {
 
 	hostConnected() {
 		// Notice: This will not re-subscribe if this controller was destroyed. Only if the subscription was closed.
-		if (this.#subscription?.closed) {
+		if (this.#subscription?.closed && this.#callback) {
 			this.#subscription = this.#source.subscribe(this.#callback);
 		}
 	}

src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts

@@ -1,7 +1,7 @@
-import { UmbBlockGridAreaConfigEntryContext } from './block-grid-area-config-entry.context.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { html, css, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbBlockGridAreaConfigEntryContext } from './block-grid-area-config-entry.context.js';
 import '../block-grid-block/index.js';
 import '../block-scale-handler/index.js';
 

src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts

@@ -1,4 +1,3 @@
-import type { UmbBlockGridTypeAreaType } from '../../../types.js';
 import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
 import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
 import type {
@@ -14,6 +13,7 @@ import { UmbArrayState, UmbObjectState, appendToFrozenArray } from '@umbraco-cms
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { ManifestWorkspace, PropertyEditorSettingsProperty } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbBlockGridTypeAreaType } from '../../../types.js';
 
 export class UmbBlockGridAreaTypeWorkspaceContext
 	extends UmbSubmittableWorkspaceContextBase<UmbBlockGridTypeAreaType>

src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts

@@ -1,7 +1,7 @@
-import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from '../../context/block-grid-manager.context-token.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UMB_BLOCK_GRID_ENTRY_CONTEXT, type UmbBlockGridTypeAreaType } from '@umbraco-cms/backoffice/block-grid';
 import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from '../../context/block-grid-manager.context-token.js';
+import { UMB_BLOCK_GRID_ENTRY_CONTEXT, type UmbBlockGridTypeAreaType } from '@umbraco-cms/backoffice/block-grid';
 
 import '../block-grid-entries/index.js';
 /**

src/packages/block/block-grid/context/block-grid-entry.context.ts

@@ -1,13 +1,4 @@
-import { closestColumnSpanOption } from '../utils/index.js';
-import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from './block-grid-manager.context-token.js';
-import { UMB_BLOCK_GRID_ENTRIES_CONTEXT } from './block-grid-entries.context-token.js';
-import {
-	type UmbBlockGridScalableContext,
-	UmbBlockGridScaleManager,
-} from './block-grid-scale-manager/block-grid-scale-manager.controller.js';
-import { UmbBlockEntryContext } from '@umbraco-cms/backoffice/block';
 import type { UmbContentTypeModel, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
-import type { UmbBlockGridTypeModel, UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import {
 	UmbArrayState,
@@ -17,6 +8,15 @@ import {
 	appendToFrozenArray,
 	observeMultiple,
 } from '@umbraco-cms/backoffice/observable-api';
+import { closestColumnSpanOption } from '../utils/index.js';
+import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from './block-grid-manager.context-token.js';
+import { UMB_BLOCK_GRID_ENTRIES_CONTEXT } from './block-grid-entries.context-token.js';
+import {
+	type UmbBlockGridScalableContext,
+	UmbBlockGridScaleManager,
+} from './block-grid-scale-manager/block-grid-scale-manager.controller.js';
+import { UmbBlockEntryContext } from '@umbraco-cms/backoffice/block';
+import type { UmbBlockGridTypeModel, UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';
 
 export class UmbBlockGridEntryContext
 	extends UmbBlockEntryContext<

src/packages/block/block-grid/context/block-grid-scale-manager/block-grid-scale-manager.controller.ts

@@ -1,7 +1,7 @@
-import { closestColumnSpanOption } from '../../utils/index.js';
 import { getAccumulatedValueOfIndex, getInterpolatedIndexOfPositionInWeightMap } from '@umbraco-cms/backoffice/utils';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { closestColumnSpanOption } from '../../utils/index.js';
 
 // This might be more generic than Block Grid, but this is where it belongs currently:
 export interface UmbBlockGridScalableContext extends UmbControllerHost {