From 969a7908f86c66c0f1599715385c7c02aa958030 Mon Sep 17 00:00:00 2001 From: fboucher Date: Wed, 20 May 2026 07:14:28 -0400 Subject: [PATCH 1/3] feat(issue #133): reorganize note dialog buttons layout - Move Delete button to bottom left (only in edit mode) - Move Cancel and Save buttons to bottom right - Add CSS styling for proper footer layout with flexbox - Delete button appears on left, Cancel and Save on right Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../Components/Shared/NoteDialog.razor | 34 +++++++++++-------- .../Components/Shared/NoteDialog.razor.css | 20 +++++++++++ 2 files changed, 39 insertions(+), 15 deletions(-) create mode 100644 src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor.css diff --git a/src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor b/src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor index 8278f37..44996d9 100644 --- a/src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor +++ b/src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor @@ -64,23 +64,27 @@
- - Save - - - Cancel - - @if (_isEditMode) - { +
+ @if (_isEditMode) + { + + Delete + + } +
+
+ + Cancel + - Delete + Disabled="@(!_note.Validate())" + OnClick="@SaveAsync"> + Save - } +
@code { diff --git a/src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor.css b/src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor.css new file mode 100644 index 0000000..06feaa3 --- /dev/null +++ b/src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor.css @@ -0,0 +1,20 @@ +::deep .note-dialog-footer { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 0; + gap: 8px; +} + +::deep .note-dialog-footer-left { + display: flex; + align-items: center; + flex: 0 0 auto; +} + +::deep .note-dialog-footer-right { + display: flex; + align-items: center; + gap: 8px; + flex: 0 0 auto; +} From 4e9d6435add45682ac3787d47addcfbb8835fcd4 Mon Sep 17 00:00:00 2001 From: Frank Date: Wed, 20 May 2026 07:50:27 -0400 Subject: [PATCH 2/3] that's how I want it! --- .../Components/Pages/Posts.razor | 3 +- .../Components/Shared/NoteDialog.razor | 41 +++++-------------- 2 files changed, 12 insertions(+), 32 deletions(-) diff --git a/src/NoteBookmark.SharedUI/Components/Pages/Posts.razor b/src/NoteBookmark.SharedUI/Components/Pages/Posts.razor index 670cef2..8f313a0 100644 --- a/src/NoteBookmark.SharedUI/Components/Pages/Posts.razor +++ b/src/NoteBookmark.SharedUI/Components/Pages/Posts.razor @@ -95,7 +95,8 @@ Title = "Add a note", PreventDismissOnOverlayClick = true, PreventScroll = true, - + PrimaryAction = "Save", + SecondaryAction = "Cancel" }); var result = await dialog.Result; diff --git a/src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor b/src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor index 44996d9..b48b9ac 100644 --- a/src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor +++ b/src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor @@ -4,15 +4,6 @@ @rendermode InteractiveServer - -
- - - - @(Dialog?.Instance?.Parameters?.Title ?? Title) - - -
@@ -62,30 +53,18 @@
- -
-
- @if (_isEditMode) + + @if (_isEditMode) { - - Delete - + Delete } -
-
- - Cancel - - - Save - -
-
+ + + Save + Cancel + @code { [Parameter] From 48874f6d8ef202a9e5bc301c86b4ae303fb33575 Mon Sep 17 00:00:00 2001 From: fboucher Date: Wed, 20 May 2026 08:13:25 -0400 Subject: [PATCH 3/3] test: fix NoteDialog tests after UI component refactoring - Updated tests to render NoteDialog through NoteDialogTestWrapper - NoteDialogTestWrapper provides FluentDialog cascading context required by FluentDialogFooter - Updated test expectations for current button layout (Delete, Save, Cancel) - All NoteDialog tests now pass: form fields rendering, button visibility, tags handling, categories Fixes regression tests broken by switch to FluentDialogFooter component in issue #133 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../Helpers/NoteDialogTestWrapper.razor | 25 +++++++++++++++++++ .../Tests/NoteDialogTests.cs | 21 ++++++++++------ 2 files changed, 38 insertions(+), 8 deletions(-) create mode 100644 src/NoteBookmark.BlazorApp.Tests/Helpers/NoteDialogTestWrapper.razor diff --git a/src/NoteBookmark.BlazorApp.Tests/Helpers/NoteDialogTestWrapper.razor b/src/NoteBookmark.BlazorApp.Tests/Helpers/NoteDialogTestWrapper.razor new file mode 100644 index 0000000..dcba9ec --- /dev/null +++ b/src/NoteBookmark.BlazorApp.Tests/Helpers/NoteDialogTestWrapper.razor @@ -0,0 +1,25 @@ +@using NoteBookmark.SharedUI.Components.Shared +@using NoteBookmark.Domain +@using Microsoft.FluentUI.AspNetCore.Components + + + + + +@code { + [Parameter] + public Note? Content { get; set; } + + [Parameter] + public string? Title { get; set; } + + [Parameter] + public EventCallback OnClose { get; set; } + + private FluentDialog? dialogRef; + + private async Task HandleClose(NoteDialogResult result) + { + await OnClose.InvokeAsync(result); + } +} diff --git a/src/NoteBookmark.BlazorApp.Tests/Tests/NoteDialogTests.cs b/src/NoteBookmark.BlazorApp.Tests/Tests/NoteDialogTests.cs index 85af830..83cfaf9 100644 --- a/src/NoteBookmark.BlazorApp.Tests/Tests/NoteDialogTests.cs +++ b/src/NoteBookmark.BlazorApp.Tests/Tests/NoteDialogTests.cs @@ -13,6 +13,7 @@ namespace NoteBookmark.BlazorApp.Tests.Tests; /// /// NoteDialog now uses EventCallback<NoteDialogResult> instead of Dialog.CloseAsync(), /// removing the FluentDialog cascade dependency and enabling unit tests. +/// Tests use NoteDialogTestWrapper to provide the required FluentDialog cascading parameter. /// public sealed class NoteDialogTests : BunitContext { @@ -26,7 +27,7 @@ public void NoteDialog_CreateMode_RendersFormFields() { var note = new Note { PostId = "post-1" }; - var cut = Render(p => p + var cut = Render(p => p .Add(x => x.Content, note) .Add(x => x.Title, "Add a note")); @@ -38,12 +39,13 @@ public void NoteDialog_CreateMode_ShowsSaveAndCancelButtons() { var note = new Note { PostId = "post-1" }; - var cut = Render(p => p + var cut = Render(p => p .Add(x => x.Content, note) .Add(x => x.Title, "Add a note")); - cut.Markup.Should().Contain("Save"); - cut.Markup.Should().Contain("Cancel"); + var markup = cut.Markup; + markup.Should().Contain("Save"); + markup.Should().Contain("Cancel"); } [Fact] @@ -51,11 +53,14 @@ public void NoteDialog_EditMode_ShowsDeleteButton() { var note = new Note { PostId = "post-1", RowKey = "existing-row-key" }; - var cut = Render(p => p + var cut = Render(p => p .Add(x => x.Content, note) .Add(x => x.Title, "Edit note")); - cut.Markup.Should().Contain("Delete"); + var markup = cut.Markup; + markup.Should().Contain("Delete"); + markup.Should().Contain("Save"); + markup.Should().Contain("Cancel"); } [Fact] @@ -63,7 +68,7 @@ public void NoteDialog_ExistingTags_DisplaysAsBadges() { var note = new Note { PostId = "post-1", Tags = "csharp, blazor" }; - var cut = Render(p => p + var cut = Render(p => p .Add(x => x.Content, note) .Add(x => x.Title, "Add a note")); @@ -76,7 +81,7 @@ public void NoteDialog_CategorySelect_ContainsCategoriesFromDomain() { var note = new Note { PostId = "post-1" }; - var cut = Render(p => p + var cut = Render(p => p .Add(x => x.Content, note) .Add(x => x.Title, "Add a note"));