diff --git a/.changeset/real-hats-fail.md b/.changeset/real-hats-fail.md
new file mode 100644
index 0000000000..f0f3c9aaa6
--- /dev/null
+++ b/.changeset/real-hats-fail.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Sort `EntityTagPicker` entries.
diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx
index e601d1b8ab..23a7ab55cf 100644
--- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx
+++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx
@@ -14,12 +14,12 @@
* limitations under the License.
*/
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
import { Entity } from '@backstage/catalog-model';
-import { EntityTagPicker } from './EntityTagPicker';
-import { EntityTagFilter } from '../../types';
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
import { MockEntityListContextProvider } from '../../testUtils/providers';
+import { EntityTagFilter } from '../../types';
+import { EntityTagPicker } from './EntityTagPicker';
const taggedEntities: Entity[] = [
{
@@ -27,7 +27,7 @@ const taggedEntities: Entity[] = [
kind: 'Component',
metadata: {
name: 'component-1',
- tags: ['tag1', 'tag2'],
+ tags: ['tag4', 'tag1', 'tag2'],
},
},
{
@@ -59,6 +59,26 @@ describe('', () => {
});
});
+ it('renders unique tags in alphabetical order', () => {
+ const rendered = render(
+
+
+ ,
+ );
+ expect(rendered.getByText('Tags')).toBeInTheDocument();
+
+ fireEvent.click(rendered.getByTestId('tag-picker-expand'));
+
+ expect(rendered.getAllByRole('option').map(o => o.textContent)).toEqual([
+ 'tag1',
+ 'tag2',
+ 'tag3',
+ 'tag4',
+ ]);
+ });
+
it('adds tags to filters', () => {
const updateFilters = jest.fn();
const rendered = render(
diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx
index d57700ca7d..e610fb9d2f 100644
--- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx
@@ -14,20 +14,20 @@
* limitations under the License.
*/
-import React, { useMemo } from 'react';
+import { Entity } from '@backstage/catalog-model';
import {
Checkbox,
FormControlLabel,
TextField,
Typography,
} from '@material-ui/core';
-import { Autocomplete } from '@material-ui/lab';
-import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { Entity } from '@backstage/catalog-model';
-import { EntityTagFilter } from '../../types';
+import { Autocomplete } from '@material-ui/lab';
+import React, { useMemo } from 'react';
import { useEntityListProvider } from '../../hooks/useEntityListProvider';
+import { EntityTagFilter } from '../../types';
const icon = ;
const checkedIcon = ;
@@ -35,13 +35,14 @@ const checkedIcon = ;
export const EntityTagPicker = () => {
const { updateFilters, backendEntities, filters } = useEntityListProvider();
const availableTags = useMemo(
- () => [
- ...new Set(
- backendEntities
- .flatMap((e: Entity) => e.metadata.tags)
- .filter(Boolean) as string[],
- ),
- ],
+ () =>
+ [
+ ...new Set(
+ backendEntities
+ .flatMap((e: Entity) => e.metadata.tags)
+ .filter(Boolean) as string[],
+ ),
+ ].sort(),
[backendEntities],
);