fix(Dashboard): added icon to close editor errors

Closes #447

Signed-off-by: Jean-Baptiste Bianchi <[email protected]>

Author: JBBianchi

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