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

Co-authored-by: Ivan Ortega <ivanortegaalba@gmail.com>

public/app/features/dashboard-scene/settings/variables/components/TextBoxVariableForm.test.tsx

@@ -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);
+  });
+});

public/app/features/dashboard-scene/settings/variables/components/TextBoxVariableForm.tsx

@@ -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}
+      />
+    </>
+  );
+}

public/app/features/dashboard-scene/settings/variables/editors/TextBoxVariableEditor.test.tsx

@@ -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 };
+}

public/app/features/dashboard-scene/settings/variables/editors/TextBoxVariableEditor.tsx

@@ -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} />;
 }

public/app/features/variables/textbox/TextBoxVariableEditor.tsx

@@ -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} />;
 }