diff --git a/.changeset/heavy-lions-burn.md b/.changeset/heavy-lions-burn.md new file mode 100644 index 0000000000..7f5cdc9b66 --- /dev/null +++ b/.changeset/heavy-lions-burn.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': minor +--- + +Added sorted prop in EntityTypePicker diff --git a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx index f7954f2604..49e4287e9f 100644 --- a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx @@ -189,4 +189,34 @@ describe('', () => { type: new EntityTypeFilter(['tool']), }); }); + + it('sorts the available entity types when sorted prop is true', async () => { + await renderInTestApp( + + + + + , + ); + expect(screen.getByText('Type')).toBeInTheDocument(); + + const input = screen.getByTestId('select'); + fireEvent.mouseDown(within(input).getByRole('button')); + + await waitFor(() => screen.getByText('library')); + + const sortedEntities = entities + .map(e => e.spec!.type as string) + .sort((a, b) => + a + .toLocaleLowerCase('en-US') + .localeCompare(b.toLocaleLowerCase('en-US')), + ); + + sortedEntities.forEach(entityType => { + expect(screen.getByText(entityType)).toBeInTheDocument(); + }); + }); }); diff --git a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx index 082004f15b..1622607db4 100644 --- a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx +++ b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx @@ -31,11 +31,12 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; export interface EntityTypePickerProps { initialFilter?: string; hidden?: boolean; + sorted?: boolean; } /** @public */ export const EntityTypePicker = (props: EntityTypePickerProps) => { - const { hidden, initialFilter } = props; + const { hidden, initialFilter, sorted } = props; const alertApi = useApi(alertApiRef); const { error, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter(); @@ -54,7 +55,11 @@ export const EntityTypePicker = (props: EntityTypePickerProps) => { }, [error, alertApi, initialFilter, setSelectedTypes, t]); if (availableTypes.length === 0 || error) return null; - + if (sorted) { + availableTypes.sort((a, b) => + a.toLocaleLowerCase('en-US').localeCompare(b.toLocaleLowerCase('en-US')), + ); + } const items = [ { value: 'all', label: t('entityTypePicker.optionAllTitle') }, ...availableTypes.map((type: string) => ({