From 1a9ed4d94b69a92eb5c762b62f539baa5ca04179 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 14 Jun 2023 21:19:27 -0300
Subject: [PATCH] Adjust on changing components on edit mode

---
 .../components/parameterComponent/index.tsx   | 78 ++++++++++---------
 .../src/CustomNodes/GenericNode/index.tsx     |  8 +-
 .../components/codeAreaComponent/index.tsx    |  5 ++
 .../src/components/floatComponent/index.tsx   |  5 ++
 .../components/menuBar/index.tsx              | 23 +++---
 .../src/components/intComponent/index.tsx     |  5 ++
 .../src/components/promptComponent/index.tsx  |  7 +-
 .../extraSidebarComponent/index.tsx           |  4 +-
 src/frontend/src/types/components/index.ts    |  2 +
 9 files changed, 77 insertions(+), 60 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 972082c76..cbb6cc874 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -39,6 +39,7 @@ export default function ParameterComponent({
 }: ParameterComponentType) {
   const ref = useRef(null);
   const refHtml = useRef(null);
+  const refData = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
   const { closePopUp } = useContext(PopUpContext);
@@ -59,57 +60,57 @@ export default function ParameterComponent({
   );
 
   useEffect(() => {  
-    
   }, [closePopUp, data.node.template]);
 
   const { reactFlowInstance } = useContext(typesContext);
   let disabled =
     reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
+
   const [myData, setMyData] = useState(useContext(typesContext).data);
 
   useEffect(() => {
-    const groupedObj = groupByFamily(myData, tooltipTitle);
-
-    refHtml.current = groupedObj.map((item, i) => (
-      <span
-        key={i}
-        className={classNames(
-          i > 0 ? "items-center flex mt-3" : "items-center flex"
-        )}
-      >
-        <div
-          className="h-5 w-5"
-          style={{
-            color: nodeColors[item.family],
-          }}
+      const groupedObj = groupByFamily(myData, tooltipTitle);
+      refHtml.current = groupedObj.map((item, i) => (
+        <span
+          key={i}
+          className={classNames(
+            i > 0 ? "items-center flex mt-3" : "items-center flex"
+          )}
         >
-          {React.createElement(nodeIcons[item.family])}
-        </div>
-        <span className="ps-2 text-gray-950">
-          {nodeNames[item.family] ?? ""}{" "}
-          <span className={classNames(left ? "hidden" : "")}>
-            {" "}
-            -&nbsp;
-            {item.type.split(", ").length > 2
-              ? item.type.split(", ").map((el, i) => (
-                  <>
-                    <span key={i}>
-                      {i == item.type.split(", ").length - 1
-                        ? el
-                        : (el += `, `)}
-                    </span>
-                    {i % 2 == 0 && i > 0 && <br></br>}
-                  </>
-                ))
-              : item.type}
+          <div
+            className="h-5 w-5"
+            style={{
+              color: nodeColors[item.family],
+            }}
+          >
+            {React.createElement(nodeIcons[item.family])}
+          </div>
+          <span className="ps-2 text-gray-950">
+            {nodeNames[item.family] ?? ""}{" "}
+            <span className={classNames(left ? "hidden" : "")}>
+              {" "}
+              -&nbsp;
+              {item.type.split(", ").length > 2
+                ? item.type.split(", ").map((el, i) => (
+                    <>
+                      <span key={i}>
+                        {i == item.type.split(", ").length - 1
+                          ? el
+                          : (el += `, `)}
+                      </span>
+                      {i % 2 == 0 && i > 0 && <br></br>}
+                    </>
+                  ))
+                : item.type}
+            </span>
           </span>
         </span>
-      </span>
-    ));
+      ));
   }, [tooltipTitle]);
 
   return (
-    <div
+    <>
+        <div
       ref={ref}
       className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
     >
@@ -234,6 +235,7 @@ export default function ParameterComponent({
             value={data.node.template[name].value ?? ""}
             onChange={(t: string) => {
               data.node.template[name].value = t;
+              
             }}
           />
         ) : left === true && type === "file" ? (
@@ -276,5 +278,7 @@ export default function ParameterComponent({
         )}
       </>
     </div>
+    </>
+
   );
 }
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 396c22f63..a94c2a3a5 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -59,11 +59,6 @@ export default function GenericNode({
     }
   }, []);
 
-  useEffect(() => { 
-    console.log(data.node.template);
-     
-  }, [closePopUp, data.node.template]);
-
   const validateNode = useCallback(
     debounce(async () => {
       try {
@@ -106,6 +101,9 @@ export default function GenericNode({
     return;
   }
 
+  useEffect(() => {  
+  }, [closePopUp, data.node.template]);
+
   return (
     <>
       <NodeToolbar>
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index f668c5cdd..399ab40b2 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -20,6 +20,11 @@ export default function CodeAreaComponent({
       onChange("");
     }
   }, [disabled, onChange]);
+
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
+
   return (
     <div
       className={
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 8fef867ab..aadc516ed 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -23,6 +23,11 @@ export default function FloatComponent({
       onChange("");
     }
   }, [disabled, onChange]);
+
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
+  
   return (
     <div
       className={
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index f26069963..2087c2a8c 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -24,6 +24,7 @@ import { alertContext } from "../../../../contexts/alertContext";
 import { Link } from "react-router-dom";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
+import { Button } from "../../../ui/button";
 
 export const MenuBar = ({ flows, tabId }) => {
   const { updateFlow, setTabId, addFlow } = useContext(TabsContext);
@@ -46,23 +47,17 @@ export const MenuBar = ({ flows, tabId }) => {
       <Link to="/">
         <ChevronLeft className="w-5" />
       </Link>
-      <div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 bg-background gap-0.5">
-        {/* <RenameLabel
-          value={current_flow.name}
-          setValue={(value) => {
-            if (value !== "") {
-              let newFlow = _.cloneDeep(current_flow);
-              newFlow.name = value;
-              updateFlow(newFlow);
-            }
-          }}
-          rename={rename}
-          setRename={setRename}
-        /> */}
+      <div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 gap-0.5">
         <DropdownMenu>
-          <DropdownMenuTrigger className="px-1 gap-2 flex items-center">
+          <DropdownMenuTrigger >
+          <Button
+          className="gap-2 flex items-center"
+            variant="primary"
+          >
             {current_flow.name}
             <ChevronDown className="w-4 h-4" />
+          </Button>
+
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-44">
             <DropdownMenuLabel>Edit</DropdownMenuLabel>
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 541e5de5d..4c8ecca6d 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -21,6 +21,11 @@ export default function IntComponent({
       onChange("");
     }
   }, [disabled, onChange]);
+
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
+
   return (
     <div
       className={
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index df8070a2a..86ea8f301 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -1,8 +1,6 @@
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
-import CodeAreaModal from "../../modals/codeAreaModal";
-import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
@@ -22,6 +20,11 @@ export default function PromptAreaComponent({
       onChange("");
     }
   }, [disabled, onChange]);
+
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
+  
   return (
     <div
       className={
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index fd8f23dbd..84c1c16f4 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -76,7 +76,7 @@ export default function ExtraSidebar() {
   }
 
   return (
-    <div className="flex flex-col overflow-hidden scrollbar-hide h-full border-r">
+    <div className="flex flex-col overflow-hidden scrollbar-hide h-full border-r w-[200px]">
       <div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
         <ShadTooltip delayDuration={1000} content="Import" side="top">
           <button
@@ -127,7 +127,7 @@ export default function ExtraSidebar() {
         </ShadTooltip>
       </div>
       <Separator />
-      <div className="relative mt-2 flex items-center mb-2 mx-2">
+      <div className="relative mt-2 flex items-center mb-2 mx-auto">
         <input
           type="text"
           name="search"
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 060bd6d05..1c8133637 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -6,6 +6,7 @@ import {
   SVGProps,
 } from "react";
 import { NodeDataType } from "../flow/index";
+import { typesContextType } from "../typesContext";
 export type InputComponentType = {
   value: string;
   disabled?: boolean;
@@ -38,6 +39,7 @@ export type ParameterComponentType = {
   required?: boolean;
   name?: string;
   tooltipTitle: string;
+  dataContext?: typesContextType;
 };
 export type InputListComponentType = {
   value: string[];