From 7a4f46fb7a37d1ced20c597c5319685dd52f3d1c Mon Sep 17 00:00:00 2001
From: Karel Hala <khala@redhat.com>
Date: Tue, 20 Feb 2024 17:32:19 +0100
Subject: [PATCH] Use meta ID if present for card IDs

---
 packages/dev/src/CustomCatalog.tsx             | 8 ++++++++
 packages/module/src/catalog/QuickStartTile.tsx | 5 +++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/dev/src/CustomCatalog.tsx b/packages/dev/src/CustomCatalog.tsx
index 2c62ba00..c64f1ea6 100644
--- a/packages/dev/src/CustomCatalog.tsx
+++ b/packages/dev/src/CustomCatalog.tsx
@@ -97,11 +97,19 @@ export const CustomCatalog: React.FC = () => {
           <Gallery className="pfext-quick-start-catalog__gallery" hasGutter>
             {allQuickStarts
               .filter((quickStart: QuickStart) => quickStart.metadata.instructional)
+              .map((quickStart: QuickStart) => ({
+                ...quickStart,
+                metadata: {
+                  ...quickStart.metadata,
+                  id: `${quickStart.metadata.name}-bookmar`
+                }
+              }))
               .map((quickStart: QuickStart) => {
                 const {
                   metadata: { name: id },
                 } = quickStart;
 
+                console.log(quickStart, 'this is quickstart!');
                 return (
                   <GalleryItem key={id} className="pfext-quick-start-catalog__gallery-item">
                     <QuickStartTile
diff --git a/packages/module/src/catalog/QuickStartTile.tsx b/packages/module/src/catalog/QuickStartTile.tsx
index bcc4de4a..1f43d843 100644
--- a/packages/module/src/catalog/QuickStartTile.tsx
+++ b/packages/module/src/catalog/QuickStartTile.tsx
@@ -29,10 +29,11 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
   action,
 }) => {
   const {
-    metadata: { name: id },
+    metadata: { name, id: metaId },
     spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type },
   } = quickStart;
 
+  const id = metaId || name;
   const { setActiveQuickStart, footer } =
     React.useContext<QuickStartContextValues>(QuickStartContext);
 
@@ -71,7 +72,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
       if (link) {
         window.open(link.href);
       } else {
-        setActiveQuickStart(id, tasks?.length);
+        setActiveQuickStart(name, tasks?.length);
       }
       onClick();
     }