From ca545ddf36e056d8a549a9056a0879ae84f8f4ef Mon Sep 17 00:00:00 2001
From: Kirill Morozov <grifx.design@gmail.com>
Date: Wed, 18 May 2022 11:30:21 +0300
Subject: [PATCH] 1865 implement a tooltip with smart filters documentation
 (#1989)

* Added QuestionIcon

* Added Info button functionality and tests

* Styled component renamed

* Info button testing moved to AddFilter spec

* Styled paragraph renamed

* Info text fixed
---
 .../Topic/Details/Messages/Filters/InfoModal.tsx    | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/InfoModal.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/InfoModal.tsx
index d3036cd137..b86b877606 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/InfoModal.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/InfoModal.tsx
@@ -41,7 +41,18 @@ const InfoModal: React.FC<InfoModalProps> = ({ toggleIsOpen }) => {
           `headers.sentBy == &quot;some system&quot; &&
           headers[&quot;sentAt&quot;] == &quot;2020-01-01&quot;`
         </S.ListItem>
-        <S.ListItem>multiS.ListItemne filters are also allowed:</S.ListItem>
+        <S.ListItem>multiline filters are also allowed:</S.ListItem>
+        <S.InfoParagraph>
+          ```
+          <br />
+          def name = value.name
+          <br />
+          def age = value.age
+          <br />
+          name == &quot;iliax&quot; && age == 30
+          <br />
+          ```
+        </S.InfoParagraph>
       </ol>
       <S.ButtonContainer>
         <Button