From 79e1c10b4d7c3a32f90c60114e1d3e8a62bc6700 Mon Sep 17 00:00:00 2001 From: Michele Baldessari Date: Thu, 28 May 2026 10:19:59 +0200 Subject: [PATCH 1/3] Add support for catalog_logo --- console/src/api.ts | 7 +++- console/src/components/PatternCatalogPage.css | 11 ++++++ console/src/components/PatternCatalogPage.tsx | 37 ++++++++++++------- console/src/types.ts | 1 + 4 files changed, 42 insertions(+), 14 deletions(-) diff --git a/console/src/api.ts b/console/src/api.ts index 77c9ca927..a2a1ee4fd 100644 --- a/console/src/api.ts +++ b/console/src/api.ts @@ -52,6 +52,7 @@ export async function fetchCatalogImage(): Promise { export async function fetchAllPatterns(): Promise<{ patterns: Pattern[]; catalogDescription?: string; + catalogLogo?: string; }> { const catalog = await fetchCatalog(); const patterns = await Promise.all( @@ -60,7 +61,11 @@ export async function fetchAllPatterns(): Promise<{ return { ...pattern, catalogKey: key }; }), ); - return { patterns, catalogDescription: catalog.catalog_description }; + return { + patterns, + catalogDescription: catalog.catalog_description, + catalogLogo: catalog.catalog_logo, + }; } export interface VaultJobStatus { diff --git a/console/src/components/PatternCatalogPage.css b/console/src/components/PatternCatalogPage.css index 13d482d75..315aebb8e 100644 --- a/console/src/components/PatternCatalogPage.css +++ b/console/src/components/PatternCatalogPage.css @@ -1,3 +1,14 @@ +.patterns-operator__catalog-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.patterns-operator__catalog-logo { + max-height: 48px; + 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 79cc21ca0..f242a6a40 100644 --- a/console/src/components/PatternCatalogPage.tsx +++ b/console/src/components/PatternCatalogPage.tsx @@ -166,6 +166,7 @@ export default function PatternCatalogPage() { const [installedPatterns, setInstalledPatterns] = React.useState>(new Set()); const [catalogImage, setCatalogImage] = React.useState(null); const [catalogDescription, setCatalogDescription] = React.useState(); + const [catalogLogo, setCatalogLogo] = React.useState(); const [selectedTiers, setSelectedTiers] = React.useState>(new Set(['maintained'])); const [tierSelectOpen, setTierSelectOpen] = React.useState(false); @@ -175,6 +176,7 @@ export default function PatternCatalogPage() { .then(([catalogData, installed, image]) => { setPatterns(catalogData.patterns); setCatalogDescription(catalogData.catalogDescription); + setCatalogLogo(catalogData.catalogLogo); setInstalledPatterns(new Set(installed)); setCatalogImage(image); setLoading(false); @@ -222,21 +224,30 @@ export default function PatternCatalogPage() { {t('Pattern Catalog')} - {catalogImage ? ( - - + <div className="patterns-operator__catalog-header"> + {catalogImage ? ( + <Tooltip content={`${t('Catalog source')}: ${catalogImage}`}> + <Title + headingLevel="h1" + data-test="pattern-catalog-page-title" + style={{ display: 'inline-block' }} + > + {t('Pattern Catalog')} + + + ) : ( + {t('Pattern Catalog')} - - ) : ( - - {t('Pattern Catalog')} - - )} + )} + {catalogLogo && ( + {t('Catalog + )} + {catalogDescription && ( diff --git a/console/src/types.ts b/console/src/types.ts index 7af57d86f..3796a335d 100644 --- a/console/src/types.ts +++ b/console/src/types.ts @@ -2,6 +2,7 @@ export interface Catalog { generated_at: string; generator_version: string; catalog_description?: string; + catalog_logo?: string; patterns: string[]; } From 966f583702eacada7f1061f0fa23ec2bbf196aa1 Mon Sep 17 00:00:00 2001 From: Michele Baldessari Date: Thu, 28 May 2026 10:31:16 +0200 Subject: [PATCH 2/3] Move logo to the left --- console/src/components/PatternCatalogPage.css | 2 +- console/src/components/PatternCatalogPage.tsx | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/console/src/components/PatternCatalogPage.css b/console/src/components/PatternCatalogPage.css index 315aebb8e..d39e67705 100644 --- a/console/src/components/PatternCatalogPage.css +++ b/console/src/components/PatternCatalogPage.css @@ -1,7 +1,7 @@ .patterns-operator__catalog-header { display: flex; align-items: center; - justify-content: space-between; + gap: 12px; } .patterns-operator__catalog-logo { diff --git a/console/src/components/PatternCatalogPage.tsx b/console/src/components/PatternCatalogPage.tsx index f242a6a40..962d2a7f8 100644 --- a/console/src/components/PatternCatalogPage.tsx +++ b/console/src/components/PatternCatalogPage.tsx @@ -225,6 +225,13 @@ export default function PatternCatalogPage() {
+ {catalogLogo && ( + {t('Catalog + )} {catalogImage ? ( )} - {catalogLogo && ( - <img - src={catalogLogo} - alt={t('Catalog logo')} - className="patterns-operator__catalog-logo" - /> - )} </div> </PageSection> {catalogDescription && ( From 114e363e9023b64dc94bd6e08b13b42e1c64642f Mon Sep 17 00:00:00 2001 From: Michele Baldessari <michele@acksyn.org> Date: Thu, 28 May 2026 10:49:25 +0200 Subject: [PATCH 3/3] Support both locally shipped logos and remote img url --- console/src/api.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/console/src/api.ts b/console/src/api.ts index a2a1ee4fd..821469bc6 100644 --- a/console/src/api.ts +++ b/console/src/api.ts @@ -64,7 +64,11 @@ export async function fetchAllPatterns(): Promise<{ return { patterns, catalogDescription: catalog.catalog_description, - catalogLogo: catalog.catalog_logo, + catalogLogo: catalog.catalog_logo + ? /^https?:\/\//.test(catalog.catalog_logo) + ? catalog.catalog_logo + : `${PATTERN_UI_CATALOG_BASE_URL}/${catalog.catalog_logo}` + : undefined, }; }