FE: Filters: Display CEL help when editing filter (#646)

Co-authored-by: Roman Zabaluev <[email protected]>

Author: pisal-shubham

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"

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;

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', () => {