Explore: Fix support for angular based datasource editors (#77486)

public/app/features/explore/hooks/useStateSync/index.ts

@@ -1,7 +1,7 @@
 import { identity, isEmpty, isEqual, isObject, mapValues, omitBy } from 'lodash';
 import { useEffect, useRef } from 'react';
 
-import { CoreApp, ExploreUrlState, DataSourceApi, toURLRange } from '@grafana/data';
+import { CoreApp, ExploreUrlState, DataSourceApi, toURLRange, EventBusSrv } from '@grafana/data';
 import { DataQuery, DataSourceRef } from '@grafana/schema';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 import { clearQueryKeys, getLastUsedDatasourceUID } from 'app/core/utils/explore';
@@ -151,6 +151,7 @@ export function useStateSync(params: ExploreQueryParams) {
               range: fromURLRange(range),
               panelsState,
               position: i,
+              eventBridge: new EventBusSrv(),
             })
           );
         }
@@ -218,6 +219,7 @@ export function useStateSync(params: ExploreQueryParams) {
                 queries,
                 range: fromURLRange(range),
                 panelsState,
+                eventBridge: new EventBusSrv(),
               })
             ).unwrap();
           })

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

@@ -9,6 +9,7 @@ import {
   PreferredVisualisationType,
   RawTimeRange,
   ExploreCorrelationHelperData,
+  EventBusExtended,
 } from '@grafana/data';
 import { DataQuery, DataSourceRef } from '@grafana/schema';
 import { getQueryKeys } from 'app/core/utils/explore';
@@ -98,6 +99,7 @@ interface InitializeExplorePayload {
   range: TimeRange;
   history: HistoryItem[];
   datasourceInstance?: DataSourceApi;
+  eventBridge: EventBusExtended;
 }
 const initializeExploreAction = createAction<InitializeExplorePayload>('explore/initializeExploreAction');
 
@@ -128,6 +130,7 @@ export interface InitializeExploreOptions {
   panelsState?: ExplorePanelsState;
   correlationHelperData?: ExploreCorrelationHelperData;
   position?: number;
+  eventBridge: EventBusExtended;
 }
 /**
  * Initialize Explore state with state from the URL and the React component.
@@ -140,7 +143,15 @@ export interface InitializeExploreOptions {
 export const initializeExplore = createAsyncThunk(
   'explore/initializeExplore',
   async (
-    { exploreId, datasource, queries, range, panelsState, correlationHelperData }: InitializeExploreOptions,
+    {
+      exploreId,
+      datasource,
+      queries,
+      range,
+      panelsState,
+      correlationHelperData,
+      eventBridge,
+    }: InitializeExploreOptions,
     { dispatch, getState, fulfillWithValue }
   ) => {
     let instance = undefined;
@@ -160,6 +171,7 @@ export const initializeExplore = createAsyncThunk(
         range: getRange(range, getTimeZone(getState().user)),
         datasourceInstance: instance,
         history,
+        eventBridge,
       })
     );
     if (panelsState !== undefined) {
@@ -244,13 +256,14 @@ export const paneReducer = (state: ExploreItemState = makeExplorePaneState(), ac
   }
 
   if (initializeExploreAction.match(action)) {
-    const { queries, range, datasourceInstance, history } = action.payload;
+    const { queries, range, datasourceInstance, history, eventBridge } = action.payload;
 
     return {
       ...state,
       range,
       queries,
       initialized: true,
+      eventBridge,
       queryKeys: getQueryKeys(queries),
       datasourceInstance,
       history,

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

@@ -1,7 +1,7 @@
 import { createAction } from '@reduxjs/toolkit';
 import { AnyAction } from 'redux';
 
-import { SplitOpenOptions, TimeRange } from '@grafana/data';
+import { SplitOpenOptions, TimeRange, EventBusSrv } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import { generateExploreId, GetExploreUrlArguments } from 'app/core/utils/explore';
 import { PanelModel } from 'app/features/dashboard/state';
@@ -84,6 +84,7 @@ export const splitOpen = createAsyncThunk(
         range: options?.range || originState?.range.raw || DEFAULT_RANGE,
         panelsState: options?.panelsState || originState?.panelsState,
         correlationHelperData: options?.correlationHelperData,
+        eventBridge: new EventBusSrv(),
       })
     );
   },