feat(gui): sort lists by visible labels after i18n

ssube · Jun 17, 2023 · 7f28c0f · 7f28c0f
1 parent 719b349
commit 7f28c0f
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/gui/src/components/input/QueryMenu.tsx b/gui/src/components/input/QueryMenu.tsx
@@ -93,6 +93,8 @@ export function QueryMenu<T>(props: QueryMenuProps<T>) {
 
   // else: success
   const data = filterQuery(query, showEmpty);
+  const labeledData = data.map((it) => [it, getLabel(it)]).sort((a, b) => a[1].localeCompare(b[1]));
+  const menuItems = labeledData.map(([key, label]) => <MenuItem key={key} onClick={() => selectItem(key)}>{label}</MenuItem>);
 
   return <Box>
     <Button
@@ -112,7 +114,7 @@ export function QueryMenu<T>(props: QueryMenuProps<T>) {
         'aria-labelledby': `${id}-button`,
       }}
     >
-      {data.map((it, idx) => <MenuItem key={it} onClick={() => selectItem(it)}>{getLabel(it)}</MenuItem>)}
+      {menuItems}
     </Menu>
   </Box>;
 }