Improve title of search validation icon (#20625)

Graylog2 · Oct 8, 2024 · 1cecdf1 · 1cecdf1
1 parent 2d621be
commit 1cecdf1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/...og2-web-interface/src/views/components/searchbar/queryvalidation/QueryValidation.test.tsx b/...og2-web-interface/src/views/components/searchbar/queryvalidation/QueryValidation.test.tsx
@@ -37,7 +37,7 @@ type SUTProps = {
 }
 
 describe('QueryValidation', () => {
-  const validationErrorIconTitle = 'Toggle validation error explanation';
+  const validationErrorIconTitle = /Toggle validation/;
 
   const openExplanation = async () => {
     const validationExplanationTrigger = await screen.findByTitle(validationErrorIconTitle);

diff --git a/graylog2-web-interface/src/views/components/searchbar/queryvalidation/QueryValidation.tsx b/graylog2-web-interface/src/views/components/searchbar/queryvalidation/QueryValidation.tsx
@@ -188,12 +188,25 @@ const QueryValidation = () => {
   const hasExplanations = validationState && (validationState?.status !== 'OK');
   const isInfo = validationState && (validationState.status === 'INFO');
 
+  const validationTitle = () => {
+    if (!validationState) return '';
+
+    switch (validationState.status) {
+      case 'WARNING':
+        return 'warning';
+      case 'INFO':
+        return 'information';
+      default:
+        return 'error explanation';
+    }
+  };
+
   return (
     <Popover opened={hasExplanations && showExplanation} position="bottom" width={500} withArrow>
       <Popover.Target>
         <Container ref={explanationTriggerRef}>
           {hasExplanations ? (
-            <ExplanationTrigger title={`Toggle validation ${isInfo ? 'information' : 'error explanation'}`}
+            <ExplanationTrigger title={`Toggle validation ${validationTitle()}`}
                                 onClick={toggleShow}
                                 $clickable
                                 tabIndex={0}