fix(Dashboard): watching the DSL version in the editor and adapting the validation schema if needed

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

Author: JBBianchi

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

@@ -23,15 +23,20 @@ namespace Synapse.Dashboard.Pages.Workflows.Create;
 public record CreateWorkflowViewState
 {
     /// <summary>
-    /// Gets/sets the <see cref="WorkflowDefinition"/>'s <see cref="Namespace"/>
+    /// Gets/sets the <see cref="ServerlessWorkflow.Sdk.Models.WorkflowDefinition"/>'s <see cref="Namespace"/>
     /// </summary>
     public string? Namespace { get; set; }
 
     /// <summary>
-    /// Gets/sets the <see cref="WorkflowDefinition"/>'s name
+    /// Gets/sets the <see cref="ServerlessWorkflow.Sdk.Models.WorkflowDefinition"/>'s name
     /// </summary>
     public string? Name { get; set; }
 
+    /// <summary>
+    /// Gets/sets the <see cref="ServerlessWorkflow.Sdk.Models.WorkflowDefinition"/>'s  DSL version
+    /// </summary>
+    public string? DslVersion { get; set; }
+
     /// <summary>
     /// Gets/sets the definition of the workflow to create
     /// </summary>

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

@@ -11,14 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-using Json.Schema;
 using JsonCons.Utilities;
 using Neuroglia.Data;
 using Semver;
 using ServerlessWorkflow.Sdk.Models;
 using Synapse.Api.Client.Services;
 using Synapse.Dashboard.Components.ResourceEditorStateManagement;
 using Synapse.Resources;
+using System.Text.RegularExpressions;
 
 namespace Synapse.Dashboard.Pages.Workflows.Create;
 
@@ -48,7 +48,8 @@ MonacoInterop monacoInterop
 
     private TextModel? _textModel = null;
     private string _textModelUri = string.Empty;
-    private bool _disposed;
+    private bool _disposed = false;
+    private bool _processingVersion = false;
 
     /// <summary>
     /// Gets the service used to interact with the Synapse API
@@ -115,6 +116,10 @@ MonacoInterop monacoInterop
     /// Gets an <see cref="IObservable{T}"/> used to observe changes to the state's <see cref="CreateWorkflowViewState.WorkflowDefinition"/> property
     /// </summary>
     public IObservable<WorkflowDefinition?> WorkflowDefinition => this.Select(state => state.WorkflowDefinition).DistinctUntilChanged();
+    /// <summary>
+    /// Gets an <see cref="IObservable{T}"/> used to observe changes to the state's <see cref="CreateWorkflowViewState.WorkflowDefinitionText"/> property
+    /// </summary>
+    public IObservable<string?> WorkflowDefinitionText => this.Select(state => state.WorkflowDefinitionText).DistinctUntilChanged();
 
     /// <summary>
     /// Gets an <see cref="IObservable{T}"/> used to observe changes to the state's <see cref="CreateWorkflowViewState.Loading"/> property
@@ -289,16 +294,17 @@ public async Task OnTextBasedEditorInitAsync()
     /// <returns></returns>
     public async Task SetTextBasedEditorLanguageAsync()
     {
+        if (this.TextEditor == null)
+        {
+            return;
+        }
         try
         {
             var language = this.MonacoEditorHelper.PreferredLanguage;
-            if (this.TextEditor != null)
-            {
-                this._textModel = await Global.GetModel(this.JSRuntime, this._textModelUri);
-                this._textModel ??= await Global.CreateModel(this.JSRuntime, "", language, this._textModelUri);
-                await Global.SetModelLanguage(this.JSRuntime, this._textModel, language);
-                await this.TextEditor!.SetModel(this._textModel);
-            }
+            this._textModel = await Global.GetModel(this.JSRuntime, this._textModelUri);
+            this._textModel ??= await Global.CreateModel(this.JSRuntime, "", language, this._textModelUri);
+            await Global.SetModelLanguage(this.JSRuntime, this._textModel, language);
+            await this.TextEditor!.SetModel(this._textModel);
         }
         catch (Exception ex)
         {
@@ -314,20 +320,34 @@ public async Task SetTextBasedEditorLanguageAsync()
     async Task SetTextEditorValueAsync()
     {
         var document = this.Get(state => state.WorkflowDefinitionText);
-        if (this.TextEditor != null && !string.IsNullOrWhiteSpace(document))
+        if (this.TextEditor == null || string.IsNullOrWhiteSpace(document))
         {
-            await this.TextEditor.SetValue(document);
-            try
-            {
-                //await this.TextEditor.Trigger("", "editor.action.triggerSuggest");
-                await this.TextEditor.Trigger("", "editor.action.formatDocument");
-            }
-            catch (Exception ex)
-            {
-                Console.WriteLine(ex.ToString());
-                // todo: handle exception
-            }
+            return;
         }
+        await this.TextEditor.SetValue(document);
+        try
+        {
+            await this.TextEditor.Trigger("", "editor.action.formatDocument");
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine(ex.ToString());
+            // todo: handle exception
+        }
+    }
+
+    /// <summary>
+    /// Handles text editor content changes
+    /// </summary>
+    /// <param name="e">The <see cref="ModelContentChangedEvent"/></param>
+    /// <returns>An awaitable task</returns>
+    public async Task OnDidChangeModelContent(ModelContentChangedEvent e)
+    {
+        if (this.TextEditor == null) return;
+        var document = await this.TextEditor.GetValue();
+        this.Reduce(state => state with {
+            WorkflowDefinitionText = document
+        });
     }
 
     /// <summary>
@@ -442,10 +462,6 @@ public override async Task InitializeAsync()
             string document = "";
             if (definition != null)
             {
-                if (definition.Document?.Dsl != null)
-                {
-                    await this.SetValidationSchema($"v{definition.Document.Dsl}");
-                }
                 document = this.MonacoEditorHelper.PreferredLanguage == PreferredLanguage.JSON ?
                     this.JsonSerializer.SerializeToText(definition) :
                     this.YamlSerializer.SerializeToText(definition);
@@ -464,6 +480,25 @@ public override async Task InitializeAsync()
         {
             await this.GetWorkflowDefinitionAsync(workflow.ns, workflow.name);
         }, cancellationToken: this.CancellationTokenSource.Token);
+        this.WorkflowDefinitionText.Where(document => !string.IsNullOrEmpty(document)).Throttle(new(100)).SubscribeAsync(async (document) => {
+            if (string.IsNullOrWhiteSpace(document))
+            {
+                return;
+            }
+            var currentDslVersion = this.Get(state => state.DslVersion);
+            var versionExtractor = new Regex("'?\"?(dsl|DSL)'?\"?\\s*:\\s*'?\"?([\\w\\.\\-\\+]*)'?\"?");
+            var match = versionExtractor.Match(document);
+            if (match == null)
+            {
+                return;
+            }
+            var documentDslVersion = match.Groups[2].Value;
+            if (documentDslVersion == currentDslVersion)
+            {
+                return;
+            }
+            await this.SetValidationSchema("v" + documentDslVersion);
+        }, cancellationToken: this.CancellationTokenSource.Token);
         await base.InitializeAsync();
     }
 
@@ -475,10 +510,34 @@ public override async Task InitializeAsync()
     protected async Task SetValidationSchema(string? version = null)
     {
         version = version ?? await this.SpecificationSchemaManager.GetLatestVersion();
-        var schema = await this.SpecificationSchemaManager.GetSchema(version);
-        var type = $"create_{typeof(WorkflowDefinition).Name.ToLower()}_{version}";
-        await this.MonacoInterop.AddValidationSchemaAsync(schema, $"https://synapse.io/schemas/{type}.json", $"{type}*").ConfigureAwait(false);
-        this._textModelUri = this.MonacoEditorHelper.GetResourceUri(type);
+        var currentVersion = this.Get(state => state.DslVersion);
+        if (currentVersion == version)
+        {
+            return;
+        }
+        if (this._processingVersion)
+        {
+            return;
+        }
+        this.SetProblemDetails(null);
+        this._processingVersion = true;
+        try
+        {
+            var schema = await this.SpecificationSchemaManager.GetSchema(version);
+            var type = $"create_{typeof(WorkflowDefinition).Name.ToLower()}_{version}_schema";
+            await this.MonacoInterop.AddValidationSchemaAsync(schema, $"https://synapse.io/schemas/{type}.json", $"{type}*").ConfigureAwait(false);
+            this._textModelUri = this.MonacoEditorHelper.GetResourceUri(type);
+            this.Reduce(state => state with
+            {
+                DslVersion = version
+            });
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine(ex.ToString());
+            this.SetProblemDetails(new ProblemDetails(new Uri("about:blank"), "Unable to set the validation schema", 404, $"Unable to set the validation schema for the specification version '{version}'. Make sure the version exists."));
+        }
+        this._processingVersion = false;
     }
 
     /// <summary>

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

@@ -39,6 +39,7 @@ else
     <StandaloneCodeEditor @ref="Store.TextEditor"
                           ConstructionOptions="Store.StandaloneEditorConstructionOptions"
                           OnDidInit="Store.OnTextBasedEditorInitAsync"
+                          OnDidChangeModelContent="Store.OnDidChangeModelContent"
                           CssClass="h-100" />
     <div class="problems">
         @if (problemDetails != null)