From fc6fee3d21989bc9c82676347e84d96c7545107d Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 6 Mar 2023 19:51:00 -0300
Subject: [PATCH] notifications on tabs bar'

---
 .../components/singleAlertComponent/index.tsx |   6 +-
 .../src/alerts/alertDropDown/index.tsx        |  30 ++---
 .../src/components/HeaderComponent/index.tsx  |   3 +-
 langflow/frontend/src/contexts/index.tsx      |  34 ++---
 .../components/tabComponent/index.tsx         |   2 +-
 .../components/tabsManagerComponent/index.tsx | 116 ++++++++++++------
 langflow/frontend/src/types/alerts/index.ts   |   2 -
 7 files changed, 109 insertions(+), 84 deletions(-)

diff --git a/langflow/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/langflow/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index b627c5fa5..61965929d 100644
--- a/langflow/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/langflow/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -22,7 +22,7 @@ export default function SingleAlert({ dropItem, removeAlert}:SingleAlertComponen
       leaveTo={"transform translate-x-[-100%]"}
     >
         {type === "error"? 
-          <div className="flex bg-red-50 rounded-md p-4 mb-2" key={dropItem.id}>
+          <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"
@@ -61,7 +61,7 @@ export default function SingleAlert({ dropItem, removeAlert}:SingleAlertComponen
             </div>
           </div>
         :(type === "notice" ?
-          <div className="flex rounded-md p-4 bg-blue-50 mb-2" key={dropItem.id}>
+          <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"
@@ -99,7 +99,7 @@ export default function SingleAlert({ dropItem, removeAlert}:SingleAlertComponen
             </div>
           </div>
         :
-        <div className="flex bg-green-50 p-4 mb-2" key={dropItem.id}>
+        <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"
diff --git a/langflow/frontend/src/alerts/alertDropDown/index.tsx b/langflow/frontend/src/alerts/alertDropDown/index.tsx
index edb1cc91f..1d6d883f7 100644
--- a/langflow/frontend/src/alerts/alertDropDown/index.tsx
+++ b/langflow/frontend/src/alerts/alertDropDown/index.tsx
@@ -3,54 +3,45 @@ import { alertContext } from "../../contexts/alertContext";
 import {
   XMarkIcon,
 } from "@heroicons/react/24/solid";
-import { Transition } from "@headlessui/react";
 import { TrashIcon } from "@heroicons/react/24/outline";
 import SingleAlert from "./components/singleAlertComponent";
 import { AlertDropdownType } from "../../types/alerts";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 
 
-export default function AlertDropdown({closeFunction, open}: AlertDropdownType) {
+export default function AlertDropdown({}: AlertDropdownType) {
   const {
     notificationList,
     clearNotificationList,
     removeFromNotificationList,
   } = useContext(alertContext);
-
+  const {closePopUp} =  useContext(PopUpContext)
   
 
   return (
-    <Transition
-      show={open}
-      enter="transition ease-out duration-100"
-      enterFrom="transform opacity-0 scale-95"
-      enterTo="transform opacity-100 scale-100"
-      leave="transition ease-in duration-75"
-      leaveFrom="transform opacity-100 scale-100"
-      leaveTo="transform opacity-0 scale-95"
-    >
-      <div className="z-10 px-8 py-6 pb-8 rounded-md bg-white ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[36rem] h-[40rem] flex flex-col">
-        <div className="flex flex-row justify-between text-md font-medium text-gray-800">
+      <div className="z-10 py-2 pb-4 rounded-md bg-white ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[14rem] 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-4">
+          <div className="flex gap-3 pr-2 ">
             <button
               className="hover:text-black"
-              onClick={() => {closeFunction(); setTimeout(clearNotificationList, 100)}}
+              onClick={() => {closePopUp(); setTimeout(clearNotificationList, 100)}}
             >
               <TrashIcon className="w-5 h-5" />
             </button>
             <button
               className="hover:text-black"
-              onClick={closeFunction}
+              onClick={closePopUp}
             >
               <XMarkIcon className="h-6 w-6" />
             </button>
           </div>
         </div>
-        <div className="mt-6 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide">
+        <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={index} dropItem={alertItem} removeAlert={removeFromNotificationList} />
+            <SingleAlert key={alertItem.id} dropItem={alertItem} removeAlert={removeFromNotificationList} />
           ))
         :
         <div className="h-full w-full pb-16 text-gray-500 flex justify-center items-center">
@@ -59,6 +50,5 @@ export default function AlertDropdown({closeFunction, open}: AlertDropdownType)
         }
         </div>
       </div>
-    </Transition>
   );
 }
diff --git a/langflow/frontend/src/components/HeaderComponent/index.tsx b/langflow/frontend/src/components/HeaderComponent/index.tsx
index 2bd902426..80d80d24f 100644
--- a/langflow/frontend/src/components/HeaderComponent/index.tsx
+++ b/langflow/frontend/src/components/HeaderComponent/index.tsx
@@ -20,6 +20,7 @@ export default function Header(){
     preferX: "left",
     triggerOffset: 10,
     containerOffset: 12,
+    overflowContainer:false,
     arrowOffset: 4,
   })
   const {dark, setDark} = useContext(darkContext);
@@ -42,7 +43,7 @@ export default function Header(){
                   {notificationCenter&&<div className='absolute top-[2px] w-2 h-2 rounded-full bg-red-600 right-[7px]'></div>}
                   
                   <BellIcon className="h-6 w-6" aria-hidden="true" />
-                </button>{renderLayer(<div {...layerProps}><AlertDropdown closeFunction={()=>setIsOpen(false)} open={isOpen}></AlertDropdown></div>)}
+                </button>{renderLayer(<div {...layerProps}></div>)}
               </span>
               </div>
             </div>
diff --git a/langflow/frontend/src/contexts/index.tsx b/langflow/frontend/src/contexts/index.tsx
index 3e28d3e37..6bb581f44 100644
--- a/langflow/frontend/src/contexts/index.tsx
+++ b/langflow/frontend/src/contexts/index.tsx
@@ -6,21 +6,21 @@ import PopUpProvider from "./popUpContext";
 import { TabsProvider } from "./tabsContext";
 import { TypesProvider } from "./typesContext";
 
-export default function ContextWrapper({ children }:{children:ReactNode}) {
-  //element to wrap all context
-  return (
-    <>
-      <DarkProvider>
-        <LocationProvider>
-          <PopUpProvider>
-            <TypesProvider>
-              <TabsProvider>
-                <AlertProvider>{children}</AlertProvider>
-              </TabsProvider>
-            </TypesProvider>
-          </PopUpProvider>
-        </LocationProvider>
-      </DarkProvider>
-    </>
-  );
+export default function ContextWrapper({ children }: { children: ReactNode }) {
+	//element to wrap all context
+	return (
+		<>
+			<DarkProvider>
+				<LocationProvider>
+					<AlertProvider>
+						<PopUpProvider>
+							<TypesProvider>
+								<TabsProvider>{children}</TabsProvider>
+							</TypesProvider>
+						</PopUpProvider>
+					</AlertProvider>
+				</LocationProvider>
+			</DarkProvider>
+		</>
+	);
 }
diff --git a/langflow/frontend/src/pages/FlowPage/components/tabComponent/index.tsx b/langflow/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
index aa24490d2..25495dedf 100644
--- a/langflow/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
+++ b/langflow/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
@@ -29,7 +29,7 @@ export default function TabComponent({ selected, flow, onClick }:{flow:FlowType,
 						</button>
 					</div>
 				) : (
-					<div className="bg-white dark:text-white dark:bg-gray-700 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1.5 rounded-t-xl -ml-px">
+					<div className="bg-white dark:text-white dark:bg-gray-700 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
 								autoFocus
diff --git a/langflow/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/langflow/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index b943972ac..790a219b8 100644
--- a/langflow/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/langflow/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -1,48 +1,84 @@
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import { ReactFlowProvider } from "reactflow";
 import TabComponent from "../tabComponent";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import FlowPage from "../..";
+import { darkContext } from "../../../../contexts/darkContext";
+import { BellIcon, MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+import { PopUpContext } from "../../../../contexts/popUpContext";
+import AlertDropdown from "../../../../alerts/alertDropDown";
+import { alertContext } from "../../../../contexts/alertContext";
 
 export default function TabsManagerComponent() {
-  const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
-  useEffect(() => {
-    //create the first flow
-    if (flows.length === 0) {
-      addFlow();
-    }
-  }, [addFlow, flows.length]);
+	const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
+	const { openPopUp } = useContext(PopUpContext);
+	const AlertWidth = 224
+	const { dark, setDark } = useContext(darkContext);
+	const [isOpen, setIsOpen] = useState(false);
+	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>
-      <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
+						className="text-gray-400 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-400 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/langflow/frontend/src/types/alerts/index.ts b/langflow/frontend/src/types/alerts/index.ts
index 08dd3ffef..50d8887b0 100644
--- a/langflow/frontend/src/types/alerts/index.ts
+++ b/langflow/frontend/src/types/alerts/index.ts
@@ -3,8 +3,6 @@ export type NoticeAlertType = {title:string,link:string,id:string,removeAlert:(i
 export type SuccessAlertType = {title:string,id:string, removeAlert:(id:string)=>void}
 export type SingleAlertComponentType = {dropItem:AlertItemType,removeAlert:(index:string)=>void}
 export type AlertDropdownType = {
-    closeFunction: () => void;
-    open?: boolean;
   };
 export type AlertItemType = {
     type: "notice" | "error" | "success";