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);