IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
kay delaney 2019-08-14 13:37:04 +01:00 committed by GitHub
parent 3392471bb2
commit d66601a5f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/app/features/explore/QueryField.test.tsx
View File

@ -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();
});
});

32
public/app/features/explore/QueryField.tsx
View File

@ -307,29 +307,23 @@ 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) {
return undefined;
}
event.preventDefault();
const suggestion = getSuggestionByIndex(suggestions, typeaheadIndex);
const nextChange = this.applyTypeahead(change, suggestion);
const insertTextOperation = nextChange.operations.find((operation: any) => operation.type === 'insert_text');
if (insertTextOperation) {
return undefined;
}
return true;
} else if (!event.shiftKey) {
// Run queries if Shift is not pressed, otherwise pass through
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;
}
return undefined;
const suggestion = getSuggestionByIndex(suggestions, typeaheadIndex);
const nextChange = this.applyTypeahead(change, suggestion);
const insertTextOperation = nextChange.operations.find((operation: any) => operation.type === 'insert_text');
return insertTextOperation ? true : undefined;
};
onKeyDown = (event: KeyboardEvent, change: Change) => {