feat(ui/admin): Topology-style refresh of Data Connections page

Brings the Data Connections admin page up to the same UX standard as the
Topology page:
- Search box with dim non-matches (opacity 0.4, shape preserved)
- Toolbar: + Connection (disabled until a site is selected), Refresh,
  Expand, Collapse
- Site context menu gains "Add Connection here" that navigates with
  ?siteId= so the form preselects + locks the Site field
- Form gains "Primary Endpoint" / "Backup Endpoint" h6 subsection
  headers matching the SiteForm convention; Failover Retry Count moved
  inside the Backup subsection
- URL renamed: /admin/connections (primary) + /admin/data-connections
  (legacy secondary @page). Same dual-route treatment on the form
- Nav label: "Data Connections" -> "Connections"
- Adds DataConnectionsPageTests bUnit suite (6 tests)
This commit is contained in:
Joseph Doherty
2026-05-11 22:42:48 -04:00
parent f3386d0278
commit da5fdf0e63
6 changed files with 447 additions and 45 deletions

View File

@@ -0,0 +1,158 @@
using System.Security.Claims;
using Bunit;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.Extensions.DependencyInjection;
using NSubstitute;
using ScadaLink.Commons.Entities.Sites;
using ScadaLink.Commons.Interfaces.Repositories;
using DataConnectionsPage = ScadaLink.CentralUI.Components.Pages.Admin.DataConnections;
namespace ScadaLink.CentralUI.Tests;
/// <summary>
/// bUnit rendering tests for the Connections page (Site → DataConnection tree).
/// Focuses on the Topology-style behaviors layered onto this page: always-show-empty
/// sites, search dimming, toolbar gating, and dual-route declaration.
/// </summary>
public class DataConnectionsPageTests : BunitContext
{
private readonly ISiteRepository _siteRepo = Substitute.For<ISiteRepository>();
public DataConnectionsPageTests()
{
Services.AddSingleton(_siteRepo);
AddTestAuth();
JSInterop.Setup<string?>("treeviewStorage.load", _ => true).SetResult(null);
JSInterop.SetupVoid("treeviewStorage.save", _ => true);
}
private void AddTestAuth()
{
var claims = new[]
{
new Claim("Username", "tester"),
new Claim(ClaimTypes.Role, "Admin")
};
var user = new ClaimsPrincipal(new ClaimsIdentity(claims, "TestAuth"));
Services.AddSingleton<AuthenticationStateProvider>(new TestAuthStateProvider(user));
Services.AddAuthorizationCore();
}
private void SeedRepos(
IEnumerable<Site>? sites = null,
IEnumerable<DataConnection>? connections = null)
{
_siteRepo.GetAllSitesAsync(Arg.Any<CancellationToken>())
.Returns(Task.FromResult<IReadOnlyList<Site>>(sites?.ToList() ?? new List<Site>()));
_siteRepo.GetAllDataConnectionsAsync(Arg.Any<CancellationToken>())
.Returns(Task.FromResult<IReadOnlyList<DataConnection>>(connections?.ToList() ?? new List<DataConnection>()));
}
private static AngleSharp.Dom.IElement? FindToggleForLabel(IRenderedComponent<DataConnectionsPage> cut, string label) =>
cut.FindAll(".tv-row")
.FirstOrDefault(row => row.QuerySelector(".tv-label")?.TextContent == label)
?.QuerySelector(".tv-toggle");
[Fact]
public void Renders_EmptyState_WhenNoSites()
{
SeedRepos();
var cut = Render<DataConnectionsPage>();
Assert.Contains("No sites configured", cut.Markup);
}
[Fact]
public void Renders_EmptySite_AsTopLevelNode()
{
// A site with no connections must still appear so it can be right-clicked
// to "Add Connection here".
SeedRepos(sites: new[] { new Site("Plant-A", "plant-a") { Id = 1 } });
var cut = Render<DataConnectionsPage>();
Assert.Contains("Plant-A", cut.Markup);
}
[Fact]
public void Renders_SiteConnection_Nesting()
{
SeedRepos(
sites: new[] { new Site("Plant-A", "plant-a") { Id = 1 } },
connections: new[]
{
new DataConnection("PLC-1", "OpcUa", 1) { Id = 100 }
});
var cut = Render<DataConnectionsPage>();
FindToggleForLabel(cut, "Plant-A")!.Click();
Assert.Contains("PLC-1", cut.Markup);
Assert.Contains("OpcUa", cut.Markup);
}
[Fact]
public void Search_DimsNonMatches_PreservesShape()
{
SeedRepos(
sites: new[]
{
new Site("Plant-A", "plant-a") { Id = 1 },
new Site("Plant-B", "plant-b") { Id = 2 }
},
connections: new[]
{
new DataConnection("PLC-1", "OpcUa", 1) { Id = 100 },
new DataConnection("RTU-9", "Custom", 2) { Id = 200 }
});
var cut = Render<DataConnectionsPage>();
var search = cut.Find("input[type='text']");
search.Input("Plant-A");
// Both sites remain in the DOM (shape preserved). Plant-B gets the dim style.
Assert.Contains("Plant-A", cut.Markup);
Assert.Contains("Plant-B", cut.Markup);
var dimmedNodes = cut.FindAll("span.tv-label[style*='opacity']");
Assert.Contains(dimmedNodes, n => n.TextContent.Contains("Plant-B"));
}
[Fact]
public void AddConnectionButton_DisabledUntilSiteSelected()
{
SeedRepos(sites: new[] { new Site("Plant-A", "plant-a") { Id = 1 } });
var cut = Render<DataConnectionsPage>();
var addBtn = cut.FindAll("button")
.First(b => b.TextContent.Contains("+ Connection"));
Assert.True(addBtn.HasAttribute("disabled"));
// Click the site content (TreeView wires selection on .tv-content).
var siteContent = cut.FindAll(".tv-row")
.First(r => r.QuerySelector(".tv-label")?.TextContent == "Plant-A")
.QuerySelector(".tv-content")!;
siteContent.Click();
var addBtnAfter = cut.FindAll("button")
.First(b => b.TextContent.Contains("+ Connection"));
Assert.False(addBtnAfter.HasAttribute("disabled"));
}
[Fact]
public void LegacyDataConnectionsRoute_IsDeclaredOnListPage()
{
// Old bookmarks to /admin/data-connections must still resolve.
var routes = typeof(DataConnectionsPage).GetCustomAttributes(
typeof(Microsoft.AspNetCore.Components.RouteAttribute), inherit: false)
.Cast<Microsoft.AspNetCore.Components.RouteAttribute>()
.Select(a => a.Template)
.ToList();
Assert.Contains("/admin/connections", routes);
Assert.Contains("/admin/data-connections", routes);
}
}