From 8dd16fb8719f307de889059d506cc119bdacf2d1 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 18 Apr 2022 13:22:10 -0500
Subject: [PATCH] CloudWatch: Run query on blur in logs query field (#47454)
 (#47855)

* 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>
(cherry picked from commit 4f26129aa4cca09589296225aae949231fc23b78)

Co-authored-by: Shirley <4163034+fridgepoet@users.noreply.github.com>
---
 .betterer.results                             |  2 +-
 .../__mocks__/CloudWatchDataSource.ts         |  2 ++
 .../cloudwatch/components/LogsQueryEditor.tsx |  1 -
 .../components/LogsQueryField.test.tsx        | 25 +++++++++++++++++++
 .../cloudwatch/components/LogsQueryField.tsx  |  2 +-
 5 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 03900ca860c..56f5c42feff 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -302,7 +302,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": [
diff --git a/public/app/plugins/datasource/cloudwatch/__mocks__/CloudWatchDataSource.ts b/public/app/plugins/datasource/cloudwatch/__mocks__/CloudWatchDataSource.ts
index 5479778b689..e5701c7898b 100644
--- a/public/app/plugins/datasource/cloudwatch/__mocks__/CloudWatchDataSource.ts
+++ b/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);
 
diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsQueryEditor.tsx
index 034c120450d..8691e3ec8ed 100644
--- a/public/app/plugins/datasource/cloudwatch/components/LogsQueryEditor.tsx
+++ b/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={[]}
diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.test.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.test.tsx
index 5572214d07d..ef60536b5d5 100644
--- a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.test.tsx
+++ b/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(
diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
index 0bd033b018b..005e2aed266 100644
--- a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
+++ b/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}