Prometheus: Fix adding of multiple values for regex operator (#52978) (#53003)

* Prometheus, Loki: Fix adding of multiple values for regex operator

* Refactor

(cherry picked from commit 1eb3513781)

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx

@@ -25,7 +25,7 @@ export function LabelFilterItem({ item, defaultOp, onChange, onDelete, onGetLabe
   }>({});
 
   const isMultiSelect = () => {
-    return item.op === operators[0].label;
+    return operators.find((op) => op.label === item.op)?.isMultiValue;
   };
 
   const getSelectOptionsFromString = (item?: string): string[] => {
@@ -124,8 +124,8 @@ export function LabelFilterItem({ item, defaultOp, onChange, onDelete, onGetLabe
 }
 
 const operators = [
-  { label: '=~', value: '=~' },
-  { label: '=', value: '=' },
-  { label: '!=', value: '!=' },
-  { label: '!~', value: '!~' },
+  { label: '=~', value: '=~', isMultiValue: true },
+  { label: '=', value: '=', isMultiValue: false },
+  { label: '!=', value: '!=', isMultiValue: false },
+  { label: '!~', value: '!~', isMultiValue: true },
 ];

public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.test.tsx

@@ -31,6 +31,21 @@ describe('LabelFilters', () => {
     expect(getAddButton()).toBeInTheDocument();
   });
 
+  it('renders multiple values for regex selectors', async () => {
+    setup([
+      { label: 'bar', op: '!~', value: 'baz|bat|bau' },
+      { label: 'foo', op: '!~', value: 'fop|for|fos' },
+    ]);
+    expect(screen.getByText(/bar/)).toBeInTheDocument();
+    expect(screen.getByText(/baz/)).toBeInTheDocument();
+    expect(screen.getByText(/bat/)).toBeInTheDocument();
+    expect(screen.getByText(/bau/)).toBeInTheDocument();
+    expect(screen.getByText(/foo/)).toBeInTheDocument();
+    expect(screen.getByText(/for/)).toBeInTheDocument();
+    expect(screen.getByText(/fos/)).toBeInTheDocument();
+    expect(getAddButton()).toBeInTheDocument();
+  });
+
   it('adds new label', async () => {
     const { onChange } = setup([{ label: 'foo', op: '=', value: 'bar' }]);
     await userEvent.click(getAddButton());