fix(UI-1394): adjust toast error

Author: J1za

src/assets/image/icons/FileArrowRight.svg

@@ -86,3 +86,5 @@ export { default as WebhookIcon } from "@assets/image/icons/Webhook.svg?react";
 export { default as MyOrganizationsIcon } from "@assets/image/icons/myOrganizations.svg?react";
 // Taken from: https://fontawesome.com/icons/chevron-down?f=classic&s=solid
 export { default as ChevronDownIcon } from "@assets/image/icons/ChevronDown.svg?react";
+// Taken from: https://tabler.io/icons/icon/file-arrow-right
+export { default as FileArrowRightIcon } from "@assets/image/icons/FileArrowRight.svg?react";

src/assets/image/icons/index.ts

@@ -128,6 +128,7 @@ export const Toast = () => {
 					className = "",
 					hiddenCloseButton,
 					customTitle,
+					closeOnClick,
 				},
 				index
 			) => {
@@ -154,14 +155,15 @@ export const Toast = () => {
 								<div className="text-white">
 									{customTitle ? customTitle : <p className={titleStyle(type)}>{title}</p>}
 
-									<button onClick={() => removeToast(id)}>{message}</button>
+									<button onClick={() => closeOnClick && removeToast(id)}>{message}</button>
 
 									{type === "error" && !hideSystemLogLinkOnError ? (
 										<Button
 											className="cursor-pointer gap-1.5 p-0 font-medium text-error underline"
-											onClick={() =>
-												setSystemLogHeight(systemLogHeight > 0 ? systemLogHeight : 20)
-											}
+											onClick={() => {
+												setSystemLogHeight(systemLogHeight > 0 ? systemLogHeight : 20);
+												closeOnClick && removeToast(id);
+											}}
 										>
 											{t("showMore")}
 											<ExternalLinkIcon className="size-3.5 fill-error duration-200" />

src/components/molecules/toast.tsx

@@ -67,6 +67,7 @@ export const ManualRunButtons = () => {
 				hiddenCloseButton: true,
 				className: "rounded-2xl p-0 border-2",
 				customTitle: " ",
+				closeOnClick: true,
 			});
 			setTimeout(() => {
 				fetchDeployments(projectId, true);

src/components/organisms/topbar/project/manualRun/manualRunButtons.tsx

@@ -85,6 +85,7 @@ export const ManualRunSettingsDrawer = () => {
 			hiddenCloseButton: true,
 			className: "rounded-2xl p-0 border-2",
 			customTitle: " ",
+			closeOnClick: true,
 		});
 		closeDrawer(DrawerName.projectManualRunSettings);
 	};

src/components/organisms/topbar/project/manualRun/manualRunSettingsDrawer.tsx

@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 
 import { Button } from "@components/atoms";
 
-import { ExternalLinkIcon } from "@assets/image/icons";
+import { FileArrowRightIcon } from "@assets/image/icons";
 
 export const ManualRunSuccessToastMessage = ({
 	deploymentId,
@@ -27,8 +27,8 @@ export const ManualRunSuccessToastMessage = ({
 		>
 			<div className="flex flex-col">
 				<span className="font-semibold text-green-800">{t("executionSucceed")}</span>
-				<Button className="flex items-center gap-1 p-0 text-green-800 underline">
-					{t("viewSessionOutput")} <ExternalLinkIcon className="size-3 animate-bounce fill-green-800" />
+				<Button className="mt-0.5 flex items-center gap-1 p-0 text-green-800 underline">
+					{t("viewSessionOutput")} <FileArrowRightIcon className="size-4 animate-pulse stroke-green-800" />
 				</Button>
 			</div>
 		</button>

src/components/organisms/topbar/project/manualRun/manualRunSuccessToastMessage.tsx

@@ -8,6 +8,7 @@ export interface Toast {
 	className?: string;
 	hiddenCloseButton?: boolean;
 	customTitle?: React.ReactNode | string;
+	closeOnClick?: boolean;
 }
 
 export type ToasterTypes = "error" | "info" | "success";

src/interfaces/components/toast.interface.ts

@@ -59,7 +59,7 @@
 			"executionFailed": "Session execution failed",
 			"executionFailedExtended": "Session execution failed, projectID - {{projectId}}, error - {{error}}",
 			"executionSucceed": "Session execution succeed",
-			"viewSessionOutput": "View Session Output",
+			"viewSessionOutput": "View session output",
 			"missingActiveDeployment": "Missing last deployment",
 			"missingnEntrypoint": "Missing entrypoint file or function",
 			"useJsonEditor": "Use JSON editor"