Editor: New line on Enter, run query on Shift+Enter (#24654)

* Editor: New line on Enter, run query on Shift+Enter

- default Enter behavior on query editor fields should be a new line
- special behavior should require a special key: running a query is now
done on Shift-Enter
- Plugins order had to be changed because when typeahead is shown, Enter
is accepting the suggestion

* Run with ctrl-enter, hint in query placeholder

* Fix Kusto field behavior for Enter

* Fix Kusto field behavior for default suggestion

packages/grafana-ui/src/components/QueryField/QueryField.tsx

@@ -69,10 +69,12 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
 
     // Base plugins
     this.plugins = [
-      NewlinePlugin(),
+      // SuggestionsPlugin and RunnerPlugin need to be before NewlinePlugin
+      // because they override Enter behavior
       SuggestionsPlugin({ onTypeahead, cleanText, portalOrigin, onWillApplySuggestion }),
-      ClearPlugin(),
       RunnerPlugin({ handler: this.runOnChangeAndRunQuery }),
+      NewlinePlugin(),
+      ClearPlugin(),
       SelectionShortcutsPlugin(),
       IndentationPlugin(),
       ClipboardPlugin(),

packages/grafana-ui/src/slate-plugins/newline.ts

@@ -23,7 +23,7 @@ export function NewlinePlugin(): Plugin {
         return next();
       }
 
-      if (keyEvent.key === 'Enter' && keyEvent.shiftKey) {
+      if (keyEvent.key === 'Enter') {
         keyEvent.preventDefault();
 
         const { startBlock } = value;

packages/grafana-ui/src/slate-plugins/runner.test.tsx

@@ -8,10 +8,14 @@ describe('runner', () => {
   const mockHandler = jest.fn();
   const handler = RunnerPlugin({ handler: mockHandler }).onKeyDown!;
 
-  it('should execute query when enter is pressed and there are no suggestions visible', () => {
+  it('should execute query when enter with shift is pressed', () => {
     const value = Plain.deserialize('');
     const editor = shallow<Editor>(<Editor value={value} />);
-    handler({ key: 'Enter', preventDefault: () => {} } as KeyboardEvent, editor.instance() as any, () => {});
+    handler(
+      { key: 'Enter', shiftKey: true, preventDefault: () => {} } as KeyboardEvent,
+      editor.instance() as any,
+      () => {}
+    );
     expect(mockHandler).toBeCalled();
   });
 });

packages/grafana-ui/src/slate-plugins/runner.ts

@@ -7,11 +7,11 @@ export function RunnerPlugin({ handler }: any): Plugin {
       const keyEvent = event as KeyboardEvent;
 
       // Handle enter
-      if (handler && keyEvent.key === 'Enter' && !keyEvent.shiftKey) {
+      if (handler && keyEvent.key === 'Enter' && (keyEvent.shiftKey || keyEvent.ctrlKey)) {
         // Submit on Enter
         keyEvent.preventDefault();
         handler(keyEvent);
-        return true;
+        return editor;
       }
 
       return next();

packages/grafana-ui/src/slate-plugins/suggestions.tsx

@@ -97,7 +97,15 @@ export function SuggestionsPlugin({
 
           break;
 
-        case 'Enter':
+        case 'Enter': {
+          if (!(keyEvent.shiftKey || keyEvent.ctrlKey) && hasSuggestions) {
+            keyEvent.preventDefault();
+            return typeaheadRef.insertSuggestion();
+          }
+
+          break;
+        }
+
         case 'Tab': {
           if (hasSuggestions) {
             keyEvent.preventDefault();
@@ -108,7 +116,10 @@ export function SuggestionsPlugin({
         }
 
         default: {
-          handleTypeaheadDebounced(editor, setState, onTypeahead, cleanText);
+          // Don't react on meta keys
+          if (keyEvent.key.length === 1) {
+            handleTypeaheadDebounced(editor, setState, onTypeahead, cleanText);
+          }
           break;
         }
       }