FE: Update CEL modal quick info (#178)

kafbat · Mar 17, 2024 · ad4ad31 · ad4ad31
1 parent d7ed3f4
commit ad4ad31
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 30 deletions.
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts b/frontend/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts
@@ -86,8 +86,16 @@ export const ListItem = styled.li`
   color: ${({ theme }) => theme.table.td.color.normal};
 `;
 
+export const InfoHeading = styled.div`
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5;
+  margin-bottom: 10px;
+  color: ${({ theme }) => theme.table.td.color.normal};
+`;
+
 export const InfoParagraph = styled.div`
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 1.5;
   margin-bottom: 10px;

diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/InfoModal.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/InfoModal.tsx
@@ -10,55 +10,50 @@ interface InfoModalProps {
 const InfoModal: React.FC<InfoModalProps> = ({ toggleIsOpen }) => {
   return (
     <S.InfoModal>
+      <S.InfoHeading>We use CEL syntax for smart message filters</S.InfoHeading>
       <S.InfoParagraph>
-        <b>Variables bound to groovy context:</b> partition, timestampMs,
-        keyAsText, valueAsText, header, key (json if possible), value (json if
-        possible).
+        <b>Variables bound to the context:</b>
       </S.InfoParagraph>
+      <ol aria-label="info-list">
+        <S.ListItem>key (json if possible)</S.ListItem>
+        <S.ListItem>value (json if possible)</S.ListItem>
+        <S.ListItem>keyAsText</S.ListItem>
+        <S.ListItem>valueAsText</S.ListItem>
+        <S.ListItem>header</S.ListItem>
+        <S.ListItem>partition</S.ListItem>
+        <S.ListItem>timestampMs</S.ListItem>
+      </ol>
       <S.InfoParagraph>
         <b>JSON parsing logic:</b>
       </S.InfoParagraph>
       <S.InfoParagraph>
-        Key and Value (if they can be parsed to JSON) they are bound as JSON
-        objects, otherwise bound as nulls.
+        Key and Value (if parsing to JSON is available) are bound as JSON
+        objects, otherwise as nulls.
       </S.InfoParagraph>
       <S.InfoParagraph>
-        <b>Sample filters:</b>
+        <b>Filter examples:</b>
       </S.InfoParagraph>
       <ol aria-label="info-list">
-        <S.ListItem>
-          <code>keyAsText != null && keyAsText ~&quot;([Gg])roovy&quot;</code> -
-          regex for key as a string
-        </S.ListItem>
         <S.ListItem>
           <code>
-            value.name == &quot;iS.ListItemax&quot; && value.age &gt; 30
+            has(record.keyAsText) &&
+            record.keyAsText.matches(&quot;.*[Gg]roovy.*&quot;)
           </code>{' '}
-          - in case value is json
+          - regex for key as a string
         </S.ListItem>
         <S.ListItem>
-          <code>value == null && valueAsText != null</code> - search for values
-          that are not nulls and are not json
+          <code>
+            has(record.key.name.first) && record.key.name.first ==
+            &apos;user1&apos;
+          </code>{' '}
+          - in case if the value is json
         </S.ListItem>
         <S.ListItem>
           <code>
-            headers.sentBy == &quot;some system&quot; &&
-            headers[&quot;sentAt&quot;] == &quot;2020-01-01&quot;
+            record.headers.size() == 1 && !has(record.headers.k1) &&
+            record.headers[&apos;k2&apos;] == &apos;v2&apos;
           </code>
         </S.ListItem>
-        <S.ListItem>
-          multiline filters are also allowed:
-          <S.InfoParagraph>
-            <pre>
-              def name = value.name
-              <br />
-              def age = value.age
-              <br />
-              name == &quot;iliax&quot; && age == 30
-              <br />
-            </pre>
-          </S.InfoParagraph>
-        </S.ListItem>
       </ol>
       <Flexbox justifyContent="center" margin="20px 0 0 0">
         <Button