Dashboard: Migration - EditVariable Settings: Implement TextBox Variable (#80293)

Co-authored-by: Ivan Ortega <ivanortegaalba@gmail.com>
This commit is contained in:
Alexa V 2024-01-16 12:38:34 +01:00 committed by GitHub
parent c0918d41dd
commit 6c609051a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 134 additions and 20 deletions

View File

@ -0,0 +1,34 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { TextBoxVariableForm } from './TextBoxVariableForm';
describe('TextBoxVariableForm', () => {
it('renders correctly', () => {
const onChange = jest.fn();
const onBlur = jest.fn();
const value = 'test value';
render(<TextBoxVariableForm value={value} onChange={onChange} onBlur={onBlur} />);
expect(screen.getByText('Text options')).toBeInTheDocument();
expect(screen.getByRole('textbox', { name: 'Default value' })).toBeInTheDocument();
});
it('calls onChange when input value changes', async () => {
const onChange = jest.fn();
const onBlur = jest.fn();
const value = 'test value';
render(<TextBoxVariableForm value={value} onChange={onChange} onBlur={onBlur} />);
const input = screen.getByRole('textbox', { name: 'Default value' });
expect(input).toHaveValue(value);
// change input value
const newValue = 'new value';
await userEvent.type(input, newValue);
expect(onChange).toHaveBeenCalledTimes(newValue.length);
});
});

View File

@ -0,0 +1,28 @@
import React, { FormEvent } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { VariableLegend } from 'app/features/dashboard-scene/settings/variables/components/VariableLegend';
import { VariableTextField } from 'app/features/dashboard-scene/settings/variables/components/VariableTextField';
interface TextBoxVariableFormProps {
value: string;
onChange: (event: FormEvent<HTMLInputElement>) => void;
onBlur: (event: FormEvent<HTMLInputElement>) => void;
}
export function TextBoxVariableForm({ onChange, onBlur, value }: TextBoxVariableFormProps) {
return (
<>
<VariableLegend>Text options</VariableLegend>
<VariableTextField
value={value}
name="Default value"
placeholder="default value, if any"
onChange={onChange}
onBlur={onBlur}
width={30}
testId={selectors.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInputV2}
/>
</>
);
}

View File

@ -0,0 +1,54 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { TextBoxVariable } from '@grafana/scenes';
import { TextBoxVariableEditor } from './TextBoxVariableEditor';
describe('TextBoxVariableEditor', () => {
let textBoxVar: TextBoxVariable;
beforeEach(async () => {
const result = await buildTestScene();
textBoxVar = result.textBoxVar;
});
it('renders default value if any', () => {
const onChange = jest.fn();
render(<TextBoxVariableEditor variable={textBoxVar} onChange={onChange} />);
const input = screen.getByRole('textbox', { name: 'Default value' });
expect(input).toBeInTheDocument();
expect(input).toHaveValue('initial value test');
});
it('changes the value', async () => {
const onChange = jest.fn();
render(<TextBoxVariableEditor variable={textBoxVar} onChange={onChange} />);
const input = screen.getByRole('textbox', { name: 'Default value' });
expect(input).toBeInTheDocument();
expect(input).toHaveValue('initial value test');
// change input value
const newValue = 'new textbox value';
await userEvent.clear(input);
await userEvent.type(input, newValue);
expect(input).toHaveValue(newValue);
await userEvent.tab();
expect(textBoxVar.state.value).toBe(newValue);
});
});
async function buildTestScene() {
const textBoxVar = new TextBoxVariable({
name: 'textBoxVar',
label: 'textBoxVar',
type: 'textbox',
value: 'initial value test',
});
return { textBoxVar };
}

View File

@ -1,12 +1,25 @@
import React from 'react';
import React, { useState } from 'react';
import { TextBoxVariable } from '@grafana/scenes';
import { TextBoxVariableForm } from '../components/TextBoxVariableForm';
interface TextBoxVariableEditorProps {
variable: TextBoxVariable;
onChange: (variable: TextBoxVariable) => void;
}
export function TextBoxVariableEditor(props: TextBoxVariableEditorProps) {
return <div>TextBoxVariableEditor</div>;
export function TextBoxVariableEditor({ variable }: TextBoxVariableEditorProps) {
const { value } = variable.useState();
const [textValue, setTextValue] = useState(value);
const onTextValueChange = (event: React.FormEvent<HTMLInputElement>) => {
setTextValue(event.currentTarget.value);
};
const onBlur = () => {
variable.setState({ value: textValue });
};
return <TextBoxVariableForm value={textValue} onChange={onTextValueChange} onBlur={onBlur} />;
}

View File

@ -1,9 +1,7 @@
import React, { FormEvent, ReactElement, useCallback } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { TextBoxVariableForm } from 'app/features/dashboard-scene/settings/variables/components/TextBoxVariableForm';
import { VariableLegend } from '../../dashboard-scene/settings/variables/components/VariableLegend';
import { VariableTextField } from '../../dashboard-scene/settings/variables/components/VariableTextField';
import { VariableEditorProps } from '../editor/types';
import { TextBoxVariableModel } from '../types';
@ -22,18 +20,5 @@ export function TextBoxVariableEditor({ onPropChange, variable: { query } }: Pro
const onChange = useCallback((e: FormEvent<HTMLInputElement>) => updateVariable(e, false), [updateVariable]);
const onBlur = useCallback((e: FormEvent<HTMLInputElement>) => updateVariable(e, true), [updateVariable]);
return (
<>
<VariableLegend>Text options</VariableLegend>
<VariableTextField
value={query}
name="Default value"
placeholder="default value, if any"
onChange={onChange}
onBlur={onBlur}
width={30}
testId={selectors.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInputV2}
/>
</>
);
return <TextBoxVariableForm value={query} onChange={onChange} onBlur={onBlur} />;
}