From a33a4f418cc39778066b245df1eb2ace1dd8686a Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 29 May 2023 18:25:10 -0300
Subject: [PATCH] Adding scrollbar on overflow itens modal

---
 .../src/components/inputComponent/index.tsx   | 10 ++++---
 .../NodeModal/components/ModalField/index.tsx | 22 ++++++++++++++--
 src/frontend/src/modals/NodeModal/index.tsx   | 26 ++++++++++++++++---
 src/frontend/src/pages/FlowPage/index.tsx     |  2 +-
 src/frontend/src/utils.ts                     |  2 ++
 5 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 15675d621..5430795e9 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -12,7 +12,7 @@ export default function InputComponent({
 }: InputComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
   const [pwdVisible, setPwdVisible] = useState(false);
-  const {setDisableCopyPaste} = useContext(TabsContext);
+  const { setDisableCopyPaste } = useContext(TabsContext);
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -29,8 +29,12 @@ export default function InputComponent({
     >
       <input
         value={myValue}
-        onFocus={() => {if(disableCopyPaste) setDisableCopyPaste(true)}}
-        onBlur={() => {if(disableCopyPaste) setDisableCopyPaste(false)}}
+        onFocus={() => {
+          if (disableCopyPaste) setDisableCopyPaste(true);
+        }}
+        onBlur={() => {
+          if (disableCopyPaste) setDisableCopyPaste(false);
+        }}
         className={classNames(
           "block w-full pr-12 form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
           disabled ? " bg-gray-200 dark:bg-gray-700" : "",
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index 0c19b9611..0890b25a1 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -12,7 +12,15 @@ import PromptAreaComponent from "../../../../components/promptComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import { classNames } from "../../../../utils";
 
-export default function ModalField({ data, title, required, id, name, type }) {
+export default function ModalField({
+  data,
+  title,
+  required,
+  id,
+  name,
+  type,
+  index,
+}) {
   const { save } = useContext(TabsContext);
   const [enabled, setEnabled] = useState(
     data.node.template[name]?.value ?? false
@@ -30,7 +38,17 @@ export default function ModalField({ data, title, required, id, name, type }) {
     <div
       className={classNames(
         "flex flex-row w-full items-center justify-between",
-        display ? "" : "hidden"
+        display ? "" : "hidden",
+        Object.keys(data.node.template).filter(
+          (t) =>
+            t.charAt(0) !== "_" &&
+            data.node.template[t].advanced &&
+            data.node.template[t].show
+        ).length -
+          1 ===
+          index
+          ? "pb-4"
+          : ""
       )}
     >
       {display && (
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 57c5a56e3..b44dd5bf3 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -3,7 +3,14 @@ import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { NodeDataType } from "../../types/flow";
-import { nodeColors, nodeIcons, toNormalCase, toTitleCase } from "../../utils";
+import {
+  classNames,
+  limitScrollFieldsModal,
+  nodeColors,
+  nodeIcons,
+  toNormalCase,
+  toTitleCase,
+} from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ModalField from "./components/ModalField";
 
@@ -84,8 +91,20 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                     </div>
                   </div>
                   <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
-                    <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 sm:p-4  w-full rounded-lg bg-white dark:bg-gray-800 shadow">
+                    <div className="flex w-full h-[445px]">
+                      <div
+                        className={classNames(
+                          "px-4 sm:p-4 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].advanced &&
+                              data.node.template[t].show
+                          ).length > limitScrollFieldsModal
+                            ? "overflow-scroll overflow-x-hidden custom-scroll"
+                            : "overflow-hidden"
+                        )}
+                      >
                         <div className="flex flex-col h-full gap-5">
                           {Object.keys(data.node.template)
                             .filter(
@@ -116,6 +135,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                                   }
                                   name={t}
                                   type={data.node.template[t].type}
+                                  index={idx}
                                 />
                               );
                             })}
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 91c853f9b..f1a1f3b74 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -318,7 +318,7 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
               setDisableCopyPaste(false);
             }}
             onPaneMouseLeave={() => {
-              console.log("saiu o mouse")
+              console.log("saiu o mouse");
               setDisableCopyPaste(true);
             }}
             onNodesChange={onNodesChange}
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 5084d1076..d8595b080 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -25,6 +25,8 @@ export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
 }
 
+export const limitScrollFieldsModal = 7;
+
 export enum TypeModal {
   TEXT = 1,
   PROMPT = 2,