From 6fd9fdec6b300a2692dfd8c63343c97dc3ff3726 Mon Sep 17 00:00:00 2001
From: AmandaBalderas20 <amanda.balderas@encora.com>
Date: Fri, 31 Oct 2025 22:52:18 -0600
Subject: [PATCH] fix(ui): validate JSONPath syntax and show inline error
 instead of alert

---
 .../components/Topics/Topic/Messages/PreviewModal.tsx  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Topics/Topic/Messages/PreviewModal.tsx b/frontend/src/components/Topics/Topic/Messages/PreviewModal.tsx
index 3d2dd9fb1..307b24ab6 100644
--- a/frontend/src/components/Topics/Topic/Messages/PreviewModal.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/PreviewModal.tsx
@@ -6,6 +6,7 @@ import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import EditIcon from 'components/common/Icons/EditIcon';
 import CancelIcon from 'components/common/Icons/CancelIcon';
+import { JSONPath } from 'jsonpath-plus';
 
 import * as S from './PreviewModal.styled';
 import { PreviewFilter } from './Message';
@@ -33,8 +34,14 @@ const PreviewModal: React.FC<InfoModalProps> = ({
       newErrors.push('field');
     }
 
-    if (path === '') {
+    if (path.trim() === '') {
       newErrors.push('path');
+    } else {
+      try {
+        JSONPath({ path, json: {} });
+      } catch {
+        newErrors.push('invalidPath');
+      }
     }
 
     if (newErrors?.length) {
@@ -111,6 +118,7 @@ const PreviewModal: React.FC<InfoModalProps> = ({
         />
         <FormError>
           {errors.includes('path') && 'Json path is required'}
+          {errors.includes('invalidPath') && 'Invalid JSONPath syntax'}
         </FormError>
       </div>
       <S.ButtonWrapper>