From 50d2dad62c5cc93b9ccfad6b9b0836062fd5f465 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Wed, 26 Jul 2023 03:57:14 +0530
Subject: [PATCH] fix: Toast Onclose is removing specific toast (#9960)

* toast behaviour fixed

* Update showToast.tsx

* Adjust E2E test for toast

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/web/playwright/change-password.e2e.ts |  2 +-
 apps/web/playwright/change-theme.e2e.ts    |  4 +-
 apps/web/playwright/event-types.e2e.ts     |  2 +-
 packages/ui/components/toast/showToast.tsx | 47 +++++++++++-----------
 4 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/apps/web/playwright/change-password.e2e.ts b/apps/web/playwright/change-password.e2e.ts
index c172d952bb..e8eeaba41d 100644
--- a/apps/web/playwright/change-password.e2e.ts
+++ b/apps/web/playwright/change-password.e2e.ts
@@ -23,7 +23,7 @@ test.describe("Change Password Test", () => {
 
     await page.locator("text=Update").click();
 
-    const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
+    const toast = await page.waitForSelector('[data-testid="toast-success"]');
 
     expect(toast).toBeTruthy();
   });
diff --git a/apps/web/playwright/change-theme.e2e.ts b/apps/web/playwright/change-theme.e2e.ts
index 9f77e98889..f2051f9eda 100644
--- a/apps/web/playwright/change-theme.e2e.ts
+++ b/apps/web/playwright/change-theme.e2e.ts
@@ -15,7 +15,7 @@ test.describe("Change Theme Test", () => {
     //Click the update button
     await page.click('[data-testid="update-theme-btn"]');
     //Wait for the toast to appear
-    const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
+    const toast = await page.waitForSelector('[data-testid="toast-success"]');
     expect(toast).toBeTruthy();
     //Go to the profile page and check if the theme is dark
     await page.goto(`/${pro.username}`);
@@ -35,7 +35,7 @@ test.describe("Change Theme Test", () => {
     //Click the update theme button
     await page.click('[data-testid="update-theme-btn"]');
     //Wait for the toast to appear
-    const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
+    const toast = await page.waitForSelector('[data-testid="toast-success"]');
     expect(toast).toBeTruthy();
     //Go to the profile page and check if the theme is light
     await page.goto(`/${pro.username}`);
diff --git a/apps/web/playwright/event-types.e2e.ts b/apps/web/playwright/event-types.e2e.ts
index 8b4151ef9c..fedf4688c4 100644
--- a/apps/web/playwright/event-types.e2e.ts
+++ b/apps/web/playwright/event-types.e2e.ts
@@ -97,7 +97,7 @@ test.describe("Event Types tests", () => {
         return !!url.pathname.match(/\/event-types\/.+/);
       });
       await page.locator("[data-testid=update-eventtype]").click();
-      const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
+      const toast = await page.waitForSelector('[data-testid="toast-success"]');
       expect(toast).toBeTruthy();
     });
 
diff --git a/packages/ui/components/toast/showToast.tsx b/packages/ui/components/toast/showToast.tsx
index 3a1d17a737..03820b484b 100644
--- a/packages/ui/components/toast/showToast.tsx
+++ b/packages/ui/components/toast/showToast.tsx
@@ -6,63 +6,64 @@ import { Check, Info } from "../icon";
 type IToast = {
   message: string;
   toastVisible: boolean;
-  onClose: () => void;
+  toastId: string;
+  onClose: (toastId: string) => void;
 };
 
-export const SuccessToast = ({ message, toastVisible, onClose }: IToast) => (
-  <div
+export const SuccessToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
+  <button
     className={classNames(
       "data-testid-toast-success bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
       toastVisible && "animate-fade-in-up cursor-pointer"
     )}
-    onClick={onClose}>
+    onClick={() => onClose(toastId)}>
     <span>
       <Check className="h-4 w-4" />
     </span>
     <p data-testid="toast-success">{message}</p>
-  </div>
+  </button>
 );
 
-export const ErrorToast = ({ message, toastVisible, onClose }: IToast) => (
-  <div
+export const ErrorToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
+  <button
     className={classNames(
       "animate-fade-in-up bg-error text-error mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
       toastVisible && "animate-fade-in-up cursor-pointer"
     )}
-    onClick={onClose}>
+    onClick={() => onClose(toastId)}>
     <span>
       <Info className="h-4 w-4" />
     </span>
     <p data-testid="toast-error">{message}</p>
-  </div>
+  </button>
 );
 
-export const WarningToast = ({ message, toastVisible, onClose }: IToast) => (
-  <div
+export const WarningToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
+  <button
     className={classNames(
       "animate-fade-in-up bg-brand-default text-brand mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
       toastVisible && "animate-fade-in-up cursor-pointer"
     )}
-    onClick={onClose}>
+    onClick={() => onClose(toastId)}>
     <span>
       <Info className="h-4 w-4" />
     </span>
     <p data-testid="toast-warning">{message}</p>
-  </div>
+  </button>
 );
 
-export const DefaultToast = ({ message, toastVisible, onClose }: IToast) => (
-  <div
+export const DefaultToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
+  <button
     className={classNames(
       "animate-fade-in-up bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
       toastVisible && "animate-fade-in-up cursor-pointer"
     )}
-    onClick={onClose}>
+    onClick={() => onClose(toastId)}>
     <span>
       <Check className="h-4 w-4" />
     </span>
     <p>{message}</p>
-  </div>
+  </button>
 );
 
 const TOAST_VISIBLE_DURATION = 6000;
@@ -72,28 +73,28 @@ export function showToast(
   variant: "success" | "warning" | "error",
   duration = TOAST_VISIBLE_DURATION
 ) {
-  const onClose = () => {
-    toast.dismiss();
+  const onClose = (toastId: string) => {
+    toast.remove(toastId);
   };
   switch (variant) {
     case "success":
       return toast.custom(
-        (t) => <SuccessToast message={message} toastVisible={t.visible} onClose={onClose} />,
+        (t) => <SuccessToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />,
         { duration }
       );
     case "error":
       return toast.custom(
-        (t) => <ErrorToast message={message} toastVisible={t.visible} onClose={onClose} />,
+        (t) => <ErrorToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />,
         { duration }
       );
     case "warning":
       return toast.custom(
-        (t) => <WarningToast message={message} toastVisible={t.visible} onClose={onClose} />,
+        (t) => <WarningToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />,
         { duration }
       );
     default:
       return toast.custom(
-        (t) => <DefaultToast message={message} toastVisible={t.visible} onClose={onClose} />,
+        (t) => <DefaultToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />,
         { duration }
       );
   }