diff --git a/plugins/catalog-react/src/hooks/useEntityKinds.ts b/plugins/catalog-react/src/hooks/useEntityKinds.ts
index 082e4a207d..5dae9c4c7f 100644
--- a/plugins/catalog-react/src/hooks/useEntityKinds.ts
+++ b/plugins/catalog-react/src/hooks/useEntityKinds.ts
@@ -31,7 +31,9 @@ export function useEntityKinds() {
.getEntities({ fields: ['kind'] })
.then(response => response.items);
- return [...new Set(entities.map(e => e.kind))].sort();
+ return [
+ ...new Set(entities.map(e => e.kind.toLocaleLowerCase('en-US'))),
+ ].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 b39ad08359..bdf5b51b65 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
@@ -106,7 +106,7 @@ describe('', () => {
fireEvent.click(option);
expect(updateFilters).toHaveBeenCalledWith({
- kind: new EntityKindFilter('Template'),
+ kind: new EntityKindFilter('template'),
});
});
});
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
index 89b132de53..e4318a6078 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
@@ -43,14 +43,16 @@ type CatalogKindHeaderProps = {
};
export const CatalogKindHeader = ({
- initialFilter = 'Component',
+ initialFilter = 'component',
}: CatalogKindHeaderProps) => {
const classes = useStyles();
- const { kinds: allKinds } = useEntityKinds();
+ const { kinds: allKinds = [] } = useEntityKinds();
const { updateFilters, queryParameters } = useEntityListProvider();
const [selectedKind, setSelectedKind] = useState(
- [queryParameters.kind].flat()[0] ?? initialFilter,
+ ([queryParameters.kind].flat()[0] ?? initialFilter).toLocaleLowerCase(
+ 'en-US',
+ ),
);
useEffect(() => {
@@ -59,6 +61,8 @@ export const CatalogKindHeader = ({
});
}, [selectedKind, updateFilters]);
+ const options = [...new Set([selectedKind, ...allKinds])].sort();
+
return (
}
@@ -66,9 +70,9 @@ export const CatalogKindHeader = ({
onChange={e => setSelectedKind(e.target.value as string)}
classes={classes}
>
- {(allKinds ?? ['Component']).map(kind => (
+ {options.map(kind => (
))}
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 84c2afa0f6..c85a60c7c1 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -27,7 +27,7 @@ import {
import Edit from '@material-ui/icons/Edit';
import OpenInNew from '@material-ui/icons/OpenInNew';
import { capitalize } from 'lodash';
-import React from 'react';
+import React, { useMemo } from 'react';
import * as columnFactories from './columns';
import { EntityRow } from './types';
import {
@@ -38,16 +38,6 @@ import {
WarningPanel,
} from '@backstage/core-components';
-const defaultColumns: TableColumn[] = [
- columnFactories.createNameColumn(),
- columnFactories.createSystemColumn(),
- columnFactories.createOwnerColumn(),
- columnFactories.createSpecTypeColumn(),
- columnFactories.createSpecLifecycleColumn(),
- columnFactories.createMetadataDescriptionColumn(),
- columnFactories.createTagsColumn(),
-];
-
type CatalogTableProps = {
columns?: TableColumn[];
actions?: TableProps['actions'];
@@ -57,6 +47,19 @@ export const CatalogTable = ({ columns, actions }: CatalogTableProps) => {
const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
const { loading, error, entities, filters } = useEntityListProvider();
+ const defaultColumns: TableColumn[] = useMemo(
+ () => [
+ columnFactories.createNameColumn({ defaultKind: filters.kind?.value }),
+ columnFactories.createSystemColumn(),
+ columnFactories.createOwnerColumn(),
+ columnFactories.createSpecTypeColumn(),
+ columnFactories.createSpecLifecycleColumn(),
+ columnFactories.createMetadataDescriptionColumn(),
+ columnFactories.createTagsColumn(),
+ ],
+ [filters.kind?.value],
+ );
+
const showTypeColumn = filters.type === undefined;
// TODO(timbonicus): remove the title from the CatalogTable once using EntitySearchBar
const titlePreamble = capitalize(filters.user?.value ?? 'all');