diff --git a/console/src/api.ts b/console/src/api.ts index 821469bc6..ba305693e 100644 --- a/console/src/api.ts +++ b/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 { diff --git a/console/src/components/PatternCatalogPage.css b/console/src/components/PatternCatalogPage.css index d39e67705..407b43f33 100644 --- a/console/src/components/PatternCatalogPage.css +++ b/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; } diff --git a/console/src/components/PatternCatalogPage.tsx b/console/src/components/PatternCatalogPage.tsx index 922f03bdf..58beef6ca 100644 --- a/console/src/components/PatternCatalogPage.tsx +++ b/console/src/components/PatternCatalogPage.tsx @@ -341,7 +341,22 @@ export default function PatternCatalogPage() { isDisabled ? ' patterns-operator__card--disabled' : '' }`} > - + + ), + hasNoOffset: true, + } + : undefined + } + >