1import React, { PropsWithChildren, useMemo } from 'react'; 2import { SelectableValue } from '@grafana/data'; 3import { selectors } from '@grafana/e2e-selectors'; 4import { VariableSelectField } from '../editor/VariableSelectField'; 5import { VariableSort } from '../types'; 6 7interface Props { 8 onChange: (option: SelectableValue<VariableSort>) => void; 9 sort: VariableSort; 10} 11 12const SORT_OPTIONS = [ 13 { label: 'Disabled', value: VariableSort.disabled }, 14 { label: 'Alphabetical (asc)', value: VariableSort.alphabeticalAsc }, 15 { label: 'Alphabetical (desc)', value: VariableSort.alphabeticalDesc }, 16 { label: 'Numerical (asc)', value: VariableSort.numericalAsc }, 17 { label: 'Numerical (desc)', value: VariableSort.numericalDesc }, 18 { label: 'Alphabetical (case-insensitive, asc)', value: VariableSort.alphabeticalCaseInsensitiveAsc }, 19 { label: 'Alphabetical (case-insensitive, desc)', value: VariableSort.alphabeticalCaseInsensitiveDesc }, 20]; 21 22export function QueryVariableSortSelect({ onChange, sort }: PropsWithChildren<Props>) { 23 const value = useMemo(() => SORT_OPTIONS.find((o) => o.value === sort) ?? SORT_OPTIONS[0], [sort]); 24 25 return ( 26 <VariableSelectField 27 name="Sort" 28 value={value} 29 options={SORT_OPTIONS} 30 onChange={onChange} 31 labelWidth={10} 32 ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelect} 33 tooltip="How to sort the values of this variable." 34 /> 35 ); 36} 37