V16: Document shows blank page when clicking an active link

[iOvergaard]

Description

Fixes #19522

This seems to only happen when you are on a variant document or a document with tabs, because the first tab is a redirect target. But if the first tab for some reason is not available, which can happen if you click an already active link where the workspace views and tabs are added lazily, then the redirect does not know what to do and you lose the whole workspace editor.

The fix seems to be to mirror what workspace views themselves do, which is to "fake" the first workspace view onto the empty url (path: '') and show the component there. The caveat is that the browser url does not reflect quite where you are, but the end effect is that the browser will show you what you expect to see anyway. Additionally, you can still click on the default tab of the document workspace and get its unique url and that will still work.

The difference is that now, when you click on the active tree item, the URL will be "reset" but no redirects will take place, so you will stay. Then eventually the document workspace editor will come through for you and show you first the correct workspace view, then later the expected tab.

How to test

1. Add variants to a document type and create a document
2. Navigate to that document
3. Click the tree item again
4. You should still see the variant

Test with tabs as well:

1. Add more tabs to your document type
2. Navigate to the document and click it again in the tree
3. You should still see the first tab
4. Go to the second tab and click the tree item again
5. You should now be redirected back to the first tab as expected

Sequence

sequenceDiagram
    participant User
    participant App
    participant Router

    Note over User,Router: Old Behavior (Loses Context)
    User->>App: Navigates to /
    Router-->>App: Redirects to /en-us
    App->>Router: Detects /en-us (empty tab path)
    Router-->>App: Redirects to /en-us/root
    App-->>User: Displays root tab (URL: /en-us/root)
    User->>App: Navigates to / again
    Router-->>App: What do you mean by /? Where is /en-us/root? I better redirect to /en-us
    App->>App: Where are my document tabs? (Tries to find them again but the view is not rendered) 
    App-->>User: Displays blank/NotFound page

    Note over User,Router: New Behavior (Keeps Context, Shows First Tab Content)
    User->>App: Navigates to /
    App->>Router: Detects / (empty tab path)
    Router->>App: Redirects to /en-us
    App-->>User: Displays first tab (URL: /en-us)
    User->>App: Navigates to / again
    App->>Router: Detects / (no tab path)
    Router->>App: Redirects to /en-us
    Router-->>App: Stays on /en-us, shows first tab content (from /en-us/root)
    App-->>User: Displays first tab content (URL: /en-us)

Loading

Copilot's Random Thoughts

This pull request refines routing behavior in the UmbContentWorkspaceViewEditElement and UmbWorkspaceEditorElement classes to improve handling of default and fallback routes. Additionally, it enhances the logic for determining active tabs in the content editor. Below is a breakdown of the most significant changes grouped by theme.

Routing Improvements:

• Default Route Handling in UmbContentWorkspaceViewEditElement: Added a new route that duplicates the first route and uses it for empty path scenarios, ensuring proper default routing behavior. Removed redundant pathMatch and redirectTo properties.
• Catch-All Route in UmbWorkspaceEditorElement: Introduced a catch-all route (**) to handle unmatched paths and fallback scenarios gracefully. This ensures users see a "Not Found" page when no other routes match.

Tab Activation Logic:

• Enhanced Active Tab Detection in UmbContentWorkspaceViewEditElement: Updated the logic to mark tabs as active when the router path matches either the root path or an empty path. This adjustment improves the user experience by correctly displaying the active state for tabs in specific routing scenarios.

[Copilot]

Pull Request Overview

This PR fixes an issue where clicking an active document link results in a blank page by adjusting the routing logic for workspace editors and content editors, ensuring that appropriate routes are rendered.

• In the workspace editor, the first workspace view is duplicated for an empty path and a catch-all route is added for non-existent routes.
• In the content editor, the root route string is standardized and the tab activation logic is updated to properly reflect the active state when workspace views are loaded lazily.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts	Duplicates the first workspace view for an empty path and adds a catch-all route for not found scenarios.
src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/views/edit/content-editor.element.ts	Adjusts the root route declaration and refines the active state conditions for tabs.

Comments suppressed due to low confidence (3)

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

• The code assumes newRoutes has at least one element. If newRoutes can ever be empty, consider adding a guard or documenting this precondition to avoid potential runtime errors.

newRoutes.push({ ...newRoutes[0], unique: newRoutes[0].path, path: '' });

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

• [nitpick] The combined condition to mark the root tab as active is a bit complex. Consider extracting it into a clearly named boolean variable to enhance readability.

active=${this._routerPath + '/root' === this._activePath || this._routerPath + '/' === this._activePath}

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

• [nitpick] The active tab condition for non-root groups is quite intricate. Extracting the logic into a descriptive helper function or variable could improve long-term maintainability.

active=${path === this._activePath || (!this._hasRootGroups && index === 0 && this._routerPath + '/' === this._activePath)}