Fix: Workspace Editor slotted fallback content should be displayed when no routes (#20006)

* fix + notes

* Apply suggestion from @Copilot

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Jacob Overgaard <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

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

@@ -38,9 +38,9 @@ export class UmbWorkspaceEditorContext extends UmbContextBase {
 					(view) => !workspaceViews.some((x) => x.manifest.alias === view.manifest.alias),
 				);
 
-				const diff = viewsToKeep.length !== workspaceViews.length;
+				const hasDiff = viewsToKeep.length !== workspaceViews.length;
 
-				if (diff) {
+				if (hasDiff) {
 					const newViews = [...viewsToKeep];
 
 					// Add ones that are new:

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

@@ -136,26 +136,26 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 	}
 
 	override render() {
-		return this._routes
-			? html`
-					<umb-body-layout main-no-padding .headline=${this.headline} ?loading=${this.loading}>
-						${this.#renderBackButton()}
-						<slot name="header" slot="header"></slot>
-						<slot name="action-menu" slot="action-menu"></slot>
-						${this.#renderViews()} ${this.#renderRoutes()}
-						<slot></slot>
-						${when(
-							!this.enforceNoFooter,
-							() => html`
-								<umb-workspace-footer slot="footer" data-mark="workspace:footer">
-									<slot name="footer-info"></slot>
-									<slot name="actions" slot="actions" data-mark="workspace:footer-actions"></slot>
-								</umb-workspace-footer>
-							`,
-						)}
-					</umb-body-layout>
-				`
-			: nothing;
+		// Notice if no routes then fallback to use a slot.
+		// TODO: Deprecate the slot feature, to rely purely on routes, cause currently bringing an additional route would mean the slotted content would never be shown. [NL]
+		return html`
+			<umb-body-layout main-no-padding .headline=${this.headline} ?loading=${this.loading}>
+				${this.#renderBackButton()}
+				<slot name="header" slot="header"></slot>
+				<slot name="action-menu" slot="action-menu"></slot>
+				${this.#renderViews()} ${this.#renderRoutes()}
+				<slot></slot>
+				${when(
+					!this.enforceNoFooter,
+					() => html`
+						<umb-workspace-footer slot="footer" data-mark="workspace:footer">
+							<slot name="footer-info"></slot>
+							<slot name="actions" slot="actions" data-mark="workspace:footer-actions"></slot>
+						</umb-workspace-footer>
+					`,
+				)}
+			</umb-body-layout>
+		`;
 	}
 
 	#renderViews() {
@@ -213,7 +213,7 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 	}
 
 	#renderRoutes() {
-		if (!this._routes || this._routes.length === 0) return nothing;
+		if (!this._routes || this._routes.length === 0 || !this._workspaceViews || this._workspaceViews.length === 0) return nothing;
 		return html`
 			<umb-router-slot
 				inherit-addendum