From a43ae313807d940eef80672dbad08374c28b6dcd Mon Sep 17 00:00:00 2001
From: loks0n <22452787+loks0n@users.noreply.github.com>
Date: Thu, 14 Sep 2023 10:31:42 +0100
Subject: [PATCH] fix: template wizard runtimes

---
 .../functions/templates/+page.svelte          | 22 +++++++-
 .../functions/templates/+page.ts              | 52 ++++++++-----------
 2 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/templates/+page.svelte b/src/routes/console/project-[project]/functions/templates/+page.svelte
index 9131537f4..108fd17f8 100644
--- a/src/routes/console/project-[project]/functions/templates/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/+page.svelte
@@ -14,6 +14,7 @@
     import { Button, InputSearch } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { app } from '$lib/stores/app';
+    import type { Runtime } from '$lib/stores/marketplace.js';
     import { connectTemplate } from '$lib/wizards/functions/cover.svelte';
 
     export let data;
@@ -39,6 +40,22 @@
         goto(target.toString());
     }
 
+    function getBaseRuntimes(runtimes: Runtime[]): Runtime[] {
+        const baseRuntimes = new Map<string, Runtime>();
+
+        for (const runtime of runtimes) {
+            const [baseRuntime] = runtime.name.split('-');
+            if (!baseRuntimes.has(baseRuntime)) {
+                baseRuntimes.set(baseRuntime, {
+                    ...runtime,
+                    name: baseRuntime
+                });
+            }
+        }
+
+        return [...baseRuntimes.values()];
+    }
+
     function getIconFromRuntime(runtime: string) {
         switch (true) {
             case runtime.includes('node'):
@@ -153,8 +170,9 @@
                     class="grid-box"
                     style="--grid-item-size:22rem; --grid-item-size-small-screens:19rem">
                     {#each data.templates as template}
-                        {@const displayed = template.runtimes.slice(0, 2)}
-                        {@const hidden = template.runtimes.slice(1, -1)}
+                        {@const baseRuntimes = getBaseRuntimes(template.runtimes)}
+                        {@const displayed = baseRuntimes.slice(0, 2)}
+                        {@const hidden = baseRuntimes.slice(1, -1)}
                         <li>
                             <article class="card u-min-height-100-percent">
                                 <div class="u-flex u-gap-16 u-cross-center u-main-space-between">
diff --git a/src/routes/console/project-[project]/functions/templates/+page.ts b/src/routes/console/project-[project]/functions/templates/+page.ts
index 6160ba63b..d927ecac2 100644
--- a/src/routes/console/project-[project]/functions/templates/+page.ts
+++ b/src/routes/console/project-[project]/functions/templates/+page.ts
@@ -22,39 +22,29 @@ export const load: PageLoad = async ({ url, route }) => {
         [new Set<string>(), new Set<string>()]
     );
 
-    const templates = marketplace
-        .filter((template) => {
-            if (
-                filter.runtimes.length > 0 &&
-                !template.runtimes.some((runtime) =>
-                    filter.runtimes.includes(runtime.name.split('-')[0])
-                )
-            ) {
-                return false;
-            }
+    const templates = marketplace.filter((template) => {
+        if (
+            filter.runtimes.length > 0 &&
+            !template.runtimes.some((runtime) =>
+                filter.runtimes.includes(runtime.name.split('-')[0])
+            )
+        ) {
+            return false;
+        }
 
-            if (
-                filter.useCases.length > 0 &&
-                !template.usecases.some((useCase) => filter.useCases.includes(useCase))
-            ) {
-                return false;
-            }
+        if (
+            filter.useCases.length > 0 &&
+            !template.usecases.some((useCase) => filter.useCases.includes(useCase))
+        ) {
+            return false;
+        }
 
-            if (search) {
-                return template.name.toLowerCase().includes(search.toLowerCase());
-            } else {
-                return true;
-            }
-        })
-        .map((template) => ({
-            ...template,
-            runtimes: template.runtimes
-                .map((runtime) => ({ ...runtime, name: runtime.name.split('-')[0] }))
-                .filter(
-                    (runtime, index, self) =>
-                        self.findIndex((n) => n.name === runtime.name) === index
-                )
-        }));
+        if (search) {
+            return template.name.toLowerCase().includes(search.toLowerCase());
+        } else {
+            return true;
+        }
+    });
 
     return {
         offset,