fix(admin): show template language status in editor

Center action controls and adjust template editor field heights.

Ref: IT-1601

HrynCo.NotificationService.Web.IntegrationTests/TemplateCatalogPresentationTests.cs

@@ -8,6 +8,37 @@ namespace HrynCo.NotificationService.Web.IntegrationTests;
 
 public sealed class TemplateCatalogPresentationTests(TemplateDatabaseFixture fixture) : IClassFixture<TemplateDatabaseFixture>
 {
+    [Fact]
+    public async Task EditorTabsShowSavedVersionsAfterInvalidUnsavedChanges()
+    {
+        var connection = await fixture.CreateDatabaseAsync();
+        await using var app = new TemplateWebApplicationFactory(connection);
+        using var scope = app.Services.CreateScope();
+        var service = (await scope.ServiceProvider.GetRequiredService<INotificationServiceRepository>().GetAllAsync()).Single();
+        var versions = scope.ServiceProvider.GetRequiredService<IEmailTemplateRepository>();
+        await versions.AddAsync(new EmailTemplate
+        {
+            ServiceName = service.Name, Key = "TabStatus", LanguageCode = "en",
+            Subject = "Saved", HtmlBody = "Saved", TextBody = "Saved"
+        });
+        var definition = (await scope.ServiceProvider.GetRequiredService<IEmailTemplateDefinitionRepository>()
+            .GetDefinitionAsync(service.Name, "TabStatus"))!;
+        using var client = app.CreateClient(new() { AllowAutoRedirect = false });
+        var baseUrl = $"/admin/services/{service.Id}/templates";
+        var html = await client.GetStringAsync($"{baseUrl}/{definition.Id}");
+        Assert.Matches("(?s)<span>en</span>\\s*<span class=\"template-language-status template-language-present\">Present</span>", html);
+        Assert.Matches("(?s)<span>uk</span>\\s*<span class=\"template-language-status template-language-missing\">Missing</span>", html);
+
+        var fields = TemplateEditorTestFields.Read(html);
+        TemplateEditorTestFields.SetLanguage(fields, "uk", "Unsaved", "", "");
+        fields["Languages[0].IsPresent"] = "false";
+        var response = await client.PostAsync(baseUrl + "/save", new FormUrlEncodedContent(fields));
+        Assert.Equal(HttpStatusCode.OK, response.StatusCode);
+        var invalidHtml = await response.Content.ReadAsStringAsync();
+        Assert.Matches("(?s)<span>en</span>\\s*<span class=\"template-language-status template-language-present\">Present</span>", invalidHtml);
+        Assert.Matches("(?s)<span>uk</span>\\s*<span class=\"template-language-status template-language-missing\">Missing</span>", invalidHtml);
+    }
+
     [Fact]
     public async Task CatalogStatusesUseExactCodes_AndEmptyDefinitionsShowEveryLanguageMissing()
     {

HrynCo.NotificationService.Web/Controllers/Admin/AdminTemplatesController.cs

@@ -69,8 +69,12 @@ public sealed class AdminTemplatesController(IMediator mediator, IEmailTemplateD
         var service = await services.GetAsync(serviceId, ct);
         if (service is null || model.ServiceId != serviceId || model.ServiceName != service.Name)
             return NotFound();
-        if (model.Id is Guid definitionId && await OwnedDefinitionAsync(service, definitionId, ct) is null)
+        var persisted = model.Id is Guid definitionId ? await OwnedDefinitionAsync(service, definitionId, ct) : null;
+        if (model.Id is not null && persisted is null)
             return NotFound();
+        var presentCodes = persisted?.Languages.Select(l => l.LanguageCode).ToHashSet(StringComparer.Ordinal);
+        foreach (var language in model.Languages)
+            language.IsPresent = presentCodes?.Contains(language.LanguageCode) == true;
         ValidateLanguageCatalog(model, service);
         if (!ModelState.IsValid)
             return EditorView(model, service);
@@ -226,7 +230,8 @@ public sealed class AdminTemplatesController(IMediator mediator, IEmailTemplateD
         VariablesJson = JsonSerializer.Serialize(definition.Variables, JsonOptions),
         Languages = definition.Languages.Select(l => new EmailTemplateLanguageEditViewModel
         {
-            LanguageCode = l.LanguageCode, Subject = l.Subject, HtmlBody = l.HtmlBody, TextBody = l.TextBody
+            LanguageCode = l.LanguageCode, Subject = l.Subject, HtmlBody = l.HtmlBody, TextBody = l.TextBody,
+            IsPresent = true
         }).ToList()
     };
 }

HrynCo.NotificationService.Web/Controllers/Admin/ViewModels/EmailTemplateLanguageEditViewModel.cs

@@ -1,4 +1,5 @@
 using System.ComponentModel.DataAnnotations;
+using Microsoft.AspNetCore.Mvc.ModelBinding;
 
 namespace HrynCo.NotificationService.Web.Controllers.Admin.ViewModels;
 
@@ -12,6 +13,8 @@ public sealed class EmailTemplateLanguageEditViewModel : IValidatableObject
     public string HtmlBody { get; set; } = "";
     [DisplayFormat(ConvertEmptyStringToNull = false)]
     public string TextBody { get; set; } = "";
+    [BindNever]
+    public bool IsPresent { get; set; }
     public bool HasContent => !string.IsNullOrWhiteSpace(Subject) || !string.IsNullOrWhiteSpace(HtmlBody) || !string.IsNullOrWhiteSpace(TextBody);
 
     public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)

HrynCo.NotificationService.Web/Views/AdminTemplates/Edit.cshtml

@@ -34,18 +34,22 @@
     </div>
     <div class="mb-3">
         <label asp-for="VariablesJson" class="form-label fw-semibold">Shared variables (JSON)</label>
-        <textarea asp-for="VariablesJson" class="form-control font-monospace" rows="4"></textarea>
+        <textarea asp-for="VariablesJson" class="form-control font-monospace" rows="14"></textarea>
         <div class="form-text">One contract for every language: <code>[{"name":"UserName","required":true}]</code></div>
     </div>
-    <p class="text-muted">Every configured service language has a tab. Leave all three content fields blank for an unused language; clear them to remove an existing version. Shared variables and the template remain.</p>
+    <p class="text-muted">Every configured service language has a tab. Present and Missing show saved versions. Leave all three content fields blank for an unused language; clear them to remove an existing version. Shared variables and the template remain.</p>
     @if (Model.Languages.Count == 0) { <p>No service languages configured. You can save the key and shared variables now, then add language codes in Edit Service.</p> }
     <div class="template-language-sheet mb-3" hidden="@(Model.Languages.Count == 0)">
         <div class="nav nav-tabs" role="tablist" aria-label="Template languages" id="languageTabs">
             @for (var i = 0; i < Model.Languages.Count; i++)
             {
+                var language = Model.Languages[i];
                 <button type="button" role="tab" id="language-tab-@i" aria-controls="language-pane-@i"
                         aria-selected="@(i == active ? "true" : "false")" tabindex="@(i == active ? 0 : -1)"
-                        class="nav-link @(i == active ? "active" : "")" data-pane="language-pane-@i">@Model.Languages[i].LanguageCode</button>
+                        class="nav-link @(i == active ? "active" : "")" data-pane="language-pane-@i">
+                    <span>@language.LanguageCode</span>
+                    <span class="template-language-status @(language.IsPresent ? "template-language-present" : "template-language-missing")">@(language.IsPresent ? "Present" : "Missing")</span>
+                </button>
             }
         </div>
         <div id="languagePanes">
@@ -59,11 +63,11 @@
                     </div>
                     <div class="mb-3">
                         <label asp-for="Languages[i].HtmlBody" class="form-label fw-semibold">HTML Body</label>
-                        <textarea asp-for="Languages[i].HtmlBody" class="form-control font-monospace" rows="10" data-content="html"></textarea>
+                        <textarea asp-for="Languages[i].HtmlBody" class="form-control font-monospace" rows="15" data-content="html"></textarea>
                     </div>
                     <div class="mb-3">
                         <label asp-for="Languages[i].TextBody" class="form-label fw-semibold">Text Body</label>
-                        <textarea asp-for="Languages[i].TextBody" class="form-control font-monospace" rows="5" data-content="text"></textarea>
+                        <textarea asp-for="Languages[i].TextBody" class="form-control font-monospace" rows="8" data-content="text"></textarea>
                     </div>
                 </section>
             }

HrynCo.NotificationService.Web/wwwroot/css/admin.css

@@ -160,7 +160,13 @@ body {
 .admin-data-table .channel-actions {
     width: 1%;
     white-space: nowrap;
-    text-align: right;
+}
+
+.admin-data-table .template-actions,
+.admin-data-table .service-actions,
+.admin-data-table .channel-actions,
+.admin-data-table .service-language-actions {
+    text-align: center;
 }
 
 .page-header .service-template-service-name {
@@ -243,12 +249,11 @@ body {
 /* ── Service language actions ─────────────────────────── */
 .service-language-table .service-language-actions {
     width: 1%;
-    text-align: right;
 }
 
 .service-language-table .service-language-action-buttons {
     display: flex;
-    justify-content: flex-end;
+    justify-content: center;
     gap: .5rem;
 }
 
@@ -263,7 +268,7 @@ body {
 @media (max-width: 575.98px) {
     .service-language-table .service-language-action-buttons {
         flex-direction: column;
-        align-items: flex-end;
+        align-items: center;
     }
 
     .service-language-table .service-language-action-buttons > .btn {
@@ -405,6 +410,9 @@ body {
 
 .template-language-sheet > .nav-tabs .nav-link {
     flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
     margin-bottom: 0;
     white-space: nowrap;
 }

docs/email-template-localizations.md

@@ -27,7 +27,7 @@ The separate **Delete language and versions…** confirmation shows the current
 
 The administration starts at `/admin/services` (also the root redirect). A service name opens `/admin/services/{serviceId}`, which lists only that service's Email Templates, including definitions without translations. **Edit Service** is a separate action at `/admin/services/{id}/edit` for Name and the inline language table. There is no independent global Email Templates menu or extra page for a key: Template Key identifies the template edited directly from this service list. Create/edit/save/delete routes live under `/admin/services/{serviceId}/templates`; breadcrumbs, cancel and successful saves/deletes return to the selected service and retain its exact Key filter. Route IDs are bound explicitly from the route and cannot be replaced by form/query values. GET/POST validate definition ownership, and the mutation transaction also checks the selected service ID. Legacy global GET links redirect to the canonical service/template when identifiable, otherwise to Services; old global template POST routes are not retained. The language-specific API is unchanged.
 
-The service's exact configured language codes appear near its heading. Each template row lists every catalog language with a text-and-color **Present** or **Missing** status, comparing exact ordinal codes (`en` and `EN`, or `ru` and `ru-RU`, remain distinct). A definition with no versions shows all configured languages as Missing; a service with no catalog has an explicit no-languages state. Status display never creates translations. The GET Key filter, Filter and Clear controls live in the Template Key column header, which stays visible for an empty service or filter miss; the scoped header strip has a contrasting blue background. Clear returns to the same service without a key filter, while create/edit/save/cancel retain the selected key filter.
+The service's exact configured language codes appear near its heading. Each template row lists every catalog language with a text-and-color **Present** or **Missing** status, comparing exact ordinal codes (`en` and `EN`, or `ru` and `ru-RU`, remain distinct). The editor repeats these statuses on its language tabs. They show saved versions, including after a failed form submission; unsaved field changes do not alter the status. A definition with no versions shows all configured languages as Missing; a service with no catalog has an explicit no-languages state. Status display never creates translations. The GET Key filter, Filter and Clear controls live in the Template Key column header, which stays visible for an empty service or filter miss; the scoped header strip has a contrasting blue background. Clear returns to the same service without a key filter, while create/edit/save/cancel retain the selected key filter. The Action header and controls are centered in all four administration grids; their column widths are unchanged. The editor initially shows fourteen rows for Shared variables, fifteen for HTML Body and eight for Text Body, without changing their content or contracts.
 
 A template belongs to the selected service; its create/edit form shows Template Key and a tab for **every** language configured in that service. Languages are added, renamed and removed only through Edit Service. A tab with Subject, HTML Body and Text Body all blank does not persist a version; clearing all three removes an existing version while retaining the definition. A partially populated tab requires all three fields and prevents the entire save if incomplete. All tabs may be blank, and a service with no configured languages may still have a key/shared-variables definition. Submitted tabs must match the current service catalog exactly, including uniqueness. Tabs retain unsaved content and support Left/Right/Home/End keyboard navigation. Shared variables appear once as a camelCase JSON array: `[{"name":"RecipientName","required":true}]`. Each variable has a unique nonblank name and a boolean `required`; unknown JSON properties and malformed shapes are rejected. Variable contracts compare Name and Required semantically, independent of variable order.