close alert on click

langflow/frontend/src/alerts/error/index.tsx

@@ -3,12 +3,20 @@ import { XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import { ErrorAlertType } from "../../types/alerts";
 
-export default function ErrorAlert({ title, list = [], id, removeAlert }:ErrorAlertType) {
+export default function ErrorAlert({
+	title,
+	list = [],
+	id,
+	removeAlert,
+}: ErrorAlertType) {
 	const [show, setShow] = useState(true);
 	useEffect(() => {
 		if (show) {
 			setTimeout(() => {
-        setShow(false); setTimeout(() => {removeAlert(id);}, 500);
+				setShow(false);
+				setTimeout(() => {
+					removeAlert(id);
+				}, 500);
 			}, 5000);
 		}
 	}, [id, removeAlert, show]);
@@ -24,15 +32,22 @@ export default function ErrorAlert({ title, list = [], id, removeAlert }:ErrorAl
 			leaveFrom={"transform translate-x-0"}
 			leaveTo={"transform translate-x-[-100%]"}
 		>
-      <div className="rounded-md w-96 mt-6 shadow-xl bg-red-50 p-4">
+			<div
+				onClick={() => {
+					setShow(false);
+					setTimeout(() => {
+						removeAlert(id);
+					}, 500);
+				}}
+				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 className="ml-3">
 						<h3 className="text-sm font-medium text-red-800">{title}</h3>
-            {list.length !== 0 
+						{list.length !== 0 ? (
-            ?
 							<div className="mt-2 text-sm text-red-700">
 								<ul className="list-disc space-y-1 pl-5">
 									{list.map((item, index) => (
@@ -40,22 +55,9 @@ export default function ErrorAlert({ title, list = [], id, removeAlert }:ErrorAl
 									))}
 								</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(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>
 				</div>
 			</div>

langflow/frontend/src/alerts/notice/index.tsx

@@ -4,12 +4,20 @@ import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { NoticeAlertType } from "../../types/alerts";
 
-export default function NoticeAlert({ title, link = "", id, removeAlert }:NoticeAlertType) {
+export default function NoticeAlert({
+	title,
+	link = "",
+	id,
+	removeAlert,
+}: NoticeAlertType) {
 	const [show, setShow] = useState(true);
 	useEffect(() => {
 		if (show) {
 			setTimeout(() => {
-        setShow(false); setTimeout(() => {removeAlert(id);}, 500);
+				setShow(false);
+				setTimeout(() => {
+					removeAlert(id);
+				}, 500);
 			}, 5000);
 		}
 	}, [id, removeAlert, show]);
@@ -23,7 +31,13 @@ export default function NoticeAlert({ title, link = "", id, removeAlert }:Notice
 			leaveFrom={"transform translate-x-0"}
 			leaveTo={"transform translate-x-[-100%]"}
 		>
-      <div className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 p-4">
+			<div
+				onClick={() => {
+					setShow(false);
+					removeAlert(id);
+				}}
+				className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 p-4"
+			>
 				<div className="flex">
 					<div className="flex-shrink-0">
 						<InformationCircleIcon
@@ -34,31 +48,18 @@ export default function NoticeAlert({ title, link = "", id, removeAlert }:Notice
 					<div className="ml-3 flex-1 md:flex md:justify-between">
 						<p className="text-sm text-blue-700">{title}</p>
 						<p className="mt-3 text-sm md:mt-0 md:ml-6">
-              {link !== "" 
+							{link !== "" ? (
-              ?
 								<Link
 									to={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); removeAlert(id);}}
-                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>
 			</div>
 		</Transition>

langflow/frontend/src/alerts/success/index.tsx

@@ -3,12 +3,19 @@ import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import { SuccessAlertType } from "../../types/alerts";
 
-export default function SuccessAlert({ title, id, removeAlert }:SuccessAlertType) {
+export default function SuccessAlert({
+	title,
+	id,
+	removeAlert,
+}: SuccessAlertType) {
 	const [show, setShow] = useState(true);
 	useEffect(() => {
 		if (show) {
 			setTimeout(() => {
-        setShow(false); setTimeout(() => {removeAlert(id);}, 500);
+				setShow(false);
+				setTimeout(() => {
+					removeAlert(id);
+				}, 500);
 			}, 5000);
 		}
 	}, [id, removeAlert, show]);
@@ -22,7 +29,13 @@ export default function SuccessAlert({ title, id, removeAlert }:SuccessAlertType
 			leaveFrom={"transform translate-x-0"}
 			leaveTo={"transform translate-x-[-100%]"}
 		>
-      <div className="rounded-md w-96 mt-6 shadow-xl bg-green-50 p-4">
+			<div
+				onClick={() => {
+					setShow(false);
+					removeAlert(id);
+				}}
+				className="rounded-md w-96 mt-6 shadow-xl bg-green-50 p-4"
+			>
 				<div className="flex">
 					<div className="flex-shrink-0">
 						<CheckCircleIcon
@@ -33,18 +46,6 @@ export default function SuccessAlert({ title, id, removeAlert }:SuccessAlertType
 					<div className="ml-3">
 						<p className="text-sm font-medium text-green-800">{title}</p>
 					</div>
-          <div className="ml-auto pl-3">
-            <div className="-mx-1.5 -my-1.5">
-              <button
-                type="button"
-                onClick={()=>{setShow(false); removeAlert(id);}}
-                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>