From 917cc51148b200f0e8f9aebef4d9c60c0a7c5e88 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Thu, 27 Apr 2023 17:01:51 -0300
Subject: [PATCH] Refactor alertDropDown components

Adjust singleAlertComponent's formatting for better readability and add a custom hook to handle click outside functionality in alertDropdown component.
---
 .../components/singleAlertComponent/index.tsx | 238 +++++++------
 .../src/alerts/alertDropDown/index.tsx        | 119 +++----
 .../alerts/hooks/useOnClickOutside/index.ts   |  33 ++
 src/frontend/src/modals/exportModal/index.tsx | 332 +++++++++---------
 .../components/tabsManagerComponent/index.tsx | 201 ++++++-----
 src/frontend/src/types/alerts/index.ts        |  37 +-
 6 files changed, 509 insertions(+), 451 deletions(-)
 create mode 100644 src/frontend/src/alerts/hooks/useOnClickOutside/index.ts

diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index 576dfb0b8..d9428a34b 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -1,15 +1,23 @@
-import { XCircleIcon, XMarkIcon, InformationCircleIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
+import {
+  XCircleIcon,
+  XMarkIcon,
+  InformationCircleIcon,
+  CheckCircleIcon,
+} from "@heroicons/react/24/outline";
 import { Link } from "react-router-dom";
 import { Transition } from "@headlessui/react";
 import { useState } from "react";
 import { SingleAlertComponentType } from "../../../../types/alerts";
 
-export default function SingleAlert({ dropItem, removeAlert}:SingleAlertComponentType) {
-    const [show, setShow] = useState(true);
-    const type = dropItem.type;
+export default function SingleAlert({
+  dropItem,
+  removeAlert,
+}: SingleAlertComponentType) {
+  const [show, setShow] = useState(true);
+  const type = dropItem.type;
 
-    return (
-        <Transition
+  return (
+    <Transition
       className="relative"
       show={show}
       appear={true}
@@ -20,115 +28,127 @@ export default function SingleAlert({ dropItem, removeAlert}:SingleAlertComponen
       leaveFrom={"transform translate-x-0"}
       leaveTo={"transform translate-x-[-100%]"}
     >
-        {type === "error"? 
-          <div className="flex bg-red-50 rounded-md p-3 mb-2 mx-2" key={dropItem.id}>
-            <div className="flex-shrink-0">
-              <XCircleIcon
-                className="h-5 w-5 text-red-400"
-                aria-hidden="true"
-              />
+      {type === "error" ? (
+        <div
+          className="flex bg-red-50 rounded-md p-3 mb-2 mx-2"
+          key={dropItem.id}
+        >
+          <div className="flex-shrink-0">
+            <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+          </div>
+          <div className="ml-3">
+            <h3 className="text-sm font-medium text-red-800">
+              {dropItem.title}
+            </h3>
+            {dropItem.list ? (
+              <div className="mt-2 text-sm text-red-700">
+                <ul className="list-disc space-y-1 pl-5">
+                  {dropItem.list.map((item, idx) => (
+                    <li key={idx}>{item}</li>
+                  ))}
+                </ul>
+              </div>
+            ) : (
+              <></>
+            )}
+          </div>
+          <div className="ml-auto pl-3">
+            <div className="-mx-1.5 -my-1.5">
+              <button
+                type="button"
+                onClick={() => {
+                  setShow(false);
+                  setTimeout(() => {
+                    removeAlert(dropItem.id);
+                  }, 500);
+                }}
+                className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
+              >
+                <span className="sr-only">Dismiss</span>
+                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              </button>
             </div>
-            <div className="ml-3">
-              <h3 className="text-sm font-medium text-red-800">
-                {dropItem.title}
-              </h3>
-              {dropItem.list ? (
-                <div className="mt-2 text-sm text-red-700">
-                  <ul className="list-disc space-y-1 pl-5">
-                    {dropItem.list.map((item, idx) => (
-                      <li key={idx}>{item}</li>
-                    ))}
-                  </ul>
-                </div>
+          </div>
+        </div>
+      ) : type === "notice" ? (
+        <div
+          className="flex rounded-md bg-blue-50 p-3 mb-2 mx-2"
+          key={dropItem.id}
+        >
+          <div className="flex-shrink-0">
+            <InformationCircleIcon
+              className="h-5 w-5 text-blue-400"
+              aria-hidden="true"
+            />
+          </div>
+          <div className="ml-3 flex-1 md:flex md:justify-between">
+            <p className="text-sm text-blue-700">{dropItem.title}</p>
+            <p className="mt-3 text-sm md:mt-0 md:ml-6">
+              {dropItem.link ? (
+                <Link
+                  to={dropItem.link}
+                  className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600"
+                >
+                  Details
+                </Link>
               ) : (
                 <></>
               )}
-            </div>
-            <div className="ml-auto pl-3">
-              <div className="-mx-1.5 -my-1.5">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShow(false); setTimeout(() => {removeAlert(dropItem.id);}, 500);
-                  }}
-                  className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
-                >
-                  <span className="sr-only">Dismiss</span>
-                  <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-                </button>
-              </div>
+            </p>
+          </div>
+          <div className="ml-auto pl-3">
+            <div className="-mx-1.5 -my-1.5">
+              <button
+                type="button"
+                onClick={() => {
+                  setShow(false);
+                  setTimeout(() => {
+                    removeAlert(dropItem.id);
+                  }, 500);
+                }}
+                className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500"
+              >
+                <span className="sr-only">Dismiss</span>
+                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              </button>
             </div>
           </div>
-        :(type === "notice" ?
-          <div className="flex rounded-md bg-blue-50 p-3 mb-2 mx-2" key={dropItem.id}>
-            <div className="flex-shrink-0">
-              <InformationCircleIcon
-                className="h-5 w-5 text-blue-400"
-                aria-hidden="true"
-              />
-            </div>
-            <div className="ml-3 flex-1 md:flex md:justify-between">
-              <p className="text-sm text-blue-700">{dropItem.title}</p>
-              <p className="mt-3 text-sm md:mt-0 md:ml-6">
-                {dropItem.link ? (
-                  <Link
-                    to={dropItem.link}
-                    className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600"
-                  >
-                    Details
-                  </Link>
-                ) : (
-                  <></>
-                )}
-              </p>
-            </div>
-            <div className="ml-auto pl-3">
-              <div className="-mx-1.5 -my-1.5">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShow(false); setTimeout(() => {removeAlert(dropItem.id);}, 500);
-                  }}
-                  className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500"
-                >
-                  <span className="sr-only">Dismiss</span>
-                  <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-                </button>
-              </div>
+        </div>
+      ) : (
+        <div
+          className="flex bg-green-50 p-3 mb-2 mx-2 rounded-md"
+          key={dropItem.id}
+        >
+          <div className="flex-shrink-0">
+            <CheckCircleIcon
+              className="h-5 w-5 text-green-400"
+              aria-hidden="true"
+            />
+          </div>
+          <div className="ml-3">
+            <p className="text-sm font-medium text-green-800">
+              {dropItem.title}
+            </p>
+          </div>
+          <div className="ml-auto pl-3">
+            <div className="-mx-1.5 -my-1.5">
+              <button
+                type="button"
+                onClick={() => {
+                  setShow(false);
+                  setTimeout(() => {
+                    removeAlert(dropItem.id);
+                  }, 500);
+                }}
+                className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500"
+              >
+                <span className="sr-only">Dismiss</span>
+                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              </button>
             </div>
           </div>
-        :
-        <div className="flex bg-green-50 p-3 mb-2 mx-2 rounded-md" key={dropItem.id}>
-            <div className="flex-shrink-0">
-              <CheckCircleIcon
-                className="h-5 w-5 text-green-400"
-                aria-hidden="true"
-              />
-            </div>
-            <div className="ml-3">
-              <p className="text-sm font-medium text-green-800">
-                {dropItem.title}
-              </p>
-            </div>
-            <div className="ml-auto pl-3">
-              <div className="-mx-1.5 -my-1.5">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShow(false); setTimeout(() => {removeAlert(dropItem.id);}, 500);
-                  }}
-                  className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500"
-                >
-                  <span className="sr-only">Dismiss</span>
-                  <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-                </button>
-              </div>
-            </div>
-          </div>
-        )
-      }
-        
+        </div>
+      )}
     </Transition>
-    )
-    
-  }
\ No newline at end of file
+  );
+}
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index 0d111aba1..73ee9413c 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -5,73 +5,62 @@ import { TrashIcon } from "@heroicons/react/24/outline";
 import SingleAlert from "./components/singleAlertComponent";
 import { AlertDropdownType } from "../../types/alerts";
 import { PopUpContext } from "../../contexts/popUpContext";
-
+import { useOnClickOutside } from "../hooks/useOnClickOutside";
 export default function AlertDropdown({}: AlertDropdownType) {
-	const { closePopUp } = useContext(PopUpContext);
-	const componentRef = useRef<HTMLDivElement>(null);
+  const { closePopUp } = useContext(PopUpContext);
+  const componentRef = useRef<HTMLDivElement>(null);
 
-	useEffect(() => {
-		function handleClickOutside(event: MouseEvent) {
-			if (
-				componentRef.current &&
-				!componentRef.current.contains(event.target as Node)
-			) {
-				closePopUp();
-			}
-		}
+  // Use the custom hook
+  useOnClickOutside(componentRef, () => {
+    closePopUp();
+  });
 
-		// Bind the event listener
-		document.addEventListener("mousedown", handleClickOutside);
+  const {
+    notificationList,
+    clearNotificationList,
+    removeFromNotificationList,
+  } = useContext(alertContext);
 
-		// Cleanup the event listener when the component is unmounted
-		return () => {
-			document.removeEventListener("mousedown", handleClickOutside);
-		};
-	}, [componentRef]);
-
-	const {
-		notificationList,
-		clearNotificationList,
-		removeFromNotificationList,
-	} = useContext(alertContext);
-
-	return (
-		<div
-			ref={componentRef}
-			className="z-10 py-3 pb-4 rounded-md bg-white ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[16rem] h-[28rem] flex flex-col"
-		>
-			<div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800">
-				Notifications
-				<div className="flex gap-2 pr-3 ">
-					<button
-						className="hover:text-red-500"
-						onClick={() => {
-							closePopUp();
-							setTimeout(clearNotificationList, 100);
-						}}
-					>
-						<TrashIcon className="w-[1.1rem] h-[1.1rem]" />
-					</button>
-					<button className="hover:text-red-500" onClick={closePopUp}>
-						<XMarkIcon className="h-5 w-5" />
-					</button>
-				</div>
-			</div>
-			<div className="mt-2 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide">
-				{notificationList.length !== 0 ? (
-					notificationList.map((alertItem, index) => (
-						<SingleAlert
-							key={alertItem.id}
-							dropItem={alertItem}
-							removeAlert={removeFromNotificationList}
-						/>
-					))
-				) : (
-					<div className="h-full w-full pb-16 text-gray-500 flex justify-center items-center">
-						No new notifications
-					</div>
-				)}
-			</div>
-		</div>
-	);
+  return (
+    <div
+      ref={componentRef}
+      className="z-10 py-3 pb-4 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[16rem] h-[28rem] flex flex-col"
+    >
+      <div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200">
+        Notifications
+        <div className="flex gap-2 pr-3 ">
+          <button
+            className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
+            onClick={() => {
+              closePopUp();
+              setTimeout(clearNotificationList, 100);
+            }}
+          >
+            <TrashIcon className="w-[1.1rem] h-[1.1rem]" />
+          </button>
+          <button
+            className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
+            onClick={closePopUp}
+          >
+            <XMarkIcon className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+      <div className="mt-2 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-gray-900 dark:text-gray-300">
+        {notificationList.length !== 0 ? (
+          notificationList.map((alertItem, index) => (
+            <SingleAlert
+              key={alertItem.id}
+              dropItem={alertItem}
+              removeAlert={removeFromNotificationList}
+            />
+          ))
+        ) : (
+          <div className="h-full w-full pb-16 text-gray-500 dark:text-gray-500 flex justify-center items-center">
+            No new notifications
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }
diff --git a/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts b/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts
new file mode 100644
index 000000000..249133d96
--- /dev/null
+++ b/src/frontend/src/alerts/hooks/useOnClickOutside/index.ts
@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+
+export function useOnClickOutside(ref, handler) {
+  useEffect(() => {
+    const listener = (event) => {
+      // Do nothing if clicking ref's element or its children
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    // Attach the listener to the document
+    document.addEventListener("mousedown", listener, { passive: true });
+
+    // Attach the listener to the react-flow instance
+    const reactFlowContainer = document.querySelector(".react-flow");
+    if (reactFlowContainer) {
+      reactFlowContainer.addEventListener("mousedown", listener, {
+        passive: true,
+      });
+    }
+
+    // Clean up the listener when the component is unmounted
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      if (reactFlowContainer) {
+        reactFlowContainer.removeEventListener("mousedown", listener);
+      }
+    };
+  }, [ref, handler]); // Rerun only if ref or handler changes
+}
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index aa48f6ce1..10494bc58 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -1,9 +1,9 @@
 import { Dialog, Transition } from "@headlessui/react";
 import {
-	XMarkIcon,
-	ArrowDownTrayIcon,
-	DocumentDuplicateIcon,
-	ComputerDesktopIcon,
+  XMarkIcon,
+  ArrowDownTrayIcon,
+  DocumentDuplicateIcon,
+  ComputerDesktopIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
@@ -12,165 +12,169 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils";
 
 export default function ExportModal() {
-	const [open, setOpen] = useState(true);
-	const { closePopUp } = useContext(PopUpContext);
-	const ref = useRef();
-    const {setErrorData}= useContext(alertContext)
-	const { flows, tabIndex, updateFlow, downloadFlow } = useContext(TabsContext);
-	function setModalOpen(x: boolean) {
-		setOpen(x);
-		if (x === false) {
-			setTimeout(() => {
-				closePopUp();
-			}, 300);
-		}
-	}
-	const [checked,setChecked] = useState(true)
-	const [name,setName] = useState(flows[tabIndex].name)
-	return (
-		<Transition.Root show={open} appear={true} as={Fragment}>
-			<Dialog
-				as="div"
-				className="relative z-10"
-				onClose={setModalOpen}
-				initialFocus={ref}
-			>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0"
-				>
-					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-				</Transition.Child>
+  const [open, setOpen] = useState(true);
+  const { closePopUp } = useContext(PopUpContext);
+  const ref = useRef();
+  const { setErrorData } = useContext(alertContext);
+  const { flows, tabIndex, updateFlow, downloadFlow } = useContext(TabsContext);
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setTimeout(() => {
+        closePopUp();
+      }, 300);
+    }
+  }
+  const [checked, setChecked] = useState(true);
+  const [name, setName] = useState(flows[tabIndex].name);
+  return (
+    <Transition.Root show={open} appear={true} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={setModalOpen}
+        initialFocus={ref}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
 
-				<div className="fixed inset-0 z-10 overflow-y-auto">
-					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-							enterTo="opacity-100 translate-y-0 sm:scale-100"
-							leave="ease-in duration-200"
-							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]">
-								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-									<button
-										type="button"
-										className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-										onClick={() => {
-											setModalOpen(false);
-										}}
-									>
-										<span className="sr-only">Close</span>
-										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
-									</button>
-								</div>
-								<div className="h-full w-full flex flex-col justify-center items-center">
-									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-											<ArrowDownTrayIcon
-												className="h-6 w-6 text-blue-600"
-												aria-hidden="true"
-											/>
-										</div>
-										<div className="mt-4 text-center sm:ml-4 sm:text-left">
-											<Dialog.Title
-												as="h3"
-												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-											>
-												Export as
-											</Dialog.Title>
-										</div>
-									</div>
-									<div className="pt-16 flex flex-col items-start justify-start h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-16">
-										<div className="w-full">
-											<label
-												htmlFor="name"
-												className="block mb-2 font-medium text-gray-700 dark:text-white"
-											>
-												Name
-											</label>
-											<input
-												onChange={(event) => {
-                                                    if(event.target.value!=""){
-                                                        let newFlow = flows[tabIndex];
-                                                        newFlow.name = event.target.value;
-														setName(event.target.value)
-                                                        updateFlow(newFlow);
-                                                    }
-                                                    else{
-														setName(event.target.value)
-                                                    }
-												}}
-												type="text"
-												name="name"
-												value={name ?? null}
-												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"
-											/>
-										</div>
-										<div className="w-full">
-											<label
-												htmlFor="description"
-												className="block mb-2 font-medium text-gray-700 dark:text-white"
-											>
-												Description <span className="text-gray-400 text-sm"> (optional)</span>
-											</label>
-											<textarea
-												name="description"
-												id="description"
-												onChange={(event) => {
-													let newFlow = flows[tabIndex];
-													newFlow.description = event.target.value;
-													updateFlow(newFlow);
-												}}
-												value={flows[tabIndex].description ?? null}
-												placeholder="Flow description"
-												rows={3}
-												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"
-											></textarea>
-										</div>
-										<div>
-											<label htmlFor="checkbox" className="flex items-center">
-												<input
-													onChange={(event) => {
-                                                        setChecked(event.target.checked)
-													}}
-													checked={checked}
-													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"
-												/>
-												<span className="ml-2 font-medium text-gray-700 dark:text-white">
-													Save with my API keys
-												</span>
-											</label>
-										</div>
-										<div className="w-full flex justify-end">
-											<button
-												onClick={() => {
-                                                    if(checked) downloadFlow(flows[tabIndex]);
-                                                    else downloadFlow(removeApiKeys(flows[tabIndex]))
-												}}
-												className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-											>
-												Download Flow
-											</button>
-										</div>
-									</div>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition.Root>
-	);
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              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]">
+                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+                  <button
+                    type="button"
+                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    onClick={() => {
+                      setModalOpen(false);
+                    }}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="h-full w-full flex flex-col justify-center items-center">
+                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+                      <ArrowDownTrayIcon
+                        className="h-6 w-6 text-blue-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                      >
+                        Export as
+                      </Dialog.Title>
+                    </div>
+                  </div>
+                  <div className="pt-16 flex flex-col items-start justify-start h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-16">
+                    <div className="w-full">
+                      <label
+                        htmlFor="name"
+                        className="block mb-2 font-medium text-gray-700 dark:text-white"
+                      >
+                        Name
+                      </label>
+                      <input
+                        onChange={(event) => {
+                          if (event.target.value != "") {
+                            let newFlow = flows[tabIndex];
+                            newFlow.name = event.target.value;
+                            setName(event.target.value);
+                            updateFlow(newFlow);
+                          } else {
+                            setName(event.target.value);
+                          }
+                        }}
+                        type="text"
+                        name="name"
+                        value={name ?? null}
+                        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"
+                      />
+                    </div>
+                    <div className="w-full">
+                      <label
+                        htmlFor="description"
+                        className="block mb-2 font-medium text-gray-700 dark:text-white"
+                      >
+                        Description{" "}
+                        <span className="text-gray-400 text-sm">
+                          {" "}
+                          (optional)
+                        </span>
+                      </label>
+                      <textarea
+                        name="description"
+                        id="description"
+                        onChange={(event) => {
+                          let newFlow = flows[tabIndex];
+                          newFlow.description = event.target.value;
+                          updateFlow(newFlow);
+                        }}
+                        value={flows[tabIndex].description ?? null}
+                        placeholder="Flow description"
+                        rows={3}
+                        className=" focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 text-gray-900 dark:text-gray-100 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"
+                      ></textarea>
+                    </div>
+
+                    <div>
+                      <label htmlFor="checkbox" className="flex items-center">
+                        <input
+                          onChange={(event) => {
+                            setChecked(event.target.checked);
+                          }}
+                          checked={checked}
+                          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"
+                        />
+                        <span className="ml-2 font-medium text-gray-700 dark:text-white">
+                          Save with my API keys
+                        </span>
+                      </label>
+                    </div>
+                    <div className="w-full flex justify-end">
+                      <button
+                        onClick={() => {
+                          if (checked) downloadFlow(flows[tabIndex]);
+                          else downloadFlow(removeApiKeys(flows[tabIndex]));
+                        }}
+                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                      >
+                        Download Flow
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
 }
diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index 6d7a4d844..e6a037d10 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";
@@ -18,103 +18,98 @@ import ImportModal from "../../../../modals/importModal";
 import ExportModal from "../../../../modals/exportModal";
 
 export default function TabsManagerComponent() {
-	const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } =
-		useContext(TabsContext);
-	const { openPopUp } = useContext(PopUpContext);
-	const AlertWidth = 256;
-	const { dark, setDark } = useContext(darkContext);
-	const { notificationCenter, setNotificationCenter } =
-		useContext(alertContext);
-	useEffect(() => {
-		//create the first flow
-		if (flows.length === 0) {
-			addFlow();
-		}
-	}, [addFlow, flows.length]);
+  const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } =
+    useContext(TabsContext);
+  const { openPopUp } = useContext(PopUpContext);
+  const AlertWidth = 256;
+  const { dark, setDark } = useContext(darkContext);
+  const { notificationCenter, setNotificationCenter } =
+    useContext(alertContext);
+  useEffect(() => {
+    //create the first flow
+    if (flows.length === 0) {
+      addFlow();
+    }
+  }, [addFlow, flows.length]);
 
-	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>
+              );
+            }}
+          >
+            {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>
+  );
 }
diff --git a/src/frontend/src/types/alerts/index.ts b/src/frontend/src/types/alerts/index.ts
index a8478ba1a..7033d99eb 100644
--- a/src/frontend/src/types/alerts/index.ts
+++ b/src/frontend/src/types/alerts/index.ts
@@ -1,12 +1,29 @@
-export type ErrorAlertType = {title:string,list:Array<string>,id:string,removeAlert:(id:string)=>void}
-export type NoticeAlertType = {title:string,link:string,id:string,removeAlert:(id:string)=>void}
-export type SuccessAlertType = {title:string,id:string, removeAlert:(id:string)=>void}
-export type SingleAlertComponentType = {dropItem:AlertItemType,removeAlert:(index:string)=>void}
+export type ErrorAlertType = {
+  title: string;
+  list: Array<string>;
+  id: string;
+  removeAlert: (id: string) => void;
+};
+export type NoticeAlertType = {
+  title: string;
+  link: string;
+  id: string;
+  removeAlert: (id: string) => void;
+};
+export type SuccessAlertType = {
+  title: string;
+  id: string;
+  removeAlert: (id: string) => void;
+};
+export type SingleAlertComponentType = {
+  dropItem: AlertItemType;
+  removeAlert: (index: string) => void;
+};
 export type AlertDropdownType = {};
 export type AlertItemType = {
-    type: "notice" | "error" | "success";
-    title: string;
-    link?: string;
-    list?: Array<string>;
-    id: string;
-  };
\ No newline at end of file
+  type: "notice" | "error" | "success";
+  title: string;
+  link?: string;
+  list?: Array<string>;
+  id: string;
+};