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 -->

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",
+      );
+    });
+  },
+);

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;
+`;

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"