IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-07-29 15:59:50 -05:00
Code Issues Packages Projects Releases Wiki Activity

Prometheus: Fix UI bug where a label with empty string shows as populated with the deleted label filter value (#78153)

Browse Source 
* preserve label with empty string

* fix side effect of having undefined show up in the editor select for value

* re render label item when label filters change
This commit is contained in:
Brendan O'Handley
2023-11-20 21:33:16 +02:00
committed by GitHub
parent d03b291eed
commit ae164df698
2 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/datasource/prometheus/querybuilder/components/LabelFilterItem.tsx
+6 -4
View File
@@ -73,8 +73,10 @@ export function LabelFilterItem({
debounceDuration
);
const itemValue = item?.value ?? '';
return (
<div data-testid="prometheus-dimensions-filter-item">
<div key={itemValue} data-testid="prometheus-dimensions-filter-item">
<InputGroup>
{/* Label name select, loads all values at once */}
<Select
@@ -136,8 +138,8 @@ export function LabelFilterItem({
width="auto"
value={
isMultiSelect()
? getSelectOptionsFromString(item?.value).map(toOption)
: getSelectOptionsFromString(item?.value).map(toOption)[0]
? getSelectOptionsFromString(itemValue).map(toOption)
: getSelectOptionsFromString(itemValue).map(toOption)[0]
}
allowCustomValue
onOpenMenu={async () => {
@@ -179,7 +181,7 @@ export function LabelFilterItem({
}}
invalid={invalidValue}
/>
<AccessoryButton aria-label="remove" icon="times" variant="secondary" onClick={onDelete} />
<AccessoryButton aria-label={`remove-${item.label}`} icon="times" variant="secondary" onClick={onDelete} />
</InputGroup>
</div>
);
public/app/plugins/datasource/prometheus/querybuilder/components/LabelFilters.test.tsx
+17 -1
View File
@@ -66,10 +66,26 @@ describe('LabelFilters', () => {
it('removes label', async () => {
const { onChange } = setup({ labelsFilters: [{ label: 'foo', op: '=', value: 'bar' }] });
await userEvent.click(screen.getByLabelText(/remove/));
await userEvent.click(screen.getByLabelText(/remove-foo/));
expect(onChange).toBeCalledWith([]);
});
it('removes label but preserves a label with a value of empty string', async () => {
const { onChange } = setup({
labelsFilters: [
{ label: 'lab', op: '=', value: 'bel' },
{ label: 'foo', op: '=', value: 'bar' },
{ label: 'le', op: '=', value: '' },
],
});
await userEvent.click(screen.getByLabelText(/remove-foo/));
expect(onChange).toBeCalledWith([
{ label: 'lab', op: '=', value: 'bel' },
{ label: 'le', op: '=', value: '' },
]);
expect(screen.queryByText('bar')).toBeNull();
});
it('renders empty input when labels are deleted from outside ', async () => {
const { rerender } = setup({ labelsFilters: [{ label: 'foo', op: '=', value: 'bar' }] });
expect(screen.getByText(/foo/)).toBeInTheDocument();