From de37410e5485cf6eeeaf6c11b7e5dac49c37c18c Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 6 Jun 2023 18:11:38 -0300
Subject: [PATCH] adding validator  when there are no options

---
 .../src/modals/EditNodeModal/index.tsx        | 51 +++++++++-------
 .../components/nodeToolbarComponent/index.tsx | 59 +++++++++++++------
 2 files changed, 71 insertions(+), 39 deletions(-)

diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 4d156bf72..45e4ff21a 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -27,11 +27,30 @@ import { VariableIcon } from "@heroicons/react/24/outline";
 
 export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);
+  const [nodeLength, setNodeLength] = useState(
+    Object.keys(data.node.template).filter(
+      (t) =>
+        t.charAt(0) !== "_" &&
+        data.node.template[t].show &&
+        (data.node.template[t].type === "str" ||
+          data.node.template[t].type === "bool" ||
+          data.node.template[t].type === "float" ||
+          data.node.template[t].type === "code" ||
+          data.node.template[t].type === "prompt" ||
+          data.node.template[t].type === "file" ||
+          data.node.template[t].type === "Any" ||
+          data.node.template[t].type === "int")
+    ).length
+  );
   const [nodeValue, setNodeValue] = useState(true);
   const { closePopUp } = useContext(PopUpContext);
   const { types } = useContext(typesContext);
   const ref = useRef();
   
+  if(nodeLength == 0){
+    closePopUp();
+  }
+
   function setModalOpen(x: boolean) {
     setOpen(x);
     if (x === false) {
@@ -85,7 +104,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
@@ -122,29 +141,19 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
 
                   </div>
 
-                    <div className="flex w-full h-[415px]">
+                    <div className="flex w-full h-fit max-h-[415px]">
 
                       <div
                         className={classNames(
                           "w-full rounded-lg bg-white dark:bg-gray-800 shadow",
-                          Object.keys(data.node.template).filter(
-                            (t) =>
-                              t.charAt(0) !== "_" &&
-                              data.node.template[t].show &&
-                              (data.node.template[t].type === "str" ||
-                                data.node.template[t].type === "bool" ||
-                                data.node.template[t].type === "float" ||
-                                data.node.template[t].type === "code" ||
-                                data.node.template[t].type === "prompt" ||
-                                data.node.template[t].type === "file" ||
-                                data.node.template[t].type === "Any" ||
-                                data.node.template[t].type === "int")
-                          ).length > limitScrollFieldsModal
+                          nodeLength > limitScrollFieldsModal
                           ? "overflow-scroll overflow-x-hidden custom-scroll"
                           : "overflow-hidden"
                         )}
                       >
-                        <div className="flex flex-col gap-5 h-fit">
+                        {
+                         nodeLength > 0 &&
+                          <div className="flex flex-col gap-5 h-fit">
                           <Table>
                             <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium">
                               <TableRow>
@@ -172,11 +181,11 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                 .map((n, i) => (
                                 <TableRow key={i} className="h-8">
                                   <TableCell className="p-0 text-center text-gray-900 text-xs">
-                                  {data.node.template[n].display_name
-                                        ? data.node.template[n].display_name
-                                        : data.node.template[n].name}
+                                  {data.node.template[n].name
+                                        ? data.node.template[n].name
+                                        : data.node.template[n].display_name}
                                   </TableCell>
-                                  <TableCell className="p-0 text-center text-gray-900 text-xs max-w-[140px]"
+                                  <TableCell className="p-0 text-center text-gray-900 text-xs w-[300px]"
 
                                   >
                                   {data.node.template[n].value
@@ -196,7 +205,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                               ))}
                             </TableBody>
                           </Table>
-                        </div>
+                        </div>}
                       </div>
                     </div>
                   </div>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 94a073319..46e59a0c0 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { Menu, Transition } from "@headlessui/react";
 import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";
 import {
@@ -18,6 +18,23 @@ import EditNodeModal from "../../../../modals/EditNodeModal";
 import TooltipReact from "../../../../components/ReactTooltipComponent";
 
 const NodeToolbarComponent = (props) => {
+
+  const [nodeLength, setNodeLength] = useState(
+    Object.keys(props.data.node.template).filter(
+      (t) =>
+        t.charAt(0) !== "_" &&
+        props.data.node.template[t].show &&
+        (props.data.node.template[t].type === "str" ||
+        props.data.node.template[t].type === "bool" ||
+        props.data.node.template[t].type === "float" ||
+        props.data.node.template[t].type === "code" ||
+        props.data.node.template[t].type === "prompt" ||
+        props.data.node.template[t].type === "file" ||
+        props.data.node.template[t].type === "Any" ||
+        props.data.node.template[t].type === "int")
+    ).length
+  );
+  
   const { setLastCopiedSelection, paste } = useContext(TabsContext);
   const reactFlowInstance = useReactFlow();
   return (
@@ -92,7 +109,12 @@ const NodeToolbarComponent = (props) => {
             position="top"
           >
             <button
-              className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+              className={
+                classNames(
+                  nodeLength > 0 ?
+                "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" : 
+                "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
+                )}
               onClick={(event) => {
                 event.preventDefault();
                 console.log(reactFlowInstance.getNode(props.data.id));
@@ -114,22 +136,23 @@ const NodeToolbarComponent = (props) => {
             </button>
           </TooltipReact>
 
-          <TooltipReact
-            delayShow={1000}
-            selector="Edit"
-            htmlContent="Edit"
-            position="top"
-          >
-            <button
-              className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
-              onClick={(event) => {
-                event.preventDefault();
-                props.openPopUp(<EditNodeModal data={props.data} />);
-              }}
-            >
-              <PencilSquareIcon className="w-5 h-5  dark:text-gray-300"></PencilSquareIcon>
-            </button>
-          </TooltipReact>
+{nodeLength > 0 &&           <TooltipReact
+    delayShow={1000}
+    selector="Edit"
+    htmlContent="Edit"
+    position="top"
+  >
+    <button
+      className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
+      onClick={(event) => {
+        event.preventDefault();
+        props.openPopUp(<EditNodeModal data={props.data} />);
+      }}
+    >
+      <PencilSquareIcon className="w-5 h-5  dark:text-gray-300"></PencilSquareIcon>
+    </button>
+  </TooltipReact>}
+
 
           {/* 
           <Menu as="div" className="relative inline-block text-left z-100">