diff --git a/packages/scenes/src/variables/variants/query/QueryVariable.test.tsx b/packages/scenes/src/variables/variants/query/QueryVariable.test.tsx index 601cebc52..af42f4684 100644 --- a/packages/scenes/src/variables/variants/query/QueryVariable.test.tsx +++ b/packages/scenes/src/variables/variants/query/QueryVariable.test.tsx @@ -322,9 +322,9 @@ describe.each(['11.1.2', '11.1.1'])('QueryVariable', (v) => { await lastValueFrom(variable.validateAndUpdate()); expect(variable.state.options).toEqual([ - { label: 'val1', value: 'val1' }, - { label: 'val2', value: 'val2' }, { label: 'val11', value: 'val11' }, + { label: 'val2', value: 'val2' }, + { label: 'val1', value: 'val1' }, ]); }); @@ -339,9 +339,9 @@ describe.each(['11.1.2', '11.1.1'])('QueryVariable', (v) => { await lastValueFrom(variable.validateAndUpdate()); expect(variable.state.options).toEqual([ - { label: 'val11', value: 'val11' }, - { label: 'val2', value: 'val2' }, { label: 'val1', value: 'val1' }, + { label: 'val2', value: 'val2' }, + { label: 'val11', value: 'val11' }, ]); }); diff --git a/packages/scenes/src/variables/variants/query/utils.ts b/packages/scenes/src/variables/variants/query/utils.ts index 28f40c58b..bfc73c150 100644 --- a/packages/scenes/src/variables/variants/query/utils.ts +++ b/packages/scenes/src/variables/variants/query/utils.ts @@ -74,40 +74,11 @@ const getAllMatches = (str: string, regex: RegExp): RegExpExecArray[] => { return results; }; -export const sortVariableValues = (options: any[], sortOrder: VariableSort) => { +export const sortVariableValues = (options: VariableValueOption[], sortOrder: VariableSort) => { if (sortOrder === VariableSort.disabled) { return options; } - // @ts-ignore - const sortByNumeric = (opt) => { - if (!opt.text) { - return -1; - } - const matches = opt.text.match(/.*?(\d+).*/); - if (!matches || matches.length < 2) { - return -1; - } else { - return parseInt(matches[1], 10); - } - }; - - // @ts-ignore - const sortByNaturalSort = (options) => { - //@ts-ignore - return options.sort((a, b) => { - if (!a.text) { - return -1; - } - - if (!b.text) { - return 1; - } - - return a.text.localeCompare(b.text, undefined, { numeric: true }); - }); - }; - switch (sortOrder) { case VariableSort.alphabeticalAsc: options = sortBy(options, 'label'); @@ -146,3 +117,23 @@ export const sortVariableValues = (options: any[], sortOrder: VariableSort) => { } return options; }; + +function sortByNumeric(opt: VariableValueOption) { + if (!opt.label) { + return -1; + } + const matches = opt.label.match(/.*?(\d+).*/); + if (!matches || matches.length < 2) { + return -1; + } else { + return parseInt(matches[1], 10); + } +} + +const collator = new Intl.Collator(undefined, { sensitivity: 'accent', numeric: true }); + +function sortByNaturalSort(options: VariableValueOption[]) { + return options.slice().sort((a, b) => { + return collator.compare(a.label, b.label); + }); +}