From 2b3901ac32a4382ea91423c8295b3498d1a4a88b Mon Sep 17 00:00:00 2001 From: Thorsten Sommer Date: Sun, 2 Aug 2026 15:16:31 +0200 Subject: [PATCH] Refactored the MudStepper component to remove unnecessary actions --- .../Assistants/Builder/AssistantBuilder.razor | 6 +- .../VisualBriefingBuildProgress.razor | 15 +--- .../VisualBriefingBuildProgress.razor.cs | 11 --- .../Components/MudStepperWithoutActions.razor | 17 +++++ .../MudStepperWithoutActions.razor.cs | 70 +++++++++++++++++++ app/MindWork AI Studio/wwwroot/app.css | 7 +- 6 files changed, 95 insertions(+), 31 deletions(-) create mode 100644 app/MindWork AI Studio/Components/MudStepperWithoutActions.razor create mode 100644 app/MindWork AI Studio/Components/MudStepperWithoutActions.razor.cs diff --git a/app/MindWork AI Studio/Assistants/Builder/AssistantBuilder.razor b/app/MindWork AI Studio/Assistants/Builder/AssistantBuilder.razor index 4259acaf..c2951401 100644 --- a/app/MindWork AI Studio/Assistants/Builder/AssistantBuilder.razor +++ b/app/MindWork AI Studio/Assistants/Builder/AssistantBuilder.razor @@ -96,7 +96,7 @@ else - + @@ -249,9 +249,7 @@ else - - - + : null; diff --git a/app/MindWork AI Studio/Assistants/VisualBriefing/VisualBriefingBuildProgress.razor b/app/MindWork AI Studio/Assistants/VisualBriefing/VisualBriefingBuildProgress.razor index e70133b9..c8843743 100644 --- a/app/MindWork AI Studio/Assistants/VisualBriefing/VisualBriefingBuildProgress.razor +++ b/app/MindWork AI Studio/Assistants/VisualBriefing/VisualBriefingBuildProgress.razor @@ -1,14 +1,8 @@ @inherits MSGComponentBase - + - + @for (var index = 0; index < STAGE_GROUPS.Length; index++) { @@ -43,9 +37,6 @@ } - @* The build runs on its own. Overriding the actions with empty content keeps MudBlazor from - rendering its Previous, Next, Skip, and Complete buttons, which have nothing to do here. *@ - - + \ No newline at end of file diff --git a/app/MindWork AI Studio/Assistants/VisualBriefing/VisualBriefingBuildProgress.razor.cs b/app/MindWork AI Studio/Assistants/VisualBriefing/VisualBriefingBuildProgress.razor.cs index c99e0148..f3bbcee3 100644 --- a/app/MindWork AI Studio/Assistants/VisualBriefing/VisualBriefingBuildProgress.razor.cs +++ b/app/MindWork AI Studio/Assistants/VisualBriefing/VisualBriefingBuildProgress.razor.cs @@ -164,17 +164,6 @@ public partial class VisualBriefingBuildProgress : MSGComponentBase } } - /// - /// Keeps the status stepper informational while allowing actions inside the active step. - /// - /// The interaction to cancel. - /// A completed task. - private static Task PreventBuildStepperInteractionAsync(StepperInteractionEventArgs args) - { - args.Cancel = true; - return Task.CompletedTask; - } - /// /// Gets a persistent stage status, defaulting to not started. /// diff --git a/app/MindWork AI Studio/Components/MudStepperWithoutActions.razor b/app/MindWork AI Studio/Components/MudStepperWithoutActions.razor new file mode 100644 index 00000000..15a208cc --- /dev/null +++ b/app/MindWork AI Studio/Components/MudStepperWithoutActions.razor @@ -0,0 +1,17 @@ + + + @this.ChildContent + + @* Empty on purpose: this is what keeps MudBlazor from rendering its Previous, Next, Skip, and + Complete buttons. The surrounding action bar still renders and is hidden through app.css. *@ + + + \ No newline at end of file diff --git a/app/MindWork AI Studio/Components/MudStepperWithoutActions.razor.cs b/app/MindWork AI Studio/Components/MudStepperWithoutActions.razor.cs new file mode 100644 index 00000000..43af7363 --- /dev/null +++ b/app/MindWork AI Studio/Components/MudStepperWithoutActions.razor.cs @@ -0,0 +1,70 @@ +using Microsoft.AspNetCore.Components; + +namespace AIStudio.Components; + +/// +/// A stepper that leaves the step navigation to the application instead of the user. +/// +/// +/// MudBlazor renders Previous, Next, Skip, and Complete buttons by default. AI Studio drives its +/// steppers from application state — a running build, or an install flow that advances when each +/// step succeeds — so those buttons have nothing to do and would only look broken when clicked. +/// This component removes them once instead of once per assistant, and carries the shared step +/// colors so the steppers stay visually consistent. +/// +public partial class MudStepperWithoutActions : ComponentBase +{ + /// + /// Gets or sets the step the stepper points at. + /// + [Parameter] + public int ActiveIndex { get; set; } + + /// + /// Gets or sets the callback raised when the active step changed. + /// + [Parameter] + public EventCallback ActiveIndexChanged { get; set; } + + /// + /// Gets or sets whether the user must not change the active step. + /// + /// + /// Set this when the displayed process runs on its own. The step headers stay visible, but + /// clicking them no longer moves the stepper away from the step the application selected. + /// + [Parameter] + public bool ReadOnly { get; set; } + + /// + /// Gets or sets additional CSS classes for the stepper. + /// + [Parameter] + public string Class { get; set; } = string.Empty; + + /// + /// Gets or sets the steps to render. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + /// + /// The marker class that lets app.css hide the action bar MudBlazor renders around the actions. + /// + private const string MARKER_CLASS = "mud-stepper-without-actions"; + + private string Classname => string.IsNullOrWhiteSpace(this.Class) ? MARKER_CLASS : $"{MARKER_CLASS} {this.Class}"; + + /// + /// Blocks step changes that the user triggered while the stepper is read-only. + /// + /// The interaction to inspect. + /// A completed task. + private Task PreviewInteractionAsync(StepperInteractionEventArgs args) + { + if (this.ReadOnly) + args.Cancel = true; + + return Task.CompletedTask; + } +} \ No newline at end of file diff --git a/app/MindWork AI Studio/wwwroot/app.css b/app/MindWork AI Studio/wwwroot/app.css index b32f9146..38c18147 100644 --- a/app/MindWork AI Studio/wwwroot/app.css +++ b/app/MindWork AI Studio/wwwroot/app.css @@ -103,10 +103,9 @@ display: initial !important; } -/* The visual briefing build stepper only reports progress, so its actions are overridden with empty - content. MudBlazor still renders the surrounding action bar, which would leave an empty padded row. - Scoped on purpose: the Assistant Builder uses an interactive stepper that needs its buttons. */ -.visual-briefing-build-progress .mud-stepper-actions { +/* MudStepperWithoutActions overrides the stepper actions with empty content. MudBlazor still renders + the action bar around them, which would leave an empty padded row below the last step. */ +.mud-stepper-without-actions .mud-stepper-actions { display: none; }