Improve UI of Error Toasts

[thikhinab]

• Environment: master branch at commit 39192f4

Description of feature/enhancement
Propose to update the front-end to facilitate error messages to be represented as multiple toasts rather than a single one.

Justification
Currently if there are multiple error messages, it appears in a single toast in certain cases (e.g. where the back-end returns an array of error messages). Since the messages are displayed as an array it reduces the legibility/understanding of errors. Furthermore, the users may also view it as a bug since it seems like the array of messages is returned without being processed.

Image below shows an instance where there are three error messages:

[damithc]

Yes, it might be better to show as three separate lines (like a bullet list). I'm not sure how much formatting is possible inside toasts though.

[thikhinab]

@damithc Okay prof, will start working on this.

[domoberzin]

Hi, is this issue still active? If so, may I work on it?

[weiquu]

Hi @domoberzin, sure please feel free to submit a PR for this

[domoberzin]

Was attempting to fix this, following the conversation in this PR, but realised that by changing the whitespace property to pre-wrap or pre-line:

1. Some E2E tests fail due to new \n characters in the actual status message, compared to the expected
2. Visual appearance of longer messages in the toast are also formatted weirdly as seen in the image below

With all this in mind, I want to ask if there is perhaps a different way to display the error messages? One way I could think of would be to display the errors with different separators, for e.g.
Simply displaying it as a comma separated list without the array brackets or Error 1 || Error 2 || Error 3

[weiquu]

Hi @domoberzin, the issue with the toast message above seems to be caused by lines 804-805 in instructor-course-edit-page.component.ts. I combined them into a single line and the toast message looked fine for me.

Could you also try setting the whitespace property to break-spaces and see if the E2E tests still fail? If so, then I think we can just go with your suggestion.

[domoberzin]

Hello @weiquu, I've worked on it and seem to have found a way to fix the E2E errors by closing the toast after the message within it has been verified, and also by editing the messages to be formatted correctly. They can be found in this PR #12509.

Also, I want to mention that while working on this issue, I found that some E2E test errors, particularly those relating to toast, for example in this test run, were not very specific, since it says that the toast component cannot be found, but the actual error was that the status message did not match with the expected message. Should I open an issue for this?

[weiquu]

Thanks @domoberzin! Sure, feel free to open an issue for it