1import React, { FormEvent, ReactElement, useCallback } from 'react';
2import { VerticalGroup } from '@grafana/ui';
3
4import { TextBoxVariableModel } from '../types';
5import { VariableEditorProps } from '../editor/types';
6import { VariableSectionHeader } from '../editor/VariableSectionHeader';
7import { VariableTextField } from '../editor/VariableTextField';
8import { selectors } from '@grafana/e2e-selectors';
9
10export interface Props extends VariableEditorProps<TextBoxVariableModel> {}
11
12export function TextBoxVariableEditor({ onPropChange, variable: { query } }: Props): ReactElement {
13  const updateVariable = useCallback(
14    (event: FormEvent<HTMLInputElement>, updateOptions: boolean) => {
15      event.preventDefault();
16      onPropChange({ propName: 'originalQuery', propValue: event.currentTarget.value, updateOptions: false });
17      onPropChange({ propName: 'query', propValue: event.currentTarget.value, updateOptions });
18    },
19    [onPropChange]
20  );
21
22  const onChange = useCallback((e: FormEvent<HTMLInputElement>) => updateVariable(e, false), [updateVariable]);
23  const onBlur = useCallback((e: FormEvent<HTMLInputElement>) => updateVariable(e, true), [updateVariable]);
24
25  return (
26    <VerticalGroup spacing="xs">
27      <VariableSectionHeader name="Text options" />
28      <VariableTextField
29        value={query}
30        name="Default value"
31        placeholder="default value, if any"
32        onChange={onChange}
33        onBlur={onBlur}
34        labelWidth={20}
35        grow
36        ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInput}
37      />
38    </VerticalGroup>
39  );
40}
41