Prometheus: Fix removing of labels when removed outside of component (#45424)

* Prometheus: Don't remove lables when switching metrics

* Always update labels when labels from prop change

* Add test

* Update variable name

* Revert "Update variable name"

This reverts commit ca186f8b0b.

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(<MetricSelect {...props} />);
     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(<MetricSelect {...props} />);
     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(<MetricSelect {...props} />);
     await openMetricSelect();
     const input = screen.getByRole('combobox');

public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx

@@ -42,11 +42,11 @@ export function MetricSelect({ query, onChange, onGetMetrics }: Props) {
         <Highlighter
           searchWords={meta.inputValue.split(splitSeparator)}
           textToHighlight={option.label ?? ''}
-          highlightClassName={styles.hightlight}
+          highlightClassName={styles.highlight}
         />
       );
     },
-    [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;

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(
+      <LabelFilters onChange={jest.fn()} onGetLabelNames={jest.fn()} onGetLabelValues={jest.fn()} labelsFilters={[]} />
+    );
+    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(<LabelFilters {...props} labelsFilters={labels} />);
-  return props;
+  const { rerender } = render(<LabelFilters {...props} labelsFilters={labels} />);
+  return { ...props, rerender };
 }
 
 function getAddButton() {

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<Array<Partial<QueryBuilderLabelFilter>>>(
-    labelsFilters.length === 0 ? [{ op: defaultOp }] : labelsFilters
-  );
+  const [items, setItems] = useState<Array<Partial<QueryBuilderLabelFilter>>>([{ op: defaultOp }]);
+
+  useEffect(() => {
+    if (labelsFilters.length > 0) {
+      setItems(labelsFilters);
+    } else {
+      setItems([{ op: defaultOp }]);
+    }
+  }, [labelsFilters]);
 
   const onLabelsChange = (newItems: Array<Partial<QueryBuilderLabelFilter>>) => {
     setItems(newItems);