Adding constants pattern, textfile edit node fix

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" +
+            editNode
-            (disabled ? " bg-gray-200" : "")
+              ? "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>

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.";

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;

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>
+          <DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
-            {modalSubtitle['codeprompt']}
-          </DialogDescription>
         </DialogHeader>
 
         <div className="flex h-full w-full mt-2">

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>
+          <DialogDescription>{EXPORT_DIALOG_SUBTITLE}</DialogDescription>
-          {modalSubtitle['export']}
-          </DialogDescription>
         </DialogHeader>
 
         <Label>

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>
 

src/frontend/src/modals/modal-texts.tsx

@@ -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."
-  };