From fe2525750e5de660c0bc8db5f4c5b93835d80941 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 13 Jul 2023 11:37:02 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore(constants.tsx):=20add=20co?=
 =?UTF-8?q?nstant=20MAX=5FWORDS=5FHIGHLIGHT=20with=20a=20value=20of=20110?=
 =?UTF-8?q?=20for=20the=20maximum=20number=20of=20words=20to=20highlight?=
 =?UTF-8?q?=20in=20tooltips=20=F0=9F=94=A7=20chore(index.css):=20add=20CSS?=
 =?UTF-8?q?=20class=20.code-nohighlight=20with=20different=20max-height=20?=
 =?UTF-8?q?value=20for=20tooltips=20with=20fewer=20words=20to=20display=20?=
 =?UTF-8?q?=F0=9F=94=A7=20chore(genericModal/index.tsx):=20add=20logic=20t?=
 =?UTF-8?q?o=20dynamically=20apply=20CSS=20class=20.code-nohighlight=20to?=
 =?UTF-8?q?=20tooltips=20with=20fewer=20words=20to=20display?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/constants.tsx                 |  6 ++++++
 src/frontend/src/index.css                     |  4 ++++
 src/frontend/src/modals/genericModal/index.tsx | 14 ++++++++++++--
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index b9dd2aa1f..4f01bafb4 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -11,6 +11,12 @@ import { buildInputs, buildTweaks } from "./utils";
  */
 export const MAX_LENGTH_TO_SCROLL_TOOLTIP = 200;
 
+/**
+ * Number maximum of components to scroll on tooltips
+ * @constant
+ */
+export const MAX_WORDS_HIGHLIGHT = 110;
+
 /**
  * The base text for subtitle of Export Dialog (Toolbar)
  * @constant
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index dfe862183..411da9ff7 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -935,6 +935,10 @@ The cursor: default; property value restores the browser's default cursor style
   .code-highlight{
     @apply block px-3 py-2 w-full max-h-[64vh] text-sm outline-0 border-0 break-all overflow-y-hidden
   }
+
+  .code-nohighlight{
+    @apply block px-3 py-2 w-full max-h-[70vh] text-sm outline-0 border-0 break-all overflow-y-hidden
+  }
   .form-modal-lockchat {
     @apply form-input focus:ring-ring focus:border-ring block w-full rounded-md border-border p-4 pr-16 custom-scroll sm:text-sm
   }
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 3565b1673..ca2ec585c 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -6,7 +6,7 @@ import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import { DialogTitle } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
-import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
+import { MAX_WORDS_HIGHLIGHT, PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -110,7 +110,7 @@ export default function GenericModal({
   const TextAreaContentView = () => {
     return (
       <SanitizedHTMLWrapper
-        className={"code-highlight"}
+        className={getClassByNumberLength()}
         content={coloredContent}
         onClick={() => {
           setIsEdit(true);
@@ -120,6 +120,16 @@ export default function GenericModal({
     );
   };
 
+  function getClassByNumberLength(){
+    let sumOfCaracteres: number = 0;
+    wordsHighlight.forEach(element => {
+      sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length
+    });
+    console.log(sumOfCaracteres);
+    
+    return sumOfCaracteres > MAX_WORDS_HIGHLIGHT ? "code-highlight" : "code-nohighlight"
+  }
+
 
   function validatePrompt(closeModal: boolean) {
     postValidatePrompt(field_name, inputValue, nodeClass)