Skip to content

Added copy to clipboard button to the Dashboard's editors #436

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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())
{
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
};
}
Expand Down
29 changes: 28 additions & 1 deletion src/dashboard/Synapse.Dashboard/Components/MonacoEditor/Store.cs
Original file line number Diff line number Diff line change
Expand Up @@ -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())
{

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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)

Check warning on line 261 in src/dashboard/Synapse.Dashboard/Components/ResourceEditor/ResourceEditor.razor

View workflow job for this annotation

GitHub Actions / build (8.0.x)

The variable 'ex' is declared but never used

Check warning on line 261 in src/dashboard/Synapse.Dashboard/Components/ResourceEditor/ResourceEditor.razor

View workflow job for this annotation

GitHub Actions / build (8.0.x)

The variable 'ex' is declared but never used
{
this.ToastService.Notify(new(ToastType.Danger, "Failed to copy the definition to the clipboard."));
}
}

private bool disposed;
/// <summary>
/// Disposes of the component
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,6 @@ else
string? version;
string? chosenName;
string? nameInputValue;
string? namespaceSelectValue;
bool loading;
bool saving;
ProblemDetails? problemDetails = null;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading