refactor(centralui): migrate Move/Rename/Compose dialogs to DialogService.ShowAsync host (T33b)

src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Pages/Design/DataConnections.razor

@@ -42,12 +42,6 @@
 
     <ToastNotification @ref="_toast" />
 
-    <MoveDataConnectionDialog @bind-IsVisible="_showMoveDialog"
-                              ConnectionId="_moveConnectionId"
-                              ConnectionName="@_moveConnectionName"
-                              SiteOptions="MoveTargetSiteOptions()"
-                              OnMoved="OnConnectionMoved" />
-
     @if (_loading)
     {
         <LoadingSpinner IsLoading="true" />
@@ -425,37 +419,37 @@
         }
     }
 
-    // ── M9-T24b: Move connection to another site ──
+    // ── M9-T24b / T33b: Move connection to another site ──
-    // The dialog dispatches MoveDataConnectionCommand through the guard-running
+    // Opened via IDialogService.ShowAsync. The body dispatches MoveDataConnectionCommand
-    // ManagementActor path (IDataConnectionMoveService) — NOT a direct repository
+    // through the guard-running ManagementActor path (IDataConnectionMoveService) — NOT
-    // write — so the server enforces the Designer gate and every move guard. The
+    // a direct repository write — so the server enforces the Designer gate and every
-    // page only opens the dialog, supplies the candidate target sites (the current
+    // move guard, showing any guard error inline and staying open. On success the body
-    // site excluded), and reloads the tree once the move succeeds.
+    // closes with true; the page then toasts and reloads the tree.
-    private bool _showMoveDialog;
+    private async Task OpenMoveDialog(DataConnection conn)
-    private int _moveConnectionId;
-    private int _moveConnectionSiteId;
-    private string _moveConnectionName = string.Empty;
-
-    private void OpenMoveDialog(DataConnection conn)
     {
-        _moveConnectionId = conn.Id;
+        var connId = conn.Id;
-        _moveConnectionSiteId = conn.SiteId;
+        var connName = conn.Name;
-        _moveConnectionName = conn.Name;
+        var options = MoveTargetSiteOptions(conn.SiteId);
-        _showMoveDialog = true;
+        var moved = await Dialog.ShowAsync<bool>(
+            $"Move '{connName}' to site…",
+            ctx => @<MoveDataConnectionDialog Context="ctx"
+                                              ConnectionId="connId"
+                                              ConnectionName="@connName"
+                                              SiteOptions="options" />);
+        if (moved)
+        {
+            _toast.ShowSuccess($"Connection '{connName}' moved.");
+            await LoadDataAsync();
+        }
     }
 
     // Candidate target sites for the move: every site EXCEPT the connection's
     // current one. Sourced from the already-loaded tree roots (each root is a site).
-    private IEnumerable<(int Id, string Label)> MoveTargetSiteOptions() =>
+    private IEnumerable<(int Id, string Label)> MoveTargetSiteOptions(int currentSiteId) =>
         _treeRoots
-            .Where(r => r.SiteId is int sid && sid != _moveConnectionSiteId)
+            .Where(r => r.SiteId is int sid && sid != currentSiteId)
-            .Select(r => (r.SiteId!.Value, r.Label));
+            .Select(r => (r.SiteId!.Value, r.Label))
-
+            .ToList();
-    private async Task OnConnectionMoved()
-    {
-        _toast.ShowSuccess($"Connection '{_moveConnectionName}' moved.");
-        await LoadDataAsync();
-    }
 
     // M9-T25: enum → Bootstrap badge class. Mirrors the Health dashboard's
     // GetConnectionHealthBadge (Components/Pages/Monitoring/Health.razor) so the

src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Pages/Design/Templates.razor

@@ -17,33 +17,6 @@
 <div class="container-fluid mt-3">
     <ToastNotification @ref="_toast" />
 
-    <RenameFolderDialog @bind-IsVisible="_showRenameFolderDialog"
-                        FolderId="_renameFolderId"
-                        InitialName="@_renameFolderInitialName"
-                        ErrorMessage="@_renameFolderError"
-                        OnSubmit="SubmitRenameFolder" />
-
-    <MoveTemplateDialog @bind-IsVisible="_showMoveTemplateDialog"
-                        TemplateId="_moveTemplateId"
-                        TemplateName="@_moveTemplateName"
-                        FolderOptions="EnumerateFolderOptions()"
-                        ErrorMessage="@_moveTemplateError"
-                        OnSubmit="SubmitMoveTemplate" />
-
-    <MoveFolderDialog @bind-IsVisible="_showMoveFolderDialog"
-                      FolderId="_moveFolderId"
-                      FolderName="@_moveFolderName"
-                      FolderOptions="EnumerateFolderOptionsExcluding(_moveFolderId)"
-                      ErrorMessage="@_moveFolderError"
-                      OnSubmit="SubmitMoveFolder" />
-
-    <ComposeIntoDialog @bind-IsVisible="_showComposeDialog"
-                       SourceTemplateId="_composeSourceId"
-                       SourceName="@_composeSourceName"
-                       ParentOptions="EnumerateComposableParents(_composeSourceId)"
-                       ErrorMessage="@_composeError"
-                       OnSubmit="SubmitCompose" />
-
     @if (_loading)
     {
         <LoadingSpinner IsLoading="true" />
@@ -314,34 +287,26 @@
         }
     }
 
-    // Move-template dialog state
+    // Move-template dialog: opened via IDialogService.ShowAsync. The body returns
-    private bool _showMoveTemplateDialog;
+    // the picked folder id (null = Root) on Move, or null on Cancel; validation runs
-    private int _moveTemplateId;
+    // here after the dialog closes and surfaces server guard failures via a toast.
-    private string _moveTemplateName = string.Empty;
+    private async Task OpenMoveTemplateDialog(int templateId, string label)
-    private string? _moveTemplateError;
-
-    private void OpenMoveTemplateDialog(int templateId, string label)
     {
-        _moveTemplateId = templateId;
+        var result = await Dialog.ShowAsync<MoveTemplateDialog.MoveTemplateResult>(
-        _moveTemplateName = label;
+            $"Move '{label}' to…",
-        _moveTemplateError = null;
+            ctx => @<MoveTemplateDialog Context="ctx" FolderOptions="EnumerateFolderOptions()" />);
-        _showMoveTemplateDialog = true;
+        if (result is null) return;
-    }
 
-    private async Task SubmitMoveTemplate((int TemplateId, int? NewFolderId) req)
-    {
-        _moveTemplateError = null;
         var user = await GetCurrentUserAsync();
-        var result = await TemplateService.MoveTemplateAsync(req.TemplateId, req.NewFolderId, user);
+        var moved = await TemplateService.MoveTemplateAsync(templateId, result.NewFolderId, user);
-        if (result.IsSuccess)
+        if (moved.IsSuccess)
         {
-            _showMoveTemplateDialog = false;
+            _toast.ShowSuccess($"Template '{label}' moved.");
-            _toast.ShowSuccess($"Template '{_moveTemplateName}' moved.");
             await LoadTemplatesAsync();
         }
         else
         {
-            _moveTemplateError = result.Error;
+            _toast.ShowError(moved.Error);
         }
     }
 
@@ -373,34 +338,27 @@
         }
     }
 
-    // Move-folder dialog state
+    // Move-folder dialog: opened via IDialogService.ShowAsync. The picker prunes the
-    private bool _showMoveFolderDialog;
+    // folder + its descendants (server still validates cycles). The body returns the
-    private int _moveFolderId;
+    // picked parent id (null = Root) on Move, or null on Cancel; server guard failures
-    private string _moveFolderName = string.Empty;
+    // surface via a toast.
-    private string? _moveFolderError;
+    private async Task OpenMoveFolderDialog(int folderId, string label)
-
-    private void OpenMoveFolderDialog(int folderId, string label)
     {
-        _moveFolderId = folderId;
+        var result = await Dialog.ShowAsync<MoveFolderDialog.MoveFolderResult>(
-        _moveFolderName = label;
+            $"Move '{label}' to…",
-        _moveFolderError = null;
+            ctx => @<MoveFolderDialog Context="ctx" FolderOptions="EnumerateFolderOptionsExcluding(folderId)" />);
-        _showMoveFolderDialog = true;
+        if (result is null) return;
-    }
 
-    private async Task SubmitMoveFolder((int FolderId, int? NewParentId) req)
-    {
-        _moveFolderError = null;
         var user = await GetCurrentUserAsync();
-        var result = await TemplateFolderService.MoveFolderAsync(req.FolderId, req.NewParentId, user);
+        var moved = await TemplateFolderService.MoveFolderAsync(folderId, result.NewParentId, user);
-        if (result.IsSuccess)
+        if (moved.IsSuccess)
         {
-            _showMoveFolderDialog = false;
+            _toast.ShowSuccess($"Folder '{label}' moved.");
-            _toast.ShowSuccess($"Folder '{_moveFolderName}' moved.");
             await LoadTemplatesAsync();
         }
         else
         {
-            _moveFolderError = result.Error;
+            _toast.ShowError(moved.Error);
         }
     }
 
@@ -467,34 +425,27 @@
 
     private void DismissRootContextMenu() => _showRootMenu = false;
 
-    // Rename folder dialog state
+    // Rename folder dialog: opened via IDialogService.ShowAsync. The body seeds the
-    private bool _showRenameFolderDialog;
+    // input from the current name and returns the trimmed new name on Save, or null on
-    private int _renameFolderId;
+    // Cancel; server guard failures surface via a toast.
-    private string _renameFolderInitialName = string.Empty;
+    private async Task OpenRenameFolderDialog(int folderId, string currentName)
-    private string? _renameFolderError;
-
-    private void OpenRenameFolderDialog(int folderId, string currentName)
     {
-        _renameFolderId = folderId;
+        var newName = await Dialog.ShowAsync<string>(
-        _renameFolderInitialName = currentName;
+            "Rename Folder",
-        _renameFolderError = null;
+            ctx => @<RenameFolderDialog Context="ctx" InitialName="@currentName" />,
-        _showRenameFolderDialog = true;
+            size: "modal-sm");
-    }
+        if (string.IsNullOrWhiteSpace(newName)) return;
 
-    private async Task SubmitRenameFolder((int FolderId, string NewName) req)
-    {
-        _renameFolderError = null;
         var user = await GetCurrentUserAsync();
-        var result = await TemplateFolderService.RenameFolderAsync(req.FolderId, req.NewName, user);
+        var result = await TemplateFolderService.RenameFolderAsync(folderId, newName, user);
         if (result.IsSuccess)
         {
-            _showRenameFolderDialog = false;
             _toast.ShowSuccess("Folder renamed.");
             await LoadTemplatesAsync();
         }
         else
         {
-            _renameFolderError = result.Error;
+            _toast.ShowError(result.Error);
         }
     }
 
@@ -545,17 +496,31 @@
     }
 
     // ---- Compose-into dialog ----
-    private bool _showComposeDialog;
+    // Opened via IDialogService.ShowAsync. The body returns the chosen parent template
-    private int _composeSourceId;
+    // + slot name on Compose (its own client-side guard keeps the button disabled until
-    private string _composeSourceName = string.Empty;
+    // both are set), or null on Cancel; server guard failures surface via a toast.
-    private string? _composeError;
+    private async Task OpenComposeDialog(Template source)
-
-    private void OpenComposeDialog(Template source)
     {
-        _composeSourceId = source.Id;
+        var sourceId = source.Id;
-        _composeSourceName = source.Name;
+        var sourceName = source.Name;
-        _composeError = null;
+        var result = await Dialog.ShowAsync<ComposeIntoDialog.ComposeResult>(
-        _showComposeDialog = true;
+            $"Compose '{sourceName}' into…",
+            ctx => @<ComposeIntoDialog Context="ctx"
+                                       SourceName="@sourceName"
+                                       ParentOptions="EnumerateComposableParents(sourceId)" />);
+        if (result is null) return;
+
+        var user = await GetCurrentUserAsync();
+        var composed = await TemplateService.AddCompositionAsync(result.ParentTemplateId, sourceId, result.SlotName, user);
+        if (composed.IsSuccess)
+        {
+            _toast.ShowSuccess($"Composed '{sourceName}' as '{result.SlotName}'.");
+            await LoadTemplatesAsync();
+        }
+        else
+        {
+            _toast.ShowError(composed.Error);
+        }
     }
 
     // Possible parents for a compose: every non-derived template except the source itself.
@@ -568,23 +533,6 @@
             .Select(t => (t.Id, t.Name));
     }
 
-    private async Task SubmitCompose((int SourceTemplateId, int ParentTemplateId, string SlotName) req)
-    {
-        _composeError = null;
-        var user = await GetCurrentUserAsync();
-        var result = await TemplateService.AddCompositionAsync(req.ParentTemplateId, req.SourceTemplateId, req.SlotName, user);
-        if (result.IsSuccess)
-        {
-            _showComposeDialog = false;
-            _toast.ShowSuccess($"Composed '{_composeSourceName}' as '{req.SlotName}'.");
-            await LoadTemplatesAsync();
-        }
-        else
-        {
-            _composeError = result.Error;
-        }
-    }
-
     // ---- Composition leaf: rename + delete ----
     private async Task RenameComposition(TemplateComposition composition)
     {

src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Shared/ComposeIntoDialog.razor

@@ -1,13 +1,12 @@
-@if (IsVisible)
+@*
-{
+    T33b: body component for the "Compose into" dialog hosted by
-    <div class="modal show d-block" tabindex="-1" style="background: rgba(0,0,0,0.4);">
+    IDialogService.ShowAsync. Renders ONLY the parent/slot fields + action buttons
-        <div class="modal-dialog">
+    inside the host's .modal-body; the host owns the backdrop, header, and focus
-            <div class="modal-content">
+    trap. Closes with a ComposeResult (parent template id + slot name); Cancel
-                <div class="modal-header">
+    resolves to null. The Compose button stays disabled until both a parent and a
-                    <h6 class="modal-title">Compose '@SourceName' into…</h6>
+    non-blank slot are chosen (client-side guard, preserved from the original).
-                    <button type="button" class="btn-close" @onclick="Close"></button>
+    Server-side compose failures are surfaced by the parent via a toast.
-                </div>
+*@
-                <div class="modal-body">
 <div class="mb-3">
     <label class="form-label small text-muted mb-1">Parent template</label>
     <select class="form-select form-select-sm" @bind="_parentTemplateId">
@@ -22,47 +21,37 @@
     <label class="form-label small text-muted mb-1">Slot name</label>
     <input type="text" class="form-control form-control-sm"
            placeholder="Slot name"
-                               @bind="_slotName" />
+           @bind="_slotName" @bind:event="oninput" />
 </div>
-                    @if (!string.IsNullOrEmpty(ErrorMessage)) { <div class="text-danger small mt-2">@ErrorMessage</div> }
+
+<div class="modal-footer px-0 pb-0 mt-3">
+    <button class="btn btn-outline-secondary btn-sm" @onclick="() => Context.Cancel()">Cancel</button>
+    <button class="btn btn-primary btn-sm" @onclick="Submit"
+            disabled="@(_parentTemplateId == 0 || string.IsNullOrWhiteSpace(_slotName))">Compose</button>
 </div>
-                <div class="modal-footer">
-                    <button class="btn btn-outline-secondary btn-sm" @onclick="Close">Cancel</button>
-                    <button class="btn btn-primary btn-sm" @onclick="Submit" disabled="@(_parentTemplateId == 0 || string.IsNullOrWhiteSpace(_slotName))">Compose</button>
-                </div>
-            </div>
-        </div>
-    </div>
-}
 
 @code {
-    [Parameter] public bool IsVisible { get; set; }
+    /// <summary>Host-supplied context used to close (with the chosen parent + slot) or cancel.</summary>
-    [Parameter] public EventCallback<bool> IsVisibleChanged { get; set; }
+    [Parameter] public DialogContext<ComposeResult> Context { get; set; } = default!;
-    [Parameter] public int SourceTemplateId { get; set; }
     [Parameter] public string SourceName { get; set; } = string.Empty;
     [Parameter] public IEnumerable<(int Id, string Label)> ParentOptions { get; set; } = Array.Empty<(int, string)>();
-    [Parameter] public string? ErrorMessage { get; set; }
-    [Parameter] public EventCallback<(int SourceTemplateId, int ParentTemplateId, string SlotName)> OnSubmit { get; set; }
 
-    private bool _wasVisible;
     private int _parentTemplateId;
     private string _slotName = string.Empty;
 
-    protected override void OnParametersSet()
+    protected override void OnInitialized() => _slotName = SourceName;
-    {
-        if (IsVisible && !_wasVisible)
-        {
-            _parentTemplateId = 0;
-            _slotName = SourceName;
-        }
-        _wasVisible = IsVisible;
-    }
 
-    private async Task Close() => await IsVisibleChanged.InvokeAsync(false);
+    private void Submit()
-
-    private async Task Submit()
     {
         if (_parentTemplateId == 0 || string.IsNullOrWhiteSpace(_slotName)) return;
-        await OnSubmit.InvokeAsync((SourceTemplateId, _parentTemplateId, _slotName.Trim()));
+        Context.Close(new ComposeResult(_parentTemplateId, _slotName.Trim()));
     }
+
+    /// <summary>
+    /// Result of the compose picker: the parent template to compose into and the
+    /// slot name. ShowAsync resolves to this record on Compose, or <c>null</c> on Cancel.
+    /// </summary>
+    /// <param name="ParentTemplateId">The template the source is composed into.</param>
+    /// <param name="SlotName">The trimmed slot (composition instance) name.</param>
+    public sealed record ComposeResult(int ParentTemplateId, string SlotName);
 }

src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Shared/MoveDataConnectionDialog.razor

@@ -2,25 +2,16 @@
 @inject IDataConnectionMoveService MoveService
 
 @*
-    M9-T24b: Move a data connection to another site. The picker lists the candidate
+    M9-T24b / T33b: body component for the "Move data connection" dialog hosted by
-    target sites (the page excludes the connection's current site). On confirm the
+    IDialogService.ShowAsync. Renders ONLY the site picker + action buttons inside
-    dialog dispatches MoveDataConnectionCommand through IDataConnectionMoveService —
+    the host's .modal-body; the host owns the backdrop, header, and focus trap.
-    the guard-running ManagementActor path, NOT a direct repository write — so the
+
-    server's Designer gate and every move guard (target exists, no name collision, no
+    The body still injects IDataConnectionMoveService and dispatches the
-    instance binding, no native-alarm-source name reference) run. A guard error is
+    MoveDataConnectionCommand through the guard-running ManagementActor path (NOT a
-    shown inline and the dialog stays open; success closes the dialog and raises
+    direct repository write) so the server's Designer gate and every move guard run.
-    OnMoved so the page reloads the tree. Mirrors the MoveFolderDialog idiom.
+    A guard error is shown inline and the dialog STAYS OPEN; success closes the
+    dialog with Close(true) so the parent reloads the tree. Cancel resolves to false.
 *@
-@if (IsVisible)
-{
-    <div class="modal show d-block" tabindex="-1" style="background: rgba(0,0,0,0.4);">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h6 class="modal-title">Move '@ConnectionName' to site…</h6>
-                    <button type="button" class="btn-close" @onclick="Close" disabled="@_busy"></button>
-                </div>
-                <div class="modal-body">
 @if (SiteOptions.Any())
 {
     <select class="form-select form-select-sm" @bind="_targetSiteId">
@@ -38,48 +29,28 @@
 {
     <div class="text-danger small mt-2" data-test="move-connection-error">@_error</div>
 }
-                </div>
+
-                <div class="modal-footer">
+<div class="modal-footer px-0 pb-0 mt-3">
-                    <button class="btn btn-outline-secondary btn-sm" @onclick="Close" disabled="@_busy">Cancel</button>
+    <button class="btn btn-outline-secondary btn-sm" @onclick="() => Context.Cancel()" disabled="@_busy">Cancel</button>
     <button class="btn btn-primary btn-sm" @onclick="Submit"
             disabled="@(_busy || !SiteOptions.Any())">Move</button>
 </div>
-            </div>
-        </div>
-    </div>
-}
 
 @code {
-    [Parameter] public bool IsVisible { get; set; }
+    /// <summary>Host-supplied context: Close(true) on a successful move, Cancel on dismiss.</summary>
-    [Parameter] public EventCallback<bool> IsVisibleChanged { get; set; }
+    [Parameter] public DialogContext<bool> Context { get; set; } = default!;
     [Parameter] public int ConnectionId { get; set; }
     [Parameter] public string ConnectionName { get; set; } = string.Empty;
     [Parameter] public IEnumerable<(int Id, string Label)> SiteOptions { get; set; } = Array.Empty<(int, string)>();
 
-    /// <summary>Raised after a successful move so the page can reload the tree.</summary>
-    [Parameter] public EventCallback OnMoved { get; set; }
-
-    private bool _wasVisible;
     private int? _targetSiteId;
     private string? _error;
     private bool _busy;
 
-    protected override void OnParametersSet()
+    protected override void OnInitialized()
-    {
-        // Reset internal state on transition from hidden -> visible: default the
-        // picker to the first candidate site and clear any prior error.
-        if (IsVisible && !_wasVisible)
     {
+        // Default the picker to the first candidate site.
         _targetSiteId = SiteOptions.Select(o => (int?)o.Id).FirstOrDefault();
-            _error = null;
-            _busy = false;
-        }
-        _wasVisible = IsVisible;
-    }
-
-    private async Task Close()
-    {
-        await IsVisibleChanged.InvokeAsync(false);
     }
 
     private async Task Submit()
@@ -94,8 +65,9 @@
 
             if (result.Success)
             {
-                await IsVisibleChanged.InvokeAsync(false);
+                // Success closes the dialog; the parent's post-ShowAsync block toasts
-                await OnMoved.InvokeAsync();
+                // and reloads the tree.
+                Context.Close(true);
             }
             else
             {

src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Shared/MoveFolderDialog.razor

@@ -1,58 +1,38 @@
-@if (IsVisible)
+@*
-{
+    T33b: body component for the "Move folder" dialog hosted by
-    <div class="modal show d-block" tabindex="-1" style="background: rgba(0,0,0,0.4);">
+    IDialogService.ShowAsync. Renders ONLY the picker + action buttons inside the
-        <div class="modal-dialog">
+    host's .modal-body; the host owns the backdrop, header, and focus trap. The
-            <div class="modal-content">
+    body closes with a MoveFolderResult carrying the picked parent id (null = Root,
-                <div class="modal-header">
+    which is why a result record is used: Close(null) would otherwise be
-                    <h6 class="modal-title">Move '@FolderName' to…</h6>
+    indistinguishable from a Cancel). The parent validates after the dialog closes
-                    <button type="button" class="btn-close" @onclick="Close"></button>
+    and toasts any server guard failure.
-                </div>
+*@
-                <div class="modal-body">
 <select class="form-select form-select-sm" @bind="_targetParentId">
     @foreach (var opt in FolderOptions)
     {
         <option value="@opt.Id">@opt.Label</option>
     }
 </select>
-                    @if (!string.IsNullOrEmpty(ErrorMessage)) { <div class="text-danger small mt-1">@ErrorMessage</div> }
+
-                </div>
+<div class="modal-footer px-0 pb-0 mt-3">
-                <div class="modal-footer">
+    <button class="btn btn-outline-secondary btn-sm" @onclick="() => Context.Cancel()">Cancel</button>
-                    <button class="btn btn-outline-secondary btn-sm" @onclick="Close">Cancel</button>
     <button class="btn btn-primary btn-sm" @onclick="Submit">Move</button>
 </div>
-            </div>
-        </div>
-    </div>
-}
 
 @code {
-    [Parameter] public bool IsVisible { get; set; }
+    /// <summary>Host-supplied context used to close (with the picked parent id) or cancel.</summary>
-    [Parameter] public EventCallback<bool> IsVisibleChanged { get; set; }
+    [Parameter] public DialogContext<MoveFolderResult> Context { get; set; } = default!;
-    [Parameter] public int FolderId { get; set; }
-    [Parameter] public string FolderName { get; set; } = string.Empty;
     [Parameter] public IEnumerable<(int? Id, string Label)> FolderOptions { get; set; } = Array.Empty<(int?, string)>();
-    [Parameter] public string? ErrorMessage { get; set; }
-    [Parameter] public EventCallback<(int FolderId, int? NewParentId)> OnSubmit { get; set; }
 
-    private bool _wasVisible;
     private int? _targetParentId;
 
-    protected override void OnParametersSet()
+    private void Submit() => Context.Close(new MoveFolderResult(_targetParentId));
-    {
-        if (IsVisible && !_wasVisible)
-        {
-            _targetParentId = null;
-        }
-        _wasVisible = IsVisible;
-    }
 
-    private async Task Close()
+    /// <summary>
-    {
+    /// Result of the move-folder picker. A reference type so a non-null close is
-        await IsVisibleChanged.InvokeAsync(false);
+    /// distinguishable from a cancel even when the picked parent is null (Root):
-    }
+    /// ShowAsync resolves to this record on Move and to <c>null</c> on Cancel.
-
+    /// </summary>
-    private async Task Submit()
+    /// <param name="NewParentId">The chosen parent folder id, or <c>null</c> for Root.</param>
-    {
+    public sealed record MoveFolderResult(int? NewParentId);
-        await OnSubmit.InvokeAsync((FolderId, _targetParentId));
-    }
 }

src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Shared/MoveTemplateDialog.razor

@@ -1,59 +1,36 @@
-@if (IsVisible)
+@*
-{
+    T33b: body component for the "Move template" dialog hosted by
-    <div class="modal show d-block" tabindex="-1" style="background: rgba(0,0,0,0.4);">
+    IDialogService.ShowAsync. Renders ONLY the picker + action buttons inside the
-        <div class="modal-dialog">
+    host's .modal-body; the host owns the backdrop, header, and focus trap. Closes
-            <div class="modal-content">
+    with a MoveTemplateResult carrying the picked folder id (null = Root) — a result
-                <div class="modal-header">
+    record so Close(null) for the Root choice stays distinguishable from a Cancel.
-                    <h6 class="modal-title">Move '@TemplateName' to…</h6>
+*@
-                    <button type="button" class="btn-close" @onclick="Close"></button>
-                </div>
-                <div class="modal-body">
 <select class="form-select form-select-sm" @bind="_targetFolderId">
     @foreach (var opt in FolderOptions)
     {
         <option value="@opt.Id">@opt.Label</option>
     }
 </select>
-                    @if (!string.IsNullOrEmpty(ErrorMessage)) { <div class="text-danger small mt-1">@ErrorMessage</div> }
+
-                </div>
+<div class="modal-footer px-0 pb-0 mt-3">
-                <div class="modal-footer">
+    <button class="btn btn-outline-secondary btn-sm" @onclick="() => Context.Cancel()">Cancel</button>
-                    <button class="btn btn-outline-secondary btn-sm" @onclick="Close">Cancel</button>
     <button class="btn btn-primary btn-sm" @onclick="Submit">Move</button>
 </div>
-            </div>
-        </div>
-    </div>
-}
 
 @code {
-    [Parameter] public bool IsVisible { get; set; }
+    /// <summary>Host-supplied context used to close (with the picked folder id) or cancel.</summary>
-    [Parameter] public EventCallback<bool> IsVisibleChanged { get; set; }
+    [Parameter] public DialogContext<MoveTemplateResult> Context { get; set; } = default!;
-    [Parameter] public int TemplateId { get; set; }
-    [Parameter] public string TemplateName { get; set; } = string.Empty;
     [Parameter] public IEnumerable<(int? Id, string Label)> FolderOptions { get; set; } = Array.Empty<(int?, string)>();
-    [Parameter] public string? ErrorMessage { get; set; }
-    [Parameter] public EventCallback<(int TemplateId, int? NewFolderId)> OnSubmit { get; set; }
 
-    private bool _wasVisible;
     private int? _targetFolderId;
 
-    protected override void OnParametersSet()
+    private void Submit() => Context.Close(new MoveTemplateResult(_targetFolderId));
-    {
-        // Reset internal state on transition from hidden -> visible.
-        if (IsVisible && !_wasVisible)
-        {
-            _targetFolderId = null;
-        }
-        _wasVisible = IsVisible;
-    }
 
-    private async Task Close()
+    /// <summary>
-    {
+    /// Result of the move-template picker. A reference type so a non-null close is
-        await IsVisibleChanged.InvokeAsync(false);
+    /// distinguishable from a cancel even when the picked folder is null (Root):
-    }
+    /// ShowAsync resolves to this record on Move and to <c>null</c> on Cancel.
-
+    /// </summary>
-    private async Task Submit()
+    /// <param name="NewFolderId">The chosen destination folder id, or <c>null</c> for Root.</param>
-    {
+    public sealed record MoveTemplateResult(int? NewFolderId);
-        await OnSubmit.InvokeAsync((TemplateId, _targetFolderId));
-    }
 }

src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Shared/RenameFolderDialog.razor

@@ -1,53 +1,31 @@
-@if (IsVisible)
+@*
-{
+    T33b: body component for the "Rename folder" dialog hosted by
-    <div class="modal show d-block" tabindex="-1" style="background: rgba(0,0,0,0.4);">
+    IDialogService.ShowAsync. Renders ONLY the input + action buttons inside the
-        <div class="modal-dialog modal-sm">
+    host's .modal-body; the host owns the backdrop, header, and focus trap. Closes
-            <div class="modal-content">
+    with the trimmed new name (string); Cancel resolves to null. Save is disabled
-                <div class="modal-header">
+    while the field is blank (client-side guard); server-side rename failures are
-                    <h6 class="modal-title">Rename Folder</h6>
+    surfaced by the parent via a toast.
-                    <button type="button" class="btn-close" @onclick="Close"></button>
+*@
+<input class="form-control form-control-sm" @bind="_name" @bind:event="oninput" />
+
+<div class="modal-footer px-0 pb-0 mt-3">
+    <button class="btn btn-outline-secondary btn-sm" @onclick="() => Context.Cancel()">Cancel</button>
+    <button class="btn btn-primary btn-sm" @onclick="Submit"
+            disabled="@string.IsNullOrWhiteSpace(_name)">Save</button>
 </div>
-                <div class="modal-body">
-                    <input class="form-control form-control-sm" @bind="_name" />
-                    @if (!string.IsNullOrEmpty(ErrorMessage)) { <div class="text-danger small mt-1">@ErrorMessage</div> }
-                </div>
-                <div class="modal-footer">
-                    <button class="btn btn-outline-secondary btn-sm" @onclick="Close">Cancel</button>
-                    <button class="btn btn-primary btn-sm" @onclick="Submit">Save</button>
-                </div>
-            </div>
-        </div>
-    </div>
-}
 
 @code {
-    [Parameter] public bool IsVisible { get; set; }
+    /// <summary>Host-supplied context used to close (with the trimmed name) or cancel.</summary>
-    [Parameter] public EventCallback<bool> IsVisibleChanged { get; set; }
+    [Parameter] public DialogContext<string> Context { get; set; } = default!;
-    [Parameter] public int FolderId { get; set; }
     [Parameter] public string InitialName { get; set; } = string.Empty;
-    [Parameter] public string? ErrorMessage { get; set; }
-    [Parameter] public EventCallback<(int FolderId, string NewName)> OnSubmit { get; set; }
 
-    private bool _wasVisible;
     private string _name = string.Empty;
 
-    protected override void OnParametersSet()
+    protected override void OnInitialized() => _name = InitialName;
-    {
-        // Reset internal state on transition from hidden -> visible.
-        if (IsVisible && !_wasVisible)
-        {
-            _name = InitialName;
-        }
-        _wasVisible = IsVisible;
-    }
 
-    private async Task Close()
+    private void Submit()
     {
-        await IsVisibleChanged.InvokeAsync(false);
+        if (string.IsNullOrWhiteSpace(_name)) return;
-    }
+        Context.Close(_name.Trim());
-
-    private async Task Submit()
-    {
-        await OnSubmit.InvokeAsync((FolderId, _name.Trim()));
     }
 }

tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/DataConnectionsPageTests.cs

@@ -250,13 +250,21 @@ public class DataConnectionsPageTests : BunitContext
             },
             connections: new[] { new DataConnection("PLC-1", "OpcUa", 1) { Id = 100 } });
 
+        // T33b: the move dialog is now opened via IDialogService.ShowAsync and rendered
+        // by the shared DialogHost (which lives in MainLayout in production). Render a
+        // host in the same DI scope so the dialog the page opens is displayed; the host's
+        // focus-trap JS interop runs as no-ops under loose mode.
+        JSInterop.Mode = JSRuntimeMode.Loose;
+        var host = Render<DialogHost>();
+
         var cut = Render<DataConnectionsPage>();
         FindToggleForLabel(cut, "Plant-A")!.Click();
 
         cut.FindAll("button").First(b => b.TextContent.Contains("Move to Site")).Click();
+        host.Render();
 
         // The dialog renders with a site picker; the current site is excluded.
-        var dialog = cut.Find(".modal.show");
+        var dialog = host.Find(".modal.show");
         var optionLabels = dialog.QuerySelectorAll("select option")
             .Select(o => o.TextContent).ToList();
         Assert.Contains(optionLabels, l => l.Contains("Plant-B"));

tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/Shared/MoveDataConnectionDialogTests.cs

@@ -8,65 +8,87 @@ using ZB.MOM.WW.ScadaBridge.CentralUI.Services;
 namespace ZB.MOM.WW.ScadaBridge.CentralUI.Tests.Shared;
 
 /// <summary>
-/// bUnit tests for the <see cref="MoveDataConnectionDialog"/> (M9-T24b). The dialog
+/// bUnit tests for the <see cref="MoveDataConnectionDialog"/> body component
-/// surfaces a target-site picker (excluding the connection's current site) and, on
+/// (M9-T24b, migrated to the DialogService.ShowAsync host in T33b). The dialog is
-/// confirm, dispatches a <c>MoveDataConnectionCommand</c> through the management
+/// now opened through <see cref="IDialogService.ShowAsync{TResult}"/>: a single
-/// path via <see cref="IDataConnectionMoveService"/> — the SAME guard-running seam
+/// <c>DialogHost</c> owns the backdrop/header/focus-trap, and the body renders only
-/// the server uses. A guard error must be shown inline and the dialog must stay open;
+/// the target-site picker (excluding the connection's current site) plus its own
-/// a success must close the dialog and raise the refresh signal.
+/// action buttons. On confirm the body dispatches a <c>MoveDataConnectionCommand</c>
+/// through the management path via <see cref="IDataConnectionMoveService"/> — the
+/// SAME guard-running seam the server uses. A guard error must be shown inline and
+/// the dialog must stay open (the awaited ShowAsync task must NOT complete); a
+/// success must close the dialog and resolve the task with <c>true</c> so the page
+/// reloads the tree.
 ///
-/// The service is substituted so the tests capture the dispatched (connectionId,
+/// The tests render a real <see cref="DialogService"/> behind a live
-/// targetSiteId) and simulate both a success and a guard-error response without a
+/// <c>DialogHost</c> and open the body via <c>ShowAsync&lt;bool&gt;</c> so the
-/// real ManagementActor in scope.
+/// host-driven flow is exercised end to end. The move service is substituted so the
+/// tests capture the dispatched (connectionId, targetSiteId) and simulate both a
+/// success and a guard-error response without a real ManagementActor in scope. bUnit
+/// cannot run real JS interop, so the host's <c>sbDialog.*</c> focus calls run in
+/// <see cref="JSRuntimeMode.Loose"/> mode where they become no-ops.
 /// </summary>
 public class MoveDataConnectionDialogTests : BunitContext
 {
     private readonly IDataConnectionMoveService _service = Substitute.For<IDataConnectionMoveService>();
+    private readonly DialogService _dialog = new();
 
     public MoveDataConnectionDialogTests()
     {
         Services.AddSingleton(_service);
+        // Register the concrete service as the interface so DialogHost (which injects
+        // IDialogService and casts to DialogService) resolves the same instance the
+        // test drives.
+        Services.AddSingleton<IDialogService>(_dialog);
+        JSInterop.Mode = JSRuntimeMode.Loose;
     }
 
-    private IRenderedComponent<MoveDataConnectionDialog> RenderDialog(
+    /// <summary>
+    /// Renders a live <c>DialogHost</c> and opens the move dialog via
+    /// <c>ShowAsync&lt;bool&gt;</c>, returning the rendered host and the pending task
+    /// the page would await.
+    /// </summary>
+    private (IRenderedComponent<DialogHost> Host, Task<bool> Pending) OpenDialog(
+        IRenderedComponent<DialogHost> host,
         int connectionId = 100,
         string connectionName = "PLC-1",
-        bool visible = true,
+        IEnumerable<(int Id, string Label)>? siteOptions = null)
-        IEnumerable<(int Id, string Label)>? siteOptions = null,
-        EventCallback? onMoved = null,
-        EventCallback<bool>? visibleChanged = null)
     {
         siteOptions ??= new[] { (2, "Plant-B"), (3, "Plant-C") };
-        return Render<MoveDataConnectionDialog>(p => p
+        Task<bool> pending = null!;
-            .Add(d => d.IsVisible, visible)
+        host.InvokeAsync(() =>
-            .Add(d => d.ConnectionId, connectionId)
+        {
-            .Add(d => d.ConnectionName, connectionName)
+            pending = _dialog.ShowAsync<bool>(
-            .Add(d => d.SiteOptions, siteOptions)
+                $"Move '{connectionName}' to site…",
-            .Add(d => d.OnMoved, onMoved ?? default)
+                ctx => builder =>
-            .Add(d => d.IsVisibleChanged, visibleChanged ?? default));
+                {
+                    builder.OpenComponent<MoveDataConnectionDialog>(0);
+                    builder.AddAttribute(1, nameof(MoveDataConnectionDialog.Context), ctx);
+                    builder.AddAttribute(2, nameof(MoveDataConnectionDialog.ConnectionId), connectionId);
+                    builder.AddAttribute(3, nameof(MoveDataConnectionDialog.ConnectionName), connectionName);
+                    builder.AddAttribute(4, nameof(MoveDataConnectionDialog.SiteOptions), siteOptions);
+                    builder.CloseComponent();
+                });
+        }).GetAwaiter().GetResult();
+        host.Render();
+        return (host, pending);
     }
 
     [Fact]
-    public void Visible_RendersTargetSitePicker_WithSuppliedOptions()
+    public void ShownViaHost_RendersTargetSitePicker_WithSuppliedOptions()
     {
-        // (a) The dialog opens with a site picker whose options are exactly the
+        // (a) When opened via ShowAsync, the body renders a site picker whose options
-        // supplied target sites (the page excludes the connection's current site).
+        // are exactly the supplied target sites (the page excludes the current site),
-        var cut = RenderDialog(siteOptions: new[] { (2, "Plant-B"), (3, "Plant-C") });
+        // and the connection name appears in the host header title.
+        var host = Render<DialogHost>();
+        var (cut, _) = OpenDialog(host, siteOptions: new[] { (2, "Plant-B"), (3, "Plant-C") });
 
         var options = cut.FindAll("select option");
         Assert.Contains(options, o => o.TextContent.Contains("Plant-B"));
         Assert.Contains(options, o => o.TextContent.Contains("Plant-C"));
-        // Picker reflects the connection name in the header.
         Assert.Contains("PLC-1", cut.Markup);
     }
 
-    [Fact]
-    public void Hidden_RendersNothing()
-    {
-        var cut = RenderDialog(visible: false);
-        Assert.Empty(cut.Markup.Trim());
-    }
-
     [Fact]
     public void Confirm_DispatchesMoveCommand_WithConnectionAndTargetSiteIds()
     {
@@ -75,7 +97,8 @@ public class MoveDataConnectionDialogTests : BunitContext
         _service.MoveAsync(Arg.Any<int>(), Arg.Any<int>(), Arg.Any<CancellationToken>())
             .Returns(Task.FromResult(DataConnectionMoveResult.Ok()));
 
-        var cut = RenderDialog(connectionId: 100, siteOptions: new[] { (2, "Plant-B"), (3, "Plant-C") });
+        var host = Render<DialogHost>();
+        var (cut, _) = OpenDialog(host, connectionId: 100, siteOptions: new[] { (2, "Plant-B"), (3, "Plant-C") });
 
         // Pick Plant-C (id 3) and confirm.
         cut.Find("select").Change("3");
@@ -87,47 +110,41 @@ public class MoveDataConnectionDialogTests : BunitContext
     [Fact]
     public void GuardError_IsShownInline_AndDialogStaysOpen()
     {
-        // (c) A guard-error response is rendered inline and the dialog does NOT close
+        // (c) A guard-error response is rendered inline and the dialog does NOT close:
-        // (IsVisibleChanged is not raised with false; OnMoved is not raised).
+        // the awaited ShowAsync task stays incomplete (no result resolved).
         const string guardError =
             "Cannot move data connection 'PLC-1' (ID 100): it is referenced by 1 instance binding(s).";
         _service.MoveAsync(Arg.Any<int>(), Arg.Any<int>(), Arg.Any<CancellationToken>())
             .Returns(Task.FromResult(DataConnectionMoveResult.Fail(guardError)));
 
-        var closed = false;
+        var host = Render<DialogHost>();
-        var moved = false;
+        var (cut, pending) = OpenDialog(host, connectionId: 100, siteOptions: new[] { (2, "Plant-B") });
-        var cut = RenderDialog(
-            connectionId: 100,
-            siteOptions: new[] { (2, "Plant-B") },
-            onMoved: EventCallback.Factory.Create(this, () => moved = true),
-            visibleChanged: EventCallback.Factory.Create<bool>(this, v => { if (!v) closed = true; }));
 
         cut.Find("select").Change("2");
         cut.FindAll("button").First(b => b.TextContent.Contains("Move")).Click();
 
         Assert.Contains(guardError, cut.Markup);
-        Assert.False(closed, "Dialog must stay open on a guard error.");
+        Assert.False(pending.IsCompleted, "Dialog must stay open on a guard error.");
-        Assert.False(moved, "OnMoved must not fire on a guard error.");
+        // The body is still rendered inside the host (not torn down).
+        Assert.NotNull(cut.Find("[data-test='move-connection-error']"));
     }
 
     [Fact]
-    public void Success_ClosesDialog_AndRaisesRefreshSignal()
+    public async Task Success_ClosesDialog_AndResolvesTrue()
     {
+        // (d) A successful move closes the dialog and resolves the awaited task with
+        // true so the page reloads the tree.
         _service.MoveAsync(Arg.Any<int>(), Arg.Any<int>(), Arg.Any<CancellationToken>())
             .Returns(Task.FromResult(DataConnectionMoveResult.Ok()));
 
-        var closed = false;
+        var host = Render<DialogHost>();
-        var moved = false;
+        var (cut, pending) = OpenDialog(host, connectionId: 100, siteOptions: new[] { (2, "Plant-B") });
-        var cut = RenderDialog(
-            connectionId: 100,
-            siteOptions: new[] { (2, "Plant-B") },
-            onMoved: EventCallback.Factory.Create(this, () => moved = true),
-            visibleChanged: EventCallback.Factory.Create<bool>(this, v => { if (!v) closed = true; }));
 
         cut.Find("select").Change("2");
         cut.FindAll("button").First(b => b.TextContent.Contains("Move")).Click();
 
-        Assert.True(closed, "Dialog must close on success.");
+        var completed = await Task.WhenAny(pending, Task.Delay(TimeSpan.FromSeconds(2)));
-        Assert.True(moved, "OnMoved must fire on success to refresh the tree.");
+        Assert.Same(pending, completed);
+        Assert.True(await pending, "Dialog must resolve true on success so the page refreshes.");
     }
 }