refactor(ui/admin): card grid, search, kebab; LDAP scope-rule chips
LdapMappings: flex header, search filter, per-row Edit + kebab Delete,
@key, dropped Site-Scope-Rules cell in favor of a {n rule(s)} badge.
LdapMappingForm: two stacked cards (Mapping then Site Scope Rules);
scope rules render as removable chips with an inline "Add scope rule"
form; create-mode disables the scope card with an explainer; role
select gets form-text help.
DataConnections: <h4> in flex header, Bulk actions dropdown holding
Expand/Collapse, hover-visible kebab on tree nodes mirroring the
right-click context menu, aria-labels, "No connections match the
filter." inline empty state.
DataConnectionForm: Site rendered as readonly plaintext + lock-after-
creation note in edit mode; parallel Primary endpoint / Backup endpoint
headings; "Optional" badge on Backup when null; form-text on
FailoverRetryCount.
ApiKeys: search filter, Status column dropped (state now lives in the
kebab menu label "Disable"/"Enable"), Edit + kebab actions, @key,
aria-labels.
ApiKeyForm: nested card removed; fixed-text Back header; real
clipboard copy via IJSRuntime + toast confirmation.
Test selector fix in DataConnectionFormTests for the new Site
readonly-plaintext rendering.
This commit is contained in:
Joseph Doherty
@@ -8,8 +8,35 @@
|
||||
@inject NavigationManager NavigationManager
|
||||
|
||||
<div class="container-fluid mt-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h4 class="mb-0">Connections</h4>
|
||||
<div class="d-flex gap-2">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-secondary btn-sm dropdown-toggle"
|
||||
data-bs-toggle="dropdown">
|
||||
Bulk actions
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<button class="dropdown-item" @onclick="() => _tree?.ExpandAll()">
|
||||
Expand all
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="dropdown-item" @onclick="() => _tree?.CollapseAll()">
|
||||
Collapse all
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm"
|
||||
disabled="@(!HasSiteSelected)"
|
||||
@onclick="OnAddConnectionClicked">+ Connection</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ToastNotification @ref="_toast" />
|
||||
<ConfirmDialog @ref="_confirmDialog" />
|
||||
<ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
|
||||
|
||||
@if (_loading)
|
||||
{
|
||||
@@ -21,21 +48,17 @@
|
||||
}
|
||||
else
|
||||
{
|
||||
<h6 class="mb-2">Connections</h6>
|
||||
<div class="d-flex align-items-center mb-2 gap-2">
|
||||
<input type="text" class="form-control form-control-sm" style="max-width: 320px;"
|
||||
<div class="mb-3" style="max-width: 320px;">
|
||||
<input type="text" class="form-control form-control-sm"
|
||||
placeholder="Search sites or connections..."
|
||||
@bind="_searchText" @bind:event="oninput" @bind:after="OnSearchChanged" />
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button class="btn btn-outline-secondary"
|
||||
disabled="@(!HasSiteSelected)"
|
||||
@onclick="OnAddConnectionClicked">+ Connection</button>
|
||||
<button class="btn btn-outline-secondary" @onclick="LoadDataAsync">Refresh</button>
|
||||
<button class="btn btn-outline-secondary" @onclick="() => _tree?.ExpandAll()">Expand</button>
|
||||
<button class="btn btn-outline-secondary" @onclick="() => _tree?.CollapseAll()">Collapse</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(_searchText) && _matchKeys.Count == 0 && _treeRoots.Count > 0)
|
||||
{
|
||||
<p class="text-muted small">No connections match the filter.</p>
|
||||
}
|
||||
|
||||
<TreeView @ref="_tree" TItem="DcTreeNode" Items="_treeRoots"
|
||||
ChildrenSelector="n => n.Children"
|
||||
HasChildrenSelector="n => n.Children.Count > 0"
|
||||
@@ -58,6 +81,41 @@
|
||||
<span class="tv-label" style="@labelStyle">@node.Label</span>
|
||||
<span class="badge bg-info ms-2">@node.Connection!.Protocol</span>
|
||||
}
|
||||
<span class="tv-meta">
|
||||
<div class="dropdown dc-node-actions" @onclick:stopPropagation="true">
|
||||
<button type="button"
|
||||
class="btn btn-link btn-sm p-0 dc-kebab"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="@($"More actions for {node.Label}")">⋮</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
@if (node.Kind == DcNodeKind.Site)
|
||||
{
|
||||
<li>
|
||||
<button class="dropdown-item"
|
||||
@onclick="() => AddConnectionForSite(node.SiteId!.Value)">
|
||||
Add Connection here
|
||||
</button>
|
||||
</li>
|
||||
}
|
||||
else
|
||||
{
|
||||
<li>
|
||||
<button class="dropdown-item"
|
||||
@onclick='() => NavigationManager.NavigateTo($"/admin/connections/{node.Connection!.Id}/edit")'>
|
||||
Edit
|
||||
</button>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<button class="dropdown-item text-danger"
|
||||
@onclick="() => DeleteConnection(node.Connection!)">
|
||||
Delete
|
||||
</button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</NodeContent>
|
||||
<ContextMenu Context="node">
|
||||
@if (node.Kind == DcNodeKind.Site)
|
||||
@@ -91,6 +149,24 @@
|
||||
}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Kebab visible-on-hover for tree nodes; always visible at small sizes for touch. */
|
||||
.dc-node-actions .dc-kebab {
|
||||
opacity: 0;
|
||||
line-height: 1;
|
||||
padding: 0 0.25rem !important;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
.tv-row:hover .dc-node-actions .dc-kebab,
|
||||
.dc-node-actions.show .dc-kebab,
|
||||
.dc-node-actions .dc-kebab:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
@@media (max-width: 768px) {
|
||||
.dc-node-actions .dc-kebab { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
record DcTreeNode(string Key, string Label, DcNodeKind Kind, List<DcTreeNode> Children,
|
||||
int? SiteId = null, DataConnection? Connection = null);
|
||||
|
||||
Reference in New Issue
Block a user