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} onNavigate={this.onNavigate}
aria-expanded={true} aria-expanded={true}
aria-controls={`options-${id}`} aria-controls={`options-${id}`}
currenthighlightindex={picker.highlightIndex}
/> />
<VariableOptions <VariableOptions
values={picker.options} 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)); .whenActionIsDispatched(toggleOptionByHighlight('key', clearOthers));
const optionA = createOption('A'); const optionA = createOption('A');
const optionBC = createOption('BD'); const optionBC = createOption('BC');
tester.thenDispatchedActionsShouldEqual( tester.thenDispatchedActionsShouldEqual(
toKeyedAction('key', toggleOption({ option: optionA, forceSelect: false, clearOthers })), 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)) .whenActionIsDispatched(moveOptionsHighlight(-1))
.thenStateShouldEqual({ .thenStateShouldEqual({
...initialState, ...initialState,
highlightIndex: 0, highlightIndex: -1,
}); });
}); });
}); });
@ -535,7 +535,7 @@ describe('optionsPickerReducer', () => {
], ],
selectedValues: [{ text: 'All', value: '$__all', selected: true }], selectedValues: [{ text: 'All', value: '$__all', selected: true }],
queryValue: 'A', queryValue: 'A',
highlightIndex: 0, highlightIndex: -1,
}); });
}); });
@ -559,7 +559,7 @@ describe('optionsPickerReducer', () => {
options: [{ text: 'All', value: '$__all', selected: true }], options: [{ text: 'All', value: '$__all', selected: true }],
selectedValues: [{ text: 'All', value: '$__all', selected: true }], selectedValues: [{ text: 'All', value: '$__all', selected: true }],
queryValue: 'A', queryValue: 'A',
highlightIndex: 0, highlightIndex: -1,
}); });
}); });
}); });
@ -583,7 +583,7 @@ describe('optionsPickerReducer', () => {
options: [{ text: 'option:1337', value: 'option:1337', selected: false }], options: [{ text: 'option:1337', value: 'option:1337', selected: false }],
selectedValues: [], selectedValues: [],
queryValue: 'option:1337', queryValue: 'option:1337',
highlightIndex: 0, highlightIndex: -1,
}); });
}); });
}); });
@ -635,7 +635,7 @@ describe('optionsPickerReducer', () => {
], ],
selectedValues: [{ text: 'B', value: 'B', selected: true }], selectedValues: [{ text: 'B', value: 'B', selected: true }],
queryValue: 'A', queryValue: 'A',
highlightIndex: 0, highlightIndex: -1,
}) })
.whenActionIsDispatched(updateSearchQuery('')) .whenActionIsDispatched(updateSearchQuery(''))
.thenStateShouldEqual({ .thenStateShouldEqual({
@ -646,7 +646,7 @@ describe('optionsPickerReducer', () => {
], ],
selectedValues: [{ text: 'B', value: 'B', selected: true }], selectedValues: [{ text: 'B', value: 'B', selected: true }],
queryValue: '', queryValue: '',
highlightIndex: 0, highlightIndex: -1,
}) })
.whenActionIsDispatched(updateOptionsAndFilter(options)) .whenActionIsDispatched(updateOptionsAndFilter(options))
.thenStateShouldEqual({ .thenStateShouldEqual({
@ -658,7 +658,7 @@ describe('optionsPickerReducer', () => {
], ],
selectedValues: [{ text: 'B', value: 'B', selected: true }], selectedValues: [{ text: 'B', value: 'B', selected: true }],
queryValue: '', queryValue: '',
highlightIndex: 0, highlightIndex: -1,
}); });
}); });
}); });
@ -766,7 +766,7 @@ describe('optionsPickerReducer', () => {
options: [{ text: 'option:11256', value: 'option:11256', selected: false }], options: [{ text: 'option:11256', value: 'option:11256', selected: false }],
selectedValues: [], selectedValues: [],
queryValue: 'option:11256', 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; let nextIndex = state.highlightIndex + action.payload;
if (nextIndex < 0) { if (nextIndex < 0) {
nextIndex = 0; nextIndex = -1;
} else if (nextIndex >= state.options.length) { } else if (nextIndex >= state.options.length) {
nextIndex = state.options.length - 1; nextIndex = state.options.length - 1;
} }
@ -205,7 +205,7 @@ const optionsPickerSlice = createSlice({
return text.toLowerCase().indexOf(searchQuery) !== -1; return text.toLowerCase().indexOf(searchQuery) !== -1;
}); });
state.highlightIndex = 0; state.highlightIndex = -1;
return applyStateChanges(state, updateDefaultSelection, updateOptions); 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; onChange: (value: string) => void;
onNavigate: (key: NavigationKey, clearOthers: boolean) => void; onNavigate: (key: NavigationKey, clearOthers: boolean) => void;
value: string | null; value: string | null;
currenthighlightindex?: number;
} }
export class VariableInput extends PureComponent<Props> { export class VariableInput extends PureComponent<Props> {
onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => { 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; const clearOthers = event.ctrlKey || event.metaKey || event.shiftKey;
this.props.onNavigate(event.keyCode as NavigationKey, clearOthers); this.props.onNavigate(event.keyCode as NavigationKey, clearOthers);
event.preventDefault(); event.preventDefault();