From e1af9bcecc518efb81276511bc9337e352bcc98c Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Thu, 11 Jan 2024 16:28:12 +0100
Subject: [PATCH] Alerting: Fix group filter (#80358)

* Fix group filter

* Fix Warning: Receivedfor a non-boolean attribute

* remove defaultQueryString.length > 3 from the logic to check if input is invalid
---
 .betterer.results                             |  3 +-
 .../components/alert-groups/MatcherFilter.tsx | 81 +++++++++++--------
 2 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index baaf458b582..8c1faef7a44 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1589,8 +1589,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
+      [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
diff --git a/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx b/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
index 66d7f580c56..3246fcbc6d2 100644
--- a/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
+++ b/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
@@ -3,9 +3,10 @@ import { debounce } from 'lodash';
 import React, { FormEvent, useEffect, useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Label, Tooltip, Input, Icon, useStyles2, Stack } from '@grafana/ui';
+import { Field, Icon, Input, Label, Stack, Tooltip, useStyles2 } from '@grafana/ui';
 
 import { logInfo, LogMessages } from '../../Analytics';
+import { parseMatchers } from '../../utils/alertmanager';
 
 interface Props {
   className?: string;
@@ -20,8 +21,7 @@ export const MatcherFilter = ({ className, onFilterChange, defaultQueryString }:
     () =>
       debounce((e: FormEvent<HTMLInputElement>) => {
         logInfo(LogMessages.filterByLabel);
-
-        const target = e.currentTarget;
+        const target = e.target as HTMLInputElement;
         onFilterChange(target.value);
       }, 600),
     [onFilterChange]
@@ -30,42 +30,57 @@ export const MatcherFilter = ({ className, onFilterChange, defaultQueryString }:
   useEffect(() => onSearchInputChanged.cancel(), [onSearchInputChanged]);
 
   const searchIcon = <Icon name={'search'} />;
+  const inputInvalid = defaultQueryString ? parseMatchers(defaultQueryString).length === 0 : false;
 
   return (
     <div className={className}>
-      <Label>
-        <Stack gap={0.5}>
-          <span>Search by label</span>
-          <Tooltip
-            content={
-              <div>
-                Filter alerts using label querying, ex:
-                <pre>{`{severity="critical", instance=~"cluster-us-.+"}`}</pre>
-              </div>
-            }
-          >
-            <Icon className={styles.icon} name="info-circle" size="sm" />
-          </Tooltip>
-        </Stack>
-      </Label>
-      <Input
-        placeholder="Search"
-        defaultValue={defaultQueryString}
-        onChange={onSearchInputChanged}
-        data-testid="search-query-input"
-        prefix={searchIcon}
-        className={styles.inputWidth}
-      />
+      <Field
+        invalid={inputInvalid || undefined}
+        error={inputInvalid ? 'Query must use valid matcher syntax. See the examples in the help tooltip.' : null}
+        label={
+          <Label>
+            <Stack gap={0.5}>
+              <span>Search by label</span>
+              <Tooltip
+                content={
+                  <div>
+                    Filter alerts using label querying without spaces, ex:
+                    <pre>{`{severity="critical", instance=~"cluster-us-.+"}`}</pre>
+                    Invalid use of spaces:
+                    <pre>{`{severity= "critical"}`}</pre>
+                    <pre>{`{severity ="critical"}`}</pre>
+                    Valid use of spaces:
+                    <pre>{`{severity=" critical"}`}</pre>
+                    Filter alerts using label querying without braces, ex:
+                    <pre>{`severity="critical", instance=~"cluster-us-.+"`}</pre>
+                  </div>
+                }
+              >
+                <Icon className={styles.icon} name="info-circle" size="sm" />
+              </Tooltip>
+            </Stack>
+          </Label>
+        }
+      >
+        <Input
+          placeholder="Search"
+          defaultValue={defaultQueryString ?? ''}
+          onChange={onSearchInputChanged}
+          data-testid="search-query-input"
+          prefix={searchIcon}
+          className={styles.inputWidth}
+        />
+      </Field>
     </div>
   );
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  icon: css`
-    margin-right: ${theme.spacing(0.5)};
-  `,
-  inputWidth: css`
-    width: 340px;
-    flex-grow: 0;
-  `,
+  icon: css({
+    marginRight: theme.spacing(0.5),
+  }),
+  inputWidth: css({
+    width: 340,
+    flexGrow: 0,
+  }),
 });