feat(centralui): MainLayout/NavMenu delegate to ZB.MOM.WW.Theme ThemeShell + kit nav

This commit is contained in:
Joseph Doherty
2026-06-03 03:31:10 -04:00
parent 6fb545d75b
commit 957203ec7b
5 changed files with 237 additions and 425 deletions
@@ -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">
&#9776;
</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">&#9646;</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; }
}