Merge pull request #449 from serverlessworkflow/fix-dashboard-light-theme

Light theme improvements and close button for editor errors in the Dashboard

Author: cdavernas

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

@@ -58,8 +58,9 @@
         }
         @if (problemDetails != null)
         {
-            <div class="problems p-3">
-                <Callout Color="CalloutColor.Danger" Heading="@problemDetails.Title">
+            <div class="problems px-3">
+                <Callout Color="CalloutColor.Danger" Heading="@problemDetails.Title" Class="position-relative">
+                    <Icon Name="IconName.X" Class="position-absolute" @onclick="() => Store.SetProblemDetails(null)" />
                     <p>@problemDetails.Detail</p>
 
                     @if (problemDetails.Errors != null && problemDetails.Errors.Any())

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

@@ -67,5 +67,5 @@ public record DocumentDetailsState
     /// <summary>
     /// Gets/sets the list of <see cref="ProblemDetails"/> errors that occurred when trying to save the resource, if any
     /// </summary>
-    public EquatableDictionary<string, string[]> ProblemErrors { get; set; } = new EquatableDictionary<string, string[]>();
+    public IDictionary<string, string[]> ProblemErrors { get; set; } = new EquatableDictionary<string, string[]>();
 }

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

@@ -13,6 +13,7 @@
 
 using Synapse.Api.Client.Services;
 using Synapse.Dashboard.Components.WorkflowInstanceLogsStateManagement;
+using Synapse.Dashboard.Pages.Functions.Create;
 
 namespace Synapse.Dashboard.Components.DocumentDetailsStateManagement;
 
@@ -380,6 +381,22 @@ public async Task OnCopyToClipboard()
             this.Logger.LogError("Unable to copy to clipboard: {exception}", ex.ToString());
         }
     }
+
+    /// <summary>
+    /// Sets the state's <see cref="CreateFunctionViewState" /> <see cref="ProblemDetails"/>'s related data
+    /// </summary>
+    /// <param name="problem">The <see cref="ProblemDetails"/> to populate the data with</param>
+    public void SetProblemDetails(ProblemDetails? problem)
+    {
+        this.Reduce(state => state with
+        {
+            ProblemType = problem?.Type,
+            ProblemTitle = problem?.Title ?? string.Empty,
+            ProblemStatus = problem?.Status ?? 0,
+            ProblemDetail = problem?.Detail ?? string.Empty,
+            ProblemErrors = problem?.Errors?.ToDictionary(kvp => kvp.Key, kvp => kvp.Value) ?? []
+        });
+    }
     #endregion
 
     /// <inheritdoc/>

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

@@ -38,8 +38,9 @@
             OnDidChangeModelContent="OnTextBasedValueChanged" />
         @if (problemDetails != null)
         {
-            <div class="problems p-3">
-                <Callout Color="CalloutColor.Danger" Heading="@problemDetails.Title">
+            <div class="problems px-3">
+                <Callout Color="CalloutColor.Danger" Heading="@problemDetails.Title" Class="position-relative">
+                    <Icon Name="IconName.X" Class="position-absolute" @onclick="() => Store.SetProblemDetails(null)" />
                     <p>@problemDetails.Detail</p>
 
                     @if (problemDetails.Errors != null && problemDetails.Errors.Any())

src/dashboard/Synapse.Dashboard/Pages/Functions/Create/View.razor

@@ -53,8 +53,9 @@ else
                           CssClass="h-100" />
     @if (problemDetails != null)
     {
-        <div class="problems p-3">
-            <Callout Color="CalloutColor.Danger" Heading="@problemDetails.Title">
+        <div class="problems px-3">
+            <Callout Color="CalloutColor.Danger" Heading="@problemDetails.Title" Class="position-relative">
+                <Icon Name="IconName.X" Class="position-absolute" @onclick="() => Store.SetProblemDetails(null)" />
                 <p>@problemDetails.Detail</p>
 
                 @if (problemDetails.Errors != null && problemDetails.Errors.Any())

src/dashboard/Synapse.Dashboard/Pages/Workflows/Create/View.razor

@@ -43,8 +43,9 @@ else
                           CssClass="h-100" />
     @if (problemDetails != null)
     {
-        <div class="problems p-3">
-            <Callout Color="CalloutColor.Danger" Heading="@problemDetails.Title">
+        <div class="problems px-3">
+            <Callout Color="CalloutColor.Danger" Heading="@problemDetails.Title" Class="position-relative">
+                <Icon Name="IconName.X" Class="position-absolute" @onclick="() => Store.SetProblemDetails(null)" />
                 <p>@problemDetails.Detail</p>
 
                 @if (problemDetails.Errors != null && problemDetails.Errors.Any())

src/dashboard/Synapse.Dashboard/wwwroot/css/app.css

@@ -179,4 +179,15 @@ input[type="search"]::-webkit-search-cancel-button {
     max-height: 300px;
     overflow: scroll;
     width: 100%;
+
+    .bb-callout {
+        margin-top: 0;
+        margin-bottom: 0;
+
+        .bi.bi-x.position-absolute {
+            cursor: pointer;
+            top: $spacer;
+            right: $spacer;
+        }
+    }
 }

src/dashboard/Synapse.Dashboard/wwwroot/css/app.min.css

@@ -49,16 +49,20 @@ $viridisScale: // generated with 13 steps, using 12 to exclude the last yellow
         cursor: grabbing;
     }
 }
-
+:root {
+    --graph-symbol-color: #{$body-color-dark};
+}
 [data-bs-theme="dark"] {
+    --graph-symbol-color: #{$body-color-dark};
     .graph-container, .graph-canvas {
+        --stroke-color: #{$mute};
         --fill-color: #{$dark-bg-subtle-dark};
     }
 }
 
 .graph-container, .graph-canvas {
-    --stroke-color: #{$mute};
-    --fill-color: #{$body-bg};
+    --stroke-color: #{$dark};
+    --fill-color: #{$gray-700};
     display: flex;
     flex-direction: column;
 
@@ -124,6 +128,7 @@ $viridisScale: // generated with 13 steps, using 12 to exclude the last yellow
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
+        color: #{$body-color-dark};
 
         h3 {
             margin-bottom: calc($spacer / 4);
@@ -208,7 +213,7 @@ $viridisScale: // generated with 13 steps, using 12 to exclude the last yellow
 }
 
 .symbol {
-    fill: var(--bs-body-color);
+    fill: var(--graph-symbol-color);
 }
 
 .start-node circle {

src/dashboard/Synapse.Dashboard/wwwroot/css/app.scss

@@ -80,7 +80,8 @@ header.header.navbar {
         $value: map-get($theme-colors,"light");
         @include button-variant(
             transparent,
-            $value,
+            transparent,
+            $color: $body-color,
             $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
             $hover-border: shade-color($value, $btn-hover-border-shade-amount), 
             $active-background: shade-color($value, $btn-active-bg-shade-amount),