feat: add code editor to properly display json

philasmar · philasmar · commit 5d79af627ade · 2024-12-20T10:57:35.000-05:00
diff --git a/Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Amazon.Lambda.TestTool.csproj b/Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Amazon.Lambda.TestTool.csproj
@@ -19,6 +19,7 @@
     <PackageReference Include="Spectre.Console.Cli" Version="0.49.1" />
     <PackageReference Include="Blazored.Modal" Version="7.3.1" />
     <PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="8.0.11" />
+    <PackageReference Include="BlazorMonaco" Version="3.2.0" />
   </ItemGroup>
 
   <ItemGroup>
diff --git a/Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Components/App.razor b/Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Components/App.razor
@@ -16,6 +16,9 @@
     <Routes @rendermode="InteractiveServer" />
     <script src="_framework/blazor.web.js"></script>
     <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="_content/BlazorMonaco/jsInterop.js"></script>
+    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
+    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
 </body>
 
 </html>
diff --git a/Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Components/Pages/Home.razor b/Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Components/Pages/Home.razor
@@ -23,36 +23,40 @@
 </div>
 
 <div class="row">
-    <div class="col-sm-6">
-        <h3>Queue Event:</h3>
-        <label class="" for="sample-requests">Example Requests:</label>
-        <select class="control" id="sample-requests" @bind="SelectedSampleRequestName">
-            <option id="@NO_SAMPLE_SELECTED_ID"> -- select a request -- </option>
-            @if (@SampleRequests.ContainsKey(SampleRequestManager.SavedRequestGroup))
-            {
-                <optgroup id="saved-select-request-group" label="@SampleRequestManager.SavedRequestGroup">
-                    @foreach (var request in SampleRequests[SampleRequestManager.SavedRequestGroup])
-                    {
-                        <option value="@request.Filename">@request.Name</option>
-                    }
-                </optgroup>
-            }
-            @foreach (var group in SampleRequests.Keys)
-            {
-                @if (!string.Equals(group, SampleRequestManager.SavedRequestGroup))
+    <div class="col-sm-6 gap-2 d-flex flex-column">
+        <h4>Queue Event</h4>
+        <div class="form-floating">
+            <select class="form-select" id="sample-requests" @bind="SelectedSampleRequestName">
+                <option value="@NoSampleSelectedId">Select a request</option>
+                @if (@SampleRequests.ContainsKey(SampleRequestManager.SavedRequestGroup))
                 {
-                    <optgroup label="@group">
-                        @foreach (var request in SampleRequests[group])
+                    <optgroup id="saved-select-request-group" label="@SampleRequestManager.SavedRequestGroup">
+                        @foreach (var request in SampleRequests[SampleRequestManager.SavedRequestGroup])
                         {
                             <option value="@request.Filename">@request.Name</option>
                         }
                     </optgroup>
                 }
-            }
-        </select>
-        <label class="col-xs-3 control-label" for="function-payload">Function Input:</label>
-        <textarea class="form-control" style="margin: 5px" rows="20" @bind="FunctionInput" placeholder="JSON document as input to Lambda Function. Plain strings must be wrapped in quotes."></textarea>
-        <div class="col-sm form-group">
+                @foreach (var group in SampleRequests.Keys)
+                {
+                    @if (!string.Equals(group, SampleRequestManager.SavedRequestGroup))
+                    {
+                        <optgroup label="@group">
+                            @foreach (var request in SampleRequests[group])
+                            {
+                                <option value="@request.Filename">@request.Name</option>
+                            }
+                        </optgroup>
+                    }
+                }
+            </select>
+            <label for="sample-requests">Example Requests</label>
+        </div>
+        <div class="mt-1">
+            <label class="form-label" for="function-payload">Function Input</label>
+            <StandaloneCodeEditor @ref="_editor" ConstructionOptions="EditorConstructionOptions" CssClass="rounded-4 overflow-hidden border"/>
+        </div>
+        <div class="form-group">
             <button class="btn btn-primary btn-sm" @onclick="OnAddEventClick">Queue Event</button>
         </div>
     </div>
@@ -66,7 +70,7 @@
         {
             <div>
                 <div style="cursor: pointer" @onclick="() => OnRequeue(RuntimeApiModel.ActiveEvent.AwsRequestId)">
-                    @((MarkupString)REBOOT_ICON)
+                    @((MarkupString)RebootIcon)
                 </div>
                 <p><b>Request ID:</b> @RuntimeApiModel.ActiveEvent.AwsRequestId</p>
                 <p><b>Status:</b> <span style="@GetStatusStyle(RuntimeApiModel.ActiveEvent.EventStatus)">@RuntimeApiModel.ActiveEvent.EventStatus</span></p>
@@ -106,7 +110,7 @@
                             <div class="event-label">Last Updated:</div><div class="event-value">@evnt.LastUpdated</div>
                         </div>
                         <div class="col-sm-1 " style="cursor: pointer" @onclick="() => OnDeleteEvent(evnt.AwsRequestId)">
-                            @((MarkupString)CLOSE_ICON)
+                            @((MarkupString)CloseIcon)
                         </div>
                     </div>
                     <div class="row" style="padding: 2px">
@@ -124,15 +128,15 @@
                 <div class="event-list-item">
                     <div class="row" style="padding: 2px">
                         <div class="col-sm-1 " style="cursor: pointer" @onclick="() => OnRequeue(evnt.AwsRequestId)">
-                            @((MarkupString)REBOOT_ICON)
+                            @((MarkupString)RebootIcon)
                         </div>
                         <div class="col-sm-10 row">
                             <div class="event-label">Request ID:</div><div class="event-value"> @evnt.AwsRequestId</div>
                             <div class="event-label">Status:</div><div class="event-value" style="@GetStatusStyle(evnt.EventStatus)">@evnt.EventStatus</div>
                             <div class="event-label">Last Updated:</div><div class="event-value">@evnt.LastUpdated</div>
                         </div>
                         <div class="col-sm-1 " style="cursor: pointer" @onclick="() => OnDeleteEvent(evnt.AwsRequestId)">
-                            @((MarkupString)CLOSE_ICON)
+                            @((MarkupString)CloseIcon)
                         </div>
                     </div>
                     <div class="row" style="padding: 2px">
@@ -163,21 +167,23 @@
 
 
 @code {
-    private const string REBOOT_ICON = @"
+    private StandaloneCodeEditor _editor = null!;
+
+    private const string RebootIcon = @"
 <svg xmlns=""http://www.w3.org/2000/svg"" width=""16"" height=""16"" fill=""currentColor"" class=""bi bi-bootstrap-reboot"" viewBox=""0 0 16 16"">
     <path d=""M1.161 8a6.84 6.84 0 1 0 6.842-6.84.58.58 0 1 1 0-1.16 8 8 0 1 1-6.556 3.412l-.663-.577a.58.58 0 0 1 .227-.997l2.52-.69a.58.58 0 0 1 .728.633l-.332 2.592a.58.58 0 0 1-.956.364l-.643-.56A6.812 6.812 0 0 0 1.16 8z""/>
 </svg>
 ";
 
-    private const string CLOSE_ICON = @"
+    private const string CloseIcon = @"
 <svg xmlns=""http://www.w3.org/2000/svg"" width=""16"" height=""16"" fill=""currentColor"" class=""bi bi-x"" viewBox=""0 0 16 16"">
   <path d=""M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z""/>
 </svg>
 ";
 
     [CascadingParameter] public IModalService Modal { get; set; } = default!;
 
-    private const string NO_SAMPLE_SELECTED_ID = "void-select-request";
+    private const string NoSampleSelectedId = "void-select-request";
 
     private string FunctionInput { get; set; } = "";
 
@@ -186,22 +192,25 @@
     string? _selectedSampleRequestName;
     string? SelectedSampleRequestName
     {
-        get => this._selectedSampleRequestName;
+        get => _selectedSampleRequestName;
         set
         {
             if (SampleRequestManager == null)
                 return;
 
-            this._selectedSampleRequestName = value;
-            if (string.IsNullOrEmpty(this._selectedSampleRequestName))
+            _selectedSampleRequestName = value;
+            if (string.IsNullOrEmpty(_selectedSampleRequestName) ||
+                string.Equals(value, NoSampleSelectedId))
             {
-                this.FunctionInput = string.Empty;
+                FunctionInput = string.Empty;
             }
-            else if (!string.Equals(value, NO_SAMPLE_SELECTED_ID))
+            else
             {
-                this.FunctionInput = SampleRequestManager.GetRequest(this._selectedSampleRequestName);
+                FunctionInput = SampleRequestManager.GetRequest(_selectedSampleRequestName);
             }
-            this.StateHasChanged();
+
+            _editor.SetValue(FunctionInput);
+            StateHasChanged();
         }
     }
 
@@ -210,58 +219,58 @@
     protected override void OnInitialized()
     {
         RuntimeApiModel.StateChange += RuntimeApiModelOnStateChange;
-        this.SampleRequestManager = new SampleRequestManager(DirectoryManager.GetCurrentDirectory());
-        this.SampleRequests = SampleRequestManager.GetSampleRequests();
+        SampleRequestManager = new SampleRequestManager(DirectoryManager.GetCurrentDirectory());
+        SampleRequests = SampleRequestManager.GetSampleRequests();
     }
 
     private void RuntimeApiModelOnStateChange(object? sender, EventArgs e)
     {
-        this.InvokeAsync(this.StateHasChanged);
+        InvokeAsync(this.StateHasChanged);
     }
 
     void OnAddEventClick()
     {
-        RuntimeApiModel.QueueEvent(this.FunctionInput);
-        this.FunctionInput = "";
-        this.SelectedSampleRequestName = NO_SAMPLE_SELECTED_ID;
-        this.StateHasChanged();
+        RuntimeApiModel.QueueEvent(FunctionInput);
+        FunctionInput = "";
+        SelectedSampleRequestName = NoSampleSelectedId;
+        StateHasChanged();
     }
 
     void OnClearQueued()
     {
-        this.RuntimeApiModel.ClearQueued();
-        this.StateHasChanged();
+        RuntimeApiModel.ClearQueued();
+        StateHasChanged();
     }
 
     void OnClearExecuted()
     {
-        this.RuntimeApiModel.ClearExecuted();
-        this.StateHasChanged();
+        RuntimeApiModel.ClearExecuted();
+        StateHasChanged();
     }
 
     void OnRequeue(string awsRequestId)
     {
         EventContainer? evnt = null;
-        if (string.Equals(this.RuntimeApiModel.ActiveEvent?.AwsRequestId, awsRequestId))
+        if (string.Equals(RuntimeApiModel.ActiveEvent?.AwsRequestId, awsRequestId))
         {
-            evnt = this.RuntimeApiModel.ActiveEvent;
+            evnt = RuntimeApiModel.ActiveEvent;
         }
         else
         {
-            evnt = this.RuntimeApiModel.ExecutedEvents.FirstOrDefault(x => string.Equals(x.AwsRequestId, awsRequestId));
+            evnt = RuntimeApiModel.ExecutedEvents.FirstOrDefault(x => string.Equals(x.AwsRequestId, awsRequestId));
         }
 
         if (evnt == null)
             return;
 
-        this.RuntimeApiModel.QueueEvent(evnt.EventJson);
-        this.StateHasChanged();
+        RuntimeApiModel.QueueEvent(evnt.EventJson);
+        StateHasChanged();
     }
 
     void OnDeleteEvent(string awsRequestId)
     {
-        this.RuntimeApiModel.DeleteEvent(awsRequestId);
-        this.StateHasChanged();
+        RuntimeApiModel.DeleteEvent(awsRequestId);
+        StateHasChanged();
     }
 
     string GetStatusStyle(EventContainer.Status status) => status switch
@@ -308,4 +317,14 @@
         parameters.Add(ExpandedTextDialog.PARAMETER_NAME_FULL_TEXT, text);
         Modal.Show<ExpandedTextDialog>(title, parameters);
     }
+
+    private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
+    {
+        return new StandaloneEditorConstructionOptions
+        {
+            Language = "json",
+            GlyphMargin = true,
+            Theme = "vs-dark"
+        };
+    }
 }
diff --git a/Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Components/_Imports.razor b/Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Components/_Imports.razor
@@ -10,4 +10,8 @@
 @using Amazon.Lambda.TestTool.Components
 
 @using Blazored.Modal
-@using Blazored.Modal.Services
+@using Blazored.Modal.Services
+
+@using BlazorMonaco
+@using BlazorMonaco.Editor
+@using BlazorMonaco.Languages
diff --git a/Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/wwwroot/app.css b/Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/wwwroot/app.css
@@ -49,3 +49,7 @@ h1:focus {
 .darker-border-checkbox.form-check-input {
     border-color: #929292;
 }
+
+.monaco-editor-container {
+    height: 500px;
+}

Original file line number	Diff line number	Diff line change
`@@ -49,3 +49,7 @@ h1:focus {`
`49`	`49`	`.darker-border-checkbox.form-check-input {`
`50`	`50`	`border-color: #929292;`
`51`	`51`	`}`
	`52`	`+`
	`53`	`+.monaco-editor-container {`
	`54`	`+ height: 500px;`
	`55`	`+}`