dohertj2/scadalink-design
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(ui/templates): adopt TreeView design guide; split editor to /design/templates/{id}

Browse Source 
Templates page is now a tree-only browser; editing happens on a dedicated
TemplateEdit page. Drag-drop is replaced by context-menu Move-to-Folder.
TreeView gains Bootstrap Icons (chevron + per-kind glyphs), ancestor guide
lines, defined hover/selected/focus tokens, and Escape-dismisses-menu per
the new Visual Design Guide (V1-V7) in Component-TreeView.md.
This commit is contained in:
Joseph Doherty
2026-05-11 20:52:34 -04:00
parent f3b33e7e1d
commit 8e388a89c5
14 changed files with 3515 additions and 1127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
tests/ScadaLink.CentralUI.Tests/TemplatesPageTests.cs
View File

@@ -1,7 +1,6 @@
using System.Security.Claims;
using Bunit;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.Extensions.DependencyInjection;
using NSubstitute;
using ScadaLink.Commons.Entities.Templates;
@@ -120,41 +119,6 @@ public class TemplatesPageTests : BunitContext
Assert.Contains("→", cut.Markup);
}
[Fact]
public async Task DragTemplateOntoRoot_CallsMoveTemplateAsync_WithNullFolderId()
{
// Arrange: one template currently parented to a folder; the test simulates
// the user dragging that template onto the root drop-zone, which should
// result in TemplateService.MoveTemplateAsync(..., newFolderId: null) being
// invoked. We keep the template at the root in the rendered tree (FolderId
// null) so it renders without needing an expand-click; the drag payload only
// cares about the in-memory id captured by OnDragStart, not the visual
// parent.
var template = new Template("RootDragTarget") { Id = 5, FolderId = null };
_repo.GetAllTemplatesAsync(Arg.Any<CancellationToken>())
.Returns(Task.FromResult<IReadOnlyList<Template>>(new List<Template> { template }));
_repo.GetAllFoldersAsync(Arg.Any<CancellationToken>())
.Returns(Task.FromResult<IReadOnlyList<TemplateFolder>>(new List<TemplateFolder>()));
_repo.GetTemplateByIdAsync(5, Arg.Any<CancellationToken>())
.Returns(Task.FromResult<Template?>(template));
var cut = Render<TemplatesPage>();
// Act: fire ondragstart on the template's draggable <div> (RenderNodeLabel
// emits draggable="true" for template/folder nodes), then ondrop on the
// root wrapper marked with the test-affordance class added to the page.
var templateNode = cut.Find("div[draggable='true']");
await templateNode.TriggerEventAsync("ondragstart", new DragEventArgs());
var rootDropZone = cut.Find("div.templates-root-dropzone");
await rootDropZone.TriggerEventAsync("ondrop", new DragEventArgs());
// Assert: TemplateService.MoveTemplateAsync delegates to the repository's
// UpdateTemplateAsync with FolderId set to null.
await _repo.Received(1).UpdateTemplateAsync(
Arg.Is<Template>(t => t.Id == 5 && t.FolderId == null),
Arg.Any<CancellationToken>());
}
}
internal sealed class TestAuthStateProvider : AuthenticationStateProvider

40
tests/ScadaLink.CentralUI.Tests/TreeViewTests.cs
View File

@@ -127,7 +127,8 @@ public class TreeViewTests : BunitContext
Assert.Equal("false", alphaLi.GetAttribute("aria-expanded"));
var toggle = alphaLi.QuerySelector(".tv-toggle");
Assert.NotNull(toggle);
Assert.Equal("+", toggle!.TextContent);
// V2 spec: toggle uses Bootstrap Icons chevron-right; CSS rotates on aria-expanded.
Assert.NotNull(toggle!.QuerySelector("i.bi.bi-chevron-right"));
}
[Fact]
@@ -610,6 +611,43 @@ public class TreeViewTests : BunitContext
Assert.Equal("Alpha", btn!.TextContent);
}
[Fact]
public void ContextMenu_EscapeKeyDismissesMenu()
{
var cut = RenderTreeView(contextMenu: node => builder =>
{
builder.AddMarkupContent(0, $"<button class=\"ctx-btn\">{node.Label}</button>");
});
var row = cut.Find(".tv-row");
row.TriggerEvent("oncontextmenu", new MouseEventArgs { ClientX = 100, ClientY = 200 });
Assert.NotNull(cut.Find(".dropdown-menu"));
// Press Escape on the menu — R15 spec requires it to dismiss.
var menu = cut.Find(".dropdown-menu");
menu.TriggerEvent("onkeydown", new KeyboardEventArgs { Key = "Escape" });
Assert.Empty(cut.FindAll(".dropdown-menu"));
}
[Fact]
public void ContextMenu_NonEscapeKey_DoesNotDismiss()
{
var cut = RenderTreeView(contextMenu: node => builder =>
{
builder.AddMarkupContent(0, $"<button class=\"ctx-btn\">{node.Label}</button>");
});
var row = cut.Find(".tv-row");
row.TriggerEvent("oncontextmenu", new MouseEventArgs { ClientX = 100, ClientY = 200 });
var menu = cut.Find(".dropdown-menu");
menu.TriggerEvent("onkeydown", new KeyboardEventArgs { Key = "ArrowDown" });
Assert.NotEmpty(cut.FindAll(".dropdown-menu"));
}
[Fact]
public void ContextMenu_RightClickDifferentNode_ReplacesMenu()
{