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) => ({