fix(Dashboard): refactored workflow creation view

Signed-off-by: Jean-Baptiste Bianchi <[email protected]>
serverlessworkflow · Jun 26, 2024 · ae479aa · ae479aa
1 parent 4835092
commit ae479aa
Show file tree

Hide file tree

Showing 19 changed files with 703 additions and 216 deletions.
diff --git a/src/dashboard/Synapse.Dashboard/Components/Breadcrumb/Breadcrumb.razor b/src/dashboard/Synapse.Dashboard/Components/Breadcrumb/Breadcrumb.razor
@@ -17,24 +17,35 @@
 @namespace Synapse.Dashboard.Components
 @inject IBreadcrumbManager BreadcrumbService
 @implements IDisposable
-<nav aria-label="breadcrumb">
+    <nav aria-label="breadcrumb" class="@ClassNames">
     <ul class="breadcrumb">
         @foreach (var item in BreadcrumbService.Items)
         {
             <li class="breadcrumb-item">
-                <a href="" @onclick="() => BreadcrumbService.NavigateTo(item)" @onclick:preventDefault>
-                    @if (!string.IsNullOrWhiteSpace(item.Icon))
-                    {
-                        <small class="bi @item.Icon" aria-hidden="true"></small>
-                    }
-                    @item.Label
-                </a>
+                @if (item.Template != null)
+                {
+                    @item.Template
+                }
+                else
+                {
+
+                    <a href="" @onclick="() => BreadcrumbService.NavigateTo(item)" @onclick:preventDefault>
+                        @if (!string.IsNullOrWhiteSpace(item.Icon))
+                        {
+                            <small class="bi @item.Icon" aria-hidden="true"></small>
+                        }
+                        @item.Label
+                    </a>
+                }
             </li>
         }
     </ul>
 </nav>
 
 @code {
+    [Parameter] public string? Class { get; set; }
+
+    protected virtual string? ClassNames => Class;
 
     protected override void OnInitialized()
     {

diff --git a/src/dashboard/Synapse.Dashboard/Components/Breadcrumb/BreadcrumbItem.cs b/src/dashboard/Synapse.Dashboard/Components/Breadcrumb/BreadcrumbItem.cs
@@ -19,25 +19,49 @@ namespace Synapse.Dashboard.Components;
 /// <remarks>
 /// Initializes a new <see cref="BreadcrumbItem"/> with the provided data
 /// </remarks>
-/// <param name="label">The breadcrumb's label</param>
-/// <param name="link">The link associated to the breadcrumb</param>
-/// <param name="icon">The breadcrumb's icon, if any</param>
-public class BreadcrumbItem(string label, string link, string? icon = null)
+public class BreadcrumbItem
 {
 
     /// <summary>
-    /// Gets the breadcrumb's label
+    /// Initializes a new <see cref="BreadcrumbItem"/> with the provided data
     /// </summary>
-    public string Label { get; } = label;
+    /// <param name="label">The breadcrumb's label</param>
+    /// <param name="link">The link associated to the breadcrumb</param>
+    /// <param name="icon">The breadcrumb's icon, if any</param>
+    public BreadcrumbItem(string label, string link, string? icon = null)
+    {
+        Label = label;
+        Link = link;
+        Icon = icon;
+    }
 
     /// <summary>
-    /// Gets the link associated to the breadcrumb
+    /// Initializes a new <see cref="BreadcrumbItem"/> with the provided template
     /// </summary>
-    public string Link { get; } = link;
+    /// <param name="template">The breadcrumb's template</param>
+    public BreadcrumbItem(RenderFragment template)
+    {
+        Template = template;
+    }
+
+    /// <summary>
+    /// Gets the breadcrumb's label, if any
+    /// </summary>
+    public string? Label { get; }
+
+    /// <summary>
+    /// Gets the link associated to the breadcrumb, if any
+    /// </summary>
+    public string? Link { get; }
 
     /// <summary>
     /// Gets the breadcrumb's icon, if any
     /// </summary>
-    public string? Icon { get; } = icon;
+    public string? Icon { get; }
+
+    /// <summary>
+    /// Get the breadcrumb's <see cref="RenderFragment"/>, if any
+    /// </summary>
+    public RenderFragment? Template { get; }
 
 }
diff --git a/src/dashboard/Synapse.Dashboard/Components/Breadcrumb/Breadcrumbs.cs b/src/dashboard/Synapse.Dashboard/Components/Breadcrumb/Breadcrumbs.cs
@@ -11,14 +11,46 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+using Synapse.Resources;
+
 namespace Synapse.Dashboard.Components;
 
 /// <summary>
 /// Exposes the default breadcrumbs for all pages of the application
 /// </summary>
 public static class Breadcrumbs
 {
-
+    /// <summary>
+    /// Holds the breadcrumb items for <see cref="Workflow"/> related routes
+    /// </summary>
     public static BreadcrumbItem[] Workflows = [new("Workflows", "/workflows")];
+    /// <summary>
+    /// Holds the breadcrumb items for <see cref="WorkflowInstance"/> related routes
+    /// </summary>
+    public static BreadcrumbItem[] WorkflowInstances = [new("Workflows Instances", "/workflow-instances")];
+    /// <summary>
+    /// Holds the breadcrumb items for the user profile related routes
+    /// </summary>
+    public static BreadcrumbItem[] UserProfile = [new("User Profile", "/users/profile")];
+    /// <summary>
+    /// Holds the breadcrumb items for <see cref="Operator"/> related routes
+    /// </summary>
+    public static BreadcrumbItem[] Operators = [new("Operators", "/operators")];
+    /// <summary>
+    /// Holds the breadcrumb items for <see cref="Namespace"/> related routes
+    /// </summary>
+    public static BreadcrumbItem[] Namespaces = [new("Namespaces", "/operators")];
+    /// <summary>
+    /// Holds the breadcrumb items for <see cref="Correlator"/> related routes
+    /// </summary>
+    public static BreadcrumbItem[] Correlators = [new("Correlators", "/correlators")];
+    /// <summary>
+    /// Holds the breadcrumb items for <see cref="Correlation"/> related routes
+    /// </summary>
+    public static BreadcrumbItem[] Correlations = [new("Correlations", "/correlations")];
+    /// <summary>
+    /// Holds the breadcrumb items for about related routes
+    /// </summary>
+    public static BreadcrumbItem[] About = [new("About", "/about")];
 
 }
diff --git a/src/dashboard/Synapse.Dashboard/Components/Layout/MainLayout.razor b/src/dashboard/Synapse.Dashboard/Components/Layout/MainLayout.razor
@@ -101,6 +101,7 @@
             </Authorized>
         </AuthorizeView>
     </nav>
+    <Synapse.Dashboard.Components.Breadcrumb class="d-flex align-items-center px-3 py-2" />
     <div class="content flex-grow d-flex flex-column p-3">
         @Body
     </div>

diff --git a/...hboard/Synapse.Dashboard/Components/WorkflowVersionSelector/WorkflowVersionSelector.razor b/...hboard/Synapse.Dashboard/Components/WorkflowVersionSelector/WorkflowVersionSelector.razor
@@ -0,0 +1,46 @@
+@*
+    Copyright © 2024-Present The Synapse Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*@
+
+@namespace Synapse.Dashboard.Components
+
+@if (Workflow != null)
+{
+    <select class="form-select w-auto border-0 py-0 ps-0 text-decoration-underline text-primary @ClassNames" @onchange="async (e) => await OnVersionChangedAsync(e)">
+        @if (Workflow != null)
+        {
+            foreach (var definitionVersion in Workflow.Spec.Versions)
+            {
+                <option value="@definitionVersion.Document.Version" selected="@(definitionVersion.Document.Version == Version)">@definitionVersion.Document.Version</option>
+            }
+        }
+    </select>
+}
+@code {
+
+    protected string? ClassNames => Class;
+    [Parameter] public Workflow? Workflow { get; set; }
+    [Parameter] public string? Version { get; set; }
+    [Parameter] public EventCallback<ChangeEventArgs> OnChange { get; set; }
+    [Parameter] public string? Class { get; set; }
+
+    async Task OnVersionChangedAsync(ChangeEventArgs e)
+    {
+        if (OnChange.HasDelegate)
+        {
+            await this.OnChange.InvokeAsync(e);    
+        }
+    }
+}
diff --git a/src/dashboard/Synapse.Dashboard/Pages/About/View.razor b/src/dashboard/Synapse.Dashboard/Pages/About/View.razor
@@ -16,6 +16,7 @@
 
 @namespace Synapse.Dashboard.Components
 @page "/about"
+@inject IBreadcrumbManager BreadcrumbManager
 
 <PageTitle>Synapse - About</PageTitle>
 
@@ -65,4 +66,13 @@
             </p>
         </div>
     </div>
-</div>
+</div>
+
+@code {
+    /// <inheritdoc/>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        BreadcrumbManager.Use(Breadcrumbs.About);
+    }
+}
diff --git a/src/dashboard/Synapse.Dashboard/Pages/Correlations/List/View.razor b/src/dashboard/Synapse.Dashboard/Pages/Correlations/List/View.razor
@@ -2,6 +2,7 @@
 @attribute [Authorize]
 @namespace Synapse.Dashboard.Pages.Correlations.List
 @inherits NamespacedResourceManagementComponent<Correlation>
+@inject IBreadcrumbManager BreadcrumbManager
 
 <ApplicationTitle>Correlations</ApplicationTitle>
 
@@ -165,4 +166,10 @@
         else return $"/workflow-instances/{correlation.Spec.Outcome.Correlate!.Instance}";
     }
 
+    /// <inheritdoc/>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        BreadcrumbManager.Use(Breadcrumbs.Correlations);
+    }
 }
diff --git a/src/dashboard/Synapse.Dashboard/Pages/Correlators/List/View.razor b/src/dashboard/Synapse.Dashboard/Pages/Correlators/List/View.razor
@@ -2,6 +2,7 @@
 @attribute [Authorize]
 @namespace Synapse.Dashboard.Pages.Correlators.List
 @inherits NamespacedResourceManagementComponent<Correlator>
+@inject IBreadcrumbManager BreadcrumbManager
 
 <ApplicationTitle>Correlators</ApplicationTitle>
 
@@ -67,7 +68,13 @@
 
 <ConfirmDialog @ref="Dialog" />
 
-@{
+@code {
+    /// <inheritdoc/>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        BreadcrumbManager.Use(Breadcrumbs.Correlators);
+    }
 
     string GetStatusClass(Correlator correlator)
     {

diff --git a/src/dashboard/Synapse.Dashboard/Pages/Namespaces/List/View.razor b/src/dashboard/Synapse.Dashboard/Pages/Namespaces/List/View.razor
@@ -2,6 +2,7 @@
 @attribute [Authorize]
 @namespace Synapse.Dashboard.Pages.Namespaces.List
 @inherits ClusterResourceManagementComponent<Namespace>
+@inject IBreadcrumbManager BreadcrumbManager
 
 <ApplicationTitle>Namespaces</ApplicationTitle>
 
@@ -51,4 +52,13 @@
 
 <Offcanvas @ref="EditorOffCanvas" Size="OffcanvasSize.Large" UseStaticBackdrop="false" BodyCssClass="d-flex flex-column" />
 
-<ConfirmDialog @ref="Dialog" />
+<ConfirmDialog @ref="Dialog" />
+
+@code {
+    /// <inheritdoc/>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        BreadcrumbManager.Use(Breadcrumbs.Namespaces);
+    }
+}
diff --git a/src/dashboard/Synapse.Dashboard/Pages/Operators/List/View.razor b/src/dashboard/Synapse.Dashboard/Pages/Operators/List/View.razor
@@ -2,6 +2,7 @@
 @attribute [Authorize]
 @namespace Synapse.Dashboard.Pages.Operators.List
 @inherits NamespacedResourceManagementComponent<Operator>
+@inject IBreadcrumbManager BreadcrumbManager
 
 <ApplicationTitle>Operators</ApplicationTitle>
 
@@ -67,7 +68,13 @@
 
 <ConfirmDialog @ref="Dialog" />
 
-@{
+@code {
+    /// <inheritdoc/>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        BreadcrumbManager.Use(Breadcrumbs.Operators);
+    }
 
     string GetStatusClass(Operator @operator)
     {

diff --git a/src/dashboard/Synapse.Dashboard/Pages/Users/Profile.razor b/src/dashboard/Synapse.Dashboard/Pages/Users/Profile.razor
@@ -1,6 +1,7 @@
 @page "/users/profile"
 @attribute [Authorize]
 @inject ApplicationAuthenticationStateProvider AuthenticationStateProvider
+@inject IBreadcrumbManager BreadcrumbManager
 
 <ApplicationTitle>User Profile</ApplicationTitle>
 
@@ -31,6 +32,7 @@
 
     protected override async Task OnInitializedAsync()
     {
+        BreadcrumbManager.Use(Breadcrumbs.UserProfile);
         user = (await AuthenticationStateProvider.GetAuthenticationStateAsync()).User;
         AuthenticationStateProvider.AuthenticationStateChanged += OnAuthenticationStateChanged;
         await base.OnInitializedAsync();

diff --git a/src/dashboard/Synapse.Dashboard/Pages/WorkflowInstances/List/View.razor b/src/dashboard/Synapse.Dashboard/Pages/WorkflowInstances/List/View.razor
@@ -3,6 +3,7 @@
 @namespace Synapse.Dashboard.Pages.WorkflowInstances.List
 @using BlazorBootstrap
 @inherits NamespacedResourceManagementComponent<View, WorkflowInstanceListComponentStore, WorkflowInstanceListState, WorkflowInstance>
+@inject IBreadcrumbManager BreadcrumbManager
 
 <ApplicationTitle>Workflow Instances</ApplicationTitle>
 
@@ -27,6 +28,11 @@
 
 @code{
 
+    RenderFragment Title() => __builder =>
+    {
+        <h4>Workflow Instances</h4>
+    };
+
     /// <summary>
     /// Gets the list of available <see cref="Workflow"/>s
     /// </summary>
@@ -36,15 +42,11 @@
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();
+        BreadcrumbManager.Use(Breadcrumbs.WorkflowInstances);
         this.Store.Workflows.Subscribe(workflows => this.OnStateChanged(cmp => cmp.Workflows = workflows), token: this.CancellationTokenSource.Token);
         await this.Store.ListWorkflowsAsync().ConfigureAwait(false);
     }
 
-    RenderFragment Title() => __builder =>
-    {
-        <h4>Workflow Instances</h4>
-    };
-
     /// <summary>
     /// Handles changes of the workflow selector
     /// </summary>