refactor: Update TextModal to use TextEditorArea for text input

src/frontend/src/components/stringReaderComponent/index.tsx

@@ -1,14 +1,17 @@
+import { ColDef, Column } from "ag-grid-community";
 import TextModal from "../../modals/textModal";
 
 export default function StringReader({
   string,
   setValue,
+  editable=false,
 }: {
   string: string;
   setValue: (value: string) => void;
+  editable: boolean;
 }): JSX.Element {
   return (
-    <TextModal setValue={setValue} value={string}>
+    <TextModal editable={editable} setValue={setValue} value={string}>
       <span className="truncate">{string}</span>
     </TextModal>
   );

src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx

@@ -9,6 +9,7 @@ import { Badge } from "../../../ui/badge";
 export default function TableAutoCellRender({
   value,
   setValue,
+  colDef,
 }: CustomCellRendererProps) {
   function getCellType() {
     switch (typeof value) {
@@ -50,7 +51,7 @@ export default function TableAutoCellRender({
             </Badge>
           );
         } else {
-          return <StringReader setValue={setValue!} string={value} />;
+          return <StringReader editable={!!colDef?.onCellValueChanged} setValue={setValue!} string={value} />;
         }
       case "number":
         return <NumberReader number={value} />;

src/frontend/src/modals/textModal/components/textEditorArea/index.tsx

@@ -1,18 +1,19 @@
 import { Textarea } from "../../../../components/ui/textarea";
 
-const TextEditorArea = ({ left, value,onChange }:{left:boolean|undefined,value:any,onChange?:(string)=>void;}) => {
+const TextEditorArea = ({ left, value, onChange,readonly }: { left: boolean | undefined, value: any, onChange?: (string) => void; readonly:boolean}) => {
-  if (typeof value === "object" && Object.keys(value).includes("text")) {
+    if (typeof value === "object" && Object.keys(value).includes("text")) {
-    value = value.text;
+        value = value.text;
-  }
+    }
-  return (
+    return (
-    <Textarea
+        <Textarea
-      className={`w-full custom-scroll ${left ? "min-h-32" : "h-full"}`}
+            readOnly={readonly}
-      placeholder={"Empty"}
+            className={`w-full custom-scroll ${left ? "min-h-32" : "h-full"}`}
-      // update to real value on flowPool
+            placeholder={"Empty"}
-      value={value}
+            // update to real value on flowPool
-      onChange={(e) => {if(onChange) onChange(e.target.value)}}
+            value={value}
-    />
+            onChange={(e) => { if (onChange) onChange(e.target.value) }}
-  );
+        />
+    );
 };
 
 export default TextEditorArea;

src/frontend/src/modals/textModal/index.tsx

@@ -24,10 +24,12 @@ export default function TextModal({
   children,
   value,
   setValue,
+  editable = false
 }: {
   children: JSX.Element;
   value: string;
   setValue: (value: string) => void;
+  editable?: boolean;
 }): JSX.Element {
   const [open, setOpen] = useState(false);
   const [internalValue, setInternalValue] = useState(value);
@@ -46,18 +48,18 @@ export default function TextModal({
       <BaseModal.Content>
         <div className="flex h-full w-full flex-col transition-all">
           <div className="h-[370px]">
-            <TextEditorArea onChange={(text)=>setInternalValue(text)} value={internalValue} left={false} />
+            <TextEditorArea readonly={!editable} onChange={(text) => setInternalValue(text)} value={internalValue} left={false} />
           </div>
         </div>
       </BaseModal.Content>
       <BaseModal.Footer>
         <div className="flex w-full justify-end gap-2 pt-2">
-          <Button className="flex gap-2 px-3" onClick={() => {
+          {editable && <Button className="flex gap-2 px-3" onClick={() => {
             setValue(internalValue);
             setOpen(false);
           }}>
             Save
-          </Button>
+          </Button>}
           <Button className="flex gap-2 px-3" onClick={() => setOpen(false)}>
             Close
           </Button>

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx

@@ -12,14 +12,14 @@ const useUpdateMessage = (setSuccessData, setErrorData) => {
       updateMessage(data);
 
       // Set success message
-      // setSuccessData({
+      setSuccessData({
-      //   title: "Messages updated successfully.",
+        title: "Messages updated successfully.",
-      // });
+      });
     } catch (error) {
       // Set error message
-      // setErrorData({
+      setErrorData({
-      //   title: "Error updating messages.",
+        title: "Error updating messages.",
-      // });
+      });
       return Promise.reject(error);
     }
   };