add constant variable type to editor (#104662)

add constant variable type to editor

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() {

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

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',

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": {