diff --git a/plugins/catalog-react/src/hooks/useEntityKinds.ts b/plugins/catalog-react/src/hooks/useEntityKinds.ts
index 5dae9c4c7f..082e4a207d 100644
--- a/plugins/catalog-react/src/hooks/useEntityKinds.ts
+++ b/plugins/catalog-react/src/hooks/useEntityKinds.ts
@@ -31,9 +31,7 @@ export function useEntityKinds() {
.getEntities({ fields: ['kind'] })
.then(response => response.items);
- return [
- ...new Set(entities.map(e => e.kind.toLocaleLowerCase('en-US'))),
- ].sort();
+ return [...new Set(entities.map(e => e.kind))].sort();
});
return { error, loading, kinds };
}
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
index bdf5b51b65..c15c50a239 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
@@ -89,6 +89,20 @@ describe('', () => {
});
});
+ it('renders unknown kinds provided in query parameters', async () => {
+ const rendered = await renderWithEffects(
+
+
+
+
+ ,
+ );
+
+ expect(rendered.getByText('Frobs')).toBeInTheDocument();
+ });
+
it('updates the kind filter', async () => {
const updateFilters = jest.fn();
const rendered = await renderWithEffects(
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
index e4318a6078..41c5888d79 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
@@ -61,7 +61,18 @@ export const CatalogKindHeader = ({
});
}, [selectedKind, updateFilters]);
- const options = [...new Set([selectedKind, ...allKinds])].sort();
+ // Before allKinds is loaded, or when a kind is entered manually in the URL, selectedKind may not
+ // be present in allKinds. It should still be shown in the dropdown, but may not have the nice
+ // enforced casing from the catalog-backend. This makes a key/value record for the Select options,
+ // including selectedKind if it's unknown - but allows the selectedKind to get clobbered by the
+ // more proper catalog kind if it exists.
+ const options = [capitalize(selectedKind)]
+ .concat(allKinds)
+ .sort()
+ .reduce((acc, kind) => {
+ acc[kind.toLocaleLowerCase('en-US')] = kind;
+ return acc;
+ }, {} as Record);
return (