1import React, { PropsWithChildren, useMemo } from 'react';
2import { SelectableValue, VariableType } from '@grafana/data';
3import { selectors } from '@grafana/e2e-selectors';
4
5import { VariableSelectField } from '../editor/VariableSelectField';
6import { getVariableTypes } from '../utils';
7import { variableAdapters } from '../adapters';
8
9interface Props {
10  onChange: (option: SelectableValue<VariableType>) => void;
11  type: VariableType;
12}
13
14export function VariableTypeSelect({ onChange, type }: PropsWithChildren<Props>) {
15  const options = useMemo(() => getVariableTypes(), []);
16  const value = useMemo(() => options.find((o) => o.value === type) ?? options[0], [options, type]);
17
18  return (
19    <VariableSelectField
20      name="Type"
21      value={value}
22      options={options}
23      onChange={onChange}
24      tooltip={variableAdapters.get(type).description}
25      ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect}
26    />
27  );
28}
29