Merge pull request #436 from serverlessworkflow/feat-dashboard-copy-to-clipboard

Added copy to clipboard button to the Dashboard's editors

Author: cdavernas

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

@@ -43,7 +43,12 @@
         }
         else
         {
-            <div class="d-flex justify-content-end mb-2">
+            <div class="d-flex justify-content-between mb-2">
+                <div>
+                    <Button Outline="true" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="Store.OnCopyToClipboard" TooltipTitle="Copy to clipboard">
+                        <Icon Name="IconName.Clipboard" />
+                    </Button>
+                </div>
                 <PreferredLanguageSelector PreferedLanguageChange="Store.ToggleTextBasedEditorLanguageAsync" />
             </div>
             <StandaloneCodeEditor @ref="Store.TextEditor"

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

@@ -25,13 +25,15 @@ namespace Synapse.Dashboard.Components.DocumentDetailsStateManagement;
 /// <param name="monacoEditorHelper">The service used ease Monaco Editor interactions</param>
 /// <param name="jsonSerializer">The service used to serialize and deserialize JSON</param>
 /// <param name="yamlSerializer">The service used to serialize and deserialize YAML</param>
+/// <param name="toastService">The service used display toast messages</param>
 public class DocumentDetailsStore(
     ILogger<DocumentDetailsStore> logger,
     ISynapseApiClient apiClient,
     IJSRuntime jsRuntime,
     IMonacoEditorHelper monacoEditorHelper,
     IJsonSerializer jsonSerializer,
-    IYamlSerializer yamlSerializer
+    IYamlSerializer yamlSerializer,
+    ToastService toastService
 )
     : ComponentStore<DocumentDetailsState>(new())
 {
@@ -69,6 +71,11 @@ IYamlSerializer yamlSerializer
     /// </summary>
     protected IYamlSerializer YamlSerializer { get; } = yamlSerializer;
 
+    /// <summary>
+    /// Gets the service used display toast messages
+    /// </summary>
+    protected ToastService ToastService { get; } = toastService;
+
     /// <summary>
     /// The <see cref="BlazorMonaco.Editor.StandaloneEditorConstructionOptions"/> provider function
     /// </summary>
@@ -352,6 +359,27 @@ async Task SetTextEditorValueAsync()
             }
         }
     }
+
+    /// <summary>
+    /// Copies to content of the Monaco editor to the clipboard
+    /// </summary>
+    /// <returns>A awaitable task</returns>
+    public async Task OnCopyToClipboard()
+    {
+        if (this.TextEditor == null) return;
+        var text = await this.TextEditor.GetValue();
+        if (string.IsNullOrWhiteSpace(text)) return;
+        try
+        {
+            await this.JSRuntime.InvokeVoidAsync("navigator.clipboard.writeText", text);
+            this.ToastService.Notify(new(ToastType.Success, "Definition copied to the clipboard!"));
+        }
+        catch (Exception ex)
+        {
+            this.ToastService.Notify(new(ToastType.Danger, "Failed to copy the definition to the clipboard."));
+            this.Logger.LogError("Unable to copy to clipboard: {exception}", ex.ToString());
+        }
+    }
     #endregion
 
     /// <inheritdoc/>

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

@@ -18,7 +18,12 @@
 @using Synapse.Dashboard.Components.MonacoEditorStateManagement
 @inherits StatefulComponent<MonacoEditor, MonacoEditorStore, MonacoEditorState>
 
-<div class="d-flex justify-content-end mb-2">
+<div class="d-flex justify-content-between mb-2">
+    <div>
+        <Button Outline="true" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="Store.OnCopyToClipboard" TooltipTitle="Copy to clipboard">
+            <Icon Name="IconName.Clipboard" />
+        </Button>
+    </div>
     <PreferredLanguageSelector PreferedLanguageChange="Store.ToggleTextBasedEditorLanguageAsync" />
 </div>
 <StandaloneCodeEditor @ref="Store.TextEditor"

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

@@ -36,10 +36,13 @@ public Func<StandaloneCodeEditor, StandaloneEditorConstructionOptions> GetStanda
             ReadOnly = readOnly,
             Value = value,
             TabSize = 2,
+            FormatOnPaste = true,
+            FormatOnType = true,
             QuickSuggestions = new QuickSuggestionsOptions
             {
                 Other = "true",
-                Strings = "true"
+                Strings = "true",
+                Comments = "fasle"
             }
         };
     }

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

@@ -25,7 +25,8 @@ namespace Synapse.Dashboard.Components.MonacoEditorStateManagement;
 /// <param name="monacoEditorHelper">The service used ease Monaco Editor interactions</param>
 /// <param name="jsonSerializer">The service used to serialize and deserialize JSON</param>
 /// <param name="yamlSerializer">The service used to serialize and deserialize YAML</param>
-public class MonacoEditorStore(ILogger<MonacoEditorStore> logger, ISynapseApiClient apiClient, IJSRuntime jsRuntime, IMonacoEditorHelper monacoEditorHelper, IJsonSerializer jsonSerializer, IYamlSerializer yamlSerializer)
+/// <param name="toastService">The service used display toast messages</param>
+public class MonacoEditorStore(ILogger<MonacoEditorStore> logger, ISynapseApiClient apiClient, IJSRuntime jsRuntime, IMonacoEditorHelper monacoEditorHelper, IJsonSerializer jsonSerializer, IYamlSerializer yamlSerializer, ToastService toastService)
     : ComponentStore<MonacoEditorState>(new())
 {
 
@@ -62,6 +63,11 @@ public class MonacoEditorStore(ILogger<MonacoEditorStore> logger, ISynapseApiCli
     /// </summary>
     protected IYamlSerializer YamlSerializer { get; } = yamlSerializer;
 
+    /// <summary>
+    /// Gets the service used display toast messages
+    /// </summary>
+    protected ToastService ToastService { get; } = toastService;
+
     /// <summary>
     /// The <see cref="BlazorMonaco.Editor.StandaloneEditorConstructionOptions"/> provider function
     /// </summary>
@@ -271,6 +277,27 @@ async Task SetTextEditorValueAsync()
             await this.TextEditor.SetValue(document);
         }
     }
+
+    /// <summary>
+    /// Copies to content of the Monaco editor to the clipboard
+    /// </summary>
+    /// <returns>A awaitable task</returns>
+    public async Task OnCopyToClipboard()
+    {
+        if (this.TextEditor == null) return;
+        var text = await this.TextEditor.GetValue();
+        if (string.IsNullOrWhiteSpace(text)) return;
+        try
+        {
+            await this.JSRuntime.InvokeVoidAsync("navigator.clipboard.writeText", text);
+            this.ToastService.Notify(new(ToastType.Success, "Definition copied to the clipboard!"));
+        }
+        catch (Exception ex)
+        {
+            this.ToastService.Notify(new(ToastType.Danger, "Failed to copy the definition to the clipboard."));
+            this.Logger.LogError("Unable to copy to clipboard: {exception}", ex.ToString());
+        }
+    }
     #endregion
 
     /// <inheritdoc/>

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

@@ -20,10 +20,16 @@
 @inherits StatefulComponent<ResourceEditor<TResource>, ResourceEditorStore<TResource>, ResourceEditorState<TResource>>
 @inject IMonacoEditorHelper MonacoEditorHelper
 @inject IJSRuntime JSRuntime
+@inject ToastService ToastService
 
 <div class="container-fluid d-flex flex-grow flex-column">
     <div class="row flex-grow">
-        <div class="d-flex justify-content-end mb-2">
+        <div class="d-flex justify-content-between mb-2">
+            <div>
+                <Button Outline="true" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="OnCopyToClipboard" TooltipTitle="Copy to clipboard">
+                    <Icon Name="IconName.Clipboard" />
+                </Button>
+            </div>
             <PreferredLanguageSelector PreferedLanguageChange="ToggleTextBasedEditorLanguageAsync" />
         </div>
         <StandaloneCodeEditor @ref="textBasedEditor"
@@ -237,6 +243,27 @@
         }
     }
 
+
+    /// <summary>
+    /// Copies to content of the Monaco editor to the clipboard
+    /// </summary>
+    /// <returns>A awaitable task</returns>
+    public async Task OnCopyToClipboard()
+    {
+        if (this.textBasedEditor == null) return;
+        var text = await this.textBasedEditor.GetValue();
+        if (string.IsNullOrWhiteSpace(text)) return;
+        try
+        {
+            await this.JSRuntime.InvokeVoidAsync("navigator.clipboard.writeText", text);
+            this.ToastService.Notify(new(ToastType.Success, "Definition copied to the clipboard!"));
+        }
+        catch (Exception ex)
+        {
+            this.ToastService.Notify(new(ToastType.Danger, "Failed to copy the definition to the clipboard."));
+        }
+    }
+
     private bool disposed;
     /// <summary>
     /// Disposes of the component

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

@@ -91,7 +91,6 @@ else
     string? version;
     string? chosenName;
     string? nameInputValue;
-    string? namespaceSelectValue;
     bool loading;
     bool saving;
     ProblemDetails? problemDetails = null;

src/dashboard/Synapse.Dashboard/Pages/Workflows/Create/State.cs

@@ -44,7 +44,7 @@ public record CreateWorkflowViewState
     {
         Document = new()
         {
-            Dsl = "1.0.0-alpha3",
+            Dsl = "1.0.0-alpha5",
             Namespace = Neuroglia.Data.Infrastructure.ResourceOriented.Namespace.DefaultNamespaceName,
             Name = "new-workflow",
             Version = "0.1.0"