Merge pull request #446 from serverlessworkflow/feat-dashboard-light-…

…theme

Enabled light theme support in the Dashboard

src/dashboard/Synapse.Dashboard/Components/DocumentDetails/Store.cs

@@ -388,9 +388,23 @@ public override Task InitializeAsync()
         this.DocumentJson.SubscribeAsync(async (_) => {
             await this.SetTextEditorValueAsync();
         }, cancellationToken: this.CancellationTokenSource.Token);
+        this.MonacoEditorHelper.PreferredThemeChanged += OnPreferedThemeChangedAsync;
         return base.InitializeAsync();
     }
 
+    /// <summary>
+    /// Updates the editor theme
+    /// </summary>
+    /// <param name="newTheme"></param>
+    /// <returns></returns>
+    protected async Task OnPreferedThemeChangedAsync(string newTheme)
+    {
+        if (this.TextEditor != null)
+        {
+            await this.TextEditor.UpdateOptions(new EditorUpdateOptions() { Theme = newTheme });
+        }
+    }
+
     private bool disposed;
     /// <summary>
     /// Disposes of the store
@@ -412,6 +426,7 @@ protected override void Dispose(bool disposing)
                     this.TextEditor.Dispose();
                     this.TextEditor = null;
                 }
+                this.MonacoEditorHelper.PreferredThemeChanged -= OnPreferedThemeChangedAsync;
             }
             this.disposed = true;
         }

src/dashboard/Synapse.Dashboard/Components/MonacoEditor/IMonacoEditorHelper.cs

@@ -19,6 +19,12 @@ namespace Synapse.Dashboard.Components;
 /// <param name="newLanguage">The new preferred language.</param>
 /// <returns>A task representing the asynchronous operation of handling the event.</returns>
 public delegate Task PreferredLanguageChangedEventHandler(string newLanguage);
+/// <summary>
+/// Represents a delegate that is used to handle events related to changes in a user's preferred theme.
+/// </summary>
+/// <param name="newTheme">The new preferred theme.</param>
+/// <returns>A task representing the asynchronous operation of handling the event.</returns>
+public delegate Task PreferredThemeChangedEventHandler(string newTheme);
 
 /// <summary>
 /// Represents a service used to facilitate the Monaco editor configuration
@@ -35,6 +41,11 @@ public interface IMonacoEditorHelper
     /// </summary>
     event PreferredLanguageChangedEventHandler? PreferredLanguageChanged;
 
+    /// <summary>
+    /// Emits when the editor theme changes
+    /// </summary>
+    event PreferredThemeChangedEventHandler? PreferredThemeChanged;
+
     /// <summary>
     /// A function used to facilitate the construction of <see cref="StandaloneEditorConstructionOptions"/> 
     /// </summary>
@@ -58,6 +69,13 @@ public interface IMonacoEditorHelper
     /// <returns>A task representing the asynchronous operation</returns>
     Task ChangePreferredLanguageAsync(string language);
 
+    /// <summary>
+    /// Changes the preferred editor theme
+    /// </summary>
+    /// <param name="theme">The new theme to use</param>
+    /// <returns>A task representing the asynchronous operation</returns>
+    Task ChangePreferredThemeAsync(string theme);
+
     /// <summary>
     /// Returns the number of <see cref="TextModel"/> created and increases the count
     /// </summary>

src/dashboard/Synapse.Dashboard/Components/MonacoEditor/MonacoEditorHelper.cs

@@ -18,18 +18,23 @@ public class MonacoEditorHelper
     : IMonacoEditorHelper
 {
     private int _modelCount = 0;
+    private string _preferredTheme = "vs-dark";
 
     /// <inheritdoc />
     public string PreferredLanguage { get; protected set; } = "yaml";
 
+
     /// <inheritdoc />
     public event PreferredLanguageChangedEventHandler? PreferredLanguageChanged;
 
+    /// <inheritdoc />
+    public event PreferredThemeChangedEventHandler? PreferredThemeChanged;
+
     /// <inheritdoc />
     public Func<StandaloneCodeEditor, StandaloneEditorConstructionOptions> GetStandaloneEditorConstructionOptions(string value = "", bool readOnly = false, string language = "yaml") {
         return (StandaloneCodeEditor editor) => new StandaloneEditorConstructionOptions
         {
-            Theme = "vs-dark",
+            Theme = _preferredTheme,
             AutomaticLayout = true,
             Minimap = new EditorMinimapOptions { Enabled = false },
             Language = language,
@@ -63,18 +68,31 @@ public async Task ChangePreferredLanguageAsync(string language)
         if (!string.IsNullOrEmpty(language) && language != this.PreferredLanguage)
         {
             this.PreferredLanguage = language;
-            await this.OnPreferredLanguageChangeAsync(language);
+            if (this.PreferredLanguageChanged != null)
+            {
+                await this.PreferredLanguageChanged.Invoke(language);
+            }
         }
     }
 
     /// <inheritdoc />
-    protected async Task OnPreferredLanguageChangeAsync(string language)
+    public async Task ChangePreferredThemeAsync(string theme)
     {
-        if (this.PreferredLanguageChanged != null)
+        if (!string.IsNullOrEmpty(theme) && theme != this._preferredTheme)
         {
-            await this.PreferredLanguageChanged.Invoke(language);
+            if (theme == "dark")
+            {
+                theme = "vs-dark";
+            }
+            else if (theme == "light") {
+                theme = "vs";
+            }
+            this._preferredTheme = theme;
+            if (this.PreferredThemeChanged != null)
+            {
+                await this.PreferredThemeChanged.Invoke(theme);
+            }
         }
-        await Task.CompletedTask;
     }
 
     /// <inheritdoc />

src/dashboard/Synapse.Dashboard/Components/MonacoEditor/Store.cs

@@ -310,9 +310,23 @@ public override Task InitializeAsync()
         {
             this.TextEditor?.UpdateOptions(new EditorUpdateOptions() { ReadOnly = isReadOnly });
         }, token: this.CancellationTokenSource.Token);
+        this.MonacoEditorHelper.PreferredThemeChanged += OnPreferedThemeChangedAsync;
         return base.InitializeAsync();
     }
 
+    /// <summary>
+    /// Updates the editor theme
+    /// </summary>
+    /// <param name="newTheme"></param>
+    /// <returns></returns>
+    protected async Task OnPreferedThemeChangedAsync(string newTheme)
+    {
+        if (this.TextEditor != null)
+        {
+            await this.TextEditor.UpdateOptions(new EditorUpdateOptions() { Theme = newTheme });
+        }
+    }
+
     private bool disposed;
     /// <summary>
     /// Disposes of the store
@@ -334,6 +348,7 @@ protected override void Dispose(bool disposing)
                     this.TextEditor.Dispose();
                     this.TextEditor = null;
                 }
+                this.MonacoEditorHelper.PreferredThemeChanged -= OnPreferedThemeChangedAsync;
             }
             this.disposed = true;
         }

src/dashboard/Synapse.Dashboard/Components/ResourceEditor/ResourceEditor.razor

@@ -137,6 +137,7 @@
             this.textEditorValue = textEditorValue;
             await this.SetTextEditorValueAsync();
         }, cancellationToken: this.CancellationTokenSource.Token);
+        this.MonacoEditorHelper.PreferredThemeChanged += OnPreferedThemeChangedAsync;
     }
 
     /// <inheritdoc/>
@@ -155,6 +156,19 @@
         return base.OnParametersSetAsync();
     }
 
+    /// <summary>
+    /// Updates the editor theme
+    /// </summary>
+    /// <param name="newTheme"></param>
+    /// <returns></returns>
+    protected async Task OnPreferedThemeChangedAsync(string newTheme)
+    {
+        if (this.textBasedEditor != null)
+        {
+            await this.textBasedEditor.UpdateOptions(new EditorUpdateOptions() { Theme = newTheme });
+        }
+    }
+
     /// <summary>
     /// Sets the editor as read-only when saving
     /// </summary>
@@ -287,6 +301,7 @@
                     this.textBasedEditor.Dispose();
                     this.textBasedEditor = null;
                 }
+                this.MonacoEditorHelper.PreferredThemeChanged -= OnPreferedThemeChangedAsync;
             }
             this.disposed = true;
         }

src/dashboard/Synapse.Dashboard/Components/TaskInstanceDetails/TaskInstanceDetails.razor

@@ -31,7 +31,7 @@
             </div>
             <div class="col-md-12 col-lg-4">
                 <div class="label">Status</div>
-                <span class="badge rounded-pill badge rounded-pill border [email protected]() text-@TaskInstance.Status.GetColorClass()">@(TaskInstance.Status ?? TaskInstanceStatus.Pending)</span>
+                <span class="badge rounded-pill badge rounded-pill border @TaskInstance.Status.GetColorClass()">@(TaskInstance.Status ?? TaskInstanceStatus.Pending)</span>
                 @if (!string.IsNullOrWhiteSpace(TaskInstance.StatusReason))
                 {
                     <div class="fst-italic">@TaskInstance.StatusReason</div>
@@ -120,7 +120,7 @@
                             <td>@run.StartedAt.RelativeFormat()</td>
                             <td class="text-center">@(run.EndedAt?.RelativeFormat() ?? "-")</td>
                             <td class="text-center">@(run.EndedAt.HasValue ? run.EndedAt.Value.Subtract(run.StartedAt).ToString("hh\\:mm\\:ss\\.fff") : "-")</td>
-                            <td class="text-center"><span class="badge rounded-pill badge rounded-pill border [email protected]() text-@run.Outcome.GetColorClass()">@(run.Outcome ?? TaskInstanceStatus.Pending)</span></td>
+                            <td class="text-center"><span class="badge rounded-pill badge rounded-pill border @run.Outcome.GetColorClass()">@(run.Outcome ?? TaskInstanceStatus.Pending)</span></td>
                         </tr>
                     }
                 </tbody>

src/dashboard/Synapse.Dashboard/Components/WorkflowInstanceDetails/CorrelationContextRow.razor

@@ -18,7 +18,7 @@
 
 <tr @onclick="async _ => await OnToggleRow()" class="cursor-pointer">
     <td>@Kvp.Key</td>
-    <td class="text-center"><span class="badge rounded-pill badge rounded-pill border [email protected]() text-@Kvp.Value.Status.GetColorClass()">@(Kvp.Value?.Status ?? CorrelationContextStatus.Inactive)</span></td>
+    <td class="text-center"><span class="badge rounded-pill badge rounded-pill border @Kvp.Value.Status.GetColorClass()">@(Kvp.Value?.Status ?? CorrelationContextStatus.Inactive)</span></td>
     <td class="text-end"><Icon Name="@(isOpen ? IconName.CaretUp : IconName.CaretDown)" /></td>
 </tr>
 @if (isOpen)

src/dashboard/Synapse.Dashboard/Components/WorkflowInstanceDetails/TaskInstanceRow.razor

@@ -19,7 +19,7 @@
 @if (TaskInstance != null) {
     <tr @onclick="async _ => await OnToggleRow()" class="cursor-pointer">
         <td>@TaskInstance.Reference</td>
-        <td class="text-center"><span class="badge rounded-pill badge rounded-pill border [email protected]() text-@TaskInstance.Status.GetColorClass()">@(TaskInstance.Status ?? TaskInstanceStatus.Pending)</span></td>
+        <td class="text-center"><span class="badge rounded-pill badge rounded-pill border @TaskInstance.Status.GetColorClass()">@(TaskInstance.Status ?? TaskInstanceStatus.Pending)</span></td>
         <td class="text-center">@(TaskInstance.StartedAt?.RelativeFormat() ?? "-")</td>
         <td class="text-center">@(TaskInstance.EndedAt?.RelativeFormat() ?? "-")</td>
         <td class="text-center">

src/dashboard/Synapse.Dashboard/Components/WorkflowInstanceDetails/WorkflowInstanceDetails.razor

@@ -31,7 +31,7 @@
             </div>
             <div class="col-md-12 col-lg-4">
                 <div class="label">Status</div>
-                <span class="badge rounded-pill badge rounded-pill border [email protected]?.Phase.GetColorClass() text-@workflowInstance.Status?.Phase.GetColorClass()">@(workflowInstance.Status?.Phase ?? WorkflowInstanceStatusPhase.Pending)</span>
+                <span class="badge rounded-pill badge rounded-pill border @workflowInstance.Status?.Phase.GetColorClass()">@(workflowInstance.Status?.Phase ?? WorkflowInstanceStatusPhase.Pending)</span>
             </div>
         </div>
         <div class="row mb-3">

src/dashboard/Synapse.Dashboard/Components/WorkflowInstanceLogs/WorkflowInstanceLogs.razor

@@ -20,7 +20,7 @@
 @inherits StatefulComponent<WorkflowInstanceLogs, WorkflowInstanceLogsStore, WorkflowInstanceLogsState>
 
 <div class="d-flex justify-content-between cursor-pointer" @onclick="async (_) => await Store.ToggleAsync()">
-    Logs
+    <span class="label">Logs</span>
     <Icon Name="@(isExpanded ? IconName.CaretUp : IconName.CaretDown)" />
 </div>
 <Collapse @ref="Store.Collapse" OnShowing="Store.LoadLogsAsync">

src/dashboard/Synapse.Dashboard/Components/WorkflowInstancesList/WorkflowInstancesList.razor

@@ -56,7 +56,7 @@
             }
             <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" @oninput="OnSearchInputAsync" />
             <div class="dropdown d-flex align-content-center">
-                <button class="btn btn-sm btn-dark" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
+                <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
                 <ul class="dropdown-menu">
                     <li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnSuspendSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Pause" /> Suspend selected</button></li>
                     <li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnResumeSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Play" /> Resume selected</button></li>
@@ -113,7 +113,7 @@
                                                 break;
                                             }
                                         case "Status":
-                                            <span class="badge rounded-pill badge rounded-pill border border-@instance.Status?.Phase.GetColorClass() [email protected]?.Phase.GetColorClass()">@(instance.Status?.Phase ?? WorkflowInstanceStatusPhase.Pending)</span>
+                                            <span class="badge rounded-pill badge rounded-pill border @((instance.Status?.Phase ?? WorkflowInstanceStatusPhase.Pending).GetColorClass())">@(instance.Status?.Phase ?? WorkflowInstanceStatusPhase.Pending)</span>
                                             break;
                                         case "Creation Time":
                                             @instance.Metadata.CreationTimestamp?.RelativeFormat()
@@ -145,7 +145,7 @@
                                             }
                                         case "Actions":
                                             <div class="dropdown">
-                                                <button class="btn btn-sm btn-dark" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
+                                                <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
                                                 <ul class="dropdown-menu">
                                                     @if (instance.Status?.Phase == WorkflowInstanceStatusPhase.Running)
                                                     {

src/dashboard/Synapse.Dashboard/Extensions/StatusExtensions.cs

@@ -11,8 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-using Synapse.Resources;
-
 namespace Synapse.Dashboard.Extensions;
 
 /// <summary>
@@ -25,31 +23,5 @@ public static class StatusExtensions
     /// </summary>
     /// <param name="status">The status to return the color class for</param>
     /// <returns></returns>
-    public static string GetColorClass(this string? status) => status switch
-    {
-        // commented = same as above, which lead to the error "The pattern is unreachable. It has already been handled by a previous arm of the switch expression or it is impossible to match."
-        WorkflowInstanceStatusPhase.Running => "accent",
-        //CorrelatorStatusPhase.Running => "accent",
-        //OperatorStatusPhase.Running => "accent",
-        CorrelationContextStatus.Active => "accent",
-        //TaskInstanceStatus.Running => "accent", 
-        WorkflowInstanceStatusPhase.Faulted => "danger",
-        //TaskInstanceStatus.Faulted => "danger",
-        WorkflowInstanceStatusPhase.Cancelled => "warning",
-        //TaskInstanceStatus.Cancelled => "warning",
-        //CorrelationContextStatus.Cancelled => "warning",
-        WorkflowInstanceStatusPhase.Completed => "success",
-        //TaskInstanceStatus.Completed => "success",
-        //CorrelationContextStatus.Completed => "success",
-        WorkflowInstanceStatusPhase.Waiting => "cinereous",
-        TaskInstanceStatus.Suspended => "icterine",
-        //WorkflowInstanceStatusPhase.Suspended => "icterine",
-        TaskInstanceStatus.Skipped => "cinereous",
-        WorkflowInstanceStatusPhase.Pending => "mute",
-        //TaskInstanceStatus.Pending => "mute",
-        CorrelationContextStatus.Inactive => "mute",
-        CorrelatorStatusPhase.Stopped => "secondary",
-        //OperatorStatusPhase.Stopped => "secondary",
-        _ => ""
-    };
+    public static string GetColorClass(this string? status) => $"status status-{status ?? "pending"}";
 }

src/dashboard/Synapse.Dashboard/Layout/MainLayout.razor

@@ -19,9 +19,12 @@
 @inject AuthenticationStateProvider AuthenticationStateProvider
 @inject IOptions<ApplicationOptions> Options
 @inject NavigationManager NavigationManager
+@inject JSInterop JsInterop
+@inject ILocalStorage Storage
+@inject IMonacoEditorHelper MonacoEditorHelper
 
 <div class="page h-100 d-flex flex-column">    
-    <header class="header navbar navbar-expand-lg flex-row navbar-dark bg-dark-subtle">        
+    <header class="header navbar navbar-expand-lg flex-row">        
         <a class="navbar-brand d-flex flex-row align-items-center justify-content-center" href="#">        
             <svg class="logo" viewBox="-10 -10 60 60">
                 <use href="#logo" />
@@ -92,6 +95,7 @@
                 </li>
             </ul>
         </nav>
+        <button class="btn btn-sm" @onclick="OnThemeClickedAsync" title="@(theme == "dark" ? "light" : "dark")"><Icon Name="@(theme == "dark" ? IconName.Sun : IconName.Moon)" /></button>
         <AuthorizeView>
             <Authorized>
                 <Dropdown Class="me-3">
@@ -123,11 +127,14 @@
 @code{
 
     ClaimsPrincipal? user;
+    string theme = "dark";
 
     protected override async Task OnInitializedAsync()
     {
         user = (await AuthenticationStateProvider.GetAuthenticationStateAsync()).User;
         AuthenticationStateProvider.AuthenticationStateChanged += OnAuthenticationStateChanged;
+        theme = await Storage.GetItemAsync("preferedTheme") ?? "dark";
+        await MonacoEditorHelper.ChangePreferredThemeAsync(theme);
         await base.OnInitializedAsync();
     }
 
@@ -143,4 +150,10 @@
         return navLinkMatch == NavLinkMatch.All ? relativePath == href.ToLower() : relativePath.StartsWith(href.ToLower());
     }
 
+    async Task OnThemeClickedAsync()
+    {
+        theme = theme == "dark" ? "light" : "dark";
+        await JsInterop.SetThemeAsync(theme);
+    }
+
 }