Skip to content

logo catalog support #650

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
openshift-merge-bot merged 3 commits into from
May 28, 2026
Merged

logo catalog support #650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79e1c10
Add support for catalog_logo
mbaldessari May 28, 2026
966f583
Move logo to the left
mbaldessari May 28, 2026
114e363
Support both locally shipped logos and remote img url
mbaldessari May 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion console/src/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export async function fetchCatalogImage(): Promise<string> {
export async function fetchAllPatterns(): Promise<{
patterns: Pattern[];
catalogDescription?: string;
catalogLogo?: string;
}> {
const catalog = await fetchCatalog();
const patterns = await Promise.all(
Expand All @@ -60,7 +61,15 @@ 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
? /^https?:\/\//.test(catalog.catalog_logo)
? catalog.catalog_logo
: `${PATTERN_UI_CATALOG_BASE_URL}/${catalog.catalog_logo}`
: undefined,
};
}

export interface VaultJobStatus {
Expand Down
11 changes: 11 additions & 0 deletions console/src/components/PatternCatalogPage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
.patterns-operator__catalog-header {
display: flex;
align-items: center;
gap: 12px;
}

.patterns-operator__catalog-logo {
max-height: 48px;
object-fit: contain;
}

.patterns-operator__card-field {
margin-bottom: 4px;
}
Expand Down
37 changes: 24 additions & 13 deletions console/src/components/PatternCatalogPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ export default function PatternCatalogPage() {
const [installedPatterns, setInstalledPatterns] = React.useState<Set<string>>(new Set());
const [catalogImage, setCatalogImage] = React.useState<string | null>(null);
const [catalogDescription, setCatalogDescription] = React.useState<string | undefined>();
const [catalogLogo, setCatalogLogo] = React.useState<string | undefined>();
const [selectedTiers, setSelectedTiers] = React.useState<Set<string>>(new Set(['maintained']));
const [tierSelectOpen, setTierSelectOpen] = React.useState(false);

Expand All @@ -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);
Expand Down Expand Up @@ -222,21 +224,30 @@ export default function PatternCatalogPage() {
<title data-test="pattern-catalog-page-title">{t('Pattern Catalog')}</title>
</Helmet>
<PageSection>
{catalogImage ? (
<Tooltip content={`${t('Catalog source')}: ${catalogImage}`}>
<Title
headingLevel="h1"
data-test="pattern-catalog-page-title"
style={{ display: 'inline-block' }}
>
<div className="patterns-operator__catalog-header">
{catalogLogo && (
<img
src={catalogLogo}
alt={t('Catalog logo')}
className="patterns-operator__catalog-logo"
/>
)}
{catalogImage ? (
<Tooltip content={`${t('Catalog source')}: ${catalogImage}`}>
<Title
headingLevel="h1"
data-test="pattern-catalog-page-title"
style={{ display: 'inline-block' }}
>
{t('Pattern Catalog')}
</Title>
</Tooltip>
) : (
<Title headingLevel="h1" data-test="pattern-catalog-page-title">
{t('Pattern Catalog')}
</Title>
</Tooltip>
) : (
<Title headingLevel="h1" data-test="pattern-catalog-page-title">
{t('Pattern Catalog')}
</Title>
)}
)}
</div>
</PageSection>
{catalogDescription && (
<PageSection>
Expand Down
1 change: 1 addition & 0 deletions console/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export interface Catalog {
generated_at: string;
generator_version: string;
catalog_description?: string;
catalog_logo?: string;
patterns: string[];
}

Expand Down