From a6c109b3ba036656e92f66431c57efbc24b846b4 Mon Sep 17 00:00:00 2001
From: saiprabhu-dandanayak <saiprabhu.dandanayak@zemosolabs.com>
Date: Mon, 30 Sep 2024 15:45:51 +0530
Subject: [PATCH] feat: allow multiple lines in alert component (#36126)

### Description

### Fixes :
[#30851](https://github.com/appsmithorg/appsmith/issues/30851)

I have raised this pr in-order to allow multiple lines in alert message

### Screenshots

### passing `\n` in the message
![Screenshot from 2024-09-05
13-51-43](https://github.com/user-attachments/assets/02f5fe58-44a6-40e1-a366-c909018e4417)

### unable to parse `\n`
![Screenshot from 2024-09-05
13-50-06](https://github.com/user-attachments/assets/e5fe1d14-4c80-4c5d-8f67-350788d8d84c)

### After issue is resolved
![Screenshot from 2024-09-05
13-55-01](https://github.com/user-attachments/assets/05c8477c-d593-4b5e-9de0-9b6867234c3f)

### Cypress Testing video


https://github.com/user-attachments/assets/ec826cef-664f-4392-b81e-9974178e65ec







<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new styled component `StyledPre` for enhanced formatting
in toast notifications.
- Enhanced the Toast component to better render content, improving
readability by preserving whitespace and formatting.
- Added automated tests for the button widget's alert functionality,
ensuring correct display of messages with newline characters.

- **Bug Fixes**
- Improved the display of alert messages in toast notifications,
ensuring they respect original formatting.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 ...Button_showAlert_multiline_message_spec.ts | 25 +++++++++++++++++++
 .../ads/src/Toast/Toast.styles.tsx            |  4 +++
 .../design-system/ads/src/Toast/Toast.tsx     |  9 +++++--
 3 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/Button_showAlert_multiline_message_spec.ts

diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/Button_showAlert_multiline_message_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/Button_showAlert_multiline_message_spec.ts
new file mode 100644
index 0000000000..25f872bd31
--- /dev/null
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/Button_showAlert_multiline_message_spec.ts
@@ -0,0 +1,25 @@
+import {
+  draggableWidgets,
+  entityExplorer,
+  propPane,
+  agHelper,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  "Tests for showAlert message with newline characters in the alert message",
+  { tags: ["@tag.Widget", "@tag.Button"] },
+  () => {
+    before("Login to the app and navigate to the workspace", function () {
+      entityExplorer.DragDropWidgetNVerify(draggableWidgets.BUTTON);
+    });
+
+    it("Verify showAlert message renders correctly with newline characters", () => {
+      propPane.EnterJSContext("onClick", "showAlert(`sai\n\nprabhu`)");
+      agHelper.ClickButton("Submit");
+      cy.get(".Toastify", { timeout: 1000 }).should(
+        "have.text",
+        "sai\n\nprabhu",
+      );
+    });
+  },
+);
diff --git a/app/client/packages/design-system/ads/src/Toast/Toast.styles.tsx b/app/client/packages/design-system/ads/src/Toast/Toast.styles.tsx
index f27906c4b8..9ae7c80464 100644
--- a/app/client/packages/design-system/ads/src/Toast/Toast.styles.tsx
+++ b/app/client/packages/design-system/ads/src/Toast/Toast.styles.tsx
@@ -63,3 +63,7 @@ export const ToastBody = styled(Text)`
 export const StyledButton = styled(Button)`
   align-self: center;
 `;
+
+export const StyledPre = styled.pre`
+  font: inherit;
+`;
diff --git a/app/client/packages/design-system/ads/src/Toast/Toast.tsx b/app/client/packages/design-system/ads/src/Toast/Toast.tsx
index 26326aa9a4..b83da02d70 100644
--- a/app/client/packages/design-system/ads/src/Toast/Toast.tsx
+++ b/app/client/packages/design-system/ads/src/Toast/Toast.tsx
@@ -4,7 +4,12 @@ import { Slide, toast as toastifyToast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.min.css";
 
 import type { ToastProps } from "./Toast.types";
-import { StyledButton, StyledToast, ToastBody } from "./Toast.styles";
+import {
+  StyledButton,
+  StyledPre,
+  StyledToast,
+  ToastBody,
+} from "./Toast.styles";
 import { getIconByKind } from "../Icon/getIconByKind";
 
 /**
@@ -40,7 +45,7 @@ const toast = {
 
     return toastifyToast(
       <ToastBody kind="body-m">
-        {content}
+        <StyledPre> {content}</StyledPre>
         {actionText && (
           <StyledButton
             kind="tertiary"