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

Grafana/ui: display all selected levels for selected value when searching (#32030)

Browse Source 
* display all levels for selected values when searching if needed

* add test
This commit is contained in:
Vicky Lee
2021-03-16 15:10:05 +00:00
committed by GitHub
parent 6e1c5e957a
commit e5ca13deb6
2 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/grafana-ui/src/components/Cascader/Cascader.test.tsx
View File

@@ -88,6 +88,17 @@ describe('Cascader', () => {
expect(screen.getByText('First / Third')).toBeInTheDocument();
});
it('displays selected value with all levels when displayAllSelectedLevels is true and selecting a value from the search', () => {
render(
<Cascader displayAllSelectedLevels={true} placeholder={placeholder} options={options} onSelect={jest.fn()} />
);
userEvent.type(screen.getByPlaceholderText(placeholder), 'Third');
userEvent.click(screen.getByText('First / Third'));
expect(screen.getByDisplayValue('First / Third')).toBeInTheDocument();
});
it('displays all levels selected with default separator when displayAllSelectedLevels is true', () => {
render(
<Cascader displayAllSelectedLevels={true} placeholder={placeholder} options={options} onSelect={() => {}} />

4
packages/grafana-ui/src/components/Cascader/Cascader.tsx
View File

@@ -105,7 +105,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
if (optionPath.indexOf(initValue) === optionPath.length - 1) {
return {
rcValue: optionPath,
activeLabel: option.singleLabel || '',
activeLabel: this.props.displayAllSelectedLevels ? option.label : option.singleLabel || '',
};
}
}
@@ -132,7 +132,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
onSelect = (obj: SelectableValue<string[]>) => {
const valueArray = obj.value || [];
this.setState({
activeLabel: obj.singleLabel || '',
activeLabel: this.props.displayAllSelectedLevels ? obj.label : obj.singleLabel || '',
rcValue: valueArray,
isSearching: false,
});