IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-20 11:48:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

Variables: Allow user to filter values in dropdown using white space (#60622)

Browse Source 
Fix #60589
This commit is contained in:
yusuf-multhan 2023-01-19 14:23:14 +05:30 committed by GitHub
parent 6d9e082f27
commit 50df85189c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx
View File

@ -150,6 +150,7 @@ export const optionPickerFactory = <Model extends VariableWithOptions | Variable
onNavigate={this.onNavigate}
aria-expanded={true}
aria-controls={`options-${id}`}
currenthighlightindex={picker.highlightIndex}
/>
<VariableOptions
values={picker.options}

2
public/app/features/variables/pickers/OptionsPicker/actions.test.ts
View File

@ -526,7 +526,7 @@ describe('options picker actions', () => {
.whenActionIsDispatched(toggleOptionByHighlight('key', clearOthers));
const optionA = createOption('A');
const optionBC = createOption('BD');
const optionBC = createOption('BC');
tester.thenDispatchedActionsShouldEqual(
toKeyedAction('key', toggleOption({ option: optionA, forceSelect: false, clearOthers })),

16
public/app/features/variables/pickers/OptionsPicker/reducer.test.ts
View File

@ -367,7 +367,7 @@ describe('optionsPickerReducer', () => {
.whenActionIsDispatched(moveOptionsHighlight(-1))
.thenStateShouldEqual({
...initialState,
highlightIndex: 0,
highlightIndex: -1,
});
});
});
@ -535,7 +535,7 @@ describe('optionsPickerReducer', () => {
],
selectedValues: [{ text: 'All', value: '$__all', selected: true }],
queryValue: 'A',
highlightIndex: 0,
highlightIndex: -1,
});
});
@ -559,7 +559,7 @@ describe('optionsPickerReducer', () => {
options: [{ text: 'All', value: '$__all', selected: true }],
selectedValues: [{ text: 'All', value: '$__all', selected: true }],
queryValue: 'A',
highlightIndex: 0,
highlightIndex: -1,
});
});
});
@ -583,7 +583,7 @@ describe('optionsPickerReducer', () => {
options: [{ text: 'option:1337', value: 'option:1337', selected: false }],
selectedValues: [],
queryValue: 'option:1337',
highlightIndex: 0,
highlightIndex: -1,
});
});
});
@ -635,7 +635,7 @@ describe('optionsPickerReducer', () => {
],
selectedValues: [{ text: 'B', value: 'B', selected: true }],
queryValue: 'A',
highlightIndex: 0,
highlightIndex: -1,
})
.whenActionIsDispatched(updateSearchQuery(''))
.thenStateShouldEqual({
@ -646,7 +646,7 @@ describe('optionsPickerReducer', () => {
],
selectedValues: [{ text: 'B', value: 'B', selected: true }],
queryValue: '',
highlightIndex: 0,
highlightIndex: -1,
})
.whenActionIsDispatched(updateOptionsAndFilter(options))
.thenStateShouldEqual({
@ -658,7 +658,7 @@ describe('optionsPickerReducer', () => {
],
selectedValues: [{ text: 'B', value: 'B', selected: true }],
queryValue: '',
highlightIndex: 0,
highlightIndex: -1,
});
});
});
@ -766,7 +766,7 @@ describe('optionsPickerReducer', () => {
options: [{ text: 'option:11256', value: 'option:11256', selected: false }],
selectedValues: [],
queryValue: 'option:11256',
highlightIndex: 0,
highlightIndex: -1,
});
});
});

4
public/app/features/variables/pickers/OptionsPicker/reducer.ts
View File

@ -167,7 +167,7 @@ const optionsPickerSlice = createSlice({
let nextIndex = state.highlightIndex + action.payload;
if (nextIndex < 0) {
nextIndex = 0;
nextIndex = -1;
} else if (nextIndex >= state.options.length) {
nextIndex = state.options.length - 1;
}
@ -205,7 +205,7 @@ const optionsPickerSlice = createSlice({
return text.toLowerCase().indexOf(searchQuery) !== -1;
});
state.highlightIndex = 0;
state.highlightIndex = -1;
return applyStateChanges(state, updateDefaultSelection, updateOptions);
},

6
public/app/features/variables/pickers/shared/VariableInput.tsx
View File

@ -8,11 +8,15 @@ export interface Props extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange
onChange: (value: string) => void;
onNavigate: (key: NavigationKey, clearOthers: boolean) => void;
value: string | null;
currenthighlightindex?: number;
}
export class VariableInput extends PureComponent<Props> {
onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (NavigationKey[event.keyCode]) {
if (
NavigationKey[event.keyCode] &&
!(event.keyCode === NavigationKey.select && this.props.currenthighlightindex === -1)
) {
const clearOthers = event.ctrlKey || event.metaKey || event.shiftKey;
this.props.onNavigate(event.keyCode as NavigationKey, clearOthers);
event.preventDefault();