grafana/public/app/features/variables/textbox/TextBoxVariableEditor.tsx
Josh Hunt 3c6e0e8ef8
Chore: ESlint import order (#44959)
* Add and configure eslint-plugin-import

* Fix the lint:ts npm command

* Autofix + prettier all the files

* Manually fix remaining files

* Move jquery code in jest-setup to external file to safely reorder imports

* Resolve issue caused by circular dependencies within Prometheus

* Update .betterer.results

* Fix missing // @ts-ignore

* ignore iconBundle.ts

* Fix missing // @ts-ignore
2022-04-22 14:33:13 +01:00

42 lines
1.6 KiB
TypeScript

import React, { FormEvent, ReactElement, useCallback } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { VerticalGroup } from '@grafana/ui';
import { VariableSectionHeader } from '../editor/VariableSectionHeader';
import { VariableTextField } from '../editor/VariableTextField';
import { VariableEditorProps } from '../editor/types';
import { TextBoxVariableModel } from '../types';
export interface Props extends VariableEditorProps<TextBoxVariableModel> {}
export function TextBoxVariableEditor({ onPropChange, variable: { query } }: Props): ReactElement {
const updateVariable = useCallback(
(event: FormEvent<HTMLInputElement>, updateOptions: boolean) => {
event.preventDefault();
onPropChange({ propName: 'originalQuery', propValue: event.currentTarget.value, updateOptions: false });
onPropChange({ propName: 'query', propValue: event.currentTarget.value, updateOptions });
},
[onPropChange]
);
const onChange = useCallback((e: FormEvent<HTMLInputElement>) => updateVariable(e, false), [updateVariable]);
const onBlur = useCallback((e: FormEvent<HTMLInputElement>) => updateVariable(e, true), [updateVariable]);
return (
<VerticalGroup spacing="xs">
<VariableSectionHeader name="Text options" />
<VariableTextField
value={query}
name="Default value"
placeholder="default value, if any"
onChange={onChange}
onBlur={onBlur}
labelWidth={20}
grow
testId={selectors.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInputV2}
/>
</VerticalGroup>
);
}