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 { VariableHide } from '../types';
7
8interface Props {
9  onChange: (option: SelectableValue<VariableHide>) => void;
10  hide: VariableHide;
11  type: VariableType;
12}
13
14const HIDE_OPTIONS = [
15  { label: '', value: VariableHide.dontHide },
16  { label: 'Label', value: VariableHide.hideLabel },
17  { label: 'Variable', value: VariableHide.hideVariable },
18];
19
20export function VariableHideSelect({ onChange, hide, type }: PropsWithChildren<Props>) {
21  const value = useMemo(() => HIDE_OPTIONS.find((o) => o.value === hide) ?? HIDE_OPTIONS[0], [hide]);
22
23  if (type === 'constant') {
24    return null;
25  }
26
27  return (
28    <VariableSelectField
29      name="Hide"
30      value={value}
31      options={HIDE_OPTIONS}
32      onChange={onChange}
33      ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect}
34    />
35  );
36}
37