feat: add ability to save requests and toggle ui elements (#2095)

Author: philasmar

.autover/changes/7403aeda-5b1c-4ce1-a88b-d15894f9e6d0.json

@@ -0,0 +1,11 @@
+{
+  "Projects": [
+    {
+      "Name": "Amazon.Lambda.TestTool",
+      "Type": "Minor",
+      "ChangelogMessages": [
+        "Add the ability to save requests and hide UI elements"
+      ]
+    }
+  ]
+}

Tools/LambdaTestTool-v2/README.md

@@ -133,6 +133,7 @@ dotnet lambda-test-tool start \
 | `--api-gateway-emulator-port` | Port for API Gateway | API Gateway Mode |
 | `--api-gateway-emulator-mode` | API Gateway mode (Rest/HttpV1/HttpV2) | API Gateway Mode |
 | `--no-launch-window` | Disable auto-launching web interface | Optional |
+| `--config-storage-path` | Path for saving settings and requests | Optional |
 
 
 ## API Gateway Configuration
@@ -333,3 +334,11 @@ Expected response:
 ```
 8
 ```
+
+## Saving Lambda Requests
+
+The Test Tool provides users with the ability to save Lambda requests for quick access. Saved requests will be listed in a drop down above the request input area.
+
+In order to enable saving requests, you will need to provide a storage path during the test tool startup. 
+
+You can use the command line argument `--config-storage-path <absolute-path>` to specify the storage path.

Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Commands/Settings/RunCommandSettings.cs

@@ -4,6 +4,7 @@
 using Amazon.Lambda.TestTool.Models;
 using Spectre.Console.Cli;
 using System.ComponentModel;
+using ValidationResult = Spectre.Console.ValidationResult;
 
 namespace Amazon.Lambda.TestTool.Commands.Settings;
 
@@ -61,4 +62,29 @@ public sealed class RunCommandSettings : CommandSettings
     [CommandOption("--sqs-eventsource-config <CONFIG>")]
     [Description("The configuration for the SQS event source. The format of the config is a comma delimited key pairs. For example \"QueueUrl=<queue-url>,FunctionName=<function-name>,VisibilityTimeout=100\". Possible keys are: BatchSize, DisableMessageDelete, FunctionName, LambdaRuntimeApi, Profile, QueueUrl, Region, VisibilityTimeout")]
     public string? SQSEventSourceConfig { get; set; }
+
+    /// <summary>
+    /// The absolute path used to save global settings and saved requests. You will need to specify a path in order to enable saving global settings and requests.
+    /// </summary>
+    [CommandOption("--config-storage-path <CONFIG-STORAGE-PATH>")]
+    [Description("The absolute path used to save global settings and saved requests. You will need to specify a path in order to enable saving global settings and requests.")]
+    public string? ConfigStoragePath { get; set; }
+
+    /// <summary>
+    /// Validate that <see cref="ConfigStoragePath"/> is an absolute path.
+    /// </summary>
+    public override ValidationResult Validate()
+    {
+        if (string.IsNullOrEmpty(ConfigStoragePath))
+            return ValidationResult.Success();
+
+        if (!Path.IsPathFullyQualified(ConfigStoragePath))
+        {
+            ConfigStoragePath = Path.Combine(Environment.CurrentDirectory, ConfigStoragePath);
+        }
+
+        return !Path.IsPathFullyQualified(ConfigStoragePath)
+            ? ValidationResult.Error("'Config storage path' must be an absolute path.")
+            : ValidationResult.Success();
+    }
 }

Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Components/Pages/Home.razor

@@ -1,8 +1,6 @@
 @page "/"
 
 @using Amazon.Lambda.TestTool.Models
-@using Amazon.Lambda.TestTool.SampleRequests
-@using Amazon.Lambda.TestTool.Services
 @using Amazon.Lambda.TestTool.Utilities
 
 <PageTitle>Lambda Function Tester</PageTitle>
@@ -43,27 +41,39 @@ else
     <div class="row">
         <div class="col-lg-6 gap-2 d-flex flex-column mt-1 mb-3">
             <div class="form-group d-flex">
-                <h4>Queue Event</h4>
-                <button class="btn btn-primary btn-sm ms-auto rounded-pill px-4 fw-bold d-flex align-items-center gap-1" @onclick="OnAddEventClick">
-                    <i class="bi bi-play-fill"></i>
-                    Invoke
-                </button>
+                <h4 class="m-0">Queue Event</h4>
+                <div class="d-flex gap-2 ms-auto">
+                    @if (!string.IsNullOrEmpty(LambdaOptions.Value.ConfigStoragePath))
+                    {
+                        <button type="button" data-bs-toggle="modal" data-bs-target="#manageSavedRequestsModal" class="btn @(ThemeService.CurrentTheme.Equals("dark")? "btn-dark" : "btn-light") btn-sm rounded-circle fs-5 p-0 px-2 fw-bold d-flex align-items-center" @onclick="async () => await ShowManagedSavedRequestsDialog()">
+                            <i class="bi bi-sliders"></i>
+                        </button>
+                        <button type="button" data-bs-toggle="modal" data-bs-target="#saveRequestModal" class="btn @(string.IsNullOrEmpty(_editorContent) ? "btn-disabled" : "btn-secondary") btn-sm rounded-pill px-4 fw-bold d-flex align-items-center gap-2" disabled="@(string.IsNullOrEmpty(_editorContent))" @onclick="async () => await ShowSaveEventDialog()">
+                            <i class="bi bi-floppy-fill"></i>
+                            Save
+                        </button>
+                    }
+                    <button class="btn btn-primary btn-sm rounded-pill px-4 fw-bold d-flex align-items-center gap-1" @onclick="OnAddEventClick">
+                        <i class="bi bi-play-fill"></i>
+                        Invoke
+                    </button>
+                </div>
             </div>
-            <div class="form-floating">
+            <div class="form-floating @(GlobalSettingsService.CurrentSettings.ShowRequestsList ? "" : "d-none")">
                 <select class="form-select" id="sample-requests" @bind="SelectedSampleRequestName">
                     <option value="@NoSampleSelectedId">Select a request</option>
-                    @if (@SampleRequests.ContainsKey(SampleRequestManager.SavedRequestGroup))
+                    @if (@SampleRequests.ContainsKey(Constants.SavedRequestGroup))
                     {
-                        <optgroup id="saved-select-request-group" label="@SampleRequestManager.SavedRequestGroup">
-                            @foreach (var request in SampleRequests[SampleRequestManager.SavedRequestGroup])
+                        <optgroup id="saved-select-request-group" label="@Constants.SavedRequestGroup">
+                            @foreach (var request in SampleRequests[Constants.SavedRequestGroup])
                             {
                                 <option value="@request.Filename">@request.Name</option>
                             }
                         </optgroup>
                     }
                     @foreach (var group in SampleRequests.Keys)
                     {
-                        @if (!string.Equals(group, SampleRequestManager.SavedRequestGroup))
+                        @if (!string.Equals(group, Constants.SavedRequestGroup))
                         {
                             <optgroup label="@group">
                                 @foreach (var request in SampleRequests[group])
@@ -90,6 +100,7 @@ else
                     Id="function-payload"
                     @ref="_editor"
                     ConstructionOptions="EditorConstructionOptions"
+                    OnDidChangeModelContent="HandleModelContentChanged"
                     CssClass="@($"rounded-4 overflow-hidden border {(!string.IsNullOrEmpty(_errorMessage) ? "border-danger border-2" : "")}")"/>
                 @if (!string.IsNullOrEmpty(_errorMessage))
                 {
@@ -263,13 +274,15 @@ else
 }
 
 <EventDialog @ref="_eventDialog"/>
+<SaveRequestDialog @ref="_saveRequestDialog" OnSaveRequest="OnSaveRequest" />
+<ManageSavedRequestsDialog @ref="_manageSavedRequestsDialog" Callback="ReloadSampleRequests" />
 
 <div class="offcanvas offcanvas-end" tabindex="-1" id="switchFunctionOffCanvas">
     <nav class="navbar navbar-expand-lg bd-navbar sticky-top bg-body-tertiary">
         <div class="container-fluid">
             <a class="navbar-brand py-0 me-4 d-flex align-items-center gap-3" href="/">
-                <img src="aws.svg" width="42" height="42" class="align-text-top logo-light-mode"/>
-                <img src="aws-light.svg" width="42" height="42" class="align-text-top logo-dark-mode"/>
+                <img src="aws.svg" alt="AWS Logo" width="42" height="42" class="align-text-top logo-light-mode"/>
+                <img src="aws-light.svg" alt="AWS Light Logo" width="42" height="42" class="align-text-top logo-dark-mode"/>
                 Lambda Test Tool
             </a>
             <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
@@ -289,3 +302,37 @@ else
         </div>
     </div>
 </div>
+
+<div class="toast-container position-fixed top-0 end-0 p-3">
+    <div id="liveToast" class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="d-flex">
+            <div class="toast-body">
+                @_toastMessage
+            </div>
+            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+    </div>
+</div>
+
+<script>
+    window.liveToast = {
+        show: () => {
+            const toastElement = document.getElementById('liveToast')
+            if (toastElement) {
+                const toastInstance = bootstrap.Toast.getOrCreateInstance(toastElement)
+                if (toastInstance){
+                    toastInstance.show();
+                }
+            }
+        },
+        hide: () => {
+            const toastElement = document.getElementById('liveToast')
+            if (toastElement) {
+                const toastInstance = bootstrap.Toast.getOrCreateInstance(toastElement)
+                if (toastInstance){
+                    toastInstance.hide();
+                }
+            }
+        }
+    };
+</script>