stella-ops.org/git.stella-ops.org
1
0
Fork 0
Code Issues Pull Requests Actions 2 Releases Wiki Activity
Files
484abe003999a88e7e58018ce589b8ec74e57769
git.stella-ops.org/docs/features/checked/web/contextual-actions-patterns-ui.md
master f709d519ec feat(ui): ship contextual action primitives
2026-03-08 00:02:02 +02:00

3.2 KiB
Raw Blame History

Contextual Actions Patterns UI

Module

Web

Status

VERIFIED

Description

Shipped the shared contextual placement primitives used to turn restored but narrow functionality into usable owner-shell tabs, drawers, submenu pills, and list-detail layouts instead of standalone products. Watchlist, Reachability, Operations, and Workflow Replay now share one route-state contract, one contextual header model, and one drawer or detail-shell behavior.

Implementation Details

  • Shared feature directory: src/Web/StellaOps.Web/src/app/shared/ui/
  • Primary shared primitives:
    • context-route-state (src/Web/StellaOps.Web/src/app/shared/ui/context-route-state/context-route-state.ts)
    • context-header (src/Web/StellaOps.Web/src/app/shared/ui/context-header/context-header.component.ts)
    • context-drawer-host (src/Web/StellaOps.Web/src/app/shared/ui/context-drawer-host/context-drawer-host.component.ts)
    • list-detail-shell (src/Web/StellaOps.Web/src/app/shared/ui/list-detail-shell/list-detail-shell.component.ts)
    • overview-card-groups (src/Web/StellaOps.Web/src/app/shared/ui/overview-card-groups/overview-card-groups.component.ts)
    • tabbed-nav (src/Web/StellaOps.Web/src/app/shared/ui/tabbed-nav/tabbed-nav.component.ts)
  • Shared route-state keys:
    • tab
    • panel
    • drawer
    • returnTo
    • scope
    • view
  • Adopted surfaces:
    • Setup > Trust & Signing > Identity Watchlist
    • Security > Reachability
    • Ops > Operations
    • Releases > Runs

E2E Test Plan

  • Setup:
    • Log in with a user that can access Setup, Security, Ops, and Releases.
    • Ensure watchlist, reachability, operations, and release-run fixtures or seeded data exist.
  • Core verification:
    • Verify shared tab and submenu primitives render the adopted shells without bespoke route-state code.
    • Verify contextual headers preserve return-to-context actions where shells deep-link into another owner flow.
    • Verify route-aware drawers and detail layouts preserve URL state and close behavior.
  • Adoption verification:
    • Verify Watchlist entries use the shared list-detail and header patterns.
    • Verify Reachability tabs and PoE drill-ins use the shared contextual route-state.
    • Verify Operations overview groups use the shared grouped-card and submenu patterns.
    • Verify Workflow Replay step-detail and evidence handoff keep shared returnTo and drawer semantics.

Verification

  • Run:
    • npx ng test --watch=false --include src/tests/shared/contextual-actions-patterns-ui.spec.ts --include src/tests/watchlist/identity-watchlist-management-ui.component.spec.ts --include src/tests/reachability_center/reachability-center.component.spec.ts --include src/tests/platform-ops/platform-ops-overview-page.component.spec.ts --include src/tests/workflow_visualization/run-graph-replay-page.behavior.spec.ts
    • npx playwright test tests/e2e/watchlist-shell.spec.ts tests/e2e/reachability-witnessing.spec.ts tests/e2e/operations-consolidation.spec.ts tests/e2e/workflow-visualization-replay.spec.ts --workers=1
  • Tier 0 (source): pass
  • Tier 1 (build/tests): pass
  • Tier 2 (behavior): pass
  • Verified on (UTC): 2026-03-07T21:56:33.4410778Z