From e0989c0f5358d53e8c28242d48d5fb39f85f5aae Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 1 Mar 2024 11:11:01 -0300
Subject: [PATCH] Refactor variable highlighting regex in constants.ts and fix
 error handling in genericModal

---
 src/frontend/src/constants/constants.ts       | 12 ++++++++++--
 .../src/modals/genericModal/index.tsx         | 19 +++++++++++++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index fcf3d71ef..4eda4ee9f 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -25,10 +25,18 @@ export const INVALID_CHARACTERS = [
 
 /**
  * regex to highlight the variables in the text
- * @constant
+ * @constant regexHighlight
+ * @type {RegExp}
+ * @default
+ * @example
+ * {{variable}} or {variable}
+ * @returns {RegExp}
+ * @description
+ * This regex is used to highlight the variables in the text.
+ * It matches the variables in the text that are between {{}} or {}.
  */
 
-export const regexHighlight = /\{([^}]+)\}/g;
+export const regexHighlight = /\{\{(.*?)\}\}|\{([^{}]+)\}/g;
 export const specialCharsRegex = /[!@#$%^&*()\-_=+[\]{}|;:'",.<>/?\\`´]/;
 
 export const programmingLanguages: languageMap = {
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 253115bf3..83f6c5bce 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -97,13 +97,24 @@ export default function GenericModal({
   useEffect(() => {
     setInputValue(value);
   }, [value, modalOpen]);
-
   const coloredContent = (inputValue || "")
     .replace(/</g, "&lt;")
     .replace(/>/g, "&gt;")
-    .replace(regexHighlight, varHighlightHTML({ name: "$1" }))
-    .replace(/\n/g, "<br />");
+    .replace(regexHighlight, (match, p1, p2) => {
+      // Decide which group was matched. If p1 is not undefined, do nothing
+      // we don't want to change the text. If p2 is not undefined, then we
+      // have a variable, so we should highlight it.
+      // ! This will not work with multiline or indented json yet
+      if (p1 !== undefined) {
+        return match;
+      } else if (p2 !== undefined) {
+        return varHighlightHTML({ name: p2 });
+      }
 
+      return match;
+    })
+    .replace(/\n/g, "<br />");
+  console.log(coloredContent);
   function getClassByNumberLength(): string {
     let sumOfCaracteres: number = 0;
     wordsHighlight.forEach((element) => {
@@ -159,7 +170,7 @@ export default function GenericModal({
         setIsEdit(true);
         return setErrorData({
           title: PROMPT_ERROR_ALERT,
-          list: [error.toString()],
+          list: [error.response.data.detail ?? ""],
         });
       });
   }