Merge branch 'main' into dependabot/npm_and_yarn/hey-api/openapi-ts-0.48.1

Author: leekelleher

.github/workflows/build_test.yml

@@ -25,23 +25,30 @@ env:
 jobs:
   build:
     runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20]
-
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version-file: .nvmrc
           cache: npm
-          cache-dependency-path: package-lock.json
+          cache-dependency-path: ./package-lock.json
       - run: npm ci --no-audit --no-fund --prefer-offline
       - run: npm run lint:errors
-      - run: npm run build
+      - run: npm run build:for:cms
       - run: npm run generate:jsonschema:dist
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+          cache-dependency-path: ./package-lock.json
+      - run: npm ci --no-audit --no-fund --prefer-offline
       - run: npx playwright install --with-deps
       - run: npm test
       - name: Upload Code Coverage reports
@@ -51,13 +58,3 @@ jobs:
           name: code-coverage
           path: coverage/
           retention-days: 30
-    # Commented out since it is outdated and is quite spammy
-    # - name: Report code coverage
-    #   uses: zgosalvez/github-actions-report-lcov@v2
-    #   if: always()
-    #   continue-on-error: true
-    #   with:
-    #     coverage-files: coverage/lcov.info
-    #     artifact-name: code-coverage-report
-    #     github-token: ${{ secrets.GITHUB_TOKEN }}
-    #     working-directory: ./

.github/workflows/devskim.yml

@@ -1,4 +1,4 @@
-import { readFileSync, writeFile, mkdir } from 'fs';
+import { readFileSync, writeFile, mkdir, rmSync } from 'fs';
 import * as globModule from 'tiny-glob';
 import * as pathModule from 'path';
 
@@ -15,6 +15,9 @@ const lucideSvgDirectory = 'node_modules/lucide-static/icons';
 const simpleIconsSvgDirectory = 'node_modules/simple-icons/icons';
 
 const run = async () => {
+	// Empty output directory:
+	rmSync(iconsOutputDirectory, { recursive: true });
+
 	var icons = await collectDictionaryIcons();
 	icons = await collectDiskIcons(icons);
 	writeIconsToDisk(icons);

devops/icons/index.js

@@ -138,7 +138,8 @@
 		"./src/packages/umbraco-news",
 		"./src/packages/webhook",
 		"./src/packages/health-check",
-		"./src/packages/tags"
+		"./src/packages/tags",
+		"./src/packages/templating"
 	],
 	"scripts": {
 		"backoffice:test:e2e": "npx playwright test",
@@ -256,7 +257,7 @@
 		"rollup-plugin-esbuild": "^6.1.1",
 		"rollup-plugin-import-css": "^3.5.0",
 		"rollup-plugin-web-worker-loader": "^1.6.1",
-		"simple-icons": "^12.0.0",
+		"simple-icons": "^13.0.0",
 		"storybook": "^7.6.17",
 		"tiny-glob": "^0.2.9",
 		"tsc-alias": "^1.8.8",

package-lock.json

@@ -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,41 @@ 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) => {

package.json

@@ -2521,4 +2521,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: 'Ikke fundet',
+		routeNotFoundDescription: 'Den side du leder efter kunne ikke findes. Kontroller adressen og prøv igen.',
+	},
 } as UmbLocalizationDictionary;

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

@@ -2522,4 +2522,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/assets/lang/da-dk.ts

@@ -2591,4 +2591,8 @@ export default {
 		detailedLevelDescription:
 			'We will send:\n<ul>\n    <li>Anonymized site ID, Umbraco version, and packages installed.</li>\n    <li>Number of: Root nodes, Content nodes, Macros, 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>',
 	},
+	routing: {
+		routeNotFoundTitle: 'Not found',
+		routeNotFoundDescription: 'The requested route could not be found. Please check the URL and try again.',
+	},
 } as UmbLocalizationDictionary;

src/assets/lang/en-us.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);
+						}
 					}
 				}