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

Enabled light theme support in the Dashboard

Author: cdavernas

src/dashboard/Synapse.Dashboard/enum.cs renamed to src/dashboard/Synapse.Dashboard/CheckboxState.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/DocumentDetails/Store.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/IMonacoEditorHelper.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/MonacoEditorHelper.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/MonacoEditor/Store.cs

@@ -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/ResourceEditor/ResourceEditor.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 border-@TaskInstance.Status.GetColorClass() 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 border-@run.Outcome.GetColorClass() 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/TaskInstanceDetails/TaskInstanceDetails.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 border-@Kvp.Value.Status.GetColorClass() 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/CorrelationContextRow.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 border-@TaskInstance.Status.GetColorClass() 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/TaskInstanceRow.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 border-@workflowInstance.Status?.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">