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], );