diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.test.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.test.tsx
index afcc3056f17..6dbfb42f8fb 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.test.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.test.tsx
@@ -57,7 +57,7 @@ describe('MetricSelect', () => {
await waitFor(() => expect(screen.getAllByLabelText('Select option')).toHaveLength(2));
});
- it('highlihts matching string', async () => {
+ it('highlights matching string', async () => {
const { container } = render();
await openMetricSelect();
const input = screen.getByRole('combobox');
@@ -65,7 +65,7 @@ describe('MetricSelect', () => {
await waitFor(() => expect(container.querySelectorAll('mark')).toHaveLength(1));
});
- it('highlihts multiple matching strings in 1 input row', async () => {
+ it('highlights multiple matching strings in 1 input row', async () => {
const { container } = render();
await openMetricSelect();
const input = screen.getByRole('combobox');
@@ -73,7 +73,7 @@ describe('MetricSelect', () => {
await waitFor(() => expect(container.querySelectorAll('mark')).toHaveLength(2));
});
- it('highlihts multiple matching strings in multiple input rows', async () => {
+ it('highlights multiple matching strings in multiple input rows', async () => {
const { container } = render();
await openMetricSelect();
const input = screen.getByRole('combobox');
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
index eccd302aaa4..86e7b676686 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
@@ -42,11 +42,11 @@ export function MetricSelect({ query, onChange, onGetMetrics }: Props) {
);
},
- [styles.hightlight]
+ [styles.highlight]
);
return (
@@ -69,7 +69,7 @@ export function MetricSelect({ query, onChange, onGetMetrics }: Props) {
options={state.metrics}
onChange={({ value }) => {
if (value) {
- onChange({ ...query, metric: value, labels: [] });
+ onChange({ ...query, metric: value });
}
}}
/>
@@ -82,7 +82,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
select: css`
min-width: 125px;
`,
- hightlight: css`
+ highlight: css`
label: select__match-highlight;
background: inherit;
padding: inherit;
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.test.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.test.tsx
index b13702c4226..0872aadc47f 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.test.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.test.tsx
@@ -47,6 +47,18 @@ describe('LabelFilters', () => {
userEvent.click(screen.getByLabelText(/remove/));
expect(onChange).toBeCalledWith([]);
});
+
+ it('renders empty input when labels are deleted from outside ', async () => {
+ const { rerender } = setup([{ label: 'foo', op: '=', value: 'bar' }]);
+ expect(screen.getByText(/foo/)).toBeInTheDocument();
+ expect(screen.getByText(/bar/)).toBeInTheDocument();
+ rerender(
+
+ );
+ expect(screen.getAllByText(/Choose/)).toHaveLength(2);
+ expect(screen.getByText(/=/)).toBeInTheDocument();
+ expect(getAddButton()).toBeInTheDocument();
+ });
});
function setup(labels: QueryBuilderLabelFilter[] = []) {
@@ -64,8 +76,8 @@ function setup(labels: QueryBuilderLabelFilter[] = []) {
],
};
- render();
- return props;
+ const { rerender } = render();
+ return { ...props, rerender };
}
function getAddButton() {
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx
index d3c4daf546b..bc0ca2608a6 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx
@@ -1,7 +1,7 @@
import { SelectableValue } from '@grafana/data';
import { EditorField, EditorFieldGroup, EditorList } from '@grafana/experimental';
import { isEqual } from 'lodash';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
import { QueryBuilderLabelFilter } from '../shared/types';
import { LabelFilterItem } from './LabelFilterItem';
@@ -14,9 +14,15 @@ export interface Props {
export function LabelFilters({ labelsFilters, onChange, onGetLabelNames, onGetLabelValues }: Props) {
const defaultOp = '=';
- const [items, setItems] = useState>>(
- labelsFilters.length === 0 ? [{ op: defaultOp }] : labelsFilters
- );
+ const [items, setItems] = useState>>([{ op: defaultOp }]);
+
+ useEffect(() => {
+ if (labelsFilters.length > 0) {
+ setItems(labelsFilters);
+ } else {
+ setItems([{ op: defaultOp }]);
+ }
+ }, [labelsFilters]);
const onLabelsChange = (newItems: Array>) => {
setItems(newItems);