From 03705df4bf95abb35d47219b6cf1a5de0ba4414a Mon Sep 17 00:00:00 2001
From: Frank Niessink <frank@niessink.com>
Date: Mon, 21 Oct 2024 19:27:37 +0200
Subject: [PATCH] Correctly sort metrics in the "Add metric" dropdown menu.

Fixes #9857.
---
 components/frontend/src/widgets/Button.js      |  1 +
 components/frontend/src/widgets/Button.test.js | 10 +++++++++-
 docs/src/changelog.md                          |  1 +
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/frontend/src/widgets/Button.js b/components/frontend/src/widgets/Button.js
index b66c1fe85f..0344814e4b 100644
--- a/components/frontend/src/widgets/Button.js
+++ b/components/frontend/src/widgets/Button.js
@@ -115,6 +115,7 @@ export function AddDropdownButton({ itemSubtypes, itemType, onClick, allItemSubt
         items = items.filter((item) => !usedItemSubtypeKeys.includes(item.key))
     }
     const options = items.filter((itemSubtype) => itemSubtype.text.toLowerCase().includes(query.toLowerCase()))
+    options.sort((a, b) => a.text.localeCompare(b.text))
     return (
         <Popup
             content={`Add a new ${itemType} here`}
diff --git a/components/frontend/src/widgets/Button.test.js b/components/frontend/src/widgets/Button.test.js
index 6d2d3e5742..ccae2bce28 100644
--- a/components/frontend/src/widgets/Button.test.js
+++ b/components/frontend/src/widgets/Button.test.js
@@ -32,7 +32,7 @@ function renderAddDropdownButton(nrItems = 2, totalItems = 10, usedItemKeys = []
         <AddDropdownButton
             allItemSubtypes={allItemSubtypes}
             itemType="foo"
-            itemSubtypes={itemSubtypes}
+            itemSubtypes={itemSubtypes.toReversed()} // Pass items in reversed order to test they are sorted correctly
             onClick={mockCallback}
             usedItemSubtypeKeys={usedItemKeys}
         />,
@@ -71,6 +71,14 @@ test("AddDropdownButton keyboard navigation", async () => {
     expect(mockCallback).toHaveBeenCalledWith("sub 2")
 })
 
+test("AddDropdownButton sort order", async () => {
+    renderAddDropdownButton()
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Add foo/))
+    })
+    expect(screen.getAllByText(/Sub/).map((item) => item.innerHTML)).toStrictEqual(["Sub 1", "Sub 2"])
+})
+
 test("AddDropdownButton hides popup when dropdown is shown", async () => {
     renderAddDropdownButton()
     await userEvent.hover(screen.getByText(/Add foo/))
diff --git a/docs/src/changelog.md b/docs/src/changelog.md
index d860a7d9c3..afbe8d2c49 100644
--- a/docs/src/changelog.md
+++ b/docs/src/changelog.md
@@ -16,6 +16,7 @@ If your currently installed *Quality-time* version is not v5.17.0, please first
 
 ### Fixed
 
+- Correctly sort metrics in the "Add metric" dropdown menu. Fixes [#9857](https://github.com/ICTU/quality-time/issues/9857).
 - The warning message shown for unsupported measurement details was incorrect for metrics with a version scale. Fixes [#9973](https://github.com/ICTU/quality-time/issues/9973).
 - The metric summary cards with pie chart wouldn't erase the center label when rerendering, causing the label to be visible multiple times. Fixes [#10098](https://github.com/ICTU/quality-time/issues/10098).