From 9c028edcafb4aa1e94c21e9d554951e55035009f Mon Sep 17 00:00:00 2001
From: Shubham Pisal <90398735+pisal-shubham@users.noreply.github.com>
Date: Sun, 24 Nov 2024 13:51:48 +0530
Subject: [PATCH] FE: Filters: Display CEL help when editing filter (#646)

Co-authored-by: Roman Zabaluev <gpg@haarolean.dev>
---
 .../Messages/Filters/AddEditFilterContainer.tsx      |  2 +-
 .../Topics/Topic/Messages/Filters/Filters.styled.ts  |  2 +-
 .../__tests__/AddEditFilterContainer.spec.tsx        | 12 ++++++++++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/AddEditFilterContainer.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/AddEditFilterContainer.tsx
index 4054ca51c..c05602990 100644
--- a/frontend/src/components/Topics/Topic/Messages/Filters/AddEditFilterContainer.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/AddEditFilterContainer.tsx
@@ -196,7 +196,7 @@ const AddEditFilterContainer: React.FC<AddEditFilterContainerProps> = ({
           </FormError>
         </div>
         <S.FilterButtonWrapper isEdit={isEdit}>
-          {!isEdit && <QuestionInfo />}
+          <QuestionInfo />
           <Flexbox gap="10px">
             <Button
               buttonSize="M"
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts b/frontend/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts
index ad1fcf1b7..e3429f6b5 100644
--- a/frontend/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts
@@ -142,7 +142,7 @@ export const SavedFilterName = styled.div`
 
 export const FilterButtonWrapper = styled.div<{ isEdit: boolean }>`
   display: flex;
-  justify-content: ${(props) => (props.isEdit ? 'flex-end' : 'space-between')};
+  justify-content: space-between;
   margin-top: 10px;
   gap: 10px;
   padding-top: 16px;
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx
index f9368369c..6e7b8c4bf 100644
--- a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx
@@ -73,6 +73,12 @@ describe('AddEditFilterContainer component', () => {
       expect(submitButtonElem).toBeEnabled();
     });
 
+    it('should display the CEL syntax help icon', async () => {
+      const celHelpIcon = screen.queryByLabelText('info');
+      expect(celHelpIcon).toBeVisible();
+      expect(celHelpIcon).toBeEnabled();
+    });
+
     // TODO needs a rethink
     // it('should view the error message after typing and clearing the input', async () => {
     //   const inputs = screen.getAllByRole('textbox');
@@ -115,6 +121,12 @@ describe('AddEditFilterContainer component', () => {
       const checkbox = screen.queryByRole('checkbox');
       expect(checkbox).not.toBeInTheDocument();
     });
+
+    it('should display the CEL syntax help icon', async () => {
+      const celHelpIcon = screen.queryByLabelText('info');
+      expect(celHelpIcon).toBeVisible();
+      expect(celHelpIcon).toBeEnabled();
+    });
   });
 
   describe('Cancel and Submit button functionality', () => {