Tree Navigation: Add visual indicators for items with restricted access

[iOvergaard]

Summary

Adds visual styling and behavior for tree items where users can see but cannot navigate to content (ancestors of their start nodes). When a user's start node is nested deep in the tree, they need visual feedback showing which ancestor nodes they don't have access to.

This implements the UI handling for Feature AB#63060 "Handle Start Nodes"

This PR also fixes #20505 by ensuring the workspace shows "Access denied" when users navigate to forbidden non-variant documents via direct URLs.

Feature: noAccess Visual Indicators

User Scenario

When a user has a start node at a grandchild level (e.g., /Root/Child/Grandchild), they need to:

1. See the tree structure leading to their start node
2. Understand which ancestor nodes they cannot access
3. Expand those ancestors to navigate to their accessible content

UI Changes

Visual Styling for noAccess Items:

• Native disabled styling from uui-menu-item component
• Items are visible and expandable but cannot be clicked to navigate

Implementation Details:

• Base class (tree-item-element-base.ts) provides _noAccess property
• When _noAccess=true:
  • disabled attribute is set on uui-menu-item (prevents clicks and keyboard navigation)
  • href is removed (prevents navigation)
  • Expand button remains functional (users can navigate through ancestors)
• Child classes (document, media) subscribe to context to set _noAccess

Tree Type Support

• ✅ Document tree (document-tree-item.element.ts) - subscribes to noAccess from entity context
• ✅ Media tree (media-tree-item.element.ts) - same pattern for consistency

Bug Fix #20505: "Access Denied" Not Showing for Non-Variant Documents

Problem: When users received direct links to non-variant documents (single language) they don't have access to, navigating to that URL would fail to show the "Access denied" message. This worked correctly for variant documents (multiple languages/cultures) but not for invariant content.

Root Cause: In document-workspace-editor.element.ts, the #generateRoutes() method had an early return for non-variant documents that skipped adding the forbidden route:

#generateRoutes() {
  if (!this.#variants || this.#variants.length === 0 || !this.#appCulture) {
    this._routes = [];
    return; // ❌ Returned early without adding forbidden route
  }
  
  // Generate routes for variant documents...
  this.#ensureForbiddenRoute(routes); // ✅ Only called for variant documents
}

Fix: Call #ensureForbiddenRoute() before the early return to ensure both variant and non-variant documents get the catch-all forbidden route:

#generateRoutes() {
  if (!this.#variants || this.#variants.length === 0 || !this.#appCulture) {
    this._routes = [];
    this.#ensureForbiddenRoute(this._routes); // ✅ Now handles non-variant documents
    return;
  }
  
  // Generate routes for variant documents...
  this.#ensureForbiddenRoute(routes); // ✅ Still works for variant documents
}

The #ensureForbiddenRoute() method adds a catch-all route (**) that displays either UmbRouteForbiddenElement (access denied) or UmbRouteNotFoundElement (404) based on the forbidden context state.

User Impact:

• ✅ "Access denied" now displays correctly for non-variant documents when accessed via direct URLs
• ✅ Variant documents continue to work as before
• ✅ Proper distinction between "forbidden" (permission issue) and "not found" (document doesn't exist)

Test Coverage:

• Re-enabled previously skipped E2E test: ContentStartNodes.spec.ts - "can see parent of start node but not access it"
• Test verifies that clicking on a noAccess parent shows "Access denied" in the workspace

Backend Bug Fix: Path Comparison False Matches

Problem: Node IDs that are numeric prefixes of other IDs (100 vs 1001, 10 vs 100) caused false matches in access logic.

Impact: Tree items were incorrectly marked as accessible or restricted.

Example:

• User has start node at ID 1001
• Tree item with ID 100 would incorrectly match
• Reason: "-1,100".StartsWith("-1,10") returns true

Fix: Add trailing commas to paths before comparison (UserStartNodeEntitiesService.cs lines 146, 226):

// Before: "-1,100".StartsWith("-1,10") = true ❌
// After: "-1,100,".StartsWith("-1,10,") = false ✅

private static bool IsDescendantOrSelf(IEntitySlim child, string[] userStartNodePaths)
    => userStartNodePaths.Any(path => $"{child.Path},".StartsWith($"{path},"));

Architecture Decisions

Leveraging Native Platform Behavior

Uses uui-menu-item's native disabled attribute instead of custom event handlers:

• ✅ Simpler, more declarative code
• ✅ Better performance (no event listeners)
• ✅ Automatic click and keyboard prevention
• ✅ Expand button functionality preserved (separate event)
• ✅ Centralized in base class
• ✅ Native disabled styling from the component library

Opt-In Pattern

Base class provides infrastructure, child classes explicitly subscribe to enable it:

• ✅ Non-breaking change for tree types that don't need access restrictions
• ✅ Clear ownership of feature activation
• ✅ Flexibility for future tree implementations

Trailing Comma Technique

Simple string manipulation for path comparison:

• ✅ Minimal performance impact
• ✅ Easy to understand and maintain
• ✅ No additional dependencies
• ✅ Handles all edge cases correctly

Test Coverage

Unit Tests (19 tests) - New

File: UserStartNodePathComparisonTests.cs

• Documents the path comparison bug and fix
• Covers edge cases: numeric prefixes (1/10/100/1001), deep paths, self-matching
• Includes "bug demonstration" tests showing the problem without the fix

Integration Tests (9 tests) - Passing

File: UserStartNodeEntitiesServiceTests.cs

• Verifies correct noAccess flags on tree items
• Tests various start node configurations
• Pagination and filtering scenarios

E2E Tests - Updated

• ContentStartNodes.spec.ts - Document tree noAccess behavior (previously skipped test now re-enabled)
• MediaStartNodes.spec.ts - Media tree noAccess behavior
• Tests expansion of noAccess ancestors and navigation to accessible children

Breaking Changes

None. This is an additive feature with opt-in activation.

Dependencies

No new dependencies added.

---

Testing: All unit tests (19/19), integration tests (9/9), and E2E tests pass.

Manual Verification: Tested in browser with users at various start node levels (root, child, grandchild).

[Copilot]

Pull request overview

This PR implements UI handling for the noAccess property on user start nodes in tree pickers. It adds visual styling to indicate inaccessible items and prevents their selection in picker inputs while still allowing navigation.

Changes:

• Added noAccess observable properties to document and media tree item contexts
• Implemented visual styling (grayed out, italic) for inaccessible tree items
• Updated picker input contexts to filter out items with noAccess: true

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
media-tree-item.element.ts	Adds noAccess property observation and applies opacity/italic styling to icon and label
media-tree-item.context.ts	Exposes noAccess as an observable from the tree item model
input-media.context.ts	Filters out items with noAccess property from being selectable in pickers
document-tree-item.element.ts	Adds noAccess property observation and applies opacity/italic styling to icon and label
document-tree-item.context.ts	Exposes noAccess as an observable from the tree item model
input-document.context.ts	Filters out items with noAccess property from being selectable in pickers

[nielslyngsoe]

Super. It works as expected. 👏