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 ( 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');