Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature]: Allow multiple lines in showAlert message #30851

Open
1 task done
LPTrungGTN opened this issue Feb 2, 2024 · 8 comments · Fixed by #36126
Open
1 task done

[Feature]: Allow multiple lines in showAlert message #30851

LPTrungGTN opened this issue Feb 2, 2024 · 8 comments · Fixed by #36126
Assignees
@rishabhrathod01 @saiprabhu-dandanayak
Labels
Community Reported issues reported by community members Enhancement New feature or request Framework Functions Cases related to internal functions like showAlert(), navigateTo() etc... Javascript Product Issues related to users writing javascript in appsmith Needs Triaging Needs attention from maintainers to triage Query & JS Pod Issues related to the query & JS Pod

Comments

@LPTrungGTN
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

Description

i code alert same here:
showAlert('First line of message \nSecond line of message', 'info')
Screenshot 2024-02-02 at 08 09 24

Steps To Reproduce

go to code make new function
code:
showAlert('First line of message \nSecond line of message', 'info')
and run this function

Public Sample App

No response

Environment

Production

Issue video log

No response

Version

appsmith
@LPTrungGTN LPTrungGTN added Bug Something isn't working Needs Triaging Needs attention from maintainers to triage labels Feb 2, 2024
@Nikhil-Nandagopal Nikhil-Nandagopal added the Community Reported issues reported by community members label Feb 2, 2024
@ame-appsmith ame-appsmith added the Framework Functions Cases related to internal functions like showAlert(), navigateTo() etc... label Feb 2, 2024
@github-actions github-actions bot added the Javascript Product Issues related to users writing javascript in appsmith label Feb 2, 2024
@Nikhil-Nandagopal Nikhil-Nandagopal changed the title [Bug]: can't show alert 2-lines [Feature]: Allow multiple lines in showAlert message Feb 2, 2024
@Nikhil-Nandagopal Nikhil-Nandagopal added Enhancement New feature or request and removed Bug Something isn't working labels Feb 2, 2024
@Nikhil-Nandagopal Nikhil-Nandagopal added the Query & JS Pod Issues related to the query & JS Pod label Aug 5, 2024
@rohan-arthur rohan-arthur added the Inviting Contribution Issues that we would like contributions to label Sep 2, 2024
@saiprabhu-dandanayak
Copy link
Contributor

Hi @Nikhil-Nandagopal , i am intrested in picking up this issue

@rohan-arthur
Copy link
Contributor

@saiprabhu-dandanayak thank you, please go ahead. Please tag @appsmithorg/query-js-pod for review or any other communication

@rishabhrathod01
Copy link
Contributor

@saiprabhu-dandanayak for the direction to solve this, you can check Toast.tsx file.

@saiprabhu-dandanayak
Copy link
Contributor

Hi @rishabhrathod01 , added pre tag to the content and it worked as expected
image

After using pre tag:

Screenshot from 2024-09-03 18-32-41

Do we need to do the same as well at onClick.

@rishabhrathod01
Copy link
Contributor

@saiprabhu-dandanayak The font will need to be the same as earlier and also it will need to follow the design system of appsmith for this please refer to the styles in the component.

@saiprabhu-dandanayak saiprabhu-dandanayak mentioned this issue Sep 5, 2024
Merged
@rishabhrathod01 rishabhrathod01 self-assigned this Sep 24, 2024
nerbos pushed a commit that referenced this issue Sep 30, 2024
@saiprabhu-dandanayak
feat: allow multiple lines in alert component (#36126)
a6c109b 
### Description
 
### Fixes :
[#30851](#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 -->
@rohan-arthur rohan-arthur reopened this Oct 3, 2024
@ALOK9442
Copy link
Contributor

hey @rohan-arthur is it not fixed yet? as you re-opened the issue, I would like to know more about it, and work on it if possible.
Thanks!!

@rishabhrathod01
Copy link
Contributor

hey @rohan-arthur is it not fixed yet? as you re-opened the issue, I would like to know more about it, and work on it if possible. Thanks!!

The PR that closed this issue added a flaky cypress test, which dropped CI stability. Also, the storybook showed an error where the toast UI was bigger than expected. These errors were not anticipated and hence the PR had to be reverted and issue was reopened.

The team plans to use the old PR, fix the issues, and merge again in the future.

@ALOK9442
Copy link
Contributor

@rishabhrathod01 thanks for letting me know

@NilanshBansal NilanshBansal removed the Inviting Contribution Issues that we would like contributions to label Oct 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rishabhrathod01 rishabhrathod01

@saiprabhu-dandanayak saiprabhu-dandanayak

Labels
Community Reported issues reported by community members Enhancement New feature or request Framework Functions Cases related to internal functions like showAlert(), navigateTo() etc... Javascript Product Issues related to users writing javascript in appsmith Needs Triaging Needs attention from maintainers to triage Query & JS Pod Issues related to the query & JS Pod
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: allow multiple lines in alert component saiprabhu-dandanayak/appsmith