From bef1cc096c0e84139e1933b72ee04bd4c49f9512 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 25 May 2023 19:56:42 -0300
Subject: [PATCH] Fixed Copy Paste issues by disabling it when the user clicks
 at the node

---
 .../src/components/floatComponent/index.tsx   |  8 +------
 .../src/components/inputComponent/index.tsx   |  8 +------
 .../components/inputListComponent/index.tsx   |  7 -------
 .../src/components/intComponent/index.tsx     |  8 +------
 .../src/modals/chatModal/chatInput/index.tsx  |  8 -------
 .../src/modals/codeAreaModal/index.tsx        |  7 -------
 src/frontend/src/modals/exportModal/index.tsx | 21 ++-----------------
 .../components/tabComponent/index.tsx         |  6 +-----
 src/frontend/src/pages/FlowPage/index.tsx     |  7 ++++++-
 9 files changed, 12 insertions(+), 68 deletions(-)

diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index c09f3b9e0..2752db43c 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -14,7 +14,6 @@ export default function FloatComponent({
 			onChange("");
 		}
 	}, [disabled, onChange]);
-	const {setDisableCopyPaste} =  useContext(TabsContext)
 	return (
 		<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
 			<input
@@ -29,12 +28,7 @@ export default function FloatComponent({
 					setMyValue(e.target.value);
 					onChange(e.target.value);
 				}}
-				onBlur={() => {
-					setDisableCopyPaste(false)
-				}}
-				onFocus={() => {
-					setDisableCopyPaste(true)
-				}}
+				
 			/>
 		</div>
 	);
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index b4f52902d..648458f2b 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -11,7 +11,6 @@ export default function InputComponent({
 }: InputComponentType) {
 	const [myValue, setMyValue] = useState(value ?? "");
 	const [pwdVisible, setPwdVisible] = useState(false);
-	const {setDisableCopyPaste} =  useContext(TabsContext)
 	useEffect(() => {
 		if (disabled) {
 			setMyValue("");
@@ -28,12 +27,7 @@ export default function InputComponent({
 		>
 			<input
 				value={myValue}
-				onBlur={() => {
-					setDisableCopyPaste(false)
-				}}
-				onFocus={() => {
-					setDisableCopyPaste(true)
-				}}
+				
 				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/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 57ddd7a4e..01f783ad6 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -17,7 +17,6 @@ export default function InputListComponent({
 			onChange([""]);
 		}
 	}, [disabled, onChange]);
-	const {setDisableCopyPaste} = useContext(TabsContext)
 	return (
 		<div
 			className={
@@ -43,12 +42,6 @@ export default function InputListComponent({
 							});
 							onChange(inputList);
 						}}
-						onBlur={() => {
-							setDisableCopyPaste(false)
-						}}
-						onFocus={() => {
-							setDisableCopyPaste(true)
-						}}
 					/>
 					{idx === inputList.length - 1 ? (
 						<button
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index c66f5e156..b2713b369 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -14,7 +14,6 @@ export default function IntComponent({
 			onChange("");
 		}
 	}, [disabled, onChange]);
-	const {setDisableCopyPaste} =useContext(TabsContext)
 	return (
 		<div
 			className={
@@ -45,12 +44,7 @@ export default function IntComponent({
 					setMyValue(e.target.value);
 					onChange(e.target.value);
 				}}
-				onBlur={() => {
-					setDisableCopyPaste(false)
-				}}
-				onFocus={() => {
-					setDisableCopyPaste(true)
-				}}
+				
 			/>
 			
 		</div>
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 5cddb9c14..5a979499a 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -17,8 +17,6 @@ export default function ChatInput({
     }
   }, [chatValue]);
 
-  const { setDisableCopyPaste } = useContext(TabsContext);
-
   return (
     <div className="relative">
       <textarea
@@ -27,12 +25,6 @@ export default function ChatInput({
             sendMessage();
           }
         }}
-        onBlur={() => {
-          setDisableCopyPaste(false)
-        }}
-        onFocus={() => {
-          setDisableCopyPaste(true)
-        }}
         rows={1}
         ref={inputRef}
         disabled={lockChat}
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index dc3e5ab1f..77ebf45c1 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -23,7 +23,6 @@ export default function CodeAreaModal({
 	const [code, setCode] = useState(value);
 	const { dark } = useContext(darkContext);
 	const { setErrorData, setSuccessData } = useContext(alertContext);
-	const { setDisableCopyPaste } = useContext(TabsContext);
 	const { closePopUp } = useContext(PopUpContext);
 	const ref = useRef();
 	function setModalOpen(x: boolean) {
@@ -111,12 +110,6 @@ export default function CodeAreaModal({
 													onChange={(value) => {
 														setCode(value);
 													}}
-													onBlur={() => {
-														setDisableCopyPaste(false)
-													}}
-													onFocus={() => {
-														setDisableCopyPaste(true)
-													}}
 													className="h-full w-full rounded-lg"
 												/>
 											</div>
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index a81c62053..44b8d7992 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -16,7 +16,7 @@ export default function ExportModal() {
 	const { closePopUp } = useContext(PopUpContext);
 	const ref = useRef();
 	const { setErrorData } = useContext(alertContext);
-	const { flows, tabIndex, updateFlow, downloadFlow,setDisableCopyPaste } = useContext(TabsContext);
+	const { flows, tabIndex, updateFlow, downloadFlow } = useContext(TabsContext);
 	function setModalOpen(x: boolean) {
 		setOpen(x);
 		if (x === false) {
@@ -113,12 +113,6 @@ export default function ExportModal() {
 												placeholder="File name"
 												id="name"
 												className="focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500 text-gray-900 dark:text-gray-100"
-												onBlur={() => {
-													setDisableCopyPaste(false);
-												}}
-												onFocus={() => {
-													setDisableCopyPaste(true);
-												}}
 											/>
 										</div>
 										<div className="w-full">
@@ -133,12 +127,6 @@ export default function ExportModal() {
 												</span>
 											</label>
 											<textarea
-												onBlur={() => {
-													setDisableCopyPaste(false);
-												}}
-												onFocus={() => {
-													setDisableCopyPaste(true);
-												}}
 												name="description"
 												id="description"
 												onChange={(event) => {
@@ -163,12 +151,7 @@ export default function ExportModal() {
 													id="checkbox"
 													type="checkbox"
 													className="h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-													onBlur={() => {
-														setDisableCopyPaste(false);
-													}}
-													onFocus={() => {
-														setDisableCopyPaste(true);
-													}}
+
 												/>
 												<span className="ml-2 font-medium text-gray-700 dark:text-white">
 													Save with my API keys
diff --git a/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
index 525a63ca7..5f7f934d2 100644
--- a/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
@@ -14,7 +14,7 @@ export default function TabComponent({
 	selected: boolean;
 	onClick: () => void;
 }) {
-	const { removeFlow, updateFlow, flows, setDisableCopyPaste } = useContext(TabsContext);
+	const { removeFlow, updateFlow, flows } = useContext(TabsContext);
 	const [isRename, setIsRename] = useState(false);
 	const [value, setValue] = useState("");
 	return (
@@ -40,14 +40,10 @@ export default function TabComponent({
 					<div className="bg-white dark:text-white dark:bg-gray-700/60 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1 rounded-t-xl -ml-px">
 						{isRename ? (
 							<input
-								onFocus={() => {
-									setDisableCopyPaste(true);
-								}}
 								autoFocus
 								className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md  w-28"
 								onBlur={() => {
 									setIsRename(false);
-									setDisableCopyPaste(false);
 									if (value !== "") {
 										let newFlow = _.cloneDeep(flow);
 										newFlow.name = value;
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index e7978cc16..0e29e0364 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -306,8 +306,10 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
     setLastSelection(flow);
   }, []);
 
+  const {setDisableCopyPaste} =  useContext(TabsContext)
+
   return (
-    <div className="w-full h-full" ref={reactFlowWrapper}>
+    <div className="w-full h-full" ref={reactFlowWrapper} >
       {Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? (
         <>
           <ReactFlow
@@ -316,6 +318,9 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
               updateFlow({ ...flow, data: reactFlowInstance.toObject() });
             }}
             edges={edges}
+            onPaneClick={() => {setDisableCopyPaste(false);}}
+            onNodeClick={() => {setDisableCopyPaste(true);}}
+            onPaneMouseLeave={() => {setDisableCopyPaste(true);}}
             onNodesChange={onNodesChange}
             onEdgesChange={onEdgesChangeMod}
             onConnect={onConnect}