From 35198a3abb75f95a169e3e29e6c64ae43529eccf Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Tue, 19 Mar 2024 15:00:46 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(codeAreaModal/index.tsx):=20add=20?=
 =?UTF-8?q?event=20listener=20to=20prevent=20the=20Escape=20key=20from=20c?=
 =?UTF-8?q?losing=20the=20modal=20=F0=9F=93=9D=20(codeAreaModal/index.tsx)?=
 =?UTF-8?q?:=20improve=20code=20readability=20by=20adding=20line=20breaks?=
 =?UTF-8?q?=20and=20indentation=20for=20better=20code=20organization?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/modals/codeAreaModal/index.tsx        | 140 +++++++++---------
 1 file changed, 74 insertions(+), 66 deletions(-)

diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index e68592efa..2766853f8 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -146,75 +146,83 @@ export default function CodeAreaModal({
     setCode(value);
   }, [value, open]);
 
+  const handlePreventEsc = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+    }
+  };
+
   return (
-    <BaseModal open={open} setOpen={setOpen}>
-      <BaseModal.Trigger>{children}</BaseModal.Trigger>
-      <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
-        <span className="pr-2"> {EDIT_CODE_TITLE} </span>
-        <IconComponent
-          name="prompts"
-          className="h-6 w-6 pl-1 text-primary "
-          aria-hidden="true"
-        />
-      </BaseModal.Header>
-      <BaseModal.Content>
-        <Input
-          value={code}
-          readOnly
-          className="absolute left-[500%] top-[500%]"
-          id="codeValue"
-        />
-        <div className="flex h-full w-full flex-col transition-all">
-          <div className="h-full w-full">
-            <AceEditor
-              readOnly={readonly}
-              value={code}
-              mode="python"
-              setOptions={{ fontFamily: "monospace" }}
-              height={height ?? "100%"}
-              highlightActiveLine={true}
-              showPrintMargin={false}
-              fontSize={14}
-              showGutter
-              enableLiveAutocompletion
-              theme={dark ? "twilight" : "github"}
-              name="CodeEditor"
-              onChange={(value) => {
-                setCode(value);
-              }}
-              className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
-            />
-          </div>
-          <div
-            className={
-              "whitespace-break-spaces transition-all delay-500" +
-              (error?.detail?.error !== undefined ? "h-2/6" : "h-0")
-            }
-          >
-            <div className="mt-1 h-full max-h-[10rem] w-full overflow-y-auto overflow-x-clip text-left custom-scroll">
-              <h1 className="text-lg text-destructive">
-                {error?.detail?.error}
-              </h1>
-              <div className="ml-2 w-full text-sm text-status-red word-break-break-word">
-                <span className="w-full word-break-break-word">
-                  {error?.detail?.traceback}
-                </span>
+    <div onKeyDown={(e) => handlePreventEsc(e)}>
+      <BaseModal open={open} setOpen={setOpen}>
+        <BaseModal.Trigger>{children}</BaseModal.Trigger>
+        <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
+          <span className="pr-2"> {EDIT_CODE_TITLE} </span>
+          <IconComponent
+            name="prompts"
+            className="h-6 w-6 pl-1 text-primary "
+            aria-hidden="true"
+          />
+        </BaseModal.Header>
+        <BaseModal.Content>
+          <Input
+            value={code}
+            readOnly
+            className="absolute left-[500%] top-[500%]"
+            id="codeValue"
+          />
+          <div className="flex h-full w-full flex-col transition-all">
+            <div className="h-full w-full">
+              <AceEditor
+                readOnly={readonly}
+                value={code}
+                mode="python"
+                setOptions={{ fontFamily: "monospace" }}
+                height={height ?? "100%"}
+                highlightActiveLine={true}
+                showPrintMargin={false}
+                fontSize={14}
+                showGutter
+                enableLiveAutocompletion
+                theme={dark ? "twilight" : "github"}
+                name="CodeEditor"
+                onChange={(value) => {
+                  setCode(value);
+                }}
+                className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
+              />
+            </div>
+            <div
+              className={
+                "whitespace-break-spaces transition-all delay-500" +
+                (error?.detail?.error !== undefined ? "h-2/6" : "h-0")
+              }
+            >
+              <div className="mt-1 h-full max-h-[10rem] w-full overflow-y-auto overflow-x-clip text-left custom-scroll">
+                <h1 className="text-lg text-destructive">
+                  {error?.detail?.error}
+                </h1>
+                <div className="ml-2 w-full text-sm text-status-red word-break-break-word">
+                  <span className="w-full word-break-break-word">
+                    {error?.detail?.traceback}
+                  </span>
+                </div>
               </div>
             </div>
+            <div className="flex h-fit w-full justify-end">
+              <Button
+                className="mt-3"
+                onClick={handleClick}
+                type="submit"
+                id="checkAndSaveBtn"
+                disabled={readonly}
+              >
+                Check & Save
+              </Button>
+            </div>
           </div>
-          <div className="flex h-fit w-full justify-end">
-            <Button
-              className="mt-3"
-              onClick={handleClick}
-              type="submit"
-              id="checkAndSaveBtn"
-              disabled={readonly}
-            >
-              Check & Save
-            </Button>
-          </div>
-        </div>
-      </BaseModal.Content>
-    </BaseModal>
+        </BaseModal.Content>
+      </BaseModal>
+    </div>
   );
 }