[v10.0.x] Explore: Run remaining queries when one is removed from a pane (#69670)

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

public/app/features/explore/state/query.test.ts

@@ -16,7 +16,7 @@ import {
 } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { DataQuery, DataSourceRef } from '@grafana/schema';
-import { ExploreId, ExploreItemState, StoreState, ThunkDispatch } from 'app/types';
+import { createAsyncThunk, ExploreId, ExploreItemState, StoreState, ThunkDispatch } from 'app/types';
 
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import { configureStore } from '../../../store/configureStore';
@@ -242,12 +242,12 @@ describe('running queries', () => {
 });
 
 describe('changeQueries', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
   // Due to how spyOn works (it removes `type`, `match` and `toString` from the spied function, on which we rely on in the reducer),
   // we are repeating the following tests twice, once to chck the resulting state and once to check that the correct actions are dispatched.
   describe('calls the correct actions', () => {
-    afterEach(() => {
-      jest.restoreAllMocks();
-    });
     it('should import queries when datasource is changed', async () => {
       jest.spyOn(actions, 'importQueries');
       jest.spyOn(actions, 'changeQueriesAction');
@@ -363,6 +363,35 @@ describe('changeQueries', () => {
       });
     });
   });
+
+  it('runs remaining queries when one query is removed', async () => {
+    jest.spyOn(actions, 'runQueries').mockImplementation(createAsyncThunk('@explore/runQueries', () => {}));
+
+    const originalQueries = [
+      { refId: 'A', as: 1, datasource: datasources[0].getRef() },
+      { refId: 'B', as: 2, datasource: datasources[0].getRef() },
+    ];
+
+    const { dispatch } = configureStore({
+      ...defaultInitialState,
+      explore: {
+        left: {
+          ...defaultInitialState.explore.left,
+          datasourceInstance: datasources[0],
+          queries: originalQueries,
+        },
+      },
+    } as unknown as Partial<StoreState>);
+
+    await dispatch(
+      changeQueries({
+        queries: [originalQueries[0]],
+        exploreId: ExploreId.left,
+      })
+    );
+
+    expect(actions.runQueries).toHaveBeenCalled();
+  });
 });
 
 describe('importing queries', () => {

public/app/features/explore/state/query.ts

@@ -330,7 +330,7 @@ export const changeQueries = createAsyncThunk<void, ChangeQueriesPayload>(
     }
 
     // if we are removing a query we want to run the remaining ones
-    if (queries.length < queries.length) {
+    if (queries.length < oldQueries.length) {
       dispatch(runQueries(exploreId));
     }
   }