From c2325e3ed4934a46c3055347dce2cff0c573906c Mon Sep 17 00:00:00 2001
From: Ivana Huckova <ivana.huckova@gmail.com>
Date: Tue, 15 Feb 2022 20:01:49 +0100
Subject: [PATCH] Always update labels when labels from prop change

---
 .../querybuilder/shared/LabelFilters.tsx           | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

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