Explore/Prometheus: More consistently allows for multi-line queries (#18362)

* Explore/Prometheus: More consistently allows for multi-line queries
Allows a user to hit shift+enter to create a new line in the query field, even
when the autocomplete suggestions are displayed.
Also fixes an issue where a new line was inserted when selecting a suggestion
Closes #18341

* Fixes behavior where query wasn't running on pressing Enter
Also adds test to verify this behavior

public/app/features/explore/QueryField.test.tsx

@@ -4,16 +4,28 @@ import { shallow } from 'enzyme';
 import { QueryField } from './QueryField';
 
 describe('<QueryField />', () => {
-  it('renders with null initial value', () => {
+  it('should render with null initial value', () => {
     const wrapper = shallow(<QueryField initialQuery={null} />);
     expect(wrapper.find('div').exists()).toBeTruthy();
   });
-  it('renders with empty initial value', () => {
+
+  it('should render with empty initial value', () => {
     const wrapper = shallow(<QueryField initialQuery="" />);
     expect(wrapper.find('div').exists()).toBeTruthy();
   });
-  it('renders with initial value', () => {
+
+  it('should render with initial value', () => {
     const wrapper = shallow(<QueryField initialQuery="my query" />);
     expect(wrapper.find('div').exists()).toBeTruthy();
   });
+
+  it('should execute query when enter is pressed and there are no suggestions visible', () => {
+    const wrapper = shallow(<QueryField initialQuery="my query" />);
+    const instance = wrapper.instance() as QueryField;
+    instance.executeOnChangeAndRunQueries = jest.fn();
+    const handleEnterAndTabKeySpy = jest.spyOn(instance, 'handleEnterAndTabKey');
+    instance.onKeyDown({ key: 'Enter', preventDefault: () => {} } as KeyboardEvent, {});
+    expect(handleEnterAndTabKeySpy).toBeCalled();
+    expect(instance.executeOnChangeAndRunQueries).toBeCalled();
+  });
 });

public/app/features/explore/QueryField.tsx

@@ -307,10 +307,15 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
 
   handleEnterAndTabKey = (event: KeyboardEvent, change: Change) => {
     const { typeaheadIndex, suggestions } = this.state;
-    if (this.menuEl) {
-      // Dont blur input
     event.preventDefault();
-      if (!suggestions || suggestions.length === 0) {
+
+    if (event.shiftKey) {
+      // pass through if shift is pressed
+      return undefined;
+    } else if (!this.menuEl) {
+      this.executeOnChangeAndRunQueries();
+      return true;
+    } else if (!suggestions || suggestions.length === 0) {
       return undefined;
     }
 
@@ -318,18 +323,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
     const nextChange = this.applyTypeahead(change, suggestion);
 
     const insertTextOperation = nextChange.operations.find((operation: any) => operation.type === 'insert_text');
-      if (insertTextOperation) {
+    return insertTextOperation ? true : undefined;
-        return undefined;
-      }
-
-      return true;
-    } else if (!event.shiftKey) {
-      // Run queries if Shift is not pressed, otherwise pass through
-      this.executeOnChangeAndRunQueries();
-
-      return true;
-    }
-    return undefined;
   };
 
   onKeyDown = (event: KeyboardEvent, change: Change) => {