Dashboard - edit pane textbox variable (#104893)

Dashboard - edit pane textbox variable

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

@@ -10,18 +10,22 @@ interface TextBoxVariableFormProps {
   defaultValue?: string;
   onChange?: (event: FormEvent<HTMLInputElement>) => void;
   onBlur?: (event: FormEvent<HTMLInputElement>) => void;
+  inline?: boolean;
 }
 
-export function TextBoxVariableForm({ defaultValue, value, onChange, onBlur }: TextBoxVariableFormProps) {
+export function TextBoxVariableForm({ defaultValue, value, onChange, onBlur, inline }: TextBoxVariableFormProps) {
   return (
     <>
-      <VariableLegend>
-        <Trans i18nKey="dashboard-scene.text-box-variable-form.text-options">Text options</Trans>
-      </VariableLegend>
+      {!inline && (
+        <VariableLegend>
+          <Trans i18nKey="dashboard-scene.text-box-variable-form.text-options">Text options</Trans>
+        </VariableLegend>
+      )}
+
       <VariableTextField
         value={value}
         defaultValue={defaultValue}
-        name="Default value"
+        name={inline ? undefined : 'Default value'}
         placeholder={t('dashboard-scene.text-box-variable-form.placeholder-default-value-if-any', '(optional)')}
         onChange={onChange}
         onBlur={onBlur}

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

@@ -7,7 +7,7 @@ import { Field, Input } from '@grafana/ui';
 interface VariableTextFieldProps {
   value?: string;
   defaultValue?: string;
-  name: string;
+  name?: string;
   placeholder?: string;
   onChange?: (event: FormEvent<HTMLInputElement>) => void;
   testId?: string;

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

@@ -39,6 +39,18 @@ describe('TextBoxVariableEditor', () => {
     await userEvent.tab();
     expect(textBoxVar.state.value).toBe(newValue);
   });
+
+  it('renders inline', () => {
+    const onChange = jest.fn();
+    render(<TextBoxVariableEditor variable={textBoxVar} onChange={onChange} inline={true} />);
+
+    const input = screen.getByDisplayValue(textBoxVar.state.value);
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveValue(textBoxVar.state.value);
+
+    const legend = screen.queryByText('Text options');
+    expect(legend).not.toBeInTheDocument();
+  });
 });
 
 async function buildTestScene() {

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

@@ -1,20 +1,38 @@
+import { noop } from 'lodash';
 import { FormEvent } from 'react';
 
-import { TextBoxVariable } from '@grafana/scenes';
+import { SceneVariable, TextBoxVariable } from '@grafana/scenes';
+import { t } from 'app/core/internationalization';
+import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
 
 import { TextBoxVariableForm } from '../components/TextBoxVariableForm';
 
 interface TextBoxVariableEditorProps {
   variable: TextBoxVariable;
   onChange: (variable: TextBoxVariable) => void;
+  inline?: boolean;
 }
 
-export function TextBoxVariableEditor({ variable }: TextBoxVariableEditorProps) {
+export function TextBoxVariableEditor({ variable, inline }: TextBoxVariableEditorProps) {
   const { value } = variable.useState();
 
   const onTextValueChange = (e: FormEvent<HTMLInputElement>) => {
     variable.setState({ value: e.currentTarget.value });
   };
 
-  return <TextBoxVariableForm defaultValue={value} onBlur={onTextValueChange} />;
+  return <TextBoxVariableForm defaultValue={value} onBlur={onTextValueChange} inline={inline} />;
+}
+
+export function getTextBoxVariableOptions(variable: SceneVariable): OptionsPaneItemDescriptor[] {
+  if (!(variable instanceof TextBoxVariable)) {
+    console.warn('getTextBoxVariableOptions: variable is not a TextBoxVariable');
+    return [];
+  }
+
+  return [
+    new OptionsPaneItemDescriptor({
+      title: t('dashboard-scene.textbox-variable-form.label-value', 'Value'),
+      render: () => <TextBoxVariableEditor onChange={noop} variable={variable} inline={true} />,
+    }),
+  ];
 }

public/app/features/dashboard-scene/settings/variables/utils.ts

@@ -31,7 +31,7 @@ import { DataSourceVariableEditor } from './editors/DataSourceVariableEditor';
 import { GroupByVariableEditor } from './editors/GroupByVariableEditor';
 import { IntervalVariableEditor } from './editors/IntervalVariableEditor';
 import { QueryVariableEditor } from './editors/QueryVariableEditor';
-import { TextBoxVariableEditor } from './editors/TextBoxVariableEditor';
+import { TextBoxVariableEditor, getTextBoxVariableOptions } from './editors/TextBoxVariableEditor';
 
 interface EditableVariableConfig {
   name: string;
@@ -89,6 +89,7 @@ export const EDITABLE_VARIABLES: Record<EditableVariableType, EditableVariableCo
     name: 'Textbox',
     description: 'Users can enter any arbitrary strings in a textbox',
     editor: TextBoxVariableEditor,
+    getOptions: getTextBoxVariableOptions,
   },
 };
 

public/locales/en-US/grafana.json

@@ -4208,6 +4208,9 @@
       "placeholder-default-value-if-any": "(optional)",
       "text-options": "Text options"
     },
+    "textbox-variable-form": {
+      "label-value": "Value"
+    },
     "title-field-label": {
       "title": "Title"
     },