From 10b3ad711ea1d9596c8a20ea0dbd80e782c7ef48 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 8 Jun 2023 16:58:05 -0300
Subject: [PATCH] Adding constants pattern, textfile edit node fix

---
 .../components/textAreaComponent/index.tsx    | 11 ++++--
 src/frontend/src/constants.tsx                | 39 +++++++++++++++++++
 .../src/modals/EditNodeModal/index.tsx        |  5 ++-
 .../src/modals/codeAreaModal/index.tsx        |  6 +--
 src/frontend/src/modals/exportModal/index.tsx |  6 +--
 .../src/modals/genericModal/index.tsx         | 15 ++++++-
 src/frontend/src/modals/modal-texts.tsx       |  8 ----
 7 files changed, 67 insertions(+), 23 deletions(-)
 create mode 100644 src/frontend/src/constants.tsx
 delete mode 100644 src/frontend/src/modals/modal-texts.tsx

diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index a2536645f..0693411bf 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -9,6 +9,7 @@ export default function TextAreaComponent({
   value,
   onChange,
   disabled,
+  editNode = false,
 }: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(value);
   const { openPopUp } = useContext(PopUpContext);
@@ -37,8 +38,10 @@ export default function TextAreaComponent({
             );
           }}
           className={
-            "truncate block w-full text-gray-500 dark:text-gray-100 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-            (disabled ? " bg-gray-200" : "")
+            editNode
+              ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              : "truncate block w-full text-gray-500 dark:text-gray-100 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+                (disabled ? " bg-gray-200" : "")
           }
         >
           {myValue !== "" ? myValue : "Text empty"}
@@ -59,7 +62,9 @@ export default function TextAreaComponent({
             );
           }}
         >
-          <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+          {!editNode && (
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+          )}
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
new file mode 100644
index 000000000..49b6ea194
--- /dev/null
+++ b/src/frontend/src/constants.tsx
@@ -0,0 +1,39 @@
+// src/constants.tsx
+
+/**
+ * The base text for subtitle of Export Dialog (Toolbar)
+ * @constant
+ */
+export const EXPORT_DIALOG_SUBTITLE = "Export your models.";
+
+/**
+ * The base text for subtitle of Code Dialog (Toolbar)
+ * @constant
+ */
+export const CODE_DIALOG_SUBTITLE =
+  "Export your flow to use it with this code.";
+
+/**
+ * The base text for subtitle of Edit Node Dialog
+ * @constant
+ */
+export const EDIT_DIALOG_SUBTITLE =
+  "Make configurations changes to your nodes. Click save when you're done.";
+
+/**
+ * The base text for subtitle of Code Dialog
+ * @constant
+ */
+export const CODE_PROMPT_DIALOG_SUBTITLE = "Edit you python code.";
+
+/**
+ * The base text for subtitle of Prompt Dialog
+ * @constant
+ */
+export const PROMPT_DIALOG_SUBTITLE = "Edit you prompt.";
+
+/**
+ * The base text for subtitle of Text Dialog
+ * @constant
+ */
+export const TEXT_DIALOG_SUBTITLE = "Edit you text.";
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index e4a016b5a..5a8273036 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -42,7 +42,7 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
-import { modalSubtitle } from "../modal-texts";
+import { EDIT_DIALOG_SUBTITLE } from "../../constants";
 
 export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);
@@ -103,7 +103,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
             />
           </DialogTitle>
           <DialogDescription>
-          {modalSubtitle['edit']}
+            {EDIT_DIALOG_SUBTITLE}
             <div className="flex pt-3">
               <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2">
                 &nbsp;
@@ -179,6 +179,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                 ) : data.node.template[n].multiline ? (
                                   <TextAreaComponent
                                     disabled={false}
+                                    editNode={true}
                                     value={data.node.template[n].value ?? ""}
                                     onChange={(t: string) => {
                                       data.node.template[n].value = t;
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index b2f72928b..405187647 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -21,7 +21,7 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
-import { modalSubtitle } from "../modal-texts";
+import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
 
 export default function CodeAreaModal({
   value,
@@ -56,9 +56,7 @@ export default function CodeAreaModal({
               aria-hidden="true"
             />
           </DialogTitle>
-          <DialogDescription>
-            {modalSubtitle['codeprompt']}
-          </DialogDescription>
+          <DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
 
         <div className="flex h-full w-full mt-2">
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index d0d2fc373..4532afe33 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -23,7 +23,7 @@ import { Label } from "@radix-ui/react-label";
 import { Checkbox } from "../../components/ui/checkbox";
 import { Textarea } from "../../components/ui/textarea";
 import { Input } from "../../components/ui/input";
-import { modalSubtitle } from "../modal-texts";
+import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
 
 export default function ExportModal() {
   const [open, setOpen] = useState(true);
@@ -53,9 +53,7 @@ export default function ExportModal() {
               aria-hidden="true"
             />
           </DialogTitle>
-          <DialogDescription>
-          {modalSubtitle['export']}
-          </DialogDescription>
+          <DialogDescription>{EXPORT_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
 
         <Label>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 730ed4844..868a61913 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -16,7 +16,7 @@ import {
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
-import { modalSubtitle } from "../modal-texts";
+import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
 
 export default function PromptAreaModal({
   value,
@@ -60,7 +60,18 @@ export default function PromptAreaModal({
             />
           </DialogTitle>
           <DialogDescription>
-          {modalSubtitle['prompt']}
+            {(() => {
+              switch (myModalTitle) {
+                case "Edit Text":
+                  return TEXT_DIALOG_SUBTITLE;
+
+                case "Edit Prompt":
+                  return PROMPT_DIALOG_SUBTITLE;
+
+                default:
+                  return null;
+              }
+            })()}
           </DialogDescription>
         </DialogHeader>
 
diff --git a/src/frontend/src/modals/modal-texts.tsx b/src/frontend/src/modals/modal-texts.tsx
deleted file mode 100644
index dea516e9d..000000000
--- a/src/frontend/src/modals/modal-texts.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-
-export const modalSubtitle = {
-    export: "Export your models.",
-    code: "Export your flow to use it with this code.",
-    edit: "Make configurations changes to your nodes. Click save when you're done.",
-    codeprompt: "Edit you python code.",
-    prompt: "Edit you prompt."
-  };
\ No newline at end of file