From f1b1ed826a0309164b11210e62ee2ce04b851324 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 13 Sep 2023 10:50:07 -0700
Subject: [PATCH 1/2] Update template configuration to show supported runtimes

There are times when people jump into creating the function without
reading the template details. Because templates only support certain
runtime versions, it's important to show the supported runtimes in the
wizard or else the developer will be confused why their enabled
incompatible runtime doesn't show in the Runtime dropdown.
---
 .../wizards/functions/steps/templateConfiguration.svelte | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/lib/wizards/functions/steps/templateConfiguration.svelte b/src/lib/wizards/functions/steps/templateConfiguration.svelte
index 49be494b63..afa87567a2 100644
--- a/src/lib/wizards/functions/steps/templateConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/templateConfiguration.svelte
@@ -33,6 +33,15 @@
     <svelte:fragment slot="title">{$template.name}</svelte:fragment>
     <svelte:fragment slot="subtitle">
         {$template.tagline}
+        <br />
+        <br />
+        Supported runtimes:
+        <br />
+        <div class="u-inline-flex u-flex-wrap u-margin-block-start-8 u-gap-8">
+            {#each $template.runtimes as runtime}
+                <Pill>{runtime.name}</Pill>
+            {/each}
+        </div>
     </svelte:fragment>
     <FormList>
         <InputText

From 28a0900058fb541225bba3de8feb85ea40ce8a7d Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 13 Sep 2023 11:47:19 -0700
Subject: [PATCH 2/2] Sort list of supported runtimes

A sorted list is easier to scan if a developer is looking for a specific version.
---
 src/lib/wizards/functions/steps/templateConfiguration.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/wizards/functions/steps/templateConfiguration.svelte b/src/lib/wizards/functions/steps/templateConfiguration.svelte
index afa87567a2..1f6beac3d1 100644
--- a/src/lib/wizards/functions/steps/templateConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/templateConfiguration.svelte
@@ -38,7 +38,7 @@
         Supported runtimes:
         <br />
         <div class="u-inline-flex u-flex-wrap u-margin-block-start-8 u-gap-8">
-            {#each $template.runtimes as runtime}
+            {#each $template.runtimes.sort((r1, r2) => r1.name.localeCompare(r2.name)) as runtime}
                 <Pill>{runtime.name}</Pill>
             {/each}
         </div>