From a9960ed4d28a7428cb57b978f571f5fbd9390d3d Mon Sep 17 00:00:00 2001
From: Scott Lepper <scott.lepper@gmail.com>
Date: Thu, 1 May 2025 15:37:13 -0400
Subject: [PATCH] add constant variable type to editor (#104662)

add constant variable type to editor
---
 .../editors/ConstantVariableEditor.test.tsx   |  7 ++-
 .../editors/ConstantVariableEditor.tsx        | 43 +++++++++++++++++--
 .../settings/variables/utils.ts               |  3 +-
 public/locales/en-US/grafana.json             |  1 +
 4 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.test.tsx b/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.test.tsx
index 94b26d3537c..0d1c158b189 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.test.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.test.tsx
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import { ConstantVariable } from '@grafana/scenes';
 
-import { ConstantVariableEditor } from './ConstantVariableEditor';
+import { ConstantVariableEditor, getConstantVariableOptions } from './ConstantVariableEditor';
 
 describe('ConstantVariableEditor', () => {
   let constantVar: ConstantVariable;
@@ -36,6 +36,11 @@ describe('ConstantVariableEditor', () => {
     await userEvent.tab();
     expect(constantVar.state.value).toBe(newValue);
   });
+
+  it('should get variable options', () => {
+    const options = getConstantVariableOptions(constantVar);
+    expect(options).toHaveLength(1);
+  });
 });
 
 async function buildTestScene() {
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.tsx
index 10f42d992e1..0050c8a61a4 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.tsx
@@ -1,6 +1,10 @@
-import * as React from 'react';
+import { FormEvent } from 'react';
+import { lastValueFrom } from 'rxjs';
 
-import { ConstantVariable } from '@grafana/scenes';
+import { ConstantVariable, SceneVariable } from '@grafana/scenes';
+import { Input } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
+import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
 
 import { ConstantVariableForm } from '../components/ConstantVariableForm';
 
@@ -11,9 +15,40 @@ interface ConstantVariableEditorProps {
 export function ConstantVariableEditor({ variable }: ConstantVariableEditorProps) {
   const { value } = variable.useState();
 
-  const onConstantValueChange = (event: React.FormEvent<HTMLInputElement>) => {
+  const onConstantValueChange = (event: FormEvent<HTMLInputElement>) => {
     variable.setState({ value: event.currentTarget.value });
   };
 
-  return <ConstantVariableForm constantValue={String(value)} onChange={onConstantValueChange} />;
+  return <ConstantVariableForm constantValue={value.toString()} onChange={onConstantValueChange} />;
+}
+
+export function getConstantVariableOptions(variable: SceneVariable): OptionsPaneItemDescriptor[] {
+  if (!(variable instanceof ConstantVariable)) {
+    console.warn('getConstantVariableOptions: variable is not a ConstantVariable');
+    return [];
+  }
+
+  return [
+    new OptionsPaneItemDescriptor({
+      title: t('dashboard-scene.constant-variable-form.label-value', 'Value'),
+      render: () => <ConstantValueInput variable={variable} />,
+    }),
+  ];
+}
+
+function ConstantValueInput({ variable }: { variable: ConstantVariable }) {
+  const { value } = variable.useState();
+
+  const onBlur = async (event: FormEvent<HTMLInputElement>) => {
+    variable.setState({ value: event.currentTarget.value });
+    await lastValueFrom(variable.validateAndUpdate!());
+  };
+
+  return (
+    <Input
+      defaultValue={value.toString()}
+      onBlur={onBlur}
+      placeholder={t('dashboard-scene.constant-variable-form.placeholder-your-metric-prefix', 'Your metric prefix')}
+    />
+  );
 }
diff --git a/public/app/features/dashboard-scene/settings/variables/utils.ts b/public/app/features/dashboard-scene/settings/variables/utils.ts
index c0ccfbc1333..d3e1c59ac20 100644
--- a/public/app/features/dashboard-scene/settings/variables/utils.ts
+++ b/public/app/features/dashboard-scene/settings/variables/utils.ts
@@ -25,7 +25,7 @@ import { getIntervalsQueryFromNewIntervalModel } from '../../utils/utils';
 
 import { getCustomVariableOptions } from './components/CustomVariableForm';
 import { AdHocFiltersVariableEditor } from './editors/AdHocFiltersVariableEditor';
-import { ConstantVariableEditor } from './editors/ConstantVariableEditor';
+import { ConstantVariableEditor, getConstantVariableOptions } from './editors/ConstantVariableEditor';
 import { CustomVariableEditor } from './editors/CustomVariableEditor';
 import { DataSourceVariableEditor } from './editors/DataSourceVariableEditor';
 import { GroupByVariableEditor } from './editors/GroupByVariableEditor';
@@ -63,6 +63,7 @@ export const EDITABLE_VARIABLES: Record<EditableVariableType, EditableVariableCo
     name: 'Constant',
     description: 'A hidden constant variable, useful for metric prefixes in dashboards you want to share',
     editor: ConstantVariableEditor,
+    getOptions: getConstantVariableOptions,
   },
   interval: {
     name: 'Interval',
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index ae3a7156489..1bd01ff3a6d 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -3914,6 +3914,7 @@
     },
     "constant-variable-form": {
       "constant-options": "Constant options",
+      "label-value": "Value",
       "placeholder-your-metric-prefix": "Your metric prefix"
     },
     "custom-variable-form": {