CloudWatch: Run query on blur in logs query field (#47454)

* Cloudwatch: add test to ensure RunQuery is fired onBlur of LogQuery

Also remove the `onBlur` prop for the `QueryField` in `LogsQueryField` since `QueryField` is configured to re-run
queries `onBlur` by default.

Co-authored-by: Sarah Zinger <sarah.zinger@grafana.com>
Co-authored-by: Isabella Siu <isabella.siu@grafana.com>
Co-authored-by: Adam Simpson <adam@adamsimpson.net>

.betterer.results

@@ -290,7 +290,7 @@ exports[`no enzyme tests`] = {
     "public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx:2974837543": [
       [1, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/plugins/datasource/cloudwatch/components/LogsQueryField.test.tsx:132770839": [
+    "public/app/plugins/datasource/cloudwatch/components/LogsQueryField.test.tsx:3888529428": [
       [1, 19, 13, "RegExp match", "2409514259"]
     ],
     "public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.test.tsx:1089831034": [

public/app/plugins/datasource/cloudwatch/__mocks__/CloudWatchDataSource.ts

@@ -41,6 +41,8 @@ export function setupMockedDataSource({ data = [], variables }: { data?: any; va
       },
     } as any
   );
+  datasource.getVariables = () => ['test'];
+  datasource.getRegions = () => Promise.resolve([]);
   const fetchMock = jest.fn().mockReturnValue(of({ data }));
   setBackendSrv({ fetch: fetchMock } as any);
 

public/app/plugins/datasource/cloudwatch/components/LogsQueryEditor.tsx

@@ -41,7 +41,6 @@ export const CloudWatchLogsQueryEditor = memo(function CloudWatchLogsQueryEditor
       exploreId={exploreId}
       datasource={datasource}
       query={query}
-      onBlur={() => {}}
       onChange={onChange}
       onRunQuery={onRunQuery}
       history={[]}

public/app/plugins/datasource/cloudwatch/components/LogsQueryField.test.tsx

@@ -6,12 +6,37 @@ import { DescribeLogGroupsRequest } from '../types';
 import { SelectableValue } from '@grafana/data';
 // eslint-disable-next-line lodash/import-scope
 import _, { DebouncedFunc } from 'lodash';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { setupMockedDataSource } from '../__mocks__/CloudWatchDataSource';
 
 jest
   .spyOn(_, 'debounce')
   .mockImplementation((func: (...args: any) => any, wait?: number) => func as DebouncedFunc<typeof func>);
 
 describe('CloudWatchLogsQueryField', () => {
+  it('runs onRunQuery on blur of Log Groups', async () => {
+    const onRunQuery = jest.fn();
+    const ds = setupMockedDataSource();
+
+    render(
+      <CloudWatchLogsQueryField
+        absoluteRange={{ from: 1, to: 10 }}
+        exploreId={ExploreId.left}
+        datasource={ds.datasource}
+        query={{} as any}
+        onRunQuery={onRunQuery}
+        onChange={() => {}}
+      />
+    );
+
+    const multiSelect = screen.getByLabelText('Log Groups');
+    await act(async () => {
+      fireEvent.blur(multiSelect);
+    });
+    expect(onRunQuery).toHaveBeenCalled();
+  });
+
   it('updates upstream query log groups on region change', async () => {
     const onChange = jest.fn();
     const wrapper = shallow(

public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx

@@ -321,6 +321,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
                 onCreateOption={(v) => {
                   this.setCustomLogGroups(v);
                 }}
+                onBlur={this.props.onRunQuery}
                 className={containerClass}
                 closeMenuOnSelect={false}
                 isClearable={true}
@@ -344,7 +345,6 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
               additionalPlugins={this.plugins}
               query={query.expression ?? ''}
               onChange={this.onChangeQuery}
-              onBlur={this.props.onBlur}
               onClick={this.onQueryFieldClick}
               onRunQuery={this.props.onRunQuery}
               onTypeahead={this.onTypeahead}