From 3b5511db2bf56c2f5348044cdbcd71f88a9fe7b8 Mon Sep 17 00:00:00 2001 From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com> Date: Wed, 1 Jun 2022 10:08:09 -0400 Subject: [PATCH] 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 b355adac6fccaa573c2f3101f2913b716166a844) Co-authored-by: svennergr --- .../loki/querybuilder/operations.ts | 4 ++ .../shared/AutoSizeInput.test.tsx | 48 +++++++++++++++++++ .../querybuilder/shared/AutoSizeInput.tsx | 10 ++-- .../shared/OperationParamEditor.tsx | 3 ++ .../prometheus/querybuilder/shared/types.ts | 1 + 5 files changed, 60 insertions(+), 6 deletions(-) diff --git a/public/app/plugins/datasource/loki/querybuilder/operations.ts b/public/app/plugins/datasource/loki/querybuilder/operations.ts index b0c7f481406..31cf3aca86c 100644 --- a/public/app/plugins/datasource/loki/querybuilder/operations.ts +++ b/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: [''], diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.test.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.test.tsx index 1bd9458fb50..031192b7cfc 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.test.tsx +++ b/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(); + + 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(); + + 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(); + + 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(); + + const input: HTMLInputElement = screen.getByTestId('autosize-input'); + + fireEvent.keyDown(input, { key: 'Enter' }); + + expect(onCommitChange).toHaveBeenCalled(); + }); }); diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.tsx index a81e3c91010..639dcc8a781 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.tsx @@ -30,19 +30,17 @@ export const AutoSizeInput = React.forwardRef((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'} diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx index 2ebe1431e34..0c375360522 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx +++ b/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(); + } }} /> ); diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/types.ts b/public/app/plugins/datasource/prometheus/querybuilder/shared/types.ts index 1b79b22a5a3..8839158c50f 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/shared/types.ts +++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/types.ts @@ -70,6 +70,7 @@ export interface QueryBuilderOperationParamDef { description?: string; minWidth?: number; editor?: ComponentType; + runQueryOnEnter?: boolean; } export interface QueryBuilderOperationEditorProps {