Loki: Fix label browser not sorted after selection of a label (#107394)

* Explore(Loki): fix label browser not sorted after selection of a label

Signed-off-by: Paulo Dias <[email protected]>

* fix: use collator instead of localCompares

Signed-off-by: Paulo Dias <[email protected]>

---------

Signed-off-by: Paulo Dias <[email protected]>
Co-authored-by: Zoltán Bedi <[email protected]>

Author: paulojmdias

public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx

@@ -26,6 +26,7 @@ const MAX_LABEL_COUNT = 1000;
 const MAX_VALUE_COUNT = 10000;
 const MAX_AUTO_SELECT = 4;
 const EMPTY_SELECTOR = '{}';
+const collator = new Intl.Collator('en', { sensitivity: 'accent' });
 
 export interface BrowserProps {
   languageProvider: LokiLanguageProvider;
@@ -68,7 +69,10 @@ export function buildSelector(labels: SelectableLabel[]): string {
   const selectedLabels = [];
   for (const label of labels) {
     if (label.selected && label.values && label.values.length > 0) {
-      const selectedValues = label.values.filter((value) => value.selected).map((value) => value.name);
+      const selectedValues = label.values
+        .filter((value) => value.selected)
+        .map((value) => value.name)
+        .sort(collator.compare); // sort selected values alphabetically
       if (selectedValues.length > 1) {
         selectedLabels.push(`${label.name}=~"${selectedValues.map(escapeLabelValueInRegexSelector).join('|')}"`);
       } else if (selectedValues.length === 1) {
@@ -97,7 +101,13 @@ export function facetLabels(
           label.values?.filter((value) => value.selected).map((value) => value.name) || []
         );
         // Values for this label have not been requested yet, let's use the facetted ones as the initial values
-        existingValues = possibleValues.map((value) => ({ name: value, selected: selectedValues.has(value) }));
+        existingValues = possibleValues
+          .slice()
+          .sort(collator.compare) // sort raw label values alphabetically
+          .map((value) => ({
+            name: value,
+            selected: selectedValues.has(value),
+          }));
       }
       return { ...label, loading: false, values: existingValues, facets: existingValues.length };
     }