From 5d5786afe2806bde1110f021571d74a79f7cbc22 Mon Sep 17 00:00:00 2001
From: Scott Lepper <scott.lepper@gmail.com>
Date: Tue, 6 May 2025 13:01:20 -0400
Subject: [PATCH] Dashboard - edit pane textbox variable (#104893)

Dashboard - edit pane textbox variable
---
 .../components/TextBoxVariableForm.tsx        | 14 +++++++----
 .../components/VariableTextField.tsx          |  2 +-
 .../editors/TextBoxVariableEditor.test.tsx    | 12 ++++++++++
 .../editors/TextBoxVariableEditor.tsx         | 24 ++++++++++++++++---
 .../settings/variables/utils.ts               |  3 ++-
 public/locales/en-US/grafana.json             |  3 +++
 6 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/public/app/features/dashboard-scene/settings/variables/components/TextBoxVariableForm.tsx b/public/app/features/dashboard-scene/settings/variables/components/TextBoxVariableForm.tsx
index d0c8c0d11af..ef78b9f83b1 100644
--- a/public/app/features/dashboard-scene/settings/variables/components/TextBoxVariableForm.tsx
+++ b/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}
diff --git a/public/app/features/dashboard-scene/settings/variables/components/VariableTextField.tsx b/public/app/features/dashboard-scene/settings/variables/components/VariableTextField.tsx
index e7136100265..f020fa0dc37 100644
--- a/public/app/features/dashboard-scene/settings/variables/components/VariableTextField.tsx
+++ b/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;
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/TextBoxVariableEditor.test.tsx b/public/app/features/dashboard-scene/settings/variables/editors/TextBoxVariableEditor.test.tsx
index ea7489abd00..95a5a7da4ba 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/TextBoxVariableEditor.test.tsx
+++ b/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() {
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/TextBoxVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/TextBoxVariableEditor.tsx
index 5f5124198f8..018f5e14c9e 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/TextBoxVariableEditor.tsx
+++ b/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} />,
+    }),
+  ];
 }
diff --git a/public/app/features/dashboard-scene/settings/variables/utils.ts b/public/app/features/dashboard-scene/settings/variables/utils.ts
index d3e1c59ac20..56d7fed032b 100644
--- a/public/app/features/dashboard-scene/settings/variables/utils.ts
+++ b/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,
   },
 };
 
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 0024c76fa8b..d08c5babfc9 100644
--- a/public/locales/en-US/grafana.json
+++ b/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"
     },