Explore: Fixed issue in PanelQuery state arround cancellation (#18771)

* Explore: Fixed issue in PanelQuery state arround cancellation

* Added unit test

* Fixed typescript issues in test

public/app/features/dashboard/state/PanelQueryState.test.ts

@@ -1,7 +1,7 @@
 import { toDataQueryError, PanelQueryState, getProcessedDataFrames } from './PanelQueryState';
 import { MockDataSourceApi } from 'test/mocks/datasource_srv';
 import { LoadingState, getDataFrameRow } from '@grafana/data';
-import { DataQueryResponse } from '@grafana/ui';
+import { DataQueryResponse, DataQueryRequest, DataQuery } from '@grafana/ui';
 import { getQueryOptions } from 'test/helpers/getQueryOptions';
 
 describe('PanelQueryState', () => {
@@ -54,6 +54,19 @@ describe('PanelQueryState', () => {
   });
 });
 
+describe('When cancelling request', () => {
+  it('Should call rejector', () => {
+    const state = new PanelQueryState();
+    state.request = {} as DataQueryRequest<DataQuery>;
+    (state as any).rejector = (obj: any) => {
+      expect(obj.cancelled).toBe(true);
+      expect(obj.message).toBe('OHH');
+    };
+
+    state.cancel('OHH');
+  });
+});
+
 describe('getProcessedDataFrame', () => {
   it('converts timeseries to table skipping nulls', () => {
     const input1 = {

public/app/features/dashboard/state/PanelQueryState.ts

@@ -79,7 +79,7 @@ export class PanelQueryState {
       // call rejector to reject the executor promise
       if (!request.endTime) {
         request.endTime = Date.now();
-        this.rejector('Canceled:' + reason);
+        this.rejector({ cancelled: true, message: reason });
       }
 
       // Cancel any open HTTP request with the same ID

public/app/features/explore/QueryEditor.tsx

@@ -62,6 +62,7 @@ export default class QueryEditor extends PureComponent<QueryEditorProps, any> {
 
     this.component = loader.load(this.element, scopeProps, template);
     this.angularScope = scopeProps.ctrl;
+
     setTimeout(() => {
       this.props.onQueryChange(target);
       this.props.onExecuteQuery();