diff --git a/.changeset/heavy-lions-burn.md b/.changeset/heavy-lions-burn.md index 7f5cdc9b66..1fb5baa384 100644 --- a/.changeset/heavy-lions-burn.md +++ b/.changeset/heavy-lions-burn.md @@ -2,4 +2,4 @@ '@backstage/plugin-catalog-react': minor --- -Added sorted prop in EntityTypePicker +Sort EntityTypePicker by default diff --git a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx index 49e4287e9f..f7954f2604 100644 --- a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx @@ -189,34 +189,4 @@ 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 1622607db4..ba39536d1e 100644 --- a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx +++ b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx @@ -31,12 +31,11 @@ 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, sorted } = props; + const { hidden, initialFilter } = props; const alertApi = useApi(alertApiRef); const { error, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter(); @@ -55,11 +54,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')), - ); - } + + 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) => ({