refactor(ui/shared): introduce IDialogService + DialogHost

Eliminates the per-page <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" /> boilerplate. Pages now inject IDialogService and call ConfirmAsync(title, message, danger: true) programmatically. New scoped service holds a single active dialog (throws on nested calls), with a global DialogHost mounted once in MainLayout that renders the modal markup, owns body scroll-lock via Bootstrap's modal-open class, traps focus on the modal element, and handles Escape-to-cancel. Same service also exposes PromptAsync, used to replace the bespoke NewFolderDialog. Both ConfirmDialog and NewFolderDialog components are deleted — their callers (~13 pages across Admin/Design/Deployment /Monitoring) now go through the service. DiffDialog stays as-is — different use case (before/after content). bUnit tests in TopologyPageTests, DataConnectionsPageTests, and TemplatesPageTests register IDialogService in their service collection. Also: a top-of-file Razor comment on Sites.razor pointing future implementers at it as the reference list-page pattern.
2026-05-12 03:57:37 -04:00
parent e21791adb0
commit 8038aa7cb5
21 changed files with 351 additions and 260 deletions
--- a/src/ScadaLink.CentralUI/Components/Layout/MainLayout.razor
+++ b/src/ScadaLink.CentralUI/Components/Layout/MainLayout.razor
@@ -21,3 +21,7 @@
        @Body
    </main>
 </div>
+
+@* Global host for IDialogService. One instance per layout renders all confirm/prompt
+   dialogs raised via IDialogService.ConfirmAsync / PromptAsync. *@
+<DialogHost />
--- a/src/ScadaLink.CentralUI/Components/Pages/Admin/ApiKeys.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Admin/ApiKeys.razor
@@ -5,6 +5,7 @@
@attribute [Authorize(Policy = AuthorizationPolicies.RequireAdmin)]
@inject IInboundApiRepository InboundApiRepository
@inject NavigationManager NavigationManager
+@inject IDialogService Dialog

 <div class="container-fluid mt-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
@@ -13,7 +14,6 @@
    </div>

    <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />

    @if (_loading)
    {
@@ -104,7 +104,6 @@
    private string _search = string.Empty;

    private ToastNotification _toast = default!;
-    private ConfirmDialog _confirmDialog = default!;

    private IEnumerable<ApiKey> FilteredKeys =>
        string.IsNullOrWhiteSpace(_search)
@@ -155,8 +154,10 @@

    private async Task DeleteKey(ApiKey key)
    {
-        var confirmed = await _confirmDialog.ShowAsync(
-            $"Delete API key '{key.Name}'? This cannot be undone.", "Delete API Key");
+        var confirmed = await Dialog.ConfirmAsync(
+            "Delete API Key",
+            $"Delete API key '{key.Name}'? This cannot be undone.",
+            danger: true);
        if (!confirmed) return;

        try
--- a/src/ScadaLink.CentralUI/Components/Pages/Admin/DataConnections.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Admin/DataConnections.razor
@@ -6,6 +6,7 @@
@attribute [Authorize(Policy = AuthorizationPolicies.RequireAdmin)]
@inject ISiteRepository SiteRepository
@inject NavigationManager NavigationManager
+@inject IDialogService Dialog

 <div class="container-fluid mt-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
@@ -36,7 +37,6 @@
    </div>

    <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />

    @if (_loading)
    {
@@ -183,7 +183,6 @@
    private HashSet<string> _matchKeys = new();

    private ToastNotification _toast = default!;
-    private ConfirmDialog _confirmDialog = default!;

    private bool HasSiteSelected => ResolveSelectedSiteId() != null;

@@ -293,8 +292,10 @@

    private async Task DeleteConnection(DataConnection conn)
    {
-        var confirmed = await _confirmDialog.ShowAsync(
-            $"Delete data connection '{conn.Name}'?", "Delete Connection");
+        var confirmed = await Dialog.ConfirmAsync(
+            "Delete Connection",
+            $"Delete data connection '{conn.Name}'?",
+            danger: true);
        if (!confirmed) return;

        try
--- a/src/ScadaLink.CentralUI/Components/Pages/Admin/LdapMappingForm.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Admin/LdapMappingForm.razor
@@ -8,6 +8,7 @@
@inject ISecurityRepository SecurityRepository
@inject ISiteRepository SiteRepository
@inject NavigationManager NavigationManager
+@inject IDialogService Dialog

 <div class="container-fluid mt-3">
    <div class="mb-3">
@@ -18,8 +19,6 @@
        </button>
    </div>

-    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
-
    <div class="card mb-3">
        <div class="card-body">
            <h5 class="card-title">Mapping</h5>
@@ -120,8 +119,6 @@
    private int _scopeRuleSiteId;
    private string? _scopeRuleError;

-    private ConfirmDialog _confirmDialog = default!;
-
    protected override async Task OnInitializedAsync()
    {
        _sites = (await SiteRepository.GetAllSitesAsync()).ToList();
@@ -209,9 +206,10 @@
    private async Task DeleteScopeRule(SiteScopeRule rule)
    {
        var siteName = _siteLookup.GetValueOrDefault(rule.SiteId)?.Name ?? $"Site {rule.SiteId}";
-        var confirmed = await _confirmDialog.ShowAsync(
+        var confirmed = await Dialog.ConfirmAsync(
+            "Remove Scope Rule",
            $"Remove scope rule for '{siteName}'?",
-            "Remove Scope Rule");
+            danger: true);
        if (!confirmed) return;

        try
--- a/src/ScadaLink.CentralUI/Components/Pages/Admin/Sites.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Admin/Sites.razor
@@ -1,3 +1,4 @@
+@* Reference pattern for list pages: card grid (col-lg-6) + flex header + search filter + kebab dropdown + Bootstrap collapse for noisy detail + @key on iterated cards + "No X match the filter." inline + empty-state CTA. Mirror this when building new list pages. *@
@page "/admin/sites"
@using ScadaLink.Security
@using ScadaLink.Commons.Entities.Sites
@@ -11,6 +12,7 @@
@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavigationManager
@inject IJSRuntime JS
+@inject IDialogService Dialog

 <div class="container-fluid mt-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
@@ -41,7 +43,6 @@
    </div>

    <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />

    @if (_loading)
    {
@@ -173,7 +174,6 @@
    private string _search = "";

    private ToastNotification _toast = default!;
-    private ConfirmDialog _confirmDialog = default!;

    private IEnumerable<Site> FilteredSites =>
        string.IsNullOrWhiteSpace(_search)
@@ -213,9 +213,10 @@

    private async Task DeleteSite(Site site)
    {
-        var confirmed = await _confirmDialog.ShowAsync(
+        var confirmed = await Dialog.ConfirmAsync(
+            "Delete Site",
            $"Delete site '{site.Name}' ({site.SiteIdentifier})? This cannot be undone.",
-            "Delete Site");
+            danger: true);

        if (!confirmed) return;

--- a/src/ScadaLink.CentralUI/Components/Pages/Deployment/Topology.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Deployment/Topology.razor
@@ -19,11 +19,11 @@
@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavigationManager
@inject IJSRuntime JSRuntime
+@inject IDialogService Dialog
@implements IDisposable

 <div class="container-fluid mt-3">
    <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />

    <CreateAreaDialog @bind-IsVisible="_showCreateAreaDialog"
                      RequireSitePicker="_createAreaRequireSitePicker"
@@ -127,7 +127,6 @@
    private string _searchText = string.Empty;

    private ToastNotification _toast = default!;
-    private ConfirmDialog _confirmDialog = default!;
    private DiffDialog _diffDialog = default!;

    // ---- Live updates ----
@@ -669,9 +668,10 @@
    // ---- Area & instance deletion ----
    private async Task DeleteArea(TopoNode node)
    {
-        var confirmed = await _confirmDialog.ShowAsync(
+        var confirmed = await Dialog.ConfirmAsync(
+            "Delete Area",
            $"Delete area '{node.Label}'? This will fail if it has sub-areas or assigned instances.",
-            "Delete Area");
+            danger: true);
        if (!confirmed) return;

        _actionInProgress = true;
@@ -691,9 +691,10 @@

    private async Task DeleteInstance(Instance inst)
    {
-        var confirmed = await _confirmDialog.ShowAsync(
+        var confirmed = await Dialog.ConfirmAsync(
+            "Delete Instance",
            $"Delete instance '{inst.UniqueName}'? This will remove it from the site. Store-and-forward messages will NOT be cleared.",
-            "Delete Instance");
+            danger: true);
        if (!confirmed) return;

        _actionInProgress = true;
@@ -745,9 +746,10 @@

    private async Task DisableInstance(Instance inst)
    {
-        var confirmed = await _confirmDialog.ShowAsync(
+        var confirmed = await Dialog.ConfirmAsync(
+            "Disable Instance",
            $"Disable instance '{inst.UniqueName}'? The instance actor will be stopped.",
-            "Disable Instance");
+            danger: true);
        if (!confirmed) return;

        _actionInProgress = true;
--- a/src/ScadaLink.CentralUI/Components/Pages/Design/ExternalSystems.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Design/ExternalSystems.razor
@@ -9,6 +9,7 @@
@inject INotificationRepository NotificationRepository
@inject IInboundApiRepository InboundApiRepository
@inject NavigationManager NavigationManager
+@inject IDialogService Dialog

 <div class="container-fluid mt-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
@@ -18,7 +19,6 @@
    </div>

    <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />

    @if (_loading)
    {
@@ -148,7 +148,6 @@
            : _apiMethods.Where(m => m.Name?.Contains(_apiMethodSearch, StringComparison.OrdinalIgnoreCase) ?? false);

    private ToastNotification _toast = default!;
-    private ConfirmDialog _confirmDialog = default!;

    protected override async Task OnInitializedAsync()
    {
@@ -246,7 +245,7 @@

    private async Task DeleteExtSys(ExternalSystemDefinition es)
    {
-        if (!await _confirmDialog.ShowAsync($"Delete '{es.Name}'?", "Delete External System")) return;
+        if (!await Dialog.ConfirmAsync("Delete External System", $"Delete '{es.Name}'?", danger: true)) return;
        try { await ExternalSystemRepository.DeleteExternalSystemAsync(es.Id); await ExternalSystemRepository.SaveChangesAsync(); _toast.ShowSuccess("Deleted."); await LoadAllAsync(); }
        catch (Exception ex) { _toast.ShowError(ex.Message); }
    }
@@ -318,7 +317,7 @@

    private async Task DeleteDbConn(DatabaseConnectionDefinition dc)
    {
-        if (!await _confirmDialog.ShowAsync($"Delete '{dc.Name}'?", "Delete DB Connection")) return;
+        if (!await Dialog.ConfirmAsync("Delete DB Connection", $"Delete '{dc.Name}'?", danger: true)) return;
        try { await ExternalSystemRepository.DeleteDatabaseConnectionAsync(dc.Id); await ExternalSystemRepository.SaveChangesAsync(); _toast.ShowSuccess("Deleted."); await LoadAllAsync(); }
        catch (Exception ex) { _toast.ShowError(ex.Message); }
    }
@@ -399,7 +398,7 @@

    private async Task DeleteNotifList(NotificationList list)
    {
-        if (!await _confirmDialog.ShowAsync($"Delete notification list '{list.Name}'?", "Delete")) return;
+        if (!await Dialog.ConfirmAsync("Delete", $"Delete notification list '{list.Name}'?", danger: true)) return;
        try { await NotificationRepository.DeleteNotificationListAsync(list.Id); await NotificationRepository.SaveChangesAsync(); _toast.ShowSuccess("Deleted."); await LoadAllAsync(); }
        catch (Exception ex) { _toast.ShowError(ex.Message); }
    }
@@ -474,7 +473,7 @@

    private async Task DeleteApiMethod(ApiMethod m)
    {
-        if (!await _confirmDialog.ShowAsync($"Delete API method '{m.Name}'?", "Delete")) return;
+        if (!await Dialog.ConfirmAsync("Delete", $"Delete API method '{m.Name}'?", danger: true)) return;
        try { await InboundApiRepository.DeleteApiMethodAsync(m.Id); await InboundApiRepository.SaveChangesAsync(); _toast.ShowSuccess("Deleted."); await LoadAllAsync(); }
        catch (Exception ex) { _toast.ShowError(ex.Message); }
    }
--- a/src/ScadaLink.CentralUI/Components/Pages/Design/SharedScripts.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Design/SharedScripts.razor
@@ -8,6 +8,7 @@
@inject SharedScriptService SharedScriptService
@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavigationManager
+@inject IDialogService Dialog

 <div class="container-fluid mt-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
@@ -16,7 +17,6 @@
    </div>

    <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />

    @if (_loading)
    {
@@ -117,7 +117,6 @@
    private string _search = "";

    private ToastNotification _toast = default!;
-    private ConfirmDialog _confirmDialog = default!;

    private IEnumerable<SharedScript> FilteredScripts =>
        string.IsNullOrWhiteSpace(_search)
@@ -148,8 +147,10 @@

    private async Task DeleteScript(SharedScript script)
    {
-        var confirmed = await _confirmDialog.ShowAsync(
-            $"Delete shared script '{script.Name}'?", "Delete Shared Script");
+        var confirmed = await Dialog.ConfirmAsync(
+            "Delete Shared Script",
+            $"Delete shared script '{script.Name}'?",
+            danger: true);
        if (!confirmed) return;

        try
--- a/src/ScadaLink.CentralUI/Components/Pages/Design/SmtpConfiguration.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Design/SmtpConfiguration.razor
@@ -12,7 +12,6 @@
    </div>

    <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />

    @if (_loading)
    {
@@ -128,7 +127,6 @@
    private string? _formError;

    private ToastNotification _toast = default!;
-    private ConfirmDialog _confirmDialog = default!;

    protected override async Task OnInitializedAsync()
    {
--- a/src/ScadaLink.CentralUI/Components/Pages/Design/TemplateEdit.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Design/TemplateEdit.razor
@@ -11,10 +11,10 @@
@inject TemplateService TemplateService
@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavigationManager
+@inject IDialogService Dialog

 <div class="container-fluid mt-3">
    <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />

    <div class="mb-3">
        <button class="btn btn-outline-secondary btn-sm"
@@ -94,7 +94,6 @@
    private string? _compFormError;

    private ToastNotification _toast = default!;
-    private ConfirmDialog _confirmDialog = default!;

    protected override async Task OnParametersSetAsync()
    {
@@ -295,9 +294,10 @@
    private async Task DeleteTemplate()
    {
        if (_selectedTemplate == null) return;
-        var confirmed = await _confirmDialog.ShowAsync(
+        var confirmed = await Dialog.ConfirmAsync(
+            "Delete Template",
            $"Delete template '{_selectedTemplate.Name}'? This will fail if instances or child templates reference it.",
-            "Delete Template");
+            danger: true);
        if (!confirmed) return;

        try
@@ -816,7 +816,7 @@

    private async Task DeleteAttribute(TemplateAttribute attr)
    {
-        var confirmed = await _confirmDialog.ShowAsync($"Delete attribute '{attr.Name}'?", "Delete Attribute");
+        var confirmed = await Dialog.ConfirmAsync("Delete Attribute", $"Delete attribute '{attr.Name}'?", danger: true);
        if (!confirmed) return;
        var user = await GetCurrentUserAsync();
        var result = await TemplateService.DeleteAttributeAsync(attr.Id, user);
@@ -861,7 +861,7 @@

    private async Task DeleteAlarm(TemplateAlarm alarm)
    {
-        var confirmed = await _confirmDialog.ShowAsync($"Delete alarm '{alarm.Name}'?", "Delete Alarm");
+        var confirmed = await Dialog.ConfirmAsync("Delete Alarm", $"Delete alarm '{alarm.Name}'?", danger: true);
        if (!confirmed) return;
        var user = await GetCurrentUserAsync();
        var result = await TemplateService.DeleteAlarmAsync(alarm.Id, user);
@@ -903,7 +903,7 @@

    private async Task DeleteScript(TemplateScript script)
    {
-        var confirmed = await _confirmDialog.ShowAsync($"Delete script '{script.Name}'?", "Delete Script");
+        var confirmed = await Dialog.ConfirmAsync("Delete Script", $"Delete script '{script.Name}'?", danger: true);
        if (!confirmed) return;
        var user = await GetCurrentUserAsync();
        var result = await TemplateService.DeleteScriptAsync(script.Id, user);
@@ -939,7 +939,7 @@

    private async Task DeleteComposition(TemplateComposition comp)
    {
-        var confirmed = await _confirmDialog.ShowAsync($"Remove composition '{comp.InstanceName}'?", "Delete Composition");
+        var confirmed = await Dialog.ConfirmAsync("Delete Composition", $"Remove composition '{comp.InstanceName}'?", danger: true);
        if (!confirmed) return;
        var user = await GetCurrentUserAsync();
        var result = await TemplateService.DeleteCompositionAsync(comp.Id, user);
--- a/src/ScadaLink.CentralUI/Components/Pages/Design/Templates.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Design/Templates.razor
@@ -10,10 +10,10 @@
@inject TemplateFolderService TemplateFolderService
@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavigationManager
+@inject IDialogService Dialog

 <div class="container-fluid mt-3">
    <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />

    <RenameFolderDialog @bind-IsVisible="_showRenameFolderDialog"
                        FolderId="_renameFolderId"
@@ -21,11 +21,6 @@
                        ErrorMessage="@_renameFolderError"
                        OnSubmit="SubmitRenameFolder" />

-    <NewFolderDialog @bind-IsVisible="_showNewFolderDialog"
-                     ParentFolderId="_newFolderParentId"
-                     ErrorMessage="@_newFolderError"
-                     OnSubmit="SubmitNewFolder" />
-
    <MoveTemplateDialog @bind-IsVisible="_showMoveTemplateDialog"
                        TemplateId="_moveTemplateId"
                        TemplateName="@_moveTemplateName"
@@ -112,7 +107,6 @@
    private string? _errorMessage;

    private ToastNotification _toast = default!;
-    private ConfirmDialog _confirmDialog = default!;

    protected override async Task OnInitializedAsync()
    {
@@ -345,32 +339,24 @@
        }
    };

-    // New-folder dialog state
-    private bool _showNewFolderDialog;
-    private int? _newFolderParentId;
-    private string? _newFolderError;
-
-    private void OpenNewFolderDialog(int? parentFolderId)
+    // New-folder dialog: replaced the dedicated <NewFolderDialog> component with
+    // IDialogService.PromptAsync. Validation failures surface via toast instead of
+    // inline error text — the prompt UI doesn't have a slot for an error message.
+    private async Task OpenNewFolderDialog(int? parentFolderId)
    {
-        _newFolderParentId = parentFolderId;
-        _newFolderError = null;
-        _showNewFolderDialog = true;
-    }
+        var name = await Dialog.PromptAsync("New folder", "Folder name", placeholder: "Folder name");
+        if (string.IsNullOrWhiteSpace(name)) return;

-    private async Task SubmitNewFolder((int? ParentFolderId, string Name) req)
-    {
-        _newFolderError = null;
        var user = await GetCurrentUserAsync();
-        var result = await TemplateFolderService.CreateFolderAsync(req.Name, req.ParentFolderId, user);
+        var result = await TemplateFolderService.CreateFolderAsync(name.Trim(), parentFolderId, user);
        if (result.IsSuccess)
        {
-            _showNewFolderDialog = false;
            _toast.ShowSuccess($"Folder '{result.Value.Name}' created.");
            await LoadTemplatesAsync();
        }
        else
        {
-            _newFolderError = result.Error;
+            _toast.ShowError(result.Error);
        }
    }

@@ -497,7 +483,7 @@

    private async Task DeleteFolder(int folderId, string label)
    {
-        var confirmed = await _confirmDialog.ShowAsync($"Delete folder '{label}'?", "Delete Folder");
+        var confirmed = await Dialog.ConfirmAsync("Delete Folder", $"Delete folder '{label}'?", danger: true);
        if (!confirmed) return;

        var user = await GetCurrentUserAsync();
@@ -515,9 +501,10 @@

    private async Task DeleteTemplate(Template template)
    {
-        var confirmed = await _confirmDialog.ShowAsync(
+        var confirmed = await Dialog.ConfirmAsync(
+            "Delete Template",
            $"Delete template '{template.Name}'? This will fail if instances or child templates reference it.",
-            "Delete Template");
+            danger: true);
        if (!confirmed) return;

        try
--- a/src/ScadaLink.CentralUI/Components/Pages/Monitoring/ParkedMessages.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Monitoring/ParkedMessages.razor
@@ -7,12 +7,12 @@
@inject ISiteRepository SiteRepository
@inject CommunicationService CommunicationService
@inject IJSRuntime JS
+@inject IDialogService Dialog

 <div class="container-fluid mt-3">
    <h4 class="mb-3">Parked Messages</h4>

    <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />

    <div class="row mb-3 g-2 align-items-end">
        <div class="col-md-3">
@@ -153,7 +153,6 @@
    private string? _activeMessageId;
    private string? _activeAction;
    private ToastNotification _toast = default!;
-    private ConfirmDialog _confirmDialog = default!;
    private readonly HashSet<int> _expandedRows = new();

    protected override async Task OnInitializedAsync()
@@ -259,9 +258,10 @@

    private async Task DiscardMessage(ParkedMessageEntry msg)
    {
-        var confirmed = await _confirmDialog.ShowAsync(
+        var confirmed = await Dialog.ConfirmAsync(
+            "Discard Parked Message",
            $"Permanently discard message {msg.MessageId[..Math.Min(12, msg.MessageId.Length)]}? This cannot be undone.",
-            "Discard Parked Message");
+            danger: true);
        if (!confirmed) return;

        _actionInProgress = true;
--- a/src/ScadaLink.CentralUI/Components/Shared/ConfirmDialog.razor
+++ b/src/ScadaLink.CentralUI/Components/Shared/ConfirmDialog.razor
@@ -1,131 +0,0 @@
-@* Reusable confirmation dialog using Bootstrap modal.
-   z-index ladder: Toast container 1090 > this modal 1055 > this backdrop 1040. *@
-@inject IJSRuntime JS
-@implements IAsyncDisposable
-
-@if (_visible)
-{
-    <div class="modal-backdrop fade show"></div>
-    <div @ref="_modalRef"
-         class="modal fade show d-block"
-         tabindex="-1"
-         role="dialog"
-         @onkeydown="OnKeyDownAsync">
-        <div class="modal-dialog modal-dialog-centered" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">@Title</h5>
-                    <button type="button" class="btn-close" @onclick="Cancel"></button>
-                </div>
-                <div class="modal-body">
-                    <p>@Message</p>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-outline-secondary btn-sm" @onclick="Cancel">Cancel</button>
-                    <button type="button" class="btn @ConfirmButtonClass btn-sm" @onclick="Confirm">@ConfirmText</button>
-                </div>
-            </div>
-        </div>
-    </div>
-}
-
-@code {
-    private bool _visible;
-    private bool _bodyLocked;
-    private TaskCompletionSource<bool>? _tcs;
-    private ElementReference _modalRef;
-
-    [Parameter] public string Title { get; set; } = "Confirm";
-    [Parameter] public string Message { get; set; } = "Are you sure?";
-    [Parameter] public string ConfirmText { get; set; } = "Confirm";
-    [Parameter] public string ConfirmButtonClass { get; set; } = "btn-primary";
-
-    public Task<bool> ShowAsync(string? message = null, string? title = null)
-    {
-        if (message != null) Message = message;
-        if (title != null) Title = title;
-        _visible = true;
-        _tcs = new TaskCompletionSource<bool>();
-        StateHasChanged();
-        return _tcs.Task;
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (_visible && !_bodyLocked)
-        {
-            _bodyLocked = true;
-            await TryLockBodyAsync();
-            // Focus the modal so the @onkeydown handler receives Escape.
-            try { await _modalRef.FocusAsync(); }
-            catch { /* prerender or detached: ignore */ }
-        }
-    }
-
-    private async Task OnKeyDownAsync(KeyboardEventArgs e)
-    {
-        if (e.Key == "Escape")
-        {
-            await CancelAsync();
-        }
-    }
-
-    private void Confirm()
-    {
-        Close(true);
-    }
-
-    private void Cancel()
-    {
-        Close(false);
-    }
-
-    private Task CancelAsync()
-    {
-        Close(false);
-        return Task.CompletedTask;
-    }
-
-    private void Close(bool result)
-    {
-        _visible = false;
-        _ = TryUnlockBodyAsync();
-        _tcs?.TrySetResult(result);
-    }
-
-    private async Task TryLockBodyAsync()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("document.body.classList.add", "modal-open");
-        }
-        catch
-        {
-            // Prerendering has no JS runtime; log only.
-            try { await JS.InvokeVoidAsync("console.debug", "ConfirmDialog: JS interop unavailable for body lock."); }
-            catch { /* swallow */ }
-        }
-    }
-
-    private async Task TryUnlockBodyAsync()
-    {
-        _bodyLocked = false;
-        try
-        {
-            await JS.InvokeVoidAsync("document.body.classList.remove", "modal-open");
-        }
-        catch
-        {
-            try { await JS.InvokeVoidAsync("console.debug", "ConfirmDialog: JS interop unavailable for body unlock."); }
-            catch { /* swallow */ }
-        }
-    }
-
-    public async ValueTask DisposeAsync()
-    {
-        if (_bodyLocked)
-        {
-            await TryUnlockBodyAsync();
-        }
-    }
-}
--- a/src/ScadaLink.CentralUI/Components/Shared/DialogHost.razor
+++ b/src/ScadaLink.CentralUI/Components/Shared/DialogHost.razor
@@ -0,0 +1,136 @@
+@* Single global host component for IDialogService. Mounted once in MainLayout.
+   Listens to DialogService.OnChange and renders the current dialog state.
+   z-index ladder follows the same convention as ConfirmDialog/DiffDialog:
+   Toast container 1090 > this modal 1055 > this backdrop 1040. *@
+@implements IDisposable
+@inject IDialogService Service
+@inject IJSRuntime JS
+
+@if (Service is DialogService svc && svc.Current is { } state)
+{
+    <div class="modal-backdrop fade show"></div>
+    <div @ref="_modalRef"
+         class="modal fade show d-block"
+         tabindex="-1"
+         role="dialog"
+         aria-modal="true"
+         @onkeydown="OnKeyDown">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">@state.Title</h5>
+                    <button type="button" class="btn-close" aria-label="Close" @onclick="Cancel"></button>
+                </div>
+                <div class="modal-body">
+                    @if (state.Kind == DialogKind.Confirm)
+                    {
+                        <p class="mb-0">@state.Body</p>
+                    }
+                    else
+                    {
+                        <label class="form-label">@state.Body</label>
+                        <input class="form-control form-control-sm"
+                               placeholder="@state.Placeholder"
+                               value="@_promptValue"
+                               @oninput="OnPromptInput" />
+                    }
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-outline-secondary btn-sm" @onclick="Cancel">Cancel</button>
+                    <button type="button"
+                            class="btn @(state.Danger ? "btn-danger" : "btn-primary") btn-sm"
+                            @onclick="Confirm">
+                        @ConfirmLabel(state)
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+}
+
+@code {
+    private ElementReference _modalRef;
+    private string _promptValue = string.Empty;
+    private DialogState? _lastSeenState;
+
+    protected override void OnInitialized()
+    {
+        // OnChange lives on the concrete DialogService — the interface stays
+        // narrow (just ConfirmAsync / PromptAsync). DI hands us the concrete
+        // instance, so a cast here is safe.
+        if (Service is DialogService svc) svc.OnChange += OnServiceChanged;
+    }
+
+    public void Dispose()
+    {
+        if (Service is DialogService svc) svc.OnChange -= OnServiceChanged;
+    }
+
+    private void OnServiceChanged()
+    {
+        // Seed prompt input value when a new prompt dialog opens.
+        if (Service is DialogService s && s.Current is { Kind: DialogKind.Prompt } promptState
+            && !ReferenceEquals(promptState, _lastSeenState))
+        {
+            _promptValue = promptState.PromptInitial;
+        }
+        _lastSeenState = (Service as DialogService)?.Current;
+        InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var current = (Service as DialogService)?.Current;
+        if (current is not null)
+        {
+            try { await JS.InvokeVoidAsync("document.body.classList.add", "modal-open"); }
+            catch { /* prerender: no JS — ignore */ }
+            try { await _modalRef.FocusAsync(); }
+            catch { /* element not yet attached: ignore */ }
+        }
+        else
+        {
+            try { await JS.InvokeVoidAsync("document.body.classList.remove", "modal-open"); }
+            catch { /* prerender: no JS — ignore */ }
+        }
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Escape")
+        {
+            Cancel();
+        }
+    }
+
+    private void OnPromptInput(ChangeEventArgs e)
+    {
+        _promptValue = e.Value?.ToString() ?? string.Empty;
+    }
+
+    private void Cancel()
+    {
+        if (Service is not DialogService svc || svc.Current is null) return;
+        var resolveValue = svc.Current.Kind == DialogKind.Confirm
+            ? (object)false
+            : (object?)null;
+        _promptValue = string.Empty;
+        svc.Resolve(resolveValue);
+    }
+
+    private void Confirm()
+    {
+        if (Service is not DialogService svc || svc.Current is null) return;
+        var resolveValue = svc.Current.Kind == DialogKind.Confirm
+            ? (object)true
+            : (object?)_promptValue;
+        _promptValue = string.Empty;
+        svc.Resolve(resolveValue);
+    }
+
+    private static string ConfirmLabel(DialogState state) => state.Kind switch
+    {
+        DialogKind.Prompt => "Save",
+        _ => state.Danger ? "Delete" : "Confirm",
+    };
+}
--- a/src/ScadaLink.CentralUI/Components/Shared/DialogService.cs
+++ b/src/ScadaLink.CentralUI/Components/Shared/DialogService.cs
@@ -0,0 +1,94 @@
+namespace ScadaLink.CentralUI.Components.Shared;
+
+/// <summary>
+/// Default <see cref="IDialogService"/> implementation. Holds the currently
+/// open dialog state in <see cref="Current"/> and notifies subscribers (the
+/// <c>DialogHost</c> component) via <see cref="OnChange"/>. Only a single
+/// dialog can be open at a time; attempting to open another while one is
+/// already active throws <see cref="InvalidOperationException"/> — there is
+/// no nested-dialog use case today and surfacing the bug is preferable to
+/// silently queuing.
+/// </summary>
+public class DialogService : IDialogService
+{
+    /// <summary>
+    /// Raised whenever <see cref="Current"/> changes (dialog opened or closed).
+    /// The host component subscribes and calls <c>StateHasChanged</c>.
+    /// </summary>
+    public event Action? OnChange;
+
+    /// <summary>
+    /// The dialog currently being displayed, or <c>null</c> when no dialog is
+    /// open. The host reads this to decide what (if anything) to render.
+    /// </summary>
+    public DialogState? Current { get; private set; }
+
+    private TaskCompletionSource<object?>? _tcs;
+
+    public Task<bool> ConfirmAsync(string title, string message, bool danger = false)
+    {
+        EnsureNoActiveDialog();
+        var tcs = new TaskCompletionSource<object?>(TaskCreationOptions.RunContinuationsAsynchronously);
+        _tcs = tcs;
+        Current = new DialogState(title, DialogKind.Confirm, message, danger, PromptInitial: string.Empty, Placeholder: null);
+        OnChange?.Invoke();
+        return tcs.Task.ContinueWith(t => t.Result is bool b && b, TaskScheduler.Default);
+    }
+
+    public Task<string?> PromptAsync(string title, string label, string initialValue = "", string? placeholder = null)
+    {
+        EnsureNoActiveDialog();
+        var tcs = new TaskCompletionSource<object?>(TaskCreationOptions.RunContinuationsAsynchronously);
+        _tcs = tcs;
+        Current = new DialogState(title, DialogKind.Prompt, label, Danger: false, PromptInitial: initialValue, Placeholder: placeholder);
+        OnChange?.Invoke();
+        return tcs.Task.ContinueWith(t => t.Result as string, TaskScheduler.Default);
+    }
+
+    /// <summary>
+    /// Called by the host component when the user dismisses or confirms the
+    /// dialog. <paramref name="result"/> must be a <c>bool</c> for confirms
+    /// and a <c>string?</c> for prompts (null = cancel).
+    /// </summary>
+    internal void Resolve(object? result)
+    {
+        var tcs = _tcs;
+        _tcs = null;
+        Current = null;
+        OnChange?.Invoke();
+        tcs?.TrySetResult(result);
+    }
+
+    private void EnsureNoActiveDialog()
+    {
+        if (Current is not null)
+        {
+            throw new InvalidOperationException(
+                "A dialog is already open. IDialogService does not support nested dialogs.");
+        }
+    }
+}
+
+/// <summary>
+/// Snapshot of a dialog's display state, exposed read-only on
+/// <see cref="DialogService.Current"/> for the host component to render.
+/// </summary>
+/// <param name="Title">Modal title text.</param>
+/// <param name="Kind">Discriminates between confirm and prompt rendering.</param>
+/// <param name="Body">For confirm: the message; for prompt: the input label.</param>
+/// <param name="Danger">When true, the confirm button uses danger styling.</param>
+/// <param name="PromptInitial">Initial value for prompt-kind dialogs.</param>
+/// <param name="Placeholder">Placeholder shown when the prompt input is empty.</param>
+public record DialogState(
+    string Title,
+    DialogKind Kind,
+    string Body,
+    bool Danger,
+    string PromptInitial,
+    string? Placeholder);
+
+public enum DialogKind
+{
+    Confirm,
+    Prompt
+}
--- a/src/ScadaLink.CentralUI/Components/Shared/IDialogService.cs
+++ b/src/ScadaLink.CentralUI/Components/Shared/IDialogService.cs
@@ -0,0 +1,32 @@
+namespace ScadaLink.CentralUI.Components.Shared;
+
+/// <summary>
+/// Centralised dialog/modal service. Pages inject this service and call
+/// <see cref="ConfirmAsync"/> or <see cref="PromptAsync"/> programmatically
+/// instead of embedding per-page modal components. A single <c>DialogHost</c>
+/// rendered in <c>MainLayout</c> displays the resulting dialog state.
+/// </summary>
+public interface IDialogService
+{
+    /// <summary>
+    /// Shows a confirmation dialog and resolves to <c>true</c> when the user
+    /// confirms, or <c>false</c> when the user cancels (button click, Escape,
+    /// or backdrop dismiss).
+    /// </summary>
+    /// <param name="title">Modal title text.</param>
+    /// <param name="message">Body text shown to the user.</param>
+    /// <param name="danger">When <c>true</c>, the confirm button renders in
+    /// <c>btn-danger</c> styling with the label "Delete"; otherwise a primary
+    /// "Confirm" button is shown.</param>
+    Task<bool> ConfirmAsync(string title, string message, bool danger = false);
+
+    /// <summary>
+    /// Shows a single-line text prompt and resolves to the entered value, or
+    /// <c>null</c> if the user cancels.
+    /// </summary>
+    /// <param name="title">Modal title text.</param>
+    /// <param name="label">Label rendered above the input field.</param>
+    /// <param name="initialValue">Pre-populated value for the input field.</param>
+    /// <param name="placeholder">Optional placeholder shown when the input is empty.</param>
+    Task<string?> PromptAsync(string title, string label, string initialValue = "", string? placeholder = null);
+}
--- a/src/ScadaLink.CentralUI/Components/Shared/NewFolderDialog.razor
+++ b/src/ScadaLink.CentralUI/Components/Shared/NewFolderDialog.razor
@@ -1,53 +0,0 @@
-@if (IsVisible)
-{
-    <div class="modal-backdrop fade show"></div>
-    <div class="modal fade show d-block" tabindex="-1" role="dialog">
-        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h6 class="modal-title">New Folder</h6>
-                    <button type="button" class="btn-close" @onclick="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <input class="form-control form-control-sm" placeholder="Folder name" @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">Create</button>
-                </div>
-            </div>
-        </div>
-    </div>
-}
-
-@code {
-    [Parameter] public bool IsVisible { get; set; }
-    [Parameter] public EventCallback<bool> IsVisibleChanged { get; set; }
-    [Parameter] public int? ParentFolderId { get; set; }
-    [Parameter] public string? ErrorMessage { get; set; }
-    [Parameter] public EventCallback<(int? ParentFolderId, string Name)> OnSubmit { get; set; }
-
-    private bool _wasVisible;
-    private string _name = string.Empty;
-
-    protected override void OnParametersSet()
-    {
-        // Reset internal state on transition from hidden -> visible.
-        if (IsVisible && !_wasVisible)
-        {
-            _name = string.Empty;
-        }
-        _wasVisible = IsVisible;
-    }
-
-    private async Task Close()
-    {
-        await IsVisibleChanged.InvokeAsync(false);
-    }
-
-    private async Task Submit()
-    {
-        await OnSubmit.InvokeAsync((ParentFolderId, _name.Trim()));
-    }
-}
--- a/src/ScadaLink.CentralUI/ServiceCollectionExtensions.cs
+++ b/src/ScadaLink.CentralUI/ServiceCollectionExtensions.cs
@@ -1,6 +1,7 @@
 using Microsoft.AspNetCore.Components.Authorization;
 using Microsoft.Extensions.DependencyInjection;
 using ScadaLink.CentralUI.Auth;
+using ScadaLink.CentralUI.Components.Shared;

 namespace ScadaLink.CentralUI;

@@ -16,6 +17,11 @@ public static class ServiceCollectionExtensions
        services.AddScoped<AuthenticationStateProvider, CookieAuthenticationStateProvider>();
        services.AddCascadingAuthenticationState();

+        // Centralised dialog service: pages inject IDialogService and a single
+        // <DialogHost /> in MainLayout renders the active dialog. See
+        // Components/Shared/IDialogService.cs.
+        services.AddScoped<IDialogService, DialogService>();
+
        return services;
    }
 }
--- a/tests/ScadaLink.CentralUI.Tests/DataConnectionsPageTests.cs
+++ b/tests/ScadaLink.CentralUI.Tests/DataConnectionsPageTests.cs
@@ -3,6 +3,7 @@ using Bunit;
 using Microsoft.AspNetCore.Components.Authorization;
 using Microsoft.Extensions.DependencyInjection;
 using NSubstitute;
+using ScadaLink.CentralUI.Components.Shared;
 using ScadaLink.Commons.Entities.Sites;
 using ScadaLink.Commons.Interfaces.Repositories;
 using DataConnectionsPage = ScadaLink.CentralUI.Components.Pages.Admin.DataConnections;
@@ -21,6 +22,9 @@ public class DataConnectionsPageTests : BunitContext
    public DataConnectionsPageTests()
    {
        Services.AddSingleton(_siteRepo);
+        // Satisfy the page's [Inject] IDialogService — the host that actually
+        // renders the dialog lives in MainLayout, not in bUnit's render scope.
+        Services.AddScoped<IDialogService, DialogService>();
        AddTestAuth();

        JSInterop.Setup<string?>("treeviewStorage.load", _ => true).SetResult(null);
--- a/tests/ScadaLink.CentralUI.Tests/TemplatesPageTests.cs
+++ b/tests/ScadaLink.CentralUI.Tests/TemplatesPageTests.cs
@@ -6,6 +6,7 @@ using NSubstitute;
 using ScadaLink.Commons.Entities.Templates;
 using ScadaLink.Commons.Interfaces.Repositories;
 using ScadaLink.Commons.Interfaces.Services;
+using ScadaLink.CentralUI.Components.Shared;
 using ScadaLink.TemplateEngine;
 using ScadaLink.TemplateEngine.Services;
 using TemplatesPage = ScadaLink.CentralUI.Components.Pages.Design.Templates;
@@ -30,6 +31,10 @@ public class TemplatesPageTests : BunitContext
        Services.AddSingleton(_audit);
        Services.AddScoped<TemplateService>();
        Services.AddScoped<TemplateFolderService>();
+        // The Templates page injects IDialogService for the new-folder prompt
+        // and delete confirmations. The host is rendered in MainLayout, not
+        // here, but the DI registration still has to satisfy the [Inject].
+        Services.AddScoped<IDialogService, DialogService>();
        AddTestAuth();

        // The TreeView inside the page persists expansion state via JS interop
--- a/tests/ScadaLink.CentralUI.Tests/TopologyPageTests.cs
+++ b/tests/ScadaLink.CentralUI.Tests/TopologyPageTests.cs
@@ -14,6 +14,7 @@ using ScadaLink.Commons.Interfaces.Services;
 using ScadaLink.Commons.Types.Enums;
 using ScadaLink.Communication;
 using ScadaLink.DeploymentManager;
+using ScadaLink.CentralUI.Components.Shared;
 using ScadaLink.TemplateEngine.Services;
 using TopologyPage = ScadaLink.CentralUI.Components.Pages.Deployment.Topology;

@@ -59,6 +60,11 @@ public class TopologyPageTests : BunitContext

        AddTestAuth();

+        // The page injects IDialogService for delete confirmations; the host
+        // (rendered globally in MainLayout) is not present in bUnit, but the
+        // DI registration still has to satisfy the [Inject].
+        Services.AddScoped<IDialogService, DialogService>();
+
        // TreeView persists expansion state via JS interop. Stub the calls so render doesn't throw.
        JSInterop.Setup<string?>("treeviewStorage.load", _ => true).SetResult(null);
        JSInterop.SetupVoid("treeviewStorage.save", _ => true);