Templating: Fix searchFilter issue in templating system (#25770)

public/app/features/variables/query/actions.test.ts

@@ -188,6 +188,32 @@ describe('query actions', () => {
     });
     });
   });
   });
 
 
+  describe('when updateQueryVariableOptions is dispatched for variable with searchFilter', () => {
+    it('then correct actions are dispatched', async () => {
+      const variable = createVariable({ includeAll: true, useTags: false });
+      const optionsMetrics = [createMetric('A'), createMetric('B')];
+
+      mockDatasourceMetrics(variable, optionsMetrics, []);
+
+      const tester = await reduxTester<{ templating: TemplatingState }>()
+        .givenRootReducer(getRootReducer())
+        .whenActionIsDispatched(addVariable(toVariablePayload(variable, { global: false, index: 0, model: variable })))
+        .whenActionIsDispatched(setIdInEditor({ id: variable.id }))
+        .whenAsyncActionIsDispatched(updateQueryVariableOptions(toVariablePayload(variable), 'search'), true);
+
+      const update = { results: optionsMetrics, templatedRegex: '' };
+
+      tester.thenDispatchedActionsPredicateShouldEqual(actions => {
+        const [clearErrors, updateOptions] = actions;
+        const expectedNumberOfActions = 2;
+
+        expect(clearErrors).toEqual(removeVariableEditorError({ errorProp: 'update' }));
+        expect(updateOptions).toEqual(updateVariableOptions(toVariablePayload(variable, update)));
+        return actions.length === expectedNumberOfActions;
+      });
+    });
+  });
+
   describe('when updateQueryVariableOptions is dispatched and fails for variable open in editor', () => {
   describe('when updateQueryVariableOptions is dispatched and fails for variable open in editor', () => {
     it('then correct actions are dispatched', async () => {
     it('then correct actions are dispatched', async () => {
       const variable = createVariable({ includeAll: true, useTags: false });
       const variable = createVariable({ includeAll: true, useTags: false });

public/app/features/variables/query/actions.ts

@@ -52,7 +52,13 @@ export const updateQueryVariableOptions = (
         await dispatch(updateVariableTags(toVariablePayload(variableInState, tagResults)));
         await dispatch(updateVariableTags(toVariablePayload(variableInState, tagResults)));
       }
       }
 
 
-      await dispatch(validateVariableSelectionState(toVariableIdentifier(variableInState)));
+      // If we are searching options there is no need to validate selection state
+      // This condition was added to as validateVariableSelectionState will update the current value of the variable
+      // So after search and selection the current value is already update so no setValue, refresh & url update is performed
+      // The if statement below fixes https://github.com/grafana/grafana/issues/25671
+      if (!searchFilter) {
+        await dispatch(validateVariableSelectionState(toVariableIdentifier(variableInState)));
+      }
     } catch (err) {
     } catch (err) {
       console.error(err);
       console.error(err);
       if (err.data && err.data.message) {
       if (err.data && err.data.message) {

public/test/core/redux/reduxTester.ts

@@ -50,10 +50,16 @@ export const reduxTester = <State>(args?: ReduxTesterArguments<State>): ReduxTes
   const debug = args?.debug ?? false;
   const debug = args?.debug ?? false;
   let store: EnhancedStore<State> | null = null;
   let store: EnhancedStore<State> | null = null;
 
 
+  const defaultMiddleware = getDefaultMiddleware<State>({
+    thunk: false,
+    serializableCheck: false,
+    immutableCheck: false,
+  } as any);
+
   const givenRootReducer = (rootReducer: Reducer<State>): ReduxTesterWhen<State> => {
   const givenRootReducer = (rootReducer: Reducer<State>): ReduxTesterWhen<State> => {
     store = configureStore<State>({
     store = configureStore<State>({
       reducer: rootReducer,
       reducer: rootReducer,
-      middleware: [...getDefaultMiddleware<State>(), logActionsMiddleWare, thunk] as [ThunkMiddleware<State>],
+      middleware: [...defaultMiddleware, logActionsMiddleWare, thunk] as [ThunkMiddleware<State>],
       preloadedState,
       preloadedState,
     });
     });