Loki: Run query when pressing Enter on line-filters (#49913) (#50004)

* changed `onBlur` and `onKeyDown` handling

- `onCommitChange` is only called if `onBlur` or `onKeyDown` are not set

* added `runQueryOnEnter` flag to OperationParamDef

* only run query if `runQueryOnEnter` is configured

* changed `evt.type` check to `keydown`

(cherry picked from commit b355adac6f)

Co-authored-by: svennergr <Svennergr@gmail.com>

public/app/plugins/datasource/loki/querybuilder/operations.ts

@@ -202,6 +202,7 @@ export function getOperationDefinitions(): QueryBuilderOperationDef[] {
           placeholder: 'Text to find',
           description: 'Find log lines that contains this text',
           minWidth: 20,
+          runQueryOnEnter: true,
         },
       ],
       defaultParams: [''],
@@ -223,6 +224,7 @@ export function getOperationDefinitions(): QueryBuilderOperationDef[] {
           placeholder: 'Text to exclude',
           description: 'Find log lines that does not contain this text',
           minWidth: 26,
+          runQueryOnEnter: true,
         },
       ],
       defaultParams: [''],
@@ -244,6 +246,7 @@ export function getOperationDefinitions(): QueryBuilderOperationDef[] {
           placeholder: 'Pattern to match',
           description: 'Find log lines that match this regex pattern',
           minWidth: 30,
+          runQueryOnEnter: true,
         },
       ],
       defaultParams: [''],
@@ -265,6 +268,7 @@ export function getOperationDefinitions(): QueryBuilderOperationDef[] {
           placeholder: 'Pattern to exclude',
           description: 'Find log lines that does not match this regex pattern',
           minWidth: 30,
+          runQueryOnEnter: true,
         },
       ],
       defaultParams: [''],

public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.test.tsx

@@ -49,4 +49,52 @@ describe('AutoSizeInput', () => {
     fireEvent.change(input, { target: { value: 'very very long value' } });
     expect(getComputedStyle(inputWrapper).width).toBe('304px');
   });
+
+  it('should call onBlur if set when blurring', () => {
+    const onBlur = jest.fn();
+    const onCommitChange = jest.fn();
+    render(<AutoSizeInput onBlur={onBlur} onCommitChange={onCommitChange} />);
+
+    const input: HTMLInputElement = screen.getByTestId('autosize-input');
+
+    fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onCommitChange).not.toHaveBeenCalled();
+  });
+
+  it('should call onCommitChange if not set when blurring', () => {
+    const onCommitChange = jest.fn();
+    render(<AutoSizeInput onCommitChange={onCommitChange} />);
+
+    const input: HTMLInputElement = screen.getByTestId('autosize-input');
+
+    fireEvent.blur(input);
+
+    expect(onCommitChange).toHaveBeenCalled();
+  });
+
+  it('should call onKeyDown if set when keydown', () => {
+    const onKeyDown = jest.fn();
+    const onCommitChange = jest.fn();
+    render(<AutoSizeInput onKeyDown={onKeyDown} onCommitChange={onCommitChange} />);
+
+    const input: HTMLInputElement = screen.getByTestId('autosize-input');
+
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onKeyDown).toHaveBeenCalled();
+    expect(onCommitChange).not.toHaveBeenCalled();
+  });
+
+  it('should call onCommitChange if not set when keydown', () => {
+    const onCommitChange = jest.fn();
+    render(<AutoSizeInput onCommitChange={onCommitChange} />);
+
+    const input: HTMLInputElement = screen.getByTestId('autosize-input');
+
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onCommitChange).toHaveBeenCalled();
+  });
 });

public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.tsx

@@ -30,19 +30,17 @@ export const AutoSizeInput = React.forwardRef<HTMLInputElement, Props>((props, r
       }}
       width={inputWidth}
       onBlur={(event) => {
-        if (onCommitChange) {
-          onCommitChange(event);
-        }
         if (onBlur) {
           onBlur(event);
+        } else if (onCommitChange) {
+          onCommitChange(event);
         }
       }}
       onKeyDown={(event) => {
-        if (event.key === 'Enter' && onCommitChange) {
-          onCommitChange(event);
-        }
         if (onKeyDown) {
           onKeyDown(event);
+        } else if (event.key === 'Enter' && onCommitChange) {
+          onCommitChange(event);
         }
       }}
       data-testid={'autosize-input'}

public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx

@@ -39,6 +39,9 @@ function SimpleInputParamEditor(props: QueryBuilderOperationParamEditorProps) {
       title={props.paramDef.description}
       onCommitChange={(evt) => {
         props.onChange(props.index, evt.currentTarget.value);
+        if (props.paramDef.runQueryOnEnter && evt.type === 'keydown') {
+          props.onRunQuery();
+        }
       }}
     />
   );

public/app/plugins/datasource/prometheus/querybuilder/shared/types.ts

@@ -70,6 +70,7 @@ export interface QueryBuilderOperationParamDef {
   description?: string;
   minWidth?: number;
   editor?: ComponentType<QueryBuilderOperationParamEditorProps>;
+  runQueryOnEnter?: boolean;
 }
 
 export interface QueryBuilderOperationEditorProps {