Support per-pattern logos

Author: mbaldessari

console/src/api.ts

@@ -58,7 +58,12 @@ export async function fetchAllPatterns(): Promise<{
   const patterns = await Promise.all(
     catalog.patterns.map(async (key) => {
       const pattern = await fetchPattern(key);
-      return { ...pattern, catalogKey: key };
+      const logo = pattern.logo
+        ? /^https?:\/\//.test(pattern.logo)
+          ? pattern.logo
+          : `${PATTERN_UI_CATALOG_BASE_URL}/${key}/${pattern.logo}`
+        : undefined;
+      return { ...pattern, catalogKey: key, logo };
     }),
   );
   return {

console/src/components/PatternCatalogPage.css

@@ -9,6 +9,11 @@
   object-fit: contain;
 }
 
+.patterns-operator__pattern-logo {
+  max-height: 32px;
+  object-fit: contain;
+}
+
 .patterns-operator__card-field {
   margin-bottom: 4px;
 }

console/src/components/PatternCatalogPage.tsx

@@ -341,7 +341,22 @@ export default function PatternCatalogPage() {
                       isDisabled ? ' patterns-operator__card--disabled' : ''
                     }`}
                   >
-                    <CardHeader>
+                    <CardHeader
+                      actions={
+                        pattern.logo
+                          ? {
+                              actions: (
+                                <img
+                                  src={pattern.logo}
+                                  alt={`${pattern.display_name} logo`}
+                                  className="patterns-operator__pattern-logo"
+                                />
+                              ),
+                              hasNoOffset: true,
+                            }
+                          : undefined
+                      }
+                    >
                       <Tooltip content={TIER_DESCRIPTIONS[pattern.tier] || pattern.tier}>
                         <Label
                           color={TIER_COLORS[pattern.tier] || 'grey'}

console/src/types.ts

@@ -48,6 +48,7 @@ export interface Pattern {
   requirements?: PatternRequirements;
   extra_features?: ExtraFeatures;
   external_requirements?: ExternalRequirements;
+  logo?: string;
   /** The catalog directory key used to fetch this pattern. */
   catalogKey?: string;
 }