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

close alert on click

Browse source
This commit is contained in:
anovazzi1 2023-03-09 18:48:50 -03:00
commit c960d294f6
3 changed files with 168 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

120
langflow/frontend/src/alerts/error/index.tsx
View file

@ -1,64 +1,66 @@
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { ErrorAlertType} from "../../types/alerts"; import { ErrorAlertType } from "../../types/alerts";
export default function ErrorAlert({ title, list = [], id, removeAlert }:ErrorAlertType) { export default function ErrorAlert({
const [show, setShow] = useState(true); title,
useEffect(() => { list = [],
if(show){ id,
setTimeout(() => { removeAlert,
setShow(false); setTimeout(() => {removeAlert(id);}, 500); }: ErrorAlertType) {
}, 5000); const [show, setShow] = useState(true);
} useEffect(() => {
}, [id, removeAlert, show]); if (show) {
return ( setTimeout(() => {
<Transition setShow(false);
className="relative" setTimeout(() => {
show={show} removeAlert(id);
appear={true} }, 500);
enter="transition-transform duration-500 ease-out" }, 5000);
enterFrom={"transform translate-x-[-100%]"} }
enterTo={"transform translate-x-0"} }, [id, removeAlert, show]);
leave="transition-transform duration-500 ease-in" return (
leaveFrom={"transform translate-x-0"} <Transition
leaveTo={"transform translate-x-[-100%]"} className="relative"
> show={show}
<div className="rounded-md w-96 mt-6 shadow-xl bg-red-50 p-4"> appear={true}
<div className="flex"> enter="transition-transform duration-500 ease-out"
<div className="flex-shrink-0"> enterFrom={"transform translate-x-[-100%]"}
<XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" /> enterTo={"transform translate-x-0"}
</div> leave="transition-transform duration-500 ease-in"
<div className="ml-3"> leaveFrom={"transform translate-x-0"}
<h3 className="text-sm font-medium text-red-800">{title}</h3> leaveTo={"transform translate-x-[-100%]"}
{list.length !== 0 >
? <div
<div className="mt-2 text-sm text-red-700"> onClick={() => {
<ul className="list-disc space-y-1 pl-5"> setShow(false);
{list.map((item, index) => ( setTimeout(() => {
<li key={index} >{item}</li> removeAlert(id);
))} }, 500);
</ul> }}
</div> className="rounded-md w-96 mt-6 shadow-xl bg-red-50 p-4 cursor-pointer"
: >
<></> <div className="flex">
} <div className="flex-shrink-0">
<XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
</div> </div>
<div className="ml-auto pl-3"> <div className="ml-3">
<div className="-mx-1.5 -my-1.5"> <h3 className="text-sm font-medium text-red-800">{title}</h3>
<button {list.length !== 0 ? (
type="button" <div className="mt-2 text-sm text-red-700">
onClick={()=>{setShow(false); setTimeout(() => {removeAlert(id);}, 500);}} <ul className="list-disc space-y-1 pl-5">
className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500" {list.map((item, index) => (
> <li key={index}>{item}</li>
<span className="sr-only">Dismiss</span> ))}
<XMarkIcon className="h-5 w-5" aria-hidden="true" /> </ul>
</button> </div>
</div> ) : (
</div> <></>
</div> )}
</div> </div>
</Transition> </div>
); </div>
</Transition>
);
} }

119
langflow/frontend/src/alerts/notice/index.tsx
View file

@ -4,63 +4,64 @@ import { useEffect, useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { NoticeAlertType } from "../../types/alerts"; import { NoticeAlertType } from "../../types/alerts";
export default function NoticeAlert({ title, link = "", id, removeAlert }:NoticeAlertType) { export default function NoticeAlert({
const [show, setShow] = useState(true); title,
useEffect(() => { link = "",
if(show){ id,
setTimeout(() => { removeAlert,
setShow(false); setTimeout(() => {removeAlert(id);}, 500); }: NoticeAlertType) {
}, 5000); const [show, setShow] = useState(true);
} useEffect(() => {
}, [id, removeAlert, show]); if (show) {
return ( setTimeout(() => {
<Transition setShow(false);
show={show} setTimeout(() => {
enter="transition-transform duration-500 ease-out" removeAlert(id);
enterFrom={"transform translate-x-[-100%]"} }, 500);
enterTo={"transform translate-x-0"} }, 5000);
leave="transition-transform duration-500 ease-in" }
leaveFrom={"transform translate-x-0"} }, [id, removeAlert, show]);
leaveTo={"transform translate-x-[-100%]"} return (
> <Transition
<div className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 p-4"> show={show}
<div className="flex"> enter="transition-transform duration-500 ease-out"
<div className="flex-shrink-0"> enterFrom={"transform translate-x-[-100%]"}
<InformationCircleIcon enterTo={"transform translate-x-0"}
className="h-5 w-5 text-blue-400" leave="transition-transform duration-500 ease-in"
aria-hidden="true" leaveFrom={"transform translate-x-0"}
/> leaveTo={"transform translate-x-[-100%]"}
</div> >
<div className="ml-3 flex-1 md:flex md:justify-between"> <div
<p className="text-sm text-blue-700">{title}</p> onClick={() => {
<p className="mt-3 text-sm md:mt-0 md:ml-6"> setShow(false);
{link !== "" removeAlert(id);
? }}
<Link className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 p-4"
to={link} >
className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600" <div className="flex">
> <div className="flex-shrink-0">
Details <InformationCircleIcon
</Link> className="h-5 w-5 text-blue-400"
: aria-hidden="true"
<></> />
} </div>
</p> <div className="ml-3 flex-1 md:flex md:justify-between">
</div> <p className="text-sm text-blue-700">{title}</p>
<div className="ml-auto pl-3"> <p className="mt-3 text-sm md:mt-0 md:ml-6">
<div className="-mx-1.5 -my-1.5"> {link !== "" ? (
<button <Link
type="button" to={link}
onClick={()=>{setShow(false); removeAlert(id);}} className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600"
className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500" >
> Details
<span className="sr-only">Dismiss</span> </Link>
<XMarkIcon className="h-5 w-5" aria-hidden="true" /> ) : (
</button> <></>
</div> )}
</div> </p>
</div> </div>
</div> </div>
</Transition> </div>
); </Transition>
);
} }

93
langflow/frontend/src/alerts/success/index.tsx
View file

@ -3,50 +3,51 @@ import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SuccessAlertType } from "../../types/alerts"; import { SuccessAlertType } from "../../types/alerts";
export default function SuccessAlert({ title, id, removeAlert }:SuccessAlertType) { export default function SuccessAlert({
const [show, setShow] = useState(true); title,
useEffect(() => { id,
if(show){ removeAlert,
setTimeout(() => { }: SuccessAlertType) {
setShow(false); setTimeout(() => {removeAlert(id);}, 500); const [show, setShow] = useState(true);
}, 5000); useEffect(() => {
} if (show) {
}, [id, removeAlert, show]); setTimeout(() => {
return ( setShow(false);
<Transition setTimeout(() => {
show={show} removeAlert(id);
enter="transition-transform duration-500 ease-out" }, 500);
enterFrom={"transform translate-x-[-100%]"} }, 5000);
enterTo={"transform translate-x-0"} }
leave="transition-transform duration-500 ease-in" }, [id, removeAlert, show]);
leaveFrom={"transform translate-x-0"} return (
leaveTo={"transform translate-x-[-100%]"} <Transition
> show={show}
<div className="rounded-md w-96 mt-6 shadow-xl bg-green-50 p-4"> enter="transition-transform duration-500 ease-out"
<div className="flex"> enterFrom={"transform translate-x-[-100%]"}
<div className="flex-shrink-0"> enterTo={"transform translate-x-0"}
<CheckCircleIcon leave="transition-transform duration-500 ease-in"
className="h-5 w-5 text-green-400" leaveFrom={"transform translate-x-0"}
aria-hidden="true" leaveTo={"transform translate-x-[-100%]"}
/> >
</div> <div
<div className="ml-3"> onClick={() => {
<p className="text-sm font-medium text-green-800">{title}</p> setShow(false);
</div> removeAlert(id);
<div className="ml-auto pl-3"> }}
<div className="-mx-1.5 -my-1.5"> className="rounded-md w-96 mt-6 shadow-xl bg-green-50 p-4"
<button >
type="button" <div className="flex">
onClick={()=>{setShow(false); removeAlert(id);}} <div className="flex-shrink-0">
className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500" <CheckCircleIcon
> className="h-5 w-5 text-green-400"
<span className="sr-only">Dismiss</span> aria-hidden="true"
<XMarkIcon className="h-5 w-5" aria-hidden="true" /> />
</button> </div>
</div> <div className="ml-3">
</div> <p className="text-sm font-medium text-green-800">{title}</p>
</div> </div>
</div> </div>
</Transition> </div>
); </Transition>
);
} }