V16: Document shows blank page when clicking an active link (#19553)

* fix: if no workspace views are found at all, show a not found page

* fix: rather than redirecting to the first available tab, which may not always be available on secondary routing, let the router display the first tab on an empty url

this mirrors how workspace views are displayed in umb-workspace-editor

Author: iOvergaard

src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/views/edit/content-editor.element.ts

@@ -85,7 +85,7 @@ export class UmbContentWorkspaceViewEditElement extends UmbLitElement implements
 
 		if (this._hasRootGroups) {
 			routes.push({
-				path: `root`,
+				path: 'root',
 				component: () => import('./content-editor-tab.element.js'),
 				setup: (component) => {
 					(component as UmbContentWorkspaceViewEditTabElement).containerId = null;
@@ -108,17 +108,17 @@ export class UmbContentWorkspaceViewEditElement extends UmbLitElement implements
 
 		if (routes.length !== 0) {
 			routes.push({
+				...routes[0],
+				unique: routes[0].path,
 				path: '',
-				pathMatch: 'full',
-				redirectTo: routes[0].path,
-			});
-
-			routes.push({
-				path: `**`,
-				component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement,
 			});
 		}
 
+		routes.push({
+			path: `**`,
+			component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement,
+		});
+
 		this._routes = routes;
 	}
 
@@ -132,18 +132,20 @@ export class UmbContentWorkspaceViewEditElement extends UmbLitElement implements
 								? html`
 										<uui-tab
 											.label=${this.localize.term('general_generic')}
-											.active=${this._routerPath + '/root' === this._activePath}
+											.active=${this._routerPath + '/root' === this._activePath ||
+											this._routerPath + '/' === this._activePath}
 											.href=${this._routerPath + '/root'}></uui-tab>
 									`
 								: ''}
 							${repeat(
 								this._tabs,
 								(tab) => tab.name,
-								(tab) => {
+								(tab, index) => {
 									const path = this._routerPath + '/tab/' + encodeFolderName(tab.name || '');
 									return html`<uui-tab
 										.label=${this.localize.string(tab.name ?? '#general_unnamed')}
-										.active=${path === this._activePath}
+										.active=${path === this._activePath ||
+										(!this._hasRootGroups && index === 0 && this._routerPath + '/' === this._activePath)}
 										.href=${path}></uui-tab>`;
 								},
 							)}

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts

@@ -75,13 +75,15 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 
 			// Duplicate first workspace and use it for the empty path scenario. [NL]
 			newRoutes.push({ ...newRoutes[0], unique: newRoutes[0].path, path: '' });
-
-			newRoutes.push({
-				path: `**`,
-				component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement,
-			});
 		}
 
+		// Add a catch-all route for not found
+		// This will be the last route, so it will only match if no other routes match or if no workspace views are defined.
+		newRoutes.push({
+			path: `**`,
+			component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement,
+		});
+
 		this._routes = newRoutes;
 	}