From 7f993ea908cb6cba5ea43d33a1be8a60b68588f6 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 2 May 2023 19:54:05 -0300
Subject: [PATCH] fixed outside click on alert popup

---
 .../components/tabsManagerComponent/index.tsx | 181 +++++++++---------
 1 file changed, 93 insertions(+), 88 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index 6f9773a51..7a7526906 100644
--- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -5,11 +5,11 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 import FlowPage from "../..";
 import { darkContext } from "../../../../contexts/darkContext";
 import {
-  ArrowDownTrayIcon,
-  ArrowUpTrayIcon,
-  BellIcon,
-  MoonIcon,
-  SunIcon,
+	ArrowDownTrayIcon,
+	ArrowUpTrayIcon,
+	BellIcon,
+	MoonIcon,
+	SunIcon,
 } from "@heroicons/react/24/outline";
 import { PopUpContext } from "../../../../contexts/popUpContext";
 import AlertDropdown from "../../../../alerts/alertDropDown";
@@ -22,96 +22,101 @@ export default function TabsManagerComponent() {
 	const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } =
 		useContext(TabsContext);
 	const { openPopUp } = useContext(PopUpContext);
-	const {templates} = useContext(typesContext)
+	const { templates } = useContext(typesContext);
 	const AlertWidth = 256;
 	const { dark, setDark } = useContext(darkContext);
 	const { notificationCenter, setNotificationCenter } =
 		useContext(alertContext);
 	useEffect(() => {
 		//create the first flow
-		if (flows.length === 0&& Object.keys(templates).length>0) {
+		if (flows.length === 0 && Object.keys(templates).length > 0) {
 			addFlow();
 		}
-	}, [addFlow, flows.length,templates]);
+	}, [addFlow, flows.length, templates]);
 
-  return (
-    <div className="h-full w-full flex flex-col">
-      <div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-gray-800 px-2">
-        {flows.map((flow, index) => {
-          return (
-            <TabComponent
-              onClick={() => setTabIndex(index)}
-              selected={index === tabIndex}
-              key={index}
-              flow={flow}
-            />
-          );
-        })}
-        <TabComponent
-          onClick={() => {
-            addFlow();
-          }}
-          selected={false}
-          flow={null}
-        />
-        <div className="ml-auto mr-2 flex gap-3">
-          <button
-            onClick={() => openPopUp(<ImportModal />)}
-            className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500"
-          >
-            Import <ArrowUpTrayIcon className="w-5 h-5" />
-          </button>
-          <button
-            onClick={() => openPopUp(<ExportModal />)}
-            className="flex items-center gap-1 mr-2 text-sm text-gray-600 hover:text-gray-500"
-          >
-            Export <ArrowDownTrayIcon className="h-5 w-5" />
-          </button>
-          <button
-            className="text-gray-600 hover:text-gray-500 "
-            onClick={() => {
-              setDark(!dark);
-            }}
-          >
-            {dark ? (
-              <SunIcon className="h-5 w-5" />
-            ) : (
-              <MoonIcon className="h-5 w-5" />
-            )}
-          </button>
-          <button
-            className="text-gray-600 hover:text-gray-500 relative"
-            onClick={(event: React.MouseEvent<HTMLElement>) => {
-              setNotificationCenter(false);
-              const top = (event.target as Element).getBoundingClientRect().top;
-              const left = (event.target as Element).getBoundingClientRect()
-                .left;
-              openPopUp(
-                <div
-                  className="z-10 absolute"
-                  style={{ top: top + 20, left: left - AlertWidth }}
-                >
-                  <AlertDropdown />
-                </div>
-              );
-            }}
-          >
-            {notificationCenter && (
-              <div className="absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]"></div>
-            )}
-            <BellIcon className="h-5 w-5" aria-hidden="true" />
-          </button>
-        </div>
-      </div>
-      <div className="w-full h-full">
-        <ReactFlowProvider>
-          {flows[tabIndex] ? (
-            <FlowPage flow={flows[tabIndex]}></FlowPage>
-          ) : (
-            <></>
-          )}
-        </ReactFlowProvider>
-      </div>
-    </div>
-  );
+	return (
+		<div className="h-full w-full flex flex-col">
+			<div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-gray-800 px-2">
+				{flows.map((flow, index) => {
+					return (
+						<TabComponent
+							onClick={() => setTabIndex(index)}
+							selected={index === tabIndex}
+							key={index}
+							flow={flow}
+						/>
+					);
+				})}
+				<TabComponent
+					onClick={() => {
+						addFlow();
+					}}
+					selected={false}
+					flow={null}
+				/>
+				<div className="ml-auto mr-2 flex gap-3">
+					<button
+						onClick={() => openPopUp(<ImportModal />)}
+						className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500"
+					>
+						Import <ArrowUpTrayIcon className="w-5 h-5" />
+					</button>
+					<button
+						onClick={() => openPopUp(<ExportModal />)}
+						className="flex items-center gap-1 mr-2 text-sm text-gray-600 hover:text-gray-500"
+					>
+						Export <ArrowDownTrayIcon className="h-5 w-5" />
+					</button>
+					<button
+						className="text-gray-600 hover:text-gray-500 "
+						onClick={() => {
+							setDark(!dark);
+						}}
+					>
+						{dark ? (
+							<SunIcon className="h-5 w-5" />
+						) : (
+							<MoonIcon className="h-5 w-5" />
+						)}
+					</button>
+					<button
+						className="text-gray-600 hover:text-gray-500 relative"
+						onClick={(event: React.MouseEvent<HTMLElement>) => {
+							setNotificationCenter(false);
+							const top = (event.target as Element).getBoundingClientRect().top;
+							const left = (event.target as Element).getBoundingClientRect()
+								.left;
+							openPopUp(
+								<>
+									<div
+										className="z-10 absolute"
+										style={{ top: top + 20, left: left - AlertWidth }}
+									>
+										<AlertDropdown />
+									</div>
+                  <div className="h-screen w-screen fixed top-0 left-0">
+                    
+                  </div>
+								</>
+							);
+						}}
+					>
+						{notificationCenter && (
+							<div className="absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]"></div>
+						)}
+						<BellIcon className="h-5 w-5" aria-hidden="true" />
+					</button>
+				</div>
+			</div>
+			<div className="w-full h-full">
+				<ReactFlowProvider>
+					{flows[tabIndex] ? (
+						<FlowPage flow={flows[tabIndex]}></FlowPage>
+					) : (
+						<></>
+					)}
+				</ReactFlowProvider>
+			</div>
+		</div>
+	);
 }