feat(centralui): MainLayout/NavMenu delegate to ZB.MOM.WW.Theme ThemeShell + kit nav
This commit is contained in:
Joseph Doherty
@@ -1,26 +1,28 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="d-flex flex-column flex-lg-row" style="min-height: 100vh;">
|
||||
@* Hamburger toggle: visible only on viewports <lg.
|
||||
Bootstrap collapse JS lives in bootstrap.bundle.min.js (loaded in App.razor). *@
|
||||
<button class="btn btn-outline-secondary btn-sm d-lg-none m-2 align-self-start"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#sidebar-collapse"
|
||||
aria-controls="sidebar-collapse"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
☰
|
||||
</button>
|
||||
|
||||
<div class="collapse d-lg-block" id="sidebar-collapse">
|
||||
@* The side-rail chassis (brand bar + responsive hamburger) is the shared
|
||||
ZB.MOM.WW.Theme ThemeShell. NavMenu fills the rail's <Nav> slot with the
|
||||
policy-gated nav groups; the session/sign-out block fills <RailFooter>. *@
|
||||
<ThemeShell Product="ScadaBridge" Accent="#2f5fd0">
|
||||
<Nav>
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<main class="flex-grow-1 p-3">
|
||||
@Body
|
||||
</main>
|
||||
</div>
|
||||
</Nav>
|
||||
<RailFooter>
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
@* CentralUI-024: claim type resolved via JwtTokenService. *@
|
||||
<span class="rail-user">@context.User.GetDisplayName()</span>
|
||||
<form method="post" action="/auth/logout" data-enhance="false">
|
||||
@* CentralUI-017: logout is a state-changing POST and is
|
||||
CSRF-protected — the antiforgery token is required. *@
|
||||
<AntiforgeryToken />
|
||||
<button type="submit" class="rail-btn">Sign Out</button>
|
||||
</form>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
</RailFooter>
|
||||
<ChildContent>@Body</ChildContent>
|
||||
</ThemeShell>
|
||||
|
||||
@* Global host for IDialogService. One instance per layout renders all confirm/prompt
|
||||
dialogs raised via IDialogService.ConfirmAsync / PromptAsync. *@
|
||||
|
||||
@@ -1,324 +1,117 @@
|
||||
@using System.Linq
|
||||
@using ZB.MOM.WW.ScadaBridge.Security
|
||||
@using Microsoft.AspNetCore.Components.Routing
|
||||
@using Microsoft.JSInterop
|
||||
@implements IDisposable
|
||||
@inject NavigationManager Navigation
|
||||
@inject IJSRuntime JS
|
||||
|
||||
<nav class="sidebar d-flex flex-column">
|
||||
<div class="brand"><span class="mark">▮</span> ScadaBridge</div>
|
||||
@* Rail navigation — rendered inside ThemeShell's <Nav> slot. The chassis
|
||||
(brand bar + responsive hamburger) belongs to ThemeShell; this component
|
||||
contributes only the nav items. Collapsible sections use the kit's
|
||||
NavRailSection (<details>); their open/closed state is persisted client-side
|
||||
by the kit's nav-state.js (localStorage, keyed by Key) — no JS interop here. *@
|
||||
|
||||
<div style="overflow-y:auto; flex:1 1 auto; min-height:0;">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/" Match="NavLinkMatch.All">Dashboard</NavLink>
|
||||
</li>
|
||||
<NavRailItem Href="/" Text="Dashboard" Match="NavLinkMatch.All" />
|
||||
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
@* Admin section — Administrator role only *@
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
|
||||
<Authorized Context="adminContext">
|
||||
<NavSection Title="Admin"
|
||||
Expanded="@_expanded.Contains("admin")"
|
||||
OnToggle="@(() => ToggleAsync("admin"))">
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/admin/ldap-mappings">LDAP Mappings</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/admin/sites">Sites</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/admin/api-keys">API Keys</NavLink>
|
||||
</li>
|
||||
@* Import Bundle requires Administrator only — Designer role is not sufficient.
|
||||
Export Bundle lives in the Design section (RequireDesign). *@
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/design/transport/import">Import Bundle</NavLink>
|
||||
</li>
|
||||
</NavSection>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
@* Admin section — Administrator role only *@
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
|
||||
<Authorized Context="adminContext">
|
||||
<NavRailSection Title="Admin" Key="admin">
|
||||
<NavRailItem Href="/admin/ldap-mappings" Text="LDAP Mappings" />
|
||||
<NavRailItem Href="/admin/sites" Text="Sites" />
|
||||
<NavRailItem Href="/admin/api-keys" Text="API Keys" />
|
||||
@* Import Bundle requires Administrator only — Designer role is not sufficient.
|
||||
Export Bundle lives in the Design section (RequireDesign). *@
|
||||
<NavRailItem Href="/design/transport/import" Text="Import Bundle" />
|
||||
</NavRailSection>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
|
||||
@* Design section — Designer role *@
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
|
||||
<Authorized Context="designContext">
|
||||
<NavSection Title="Design"
|
||||
Expanded="@_expanded.Contains("design")"
|
||||
OnToggle="@(() => ToggleAsync("design"))">
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/design/templates">Templates</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/design/shared-scripts">Shared Scripts</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/design/connections">Connections</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/design/external-systems">External Systems</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/design/transport/export">Export Bundle</NavLink>
|
||||
</li>
|
||||
</NavSection>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
@* Design section — Designer role *@
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
|
||||
<Authorized Context="designContext">
|
||||
<NavRailSection Title="Design" Key="design">
|
||||
<NavRailItem Href="/design/templates" Text="Templates" />
|
||||
<NavRailItem Href="/design/shared-scripts" Text="Shared Scripts" />
|
||||
<NavRailItem Href="/design/connections" Text="Connections" />
|
||||
<NavRailItem Href="/design/external-systems" Text="External Systems" />
|
||||
<NavRailItem Href="/design/transport/export" Text="Export Bundle" />
|
||||
</NavRailSection>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
|
||||
@* Deployment section — Deployer role *@
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
|
||||
<Authorized Context="deploymentContext">
|
||||
<NavSection Title="Deployment"
|
||||
Expanded="@_expanded.Contains("deployment")"
|
||||
OnToggle="@(() => ToggleAsync("deployment"))">
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/deployment/topology">Topology</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/deployment/deployments">Deployments</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/deployment/debug-view">Debug View</NavLink>
|
||||
</li>
|
||||
</NavSection>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
@* Deployment section — Deployer role *@
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
|
||||
<Authorized Context="deploymentContext">
|
||||
<NavRailSection Title="Deployment" Key="deployment">
|
||||
<NavRailItem Href="/deployment/topology" Text="Topology" />
|
||||
<NavRailItem Href="/deployment/deployments" Text="Deployments" />
|
||||
<NavRailItem Href="/deployment/debug-view" Text="Debug View" />
|
||||
</NavRailSection>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
|
||||
@* Notifications — mixed-role section; each item gated by its own policy.
|
||||
The section is ungated: every authenticated user holds at least one of
|
||||
Admin/Design/Deployment, so it always has a visible child. *@
|
||||
<NavSection Title="Notifications"
|
||||
Expanded="@_expanded.Contains("notifications")"
|
||||
OnToggle="@(() => ToggleAsync("notifications"))">
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
|
||||
<Authorized Context="notifAdminContext">
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/notifications/smtp">SMTP Configuration</NavLink>
|
||||
</li>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
|
||||
<Authorized Context="notifDesignContext">
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/notifications/lists">Notification Lists</NavLink>
|
||||
</li>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
|
||||
<Authorized Context="notifDeploymentContext">
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/notifications/report">Notification Report</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/notifications/kpis">Notification KPIs</NavLink>
|
||||
</li>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
</NavSection>
|
||||
|
||||
@* Site Calls — Site Call Audit (#22). Deployer-role only,
|
||||
matching the Notification Report page's gate; the whole
|
||||
section sits inside the policy block so a non-Deployer
|
||||
user does not see the heading. *@
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
|
||||
<Authorized Context="siteCallsContext">
|
||||
<NavSection Title="Site Calls"
|
||||
Expanded="@_expanded.Contains("sitecalls")"
|
||||
OnToggle="@(() => ToggleAsync("sitecalls"))">
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/site-calls/report">Site Calls</NavLink>
|
||||
</li>
|
||||
</NavSection>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
|
||||
@* Monitoring — Health Dashboard is all-roles; Event Logs and
|
||||
Parked Messages are Deployer-role only (Component-CentralUI).
|
||||
The section is ungated because Health Dashboard is always
|
||||
a visible child. *@
|
||||
<NavSection Title="Monitoring"
|
||||
Expanded="@_expanded.Contains("monitoring")"
|
||||
OnToggle="@(() => ToggleAsync("monitoring"))">
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/monitoring/health">Health Dashboard</NavLink>
|
||||
</li>
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
|
||||
<Authorized Context="monitoringContext">
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/monitoring/event-logs">Event Logs</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/monitoring/parked-messages">Parked Messages</NavLink>
|
||||
</li>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
</NavSection>
|
||||
|
||||
@* Audit — gated on the OperationalAudit policy (#23 M7-T15
|
||||
/ Bundle G). Hosts the Audit Log page (#23 M7) and the
|
||||
Configuration Audit Log (IAuditService config-change
|
||||
viewer). The whole section sits inside the policy block:
|
||||
a non-audit user does not even see the heading.
|
||||
OperationalAudit is satisfied by the Administrator and
|
||||
Viewer roles (post-Task-1.7 canonical collapse: former
|
||||
Audit→Administrator, AuditReadOnly→Viewer). *@
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.OperationalAudit">
|
||||
<Authorized Context="auditContext">
|
||||
<NavSection Title="Audit"
|
||||
Expanded="@_expanded.Contains("audit")"
|
||||
OnToggle="@(() => ToggleAsync("audit"))">
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/audit/log">Audit Log</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="/audit/configuration">Configuration Audit Log</NavLink>
|
||||
</li>
|
||||
</NavSection>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
@* Notifications — mixed-role section; each item gated by its own policy.
|
||||
The section is ungated: every authenticated user holds at least one of
|
||||
Admin/Design/Deployment, so it always has a visible child. *@
|
||||
<NavRailSection Title="Notifications" Key="notifications">
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
|
||||
<Authorized Context="notifAdminContext">
|
||||
<NavRailItem Href="/notifications/smtp" Text="SMTP Configuration" />
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
</ul>
|
||||
</div>
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
|
||||
<Authorized Context="notifDesignContext">
|
||||
<NavRailItem Href="/notifications/lists" Text="Notification Lists" />
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
|
||||
<Authorized Context="notifDeploymentContext">
|
||||
<NavRailItem Href="/notifications/report" Text="Notification Report" />
|
||||
<NavRailItem Href="/notifications/kpis" Text="Notification KPIs" />
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
</NavRailSection>
|
||||
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
<div class="border-top px-3 py-2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
@* CentralUI-024: claim type resolved via JwtTokenService. *@
|
||||
<span class="text-body-secondary small">@context.User.GetDisplayName()</span>
|
||||
<form method="post" action="/auth/logout" data-enhance="false">
|
||||
@* CentralUI-017: logout is a state-changing POST and is
|
||||
CSRF-protected — the antiforgery token is required. *@
|
||||
<AntiforgeryToken />
|
||||
<button type="submit" class="btn btn-outline-secondary btn-sm py-0 px-2">Sign Out</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
</nav>
|
||||
@* Site Calls — Site Call Audit (#22). Deployer-role only,
|
||||
matching the Notification Report page's gate; the whole
|
||||
section sits inside the policy block so a non-Deployer
|
||||
user does not see the heading. *@
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
|
||||
<Authorized Context="siteCallsContext">
|
||||
<NavRailSection Title="Site Calls" Key="sitecalls">
|
||||
<NavRailItem Href="/site-calls/report" Text="Site Calls" />
|
||||
</NavRailSection>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
|
||||
@code {
|
||||
// Expanded-section state persists in the "scadabridge_nav" cookie, written
|
||||
// by navState.set / read by navState.get (wwwroot/js/nav-state.js) — a
|
||||
// comma-separated list of section ids.
|
||||
@* Monitoring — Health Dashboard is all-roles; Event Logs and
|
||||
Parked Messages are Deployer-role only (Component-CentralUI).
|
||||
The section is ungated because Health Dashboard is always
|
||||
a visible child. *@
|
||||
<NavRailSection Title="Monitoring" Key="monitoring">
|
||||
<NavRailItem Href="/monitoring/health" Text="Health Dashboard" />
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
|
||||
<Authorized Context="monitoringContext">
|
||||
<NavRailItem Href="/monitoring/event-logs" Text="Event Logs" />
|
||||
<NavRailItem Href="/monitoring/parked-messages" Text="Parked Messages" />
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
</NavRailSection>
|
||||
|
||||
// Every collapsible section id. Also the allow-list for parsing the cookie.
|
||||
private static readonly string[] SectionIds =
|
||||
{ "admin", "design", "deployment", "notifications", "sitecalls", "monitoring", "audit" };
|
||||
|
||||
// The currently-expanded sections. Populated from the cookie on first
|
||||
// render; mutated by ToggleAsync and by navigating into a section.
|
||||
private readonly HashSet<string> _expanded = new(StringComparer.Ordinal);
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Navigation.LocationChanged += OnLocationChanged;
|
||||
}
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (!firstRender)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Hydrate from the cookie. Until this completes the sidebar paints
|
||||
// collapsed (the "collapsed by default" state) — matching how TreeView
|
||||
// hydrates its expand state in OnAfterRenderAsync(firstRender).
|
||||
string saved;
|
||||
try
|
||||
{
|
||||
saved = await JS.InvokeAsync<string>("navState.get") ?? string.Empty;
|
||||
}
|
||||
catch (JSDisconnectedException)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
foreach (var id in saved.Split(
|
||||
',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries))
|
||||
{
|
||||
if (Array.IndexOf(SectionIds, id) >= 0)
|
||||
{
|
||||
_expanded.Add(id);
|
||||
}
|
||||
}
|
||||
|
||||
// The section of the page we loaded on is always expanded.
|
||||
if (EnsureCurrentSectionExpanded())
|
||||
{
|
||||
await PersistAsync();
|
||||
}
|
||||
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
|
||||
{
|
||||
// Navigating into a collapsed section expands it (and remembers it).
|
||||
if (EnsureCurrentSectionExpanded())
|
||||
{
|
||||
_ = PersistAsync();
|
||||
_ = InvokeAsync(StateHasChanged);
|
||||
}
|
||||
}
|
||||
|
||||
private async Task ToggleAsync(string id)
|
||||
{
|
||||
if (!_expanded.Remove(id))
|
||||
{
|
||||
_expanded.Add(id);
|
||||
}
|
||||
|
||||
await PersistAsync();
|
||||
}
|
||||
|
||||
// Adds the current page's section to _expanded; returns true if it changed.
|
||||
private bool EnsureCurrentSectionExpanded()
|
||||
{
|
||||
var section = CurrentSection();
|
||||
return section is not null && _expanded.Add(section);
|
||||
}
|
||||
|
||||
// Maps the current URL's first path segment to a section id, or null for
|
||||
// sectionless pages (Dashboard, Login).
|
||||
private string? CurrentSection()
|
||||
{
|
||||
var relative = Navigation.ToBaseRelativePath(Navigation.Uri);
|
||||
var firstSegment = relative.Split('?', '#')[0]
|
||||
.Split('/', StringSplitOptions.RemoveEmptyEntries)
|
||||
.FirstOrDefault();
|
||||
|
||||
return firstSegment switch
|
||||
{
|
||||
"admin" => "admin",
|
||||
"design" => "design",
|
||||
"deployment" => "deployment",
|
||||
"notifications" => "notifications",
|
||||
"site-calls" => "sitecalls",
|
||||
"monitoring" => "monitoring",
|
||||
"audit" => "audit",
|
||||
_ => null,
|
||||
};
|
||||
}
|
||||
|
||||
private async Task PersistAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
await JS.InvokeVoidAsync("navState.set", string.Join(',', _expanded));
|
||||
}
|
||||
catch (JSDisconnectedException)
|
||||
{
|
||||
// The circuit is gone — nothing to persist to.
|
||||
}
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
Navigation.LocationChanged -= OnLocationChanged;
|
||||
}
|
||||
}
|
||||
@* Audit — gated on the OperationalAudit policy (#23 M7-T15
|
||||
/ Bundle G). Hosts the Audit Log page (#23 M7) and the
|
||||
Configuration Audit Log (IAuditService config-change
|
||||
viewer). The whole section sits inside the policy block:
|
||||
a non-audit user does not even see the heading.
|
||||
OperationalAudit is satisfied by the Administrator and
|
||||
Viewer roles (post-Task-1.7 canonical collapse: former
|
||||
Audit→Administrator, AuditReadOnly→Viewer). *@
|
||||
<AuthorizeView Policy="@AuthorizationPolicies.OperationalAudit">
|
||||
<Authorized Context="auditContext">
|
||||
<NavRailSection Title="Audit" Key="audit">
|
||||
<NavRailItem Href="/audit/log" Text="Audit Log" />
|
||||
<NavRailItem Href="/audit/configuration" Text="Configuration Audit Log" />
|
||||
</NavRailSection>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
@* A collapsible sidebar nav section: an uppercase-eyebrow header button that
|
||||
toggles the visibility of its child nav items. The header <li> and the item
|
||||
<li>s (ChildContent) render as siblings inside NavMenu's <ul>. *@
|
||||
|
||||
<li class="nav-item">
|
||||
<button type="button"
|
||||
class="nav-section-toggle"
|
||||
@onclick="OnToggle"
|
||||
aria-expanded="@(Expanded ? "true" : "false")">
|
||||
<i class="bi @(Expanded ? "bi-chevron-down" : "bi-chevron-right")" aria-hidden="true"></i>
|
||||
<span>@Title</span>
|
||||
</button>
|
||||
</li>
|
||||
@if (Expanded)
|
||||
{
|
||||
@ChildContent
|
||||
}
|
||||
|
||||
@code {
|
||||
/// <summary>Section label shown in the header (e.g. "Deployment").</summary>
|
||||
[Parameter, EditorRequired]
|
||||
public string Title { get; set; } = string.Empty;
|
||||
|
||||
/// <summary>Whether the section is expanded — its items rendered.</summary>
|
||||
[Parameter]
|
||||
public bool Expanded { get; set; }
|
||||
|
||||
/// <summary>Raised when the header button is clicked.</summary>
|
||||
[Parameter]
|
||||
public EventCallback OnToggle { get; set; }
|
||||
|
||||
/// <summary>The section's nav items, rendered only while expanded.</summary>
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
}
|
||||
@@ -11,26 +11,21 @@ using NavMenu = ZB.MOM.WW.ScadaBridge.CentralUI.Components.Layout.NavMenu;
|
||||
namespace ZB.MOM.WW.ScadaBridge.CentralUI.Tests.Layout;
|
||||
|
||||
/// <summary>
|
||||
/// bUnit rendering tests for the sidebar <see cref="NavMenu"/>. They verify the
|
||||
/// collapsible section behaviour (sections collapsed by default, a toggle
|
||||
/// reveals a section's items and persists state to a cookie) and that the
|
||||
/// Notifications section's items are gated per-policy. The
|
||||
/// <c>AuthorizeView Policy=...</c> blocks evaluate the real policies, which
|
||||
/// require a claim of type <see cref="JwtTokenService.RoleClaimType"/> (the
|
||||
/// canonical <c>ZbClaimTypes.Role</c> framework URI), so the test principal
|
||||
/// carries claims of that exact type.
|
||||
/// bUnit rendering tests for the rail <see cref="NavMenu"/>. After the
|
||||
/// ZB.MOM.WW.Theme adoption (Task 2.4) the nav is composed of the kit's
|
||||
/// <c>NavRailSection</c> (a native <c><details></c> disclosure, expanded
|
||||
/// by default — no JS interop, works in static SSR) and <c>NavRailItem</c>
|
||||
/// links. These tests verify the structure (sections render as
|
||||
/// <c>details.rail-section</c>, not the old <c>button.nav-section-toggle</c>)
|
||||
/// and — the load-bearing security behaviour — that each section's items are
|
||||
/// gated by the correct authorization policy. The <c>AuthorizeView Policy=...</c>
|
||||
/// blocks evaluate the real policies, which require a claim of type
|
||||
/// <see cref="JwtTokenService.RoleClaimType"/> (the canonical
|
||||
/// <c>ZbClaimTypes.Role</c> framework URI), so the test principal carries
|
||||
/// claims of that exact type.
|
||||
/// </summary>
|
||||
public class NavMenuTests : BunitContext
|
||||
{
|
||||
public NavMenuTests()
|
||||
{
|
||||
// NavMenu reads the nav-collapse cookie via the navState.get JS interop
|
||||
// call in OnAfterRenderAsync and writes it via navState.set on toggle.
|
||||
// Loose mode lets navState.get no-op (returns null) so the sidebar
|
||||
// renders collapsed, and still records navState.set invocations.
|
||||
JSInterop.Mode = JSRuntimeMode.Loose;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Renders <see cref="NavMenu"/> under a principal holding the given roles.
|
||||
/// <see cref="NavMenu"/>'s top-level <c>AuthorizeView</c> requires the
|
||||
@@ -44,7 +39,22 @@ public class NavMenuTests : BunitContext
|
||||
var claims = new List<Claim> { new(JwtTokenService.UsernameClaimType, "tester") };
|
||||
claims.AddRange(roles.Select(r => new Claim(JwtTokenService.RoleClaimType, r)));
|
||||
|
||||
// "TestAuth" authentication type → IsAuthenticated == true.
|
||||
var user = new ClaimsPrincipal(new ClaimsIdentity(claims, "TestAuth"));
|
||||
return RenderWithPrincipal(user);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Renders <see cref="NavMenu"/> with an anonymous (unauthenticated)
|
||||
/// principal — a bare <see cref="ClaimsIdentity"/> with no authentication
|
||||
/// type, so <c>IsAuthenticated == false</c> and every <c>AuthorizeView</c>
|
||||
/// renders its (empty) <c>NotAuthorized</c>/fallthrough branch.
|
||||
/// </summary>
|
||||
private IRenderedComponent<NavMenu> RenderAnonymous()
|
||||
=> RenderWithPrincipal(new ClaimsPrincipal(new ClaimsIdentity()));
|
||||
|
||||
private IRenderedComponent<NavMenu> RenderWithPrincipal(ClaimsPrincipal user)
|
||||
{
|
||||
Services.AddSingleton<AuthenticationStateProvider>(new TestAuthStateProvider(user));
|
||||
Services.AddAuthorizationCore();
|
||||
AuthorizationPolicies.AddScadaBridgeAuthorization(Services);
|
||||
@@ -63,62 +73,46 @@ public class NavMenuTests : BunitContext
|
||||
return host.FindComponent<NavMenu>();
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Clicks the collapsible section header whose title matches, expanding it.
|
||||
/// </summary>
|
||||
private static void ExpandSection(IRenderedComponent<NavMenu> cut, string title)
|
||||
{
|
||||
var toggle = cut.FindAll("button.nav-section-toggle")
|
||||
.Single(b => b.TextContent.Contains(title, StringComparison.Ordinal));
|
||||
toggle.Click();
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public void Sections_AreCollapsedByDefault()
|
||||
public void Sections_RenderAsKitDetailsDisclosures_ExpandedByDefault()
|
||||
{
|
||||
var cut = RenderWithRoles("Administrator", "Designer", "Deployer");
|
||||
|
||||
cut.WaitForAssertion(() =>
|
||||
{
|
||||
// Section headers render unconditionally...
|
||||
// Kit nav: sections are <details class="rail-section"> disclosures,
|
||||
// NOT the old interactive button.nav-section-toggle.
|
||||
Assert.Empty(cut.FindAll("button.nav-section-toggle"));
|
||||
Assert.NotEmpty(cut.FindAll("details.rail-section"));
|
||||
|
||||
// Section eyebrows still render their titles.
|
||||
Assert.Contains(">Notifications<", cut.Markup);
|
||||
Assert.Contains(">Deployment<", cut.Markup);
|
||||
// ...but their items stay out of the DOM until the section opens.
|
||||
Assert.DoesNotContain("/notifications/smtp", cut.Markup);
|
||||
Assert.DoesNotContain("/deployment/topology", cut.Markup);
|
||||
|
||||
// The kit's NavRailSection defaults to open, so items are in the DOM
|
||||
// without any toggle/JS — this is the static-SSR-friendly behaviour.
|
||||
Assert.Contains("/notifications/smtp", cut.Markup);
|
||||
Assert.Contains("/deployment/topology", cut.Markup);
|
||||
});
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public void TogglingSection_RevealsItsItems()
|
||||
{
|
||||
var cut = RenderWithRoles("Deployer");
|
||||
Assert.DoesNotContain("/deployment/topology", cut.Markup);
|
||||
|
||||
ExpandSection(cut, "Deployment");
|
||||
|
||||
Assert.Contains("/deployment/topology", cut.Markup);
|
||||
Assert.Contains("/deployment/deployments", cut.Markup);
|
||||
Assert.Contains("/deployment/debug-view", cut.Markup);
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public void TogglingSection_PersistsStateToCookie()
|
||||
public void DeploymentSection_RendersAllItems_ForDeployer()
|
||||
{
|
||||
var cut = RenderWithRoles("Deployer");
|
||||
|
||||
ExpandSection(cut, "Deployment");
|
||||
|
||||
// Expanding wrote the cookie through the navState.set JS interop call.
|
||||
var invocation = JSInterop.Invocations.Last(i => i.Identifier == "navState.set");
|
||||
Assert.Equal("deployment", invocation.Arguments[0]);
|
||||
cut.WaitForAssertion(() =>
|
||||
{
|
||||
Assert.Contains("/deployment/topology", cut.Markup);
|
||||
Assert.Contains("/deployment/deployments", cut.Markup);
|
||||
Assert.Contains("/deployment/debug-view", cut.Markup);
|
||||
});
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public void NotificationsSection_ShowsAllItems_ForMultiRoleUser()
|
||||
{
|
||||
var cut = RenderWithRoles("Administrator", "Designer", "Deployer");
|
||||
ExpandSection(cut, "Notifications");
|
||||
|
||||
cut.WaitForAssertion(() =>
|
||||
{
|
||||
@@ -134,7 +128,6 @@ public class NavMenuTests : BunitContext
|
||||
public void NotificationsSection_AdminOnlyUser_SeesOnlySmtp()
|
||||
{
|
||||
var cut = RenderWithRoles("Administrator");
|
||||
ExpandSection(cut, "Notifications");
|
||||
|
||||
cut.WaitForAssertion(() =>
|
||||
{
|
||||
@@ -156,4 +149,60 @@ public class NavMenuTests : BunitContext
|
||||
Assert.DoesNotContain("/monitoring/notification-outbox", cut.Markup);
|
||||
});
|
||||
}
|
||||
|
||||
// ── AuthorizeView-gated SECTION visibility (the GAPS open question) ──────
|
||||
// A whole NavRailSection wrapped in <AuthorizeView Policy="..."> must SHOW
|
||||
// (heading + items) for an authorized principal and be entirely ABSENT for
|
||||
// an unauthorized/anonymous one. The Audit section (OperationalAudit policy)
|
||||
// is the witness — its heading lives inside the policy block, so a denied
|
||||
// user must not even see the eyebrow.
|
||||
|
||||
[Fact]
|
||||
public void PolicyGatedSection_IsVisible_ForAuthorizedPrincipal()
|
||||
{
|
||||
// OperationalAudit is satisfied by the Administrator role.
|
||||
var cut = RenderWithRoles("Administrator");
|
||||
|
||||
cut.WaitForAssertion(() =>
|
||||
{
|
||||
Assert.Contains(">Audit<", cut.Markup); // section heading present
|
||||
Assert.Contains("/audit/log", cut.Markup); // gated items present
|
||||
Assert.Contains("/audit/configuration", cut.Markup);
|
||||
});
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public void PolicyGatedSection_IsAbsent_ForUnauthorizedPrincipal()
|
||||
{
|
||||
// Designer satisfies RequireDesign but NOT OperationalAudit.
|
||||
var cut = RenderWithRoles("Designer");
|
||||
|
||||
cut.WaitForAssertion(() =>
|
||||
{
|
||||
Assert.DoesNotContain(">Audit<", cut.Markup); // heading hidden, not just items
|
||||
Assert.DoesNotContain("/audit/log", cut.Markup);
|
||||
Assert.DoesNotContain("/audit/configuration", cut.Markup);
|
||||
});
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public void PolicyGatedSections_AllAbsent_ForAnonymousPrincipal()
|
||||
{
|
||||
var cut = RenderAnonymous();
|
||||
|
||||
cut.WaitForAssertion(() =>
|
||||
{
|
||||
// The Dashboard link is always-visible (outside every AuthorizeView)...
|
||||
Assert.Contains("Dashboard", cut.Markup);
|
||||
// ...but no policy-gated section or its items leak to an anonymous user.
|
||||
Assert.DoesNotContain(">Admin<", cut.Markup);
|
||||
Assert.DoesNotContain(">Design<", cut.Markup);
|
||||
Assert.DoesNotContain(">Deployment<", cut.Markup);
|
||||
Assert.DoesNotContain(">Notifications<", cut.Markup);
|
||||
Assert.DoesNotContain(">Audit<", cut.Markup);
|
||||
Assert.DoesNotContain("/admin/sites", cut.Markup);
|
||||
Assert.DoesNotContain("/design/templates", cut.Markup);
|
||||
Assert.DoesNotContain("/audit/log", cut.Markup);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,15 +103,18 @@ public class AuditLogPageScaffoldTests : BunitContext
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Clicks the collapsible section header whose title matches, expanding it.
|
||||
/// Nav sections are collapsed by default, so a section's items are only in
|
||||
/// the DOM once expanded.
|
||||
/// Asserts the named rail section is present. After the ZB.MOM.WW.Theme
|
||||
/// adoption (Task 2.4) nav sections are the kit's <c>NavRailSection</c> —
|
||||
/// native <c><details class="rail-section"></c> disclosures that are
|
||||
/// open by default, so a section's items are already in the DOM (no click
|
||||
/// needed, no JS). This helper just confirms the section's
|
||||
/// <c>summary.rail-eyebrow-toggle</c> eyebrow exists for the given title.
|
||||
/// </summary>
|
||||
private static void ExpandNavSection(IRenderedComponent<NavMenu> cut, string title)
|
||||
{
|
||||
var toggle = cut.FindAll("button.nav-section-toggle")
|
||||
.Single(b => b.TextContent.Contains(title, StringComparison.Ordinal));
|
||||
toggle.Click();
|
||||
Assert.Contains(
|
||||
cut.FindAll("details.rail-section > summary.rail-eyebrow-toggle"),
|
||||
s => s.TextContent.Contains(title, StringComparison.Ordinal));
|
||||
}
|
||||
|
||||
[Fact]
|
||||
|
||||
Reference in New Issue
Block a user