feat: use offcanvas for function switching

Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Components/Layout/MainLayout.razor

@@ -1,5 +1,4 @@
 @using Amazon.Lambda.TestTool.Services
-@using Amazon.Lambda.TestTool.Utilities
 @inherits LayoutComponentBase
 
 @inject IJSRuntime Js
@@ -79,7 +78,7 @@
     </div>
 </nav>
 
-<div class="container-fluid content d-flex flex-column flex-grow-1 px-3">
+<div class="container-fluid content d-flex flex-column flex-grow-1 px-4">
     @Body
 </div>
 

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

@@ -8,23 +8,16 @@
 <PageTitle>Lambda Function Tester</PageTitle>
 
 <div class="d-flex align-items-center mb-2">
-    <h3 class="me-auto">Lambda Function Tester</h3>
-    <div class="form-floating @(_availableLambdaFunctions.Count <= 1 ? "d-none" : "")" style="min-width: 300px;">
-        <select class="form-select" id="selectedFunctionName" @bind="SelectedFunctionName">
-            @foreach (var functionName in _availableLambdaFunctions)
-            {
-                if (functionName.Equals(LambdaRuntimeApi.DefaultFunctionName))
-                {
-                    <option value="@functionName">Default Lambda</option>
-                }
-                else
-                {
-                    <option value="@functionName">@functionName</option>
-                }
-            }
-        </select>
-        <label for="sample-requests">Lambda Functions</label>
-    </div>
+    <h3 class="me-auto my-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#switchFunctionOffCanvas">@GetLambdaFunctionName(SelectedFunctionName)</h3>
+    <button
+        type="button"
+        data-bs-toggle="offcanvas"
+        data-bs-target="#switchFunctionOffCanvas"
+        class="btn btn-primary btn-sm rounded-pill @(_availableLambdaFunctions.Count <= 1 ? "d-none" : "d-flex") align-items-center gap-1 ps-3 pe-2 @(functionUpdated ? "btn-glow": "")"
+        onclick="@(() => { functionUpdated = false; })">
+        <span>Switch function</span>
+        <span class="badge text-bg-secondary rounded-circle me-1" style="top: 0;">@_availableLambdaFunctions.Count</span>
+    </button>
 </div>
 
 @if (!Utils.IsAspireHosted)
@@ -252,3 +245,29 @@ else
 }
 
 <EventDialog @ref="_eventDialog"/>
+
+<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"/>
+                Lambda Test Tool
+            </a>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+    </nav>
+    <div class="offcanvas-body">
+        <h5 class="mb-3">Available Functions</h5>
+        <div class="d-flex flex-column gap-2">
+            @foreach (var functionName in _availableLambdaFunctions)
+            {
+                <div type="button" data-bs-dismiss="offcanvas"
+                     class="btn @(functionName.Equals(_selectedFunctionName) ? "btn-primary" : "btn-outline-secondary") rounded-pill px-3 py-2 text-start"
+                     @onclick="() => SetActiveLambdaFunction(functionName)">
+                    @GetLambdaFunctionName(functionName)
+                </div>
+            }
+        </div>
+    </div>
+</div>

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

@@ -58,6 +58,9 @@ public partial class Home : ComponentBase, IDisposable
             if (_activeEditorError != null && !string.IsNullOrEmpty(DataStore?.ActiveEvent?.ErrorResponse))
                 _activeEditorError.SetValue(DataStore.ActiveEvent?.ErrorResponse);
 
+            _queuedEventsCount = DataStore?.QueuedEvents.Count ?? 0;
+            _pastEventsCount = DataStore?.ExecutedEvents.Count ?? 0;
+
             StateHasChanged();
         }
     }
@@ -128,7 +131,6 @@ protected override void OnInitialized()
         SampleRequests = SampleRequestManager.GetSampleRequests();
         _queuedEventsCount = DataStore?.QueuedEvents.Count ?? 0;
         _pastEventsCount = DataStore?.ExecutedEvents.Count ?? 0;
-
     }
 
     private void HandleThemeChanged()
@@ -163,12 +165,15 @@ private void DataStoreOnStateChange(object? sender, EventArgs e)
         });
     }
 
+    private bool functionUpdated = false;
+
     private void DataStoreManagerOnStateChange(object? sender, EventArgs e)
     {
         InvokeAsync(() =>
         {
             _availableLambdaFunctions = DataStoreManager.GetListOfFunctionNames().ToList();
             SelectedFunctionName = _availableLambdaFunctions.FirstOrDefault();
+            functionUpdated = true;
             StateHasChanged();
         });
     }
@@ -252,6 +257,17 @@ void ShowEvent(EventContainer evnt)
         _eventDialog?.ShowDialog(evnt);
     }
 
+    string GetLambdaFunctionName(string? functionId)
+    {
+        if (string.IsNullOrEmpty(functionId))
+            return string.Empty;
+
+        if (LambdaRuntimeApi.DefaultFunctionName.Equals(functionId))
+            return "Default Lambda Function";
+
+        return functionId;
+    }
+
     private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
     {
         return new StandaloneEditorConstructionOptions
@@ -287,6 +303,11 @@ private StandaloneEditorConstructionOptions ActiveEditorConstructionOptions(Stan
         };
     }
 
+    void SetActiveLambdaFunction(string function)
+    {
+        SelectedFunctionName = function;
+    }
+
     private StandaloneEditorConstructionOptions ActiveErrorEditorConstructionOptions(StandaloneCodeEditor editor)
     {
         return new StandaloneEditorConstructionOptions

Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/wwwroot/app.css

@@ -77,3 +77,41 @@ h1:focus {
 [data-bs-theme=light] .logo-dark-mode {
     display: none;
 }
+
+.btn-glow {
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+    box-shadow: 0 0 5px rgba(13, 110, 253, 0.8),
+    0 0 10px rgba(255, 0, 255, 0.6),
+    0 0 15px rgba(255, 69, 0, 0.5),
+    0 0 20px rgba(0, 255, 255, 0.4);
+    animation: glowPulse 1s infinite alternate ease-in-out;
+}
+
+.btn-glow::before {
+    content: "";
+    position: absolute;
+    top: -20px;
+    left: -20px;
+    right: -20px;
+    bottom: -20px;
+    border-radius: 50px;
+    filter: blur(30px);
+    z-index: -1;
+}
+
+@keyframes glowPulse {
+    0% {
+        box-shadow: 0 0 5px rgba(13, 110, 253, 0.8),
+        0 0 10px rgba(255, 0, 255, 0.6),
+        0 0 15px rgba(255, 69, 0, 0.5),
+        0 0 20px rgba(0, 255, 255, 0.4);
+    }
+    100% {
+        box-shadow: 0 0 15px rgba(13, 110, 253, 0.9),
+        0 0 25px rgba(255, 0, 255, 0.8),
+        0 0 35px rgba(255, 69, 0, 0.6),
+        0 0 45px rgba(0, 255, 255, 0.5);
+    }
+}