jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

notifications on tabs bar'

Browse source
This commit is contained in:
anovazzi1 2023-03-06 19:51:00 -03:00
commit fc6fee3d21
7 changed files with 109 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

6
langflow/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
View file

@ -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"

30
langflow/frontend/src/alerts/alertDropDown/index.tsx
View file

@ -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>
);
}

3
langflow/frontend/src/components/HeaderComponent/index.tsx
View file

@ -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>

34
langflow/frontend/src/contexts/index.tsx
View file

@ -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>
</>
);
}

2
langflow/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
View file

@ -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

116
langflow/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
View file

@ -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>
);
}

2
langflow/frontend/src/types/alerts/index.ts
View file

@ -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";