From 9c604036e721fe596cd00909124ee505e5a8d0f3 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Fri, 19 Apr 2024 13:36:07 +0200
Subject: [PATCH] [v11.0.x] IntervalVariableEditor: Do not add current value as
 interval prop (#86591)

IntervalVariableEditor: Do not add current value as interval prop (#86446)

(cherry picked from commit 65afe90124cd57deae18f6955b5f286a4dd438e9)

Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>
---
 .../editors/IntervalVariableEditor.test.tsx         |  3 +++
 .../variables/editors/IntervalVariableEditor.tsx    | 13 ++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.test.tsx b/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.test.tsx
index 9e2e16c44ec..5e1ddd110e2 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.test.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.test.tsx
@@ -46,6 +46,7 @@ describe('IntervalVariableEditor', () => {
       name: 'test',
       type: 'interval',
       intervals: ['1m', '10m', '1h', '6h', '1d', '7d'],
+      value: '10m',
     });
 
     const onRunQuery = jest.fn();
@@ -61,6 +62,8 @@ describe('IntervalVariableEditor', () => {
 
     expect(intervalsInput).toBeInTheDocument();
     expect(intervalsInput).toHaveValue('7d,30d, 1y, 5y, 10y');
+    // If the value is not in the list, it should be set to the first value
+    expect(variable.state.value).toBe('7d');
     expect(onRunQuery).toHaveBeenCalledTimes(1);
   });
 
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 6ff69c2b0c5..3ffc414d7f4 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.tsx
@@ -15,14 +15,21 @@ interface IntervalVariableEditorProps {
 }
 
 export function IntervalVariableEditor({ variable, onRunQuery }: IntervalVariableEditorProps) {
-  const { intervals, autoStepCount, autoEnabled, autoMinInterval } = variable.useState();
+  const { intervals, autoStepCount, autoEnabled, autoMinInterval, value } = variable.useState();
 
   //transform intervals array into string
   const intervalsCombined = getIntervalsQueryFromNewIntervalModel(intervals);
 
   const onIntervalsChange = (event: FormEvent<HTMLInputElement>) => {
-    const intervalsArray = getIntervalsFromQueryString(event.currentTarget.value);
-    variable.setState({ intervals: intervalsArray });
+    const newIntervals = getIntervalsFromQueryString(event.currentTarget.value);
+    // if the current value is not in the new intervals, set the value to the first interval
+    const newValue = newIntervals.includes(value) ? value : newIntervals[0];
+
+    variable.setState({
+      intervals: newIntervals,
+      value: newValue,
+    });
+
     onRunQuery();
   };