mirror of
https://github.com/grafana/grafana.git
synced 2025-01-17 04:02:50 -06:00
04d857dfe6
* Variables: Adds description field * Refactor: Adds new Form components * Refactor: Fixes aria labels * Refactor: removes skipped tests * Refactor: Breaks out smaller select components * Refactor: removes gf-form div * Refactor: Breaks up several more selects into smaller components * Chore: Fixes typings
37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
import React, { PropsWithChildren, useMemo } from 'react';
|
|
import { SelectableValue } from '@grafana/data';
|
|
import { selectors } from '@grafana/e2e-selectors';
|
|
import { VariableSelectField } from '../editor/VariableSelectField';
|
|
import { VariableSort } from '../types';
|
|
|
|
interface Props {
|
|
onChange: (option: SelectableValue<VariableSort>) => void;
|
|
sort: VariableSort;
|
|
}
|
|
|
|
const SORT_OPTIONS = [
|
|
{ label: 'Disabled', value: VariableSort.disabled },
|
|
{ label: 'Alphabetical (asc)', value: VariableSort.alphabeticalAsc },
|
|
{ label: 'Alphabetical (desc)', value: VariableSort.alphabeticalDesc },
|
|
{ label: 'Numerical (asc)', value: VariableSort.numericalAsc },
|
|
{ label: 'Numerical (desc)', value: VariableSort.numericalDesc },
|
|
{ label: 'Alphabetical (case-insensitive, asc)', value: VariableSort.alphabeticalCaseInsensitiveAsc },
|
|
{ label: 'Alphabetical (case-insensitive, desc)', value: VariableSort.alphabeticalCaseInsensitiveDesc },
|
|
];
|
|
|
|
export function QueryVariableSortSelect({ onChange, sort }: PropsWithChildren<Props>) {
|
|
const value = useMemo(() => SORT_OPTIONS.find(o => o.value === sort) ?? SORT_OPTIONS[0], [sort]);
|
|
|
|
return (
|
|
<VariableSelectField
|
|
name="Sort"
|
|
value={value}
|
|
options={SORT_OPTIONS}
|
|
onChange={onChange}
|
|
labelWidth={10}
|
|
ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelect}
|
|
tooltip="How to sort the values of this variable."
|
|
/>
|
|
);
|
|
}
|