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