fix(parameterComponent): add readonly prop to CodeAreaComponent and PromptAreaComponent based on dynamic property in template

fix(GenericNode): remove console.log statement
fix(codeAreaComponent): add readonly prop to CodeAreaModal
fix(codeTabsComponent): add readonly prop to CodeAreaComponent and PromptAreaComponent
fix(promptComponent): add readonly prop to GenericModal
fix(EditNodeModal): add readonly prop to CodeAreaComponent
fix(codeAreaModal): add readonly prop to AceEditor in CodeAreaModal
fix(genericModal): add readonly prop to Textarea in GenericModal
fix(reactflowUtils): remove unnecessary code in updateGroupNodeTemplate function

src/backend/langflow/template/frontend_node/prompts.py

@@ -43,6 +43,7 @@ class PromptFrontendNode(FrontendNode):
 
         # All prompt fields should be password=False
         field.password = False
+        field.dynamic = True
 
 
 class PromptTemplateNode(FrontendNode):

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -299,6 +299,7 @@ export default function ParameterComponent({
         ) : left === true && type === "code" ? (
           <div className="mt-2 w-full">
             <CodeAreaComponent
+              readonly={data.node?.flow && data.node.template[name].dynamic?true:false}
               dynamic={data.node?.template[name].dynamic ?? false}
               setNodeClass={(nodeClass) => {
                 data.node = nodeClass;
@@ -334,6 +335,7 @@ export default function ParameterComponent({
         ) : left === true && type === "prompt" ? (
           <div className="mt-2 w-full">
             <PromptAreaComponent
+              readonly={data.node?.flow && data.node.template[name].dynamic?true:false}
               field_name={name}
               setNodeClass={(nodeClass) => {
                 data.node = nodeClass;

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -74,6 +74,7 @@ export default function GenericNode({
       setValidationStatus(null);
     }
   }, [sseData, data.id]);
+  console.log(data.node)
 
   return (
     <>

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -12,6 +12,7 @@ export default function CodeAreaComponent({
   nodeClass,
   dynamic,
   setNodeClass,
+  readonly=false
 }: CodeAreaComponentType) {
   const [myValue, setMyValue] = useState(
     typeof value == "string" ? value : JSON.stringify(value)
@@ -30,6 +31,7 @@ export default function CodeAreaComponent({
   return (
     <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
       <CodeAreaModal
+        readonly={readonly}
         dynamic={dynamic}
         value={myValue}
         nodeClass={nodeClass}

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -633,6 +633,7 @@ export default function CodeTabsComponent({
                                               >
                                                 <div className="mx-auto">
                                                   <PromptAreaComponent
+                                                    readonly={node.data.node?.flow && node.data.node.template[templateField].dynamic? true : false}
                                                     editNode={true}
                                                     disabled={false}
                                                     value={
@@ -688,6 +689,7 @@ export default function CodeTabsComponent({
                                               >
                                                 <div className="mx-auto">
                                                   <CodeAreaComponent
+                                                    readonly={node.data.node?.flow && node.data.node.template[templateField].dynamic? true : false}
                                                     disabled={false}
                                                     editNode={true}
                                                     value={

src/frontend/src/components/promptComponent/index.tsx

@@ -14,6 +14,7 @@ export default function PromptAreaComponent({
   onChange,
   disabled,
   editNode = false,
+  readonly=false
 }: TextAreaComponentType): JSX.Element {
   useEffect(() => {
     if (disabled) {
@@ -22,7 +23,7 @@ export default function PromptAreaComponent({
   }, [disabled]);
 
   useEffect(() => {
-    if (value !== "" && !editNode) {
+    if (value !== "" && !editNode && !readonly) {
       postValidatePrompt(field_name!, value, nodeClass!).then((apiReturn) => {
         if (apiReturn.data) {
           setNodeClass!(apiReturn.data.frontend_node);
@@ -35,6 +36,7 @@ export default function PromptAreaComponent({
   return (
     <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
       <GenericModal
+        readonly={readonly}
         type={TypeModal.PROMPT}
         value={value}
         buttonText="Check & Save"

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -297,6 +297,7 @@ const EditNodeModal = forwardRef(
                                 "prompt" ? (
                                 <div className="mx-auto">
                                   <PromptAreaComponent
+                                    readonly={myData.node?.flow && myData.node.template[templateParam].dynamic? true : false}
                                     field_name={templateParam}
                                     editNode={true}
                                     disabled={disabled}
@@ -317,6 +318,7 @@ const EditNodeModal = forwardRef(
                                 "code" ? (
                                 <div className="mx-auto">
                                   <CodeAreaComponent
+                                    readonly={myData.node?.flow && myData.node.template[templateParam].dynamic? true : false}
                                     dynamic={
                                       data.node!.template[templateParam]
                                         .dynamic ?? false

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -23,6 +23,7 @@ export default function CodeAreaModal({
   setNodeClass,
   children,
   dynamic,
+  readonly=false
 }: codeAreaModalPropsType): JSX.Element {
   const [code, setCode] = useState(value);
   const { dark } = useContext(darkContext);
@@ -147,6 +148,7 @@ export default function CodeAreaModal({
         <div className="flex h-full w-full flex-col transition-all">
           <div className="h-full w-full">
             <AceEditor
+              readOnly={readonly}
               value={code}
               mode="python"
               height={height ?? "100%"}
@@ -181,7 +183,7 @@ export default function CodeAreaModal({
             </div>
           </div>
           <div className="flex h-fit w-full justify-end">
-            <Button className="mt-3" onClick={handleClick} type="submit">
+            <Button disabled={readonly} className="mt-3" onClick={handleClick} type="submit">
               Check & Save
             </Button>
           </div>

src/frontend/src/modals/genericModal/index.tsx

@@ -34,6 +34,7 @@ export default function GenericModal({
   nodeClass,
   setNodeClass,
   children,
+  readonly=false,
 }: genericModalPropsType): JSX.Element {
   const [myButtonText] = useState(buttonText);
   const [myModalTitle] = useState(modalTitle);
@@ -194,7 +195,7 @@ export default function GenericModal({
               "flex h-full w-full"
             )}
           >
-            {type === TypeModal.PROMPT && isEdit ? (
+            {type === TypeModal.PROMPT && isEdit && !readonly ? (
               <Textarea
                 ref={divRefPrompt}
                 className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
@@ -212,7 +213,7 @@ export default function GenericModal({
                   handleKeyDown(e, inputValue, "");
                 }}
               />
-            ) : type === TypeModal.PROMPT && !isEdit ? (
+            ) : type === TypeModal.PROMPT && (!isEdit || readonly) ? (
               <TextAreaContentView />
             ) : type !== TypeModal.PROMPT ? (
               <Textarea
@@ -227,6 +228,7 @@ export default function GenericModal({
                 onKeyDown={(e) => {
                   handleKeyDown(e, value, "");
                 }}
+                readOnly={readonly}
               />
             ) : (
               <></>
@@ -283,6 +285,7 @@ export default function GenericModal({
               )}
             </div>
             <Button
+            disabled={readonly}
               onClick={() => {
                 switch (myModalType) {
                   case TypeModal.TEXT:

src/frontend/src/types/components/index.ts

@@ -65,6 +65,7 @@ export type TextAreaComponentType = {
   onChange: (value: string[] | string) => void;
   value: string;
   editNode?: boolean;
+  readonly?: boolean;
 };
 
 export type CodeAreaComponentType = {
@@ -75,6 +76,7 @@ export type CodeAreaComponentType = {
   nodeClass?: APIClassType;
   setNodeClass?: (value: APIClassType) => void;
   dynamic?: boolean;
+  readonly?: boolean;
 };
 
 export type FileComponentType = {

src/frontend/src/utils/reactflowUtils.ts

@@ -533,9 +533,6 @@ function updateGroupNodeTemplate(template: APITemplateType) {
       !input_types
     ) {
       template[key].advanced = true;
-      if (template[key].dynamic) {
-        template[key].readonly = true;
-      }
     }
   });
   return template;