From b2a6174b2cee6480660df0636f8018714d2adbd8 Mon Sep 17 00:00:00 2001
From: Scott Lepper <scott.lepper@gmail.com>
Date: Mon, 12 May 2025 08:45:24 -0400
Subject: [PATCH] Dashboard edit pane interval variable (#105202)

* add interval variable
* remove label from query variable button
---
 .../components/IntervalVariableForm.tsx       | 10 ++++++---
 .../editors/IntervalVariableEditor.tsx        | 21 +++++++++++++++++--
 .../editors/QueryVariableEditor.test.tsx      |  1 -
 .../variables/editors/QueryVariableEditor.tsx |  1 -
 .../settings/variables/utils.ts               |  3 ++-
 .../PanelEditor/OptionsPaneItemDescriptor.tsx |  6 +++++-
 .../PanelEditor/state/OptionSearchEngine.ts   |  2 +-
 public/locales/en-US/grafana.json             |  3 ---
 8 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/public/app/features/dashboard-scene/settings/variables/components/IntervalVariableForm.tsx b/public/app/features/dashboard-scene/settings/variables/components/IntervalVariableForm.tsx
index c4e66d567c0..397418294af 100644
--- a/public/app/features/dashboard-scene/settings/variables/components/IntervalVariableForm.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/components/IntervalVariableForm.tsx
@@ -20,6 +20,7 @@ interface IntervalVariableFormProps {
   autoEnabled: boolean;
   autoMinInterval: string;
   autoStepCount: number;
+  inline?: boolean;
 }
 
 export function IntervalVariableForm({
@@ -31,6 +32,7 @@ export function IntervalVariableForm({
   autoEnabled,
   autoMinInterval,
   autoStepCount,
+  inline = false,
 }: IntervalVariableFormProps) {
   const STEP_OPTIONS = [1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 100, 200, 300, 400, 500].map((count) => ({
     label: `${count}`,
@@ -42,9 +44,11 @@ export function IntervalVariableForm({
 
   return (
     <>
-      <VariableLegend>
-        <Trans i18nKey="dashboard-scene.interval-variable-form.interval-options">Interval options</Trans>
-      </VariableLegend>
+      {!inline && (
+        <VariableLegend>
+          <Trans i18nKey="dashboard-scene.interval-variable-form.interval-options">Interval options</Trans>
+        </VariableLegend>
+      )}
       <VariableTextField
         defaultValue={intervals}
         name="Values"
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.tsx
index 7b513d34127..143ce707b0a 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.tsx
@@ -1,7 +1,9 @@
+import { noop } from 'lodash';
 import { ChangeEvent, FormEvent } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { IntervalVariable } from '@grafana/scenes';
+import { IntervalVariable, SceneVariable } from '@grafana/scenes';
+import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
 import {
   getIntervalsFromQueryString,
   getIntervalsQueryFromNewIntervalModel,
@@ -12,9 +14,10 @@ import { IntervalVariableForm } from '../components/IntervalVariableForm';
 interface IntervalVariableEditorProps {
   variable: IntervalVariable;
   onRunQuery: () => void;
+  inline?: boolean;
 }
 
-export function IntervalVariableEditor({ variable, onRunQuery }: IntervalVariableEditorProps) {
+export function IntervalVariableEditor({ variable, onRunQuery, inline }: IntervalVariableEditorProps) {
   const { intervals, autoStepCount, autoEnabled, autoMinInterval, value } = variable.useState();
 
   //transform intervals array into string
@@ -55,6 +58,20 @@ export function IntervalVariableEditor({ variable, onRunQuery }: IntervalVariabl
       onAutoEnabledChange={onAutoEnabledChange}
       onAutoMinIntervalChanged={onAutoMinIntervalChanged}
       autoMinInterval={autoMinInterval}
+      inline={inline}
     />
   );
 }
+
+export function getIntervalVariableOptions(variable: SceneVariable): OptionsPaneItemDescriptor[] {
+  if (!(variable instanceof IntervalVariable)) {
+    console.warn('getIntervalVariableOptions: variable is not an IntervalVariable');
+    return [];
+  }
+
+  return [
+    new OptionsPaneItemDescriptor({
+      render: () => <IntervalVariableEditor variable={variable} onRunQuery={noop} inline={true} />,
+    }),
+  ];
+}
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx
index 6dbe4005b54..97823f9f493 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx
@@ -383,7 +383,6 @@ describe('QueryVariableEditor', () => {
 
     expect(result.length).toBe(1);
     const descriptor = result[0];
-    expect(descriptor.props.title).toBe('Query Editor');
 
     // Mock the parent property that OptionsPaneItem expects
     descriptor.parent = new OptionsPaneCategoryDescriptor({
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx
index 21a367451b1..d218fd5f530 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx
@@ -101,7 +101,6 @@ export function getQueryVariableOptions(variable: SceneVariable): OptionsPaneIte
 
   return [
     new OptionsPaneItemDescriptor({
-      title: t('dashboard-scene.query-variable-form.label-editor', 'Query Editor'),
       render: () => <ModalEditor variable={variable} />,
     }),
   ];
diff --git a/public/app/features/dashboard-scene/settings/variables/utils.ts b/public/app/features/dashboard-scene/settings/variables/utils.ts
index 6d1e15db100..e14f5676b3e 100644
--- a/public/app/features/dashboard-scene/settings/variables/utils.ts
+++ b/public/app/features/dashboard-scene/settings/variables/utils.ts
@@ -29,7 +29,7 @@ import { ConstantVariableEditor, getConstantVariableOptions } from './editors/Co
 import { CustomVariableEditor } from './editors/CustomVariableEditor';
 import { DataSourceVariableEditor } from './editors/DataSourceVariableEditor';
 import { GroupByVariableEditor } from './editors/GroupByVariableEditor';
-import { IntervalVariableEditor } from './editors/IntervalVariableEditor';
+import { getIntervalVariableOptions, IntervalVariableEditor } from './editors/IntervalVariableEditor';
 import { getQueryVariableOptions, QueryVariableEditor } from './editors/QueryVariableEditor';
 import { TextBoxVariableEditor, getTextBoxVariableOptions } from './editors/TextBoxVariableEditor';
 
@@ -70,6 +70,7 @@ export const EDITABLE_VARIABLES: Record<EditableVariableType, EditableVariableCo
     name: 'Interval',
     description: 'Values are timespans, ex 1m, 1h, 1d',
     editor: IntervalVariableEditor,
+    getOptions: getIntervalVariableOptions,
   },
   datasource: {
     name: 'Data source',
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
index 645dc5cad16..2a696eda6a6 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
@@ -12,7 +12,7 @@ import { OptionsPaneItemOverrides } from './OptionsPaneItemOverrides';
 import { OptionPaneItemOverrideInfo } from './types';
 
 export interface OptionsPaneItemInfo {
-  title: string;
+  title?: string;
   value?: any;
   description?: string;
   popularRank?: number;
@@ -83,6 +83,10 @@ function OptionsPaneItem({ itemDescriptor, searchQuery }: OptionsPaneItemProps)
 function renderOptionLabel(itemDescriptor: OptionsPaneItemDescriptor, searchQuery?: string): ReactNode {
   const { title, description, overrides, addon } = itemDescriptor.props;
 
+  if (!title) {
+    return null;
+  }
+
   if (!searchQuery) {
     // Do not render label for categories with only one child
     if (itemDescriptor.parent.props.title === title && !overrides?.length) {
diff --git a/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.ts b/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.ts
index 75894b0271e..657c690a644 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.ts
@@ -34,7 +34,7 @@ export class OptionSearchEngine {
       const categoryNameMatch = searchRegex.test(category.props.title);
 
       for (const item of category.items) {
-        if (searchRegex.test(item.props.title)) {
+        if (searchRegex.test(item.props.title || '')) {
           hits.push({ item: item, rank: 1 });
           continue;
         }
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index eb2c51b4ac6..1e96a13e794 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -4247,9 +4247,6 @@
       "query-options": "Query options",
       "selection-options": "Selection options"
     },
-    "query-variable-form": {
-      "label-editor": "Query Editor"
-    },
     "revert-dashboard-modal": {
       "body-restore-version": "Are you sure you want to restore the dashboard to version {{version}}? All unsaved changes will be lost.",
       "title-restore-version": "Restore version"