Refactored the MudStepper component to remove unnecessary actions

This commit is contained in:
Thorsten Sommer 2026-08-02 15:16:31 +02:00
parent ec21d492a4
commit 2b3901ac32
Signed by untrusted user who does not match committer: tsommer
GPG Key ID: 371BBA77A02C0108
6 changed files with 95 additions and 31 deletions

View File

@ -96,7 +96,7 @@ else
</MudExpansionPanel>
</MudExpansionPanels>
<MudStepper @bind-ActiveIndex="@this.stepperIndex" CompletedStepColor="Color.Primary" CurrentStepColor="Color.Primary" ErrorStepColor="Color.Error" NonLinear="@false" ShowResetButton="@false" Class="mb-3">
<MudStepperWithoutActions @bind-ActiveIndex="@this.stepperIndex" Class="mb-3">
<ChildContent>
<MudStep Title="@T("Validate plugin")" Completed="@this.PluginCheckCompleted" HasError="@this.IsInstallStepFailed(BuilderInstallStep.CHECK_PLUGIN)">
<MudStack Spacing="2" Class="mt-2">
@ -249,9 +249,7 @@ else
</MudStack>
</MudStep>
</ChildContent>
<ActionContent Context="_">
</ActionContent>
</MudStepper>
</MudStepperWithoutActions>
</MudStack>
: null;

View File

@ -1,14 +1,8 @@
@inherits MSGComponentBase
<MudExpansionPanels Class="mb-4 visual-briefing-build-progress" Elevation="0">
<MudExpansionPanels Class="mb-4" Elevation="0">
<MudExpansionPanel Text="@this.BuildProgressTitle" Expanded="@(this.Build?.Status is not VisualBriefingBuildStatus.COMPLETED)">
<MudStepper ActiveIndex="@this.BuildStepperIndex"
CompletedStepColor="Color.Primary"
CurrentStepColor="Color.Primary"
ErrorStepColor="Color.Error"
NonLinear="@false"
OnPreviewInteraction="@PreventBuildStepperInteractionAsync"
ShowResetButton="@false">
<MudStepperWithoutActions ActiveIndex="@this.BuildStepperIndex" ReadOnly="@true">
<ChildContent>
@for (var index = 0; index < STAGE_GROUPS.Length; index++)
{
@ -43,9 +37,6 @@
</MudStep>
}
</ChildContent>
@* 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. *@
<ActionContent></ActionContent>
</MudStepper>
</MudStepperWithoutActions>
</MudExpansionPanel>
</MudExpansionPanels>

View File

@ -164,17 +164,6 @@ public partial class VisualBriefingBuildProgress : MSGComponentBase
}
}
/// <summary>
/// Keeps the status stepper informational while allowing actions inside the active step.
/// </summary>
/// <param name="args">The interaction to cancel.</param>
/// <returns>A completed task.</returns>
private static Task PreventBuildStepperInteractionAsync(StepperInteractionEventArgs args)
{
args.Cancel = true;
return Task.CompletedTask;
}
/// <summary>
/// Gets a persistent stage status, defaulting to not started.
/// </summary>

View File

@ -0,0 +1,17 @@
<MudStepper ActiveIndex="@this.ActiveIndex"
ActiveIndexChanged="@this.ActiveIndexChanged"
CompletedStepColor="Color.Primary"
CurrentStepColor="Color.Primary"
ErrorStepColor="Color.Error"
NonLinear="@false"
ShowResetButton="@false"
OnPreviewInteraction="@this.PreviewInteractionAsync"
Class="@this.Classname">
<ChildContent>
@this.ChildContent
</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. *@
<ActionContent Context="_">
</ActionContent>
</MudStepper>

View File

@ -0,0 +1,70 @@
using Microsoft.AspNetCore.Components;
namespace AIStudio.Components;
/// <summary>
/// A stepper that leaves the step navigation to the application instead of the user.
/// </summary>
/// <remarks>
/// 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.
/// </remarks>
public partial class MudStepperWithoutActions : ComponentBase
{
/// <summary>
/// Gets or sets the step the stepper points at.
/// </summary>
[Parameter]
public int ActiveIndex { get; set; }
/// <summary>
/// Gets or sets the callback raised when the active step changed.
/// </summary>
[Parameter]
public EventCallback<int> ActiveIndexChanged { get; set; }
/// <summary>
/// Gets or sets whether the user must not change the active step.
/// </summary>
/// <remarks>
/// 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.
/// </remarks>
[Parameter]
public bool ReadOnly { get; set; }
/// <summary>
/// Gets or sets additional CSS classes for the stepper.
/// </summary>
[Parameter]
public string Class { get; set; } = string.Empty;
/// <summary>
/// Gets or sets the steps to render.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
/// <summary>
/// The marker class that lets app.css hide the action bar MudBlazor renders around the actions.
/// </summary>
private const string MARKER_CLASS = "mud-stepper-without-actions";
private string Classname => string.IsNullOrWhiteSpace(this.Class) ? MARKER_CLASS : $"{MARKER_CLASS} {this.Class}";
/// <summary>
/// Blocks step changes that the user triggered while the stepper is read-only.
/// </summary>
/// <param name="args">The interaction to inspect.</param>
/// <returns>A completed task.</returns>
private Task PreviewInteractionAsync(StepperInteractionEventArgs args)
{
if (this.ReadOnly)
args.Cancel = true;
return Task.CompletedTask;
}
}

View File

@ -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;
}