Sort EntityTagPicker entries

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>

.changeset/real-hats-fail.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Sort `EntityTagPicker` entries.

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('<EntityTagPicker/>', () => {
       });
   });
 
+  it('renders unique tags in alphabetical order', () => {
+    const rendered = render(
+      <MockEntityListContextProvider
+        value={{ entities: taggedEntities, backendEntities: taggedEntities }}
+      >
+        <EntityTagPicker />
+      </MockEntityListContextProvider>,
+    );
+    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(

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 = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
@@ -35,13 +35,14 @@ const checkedIcon = <CheckBoxIcon fontSize="small" />;
 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],
   );