Notifications: really long error messages cannot be dismissed

[ErisDS]

When importing data it is possible to get a really really really long error message.

I can provide a file which will cause this to happen so that it can be reproduced.

This is an edge case, and we want to do further work to handle those error messages in this case, but nonetheless, I think the toaster style notifications should be tweaked to ensure the close button can never be outside of the viewport.

Update: This can be reproduced by using the following old wordpress-ghost export file: https://dl.dropboxusercontent.com/u/531857/ghost/wp2ghost_export_1381230960.json

The bug that caused this to happen has been fixed in the later versions of the ghost wordpress plugin, but people may still try to use the old one and get error messages that are undismissable like this.

[bastilian]

@ErisDS if you provide the file and steps to reproduce I can take care of this later today, latest tomorrow.

[ErisDS]

Wiring up the escape key to dismiss all notifications might be a reasonable quick-fix for this for now.

[ErisDS]

Have added a link to my own export file which causes this.

[ErisDS]

This issue has gone into a special 0.4.1 milestone for a maintenance release sometime within the next month. Master will continue to be work in progress for the active milestone 0.5. A special 0.4-maintenance branch has been created. The workflow for these fixes is that PRs for 0.4.1 should be made to that branch rather than master and then I will merge it back into master.

Unfortunately, it's not possible to change open PRs to go to a different branch, a brand new PR has to be created & the old one closed.There were already many PRs open for the 0.4.1 issues before the branch was created, and I am not asking or requiring anyone with an already open PR to master to do this - I am able to manually merge the changes into the right branch. However, I will appreciate anyone who has a few minutes to save me the job 👍

[ErisDS]

@JohnONolan these can be dismissed with the ESC key, but do you have any further ideas how to improve this?

[gotdibbs]

@ErisDS I know my name isn't @JohnONolan but just wanted to toss in a couple thoughts.

Trim the message after a predetermined length and use an ellipsis. To ensure the whole message is visible, do one/some of the following:

1. Log the whole message to the console.
2. Have the click handler for the notification dismiss the notification itself while opening the full text of the message in a modal.
3. Have the notification grow to fit the on hover or click.

Obviously some of these are more long-term fixes though.

[JohnONolan]

Ideally we should never generate such a long error message in the UI. As @gotdibbs said, full output could go in the console, but the notification bubble should be something human readable.

Eg. "Your data could not be imported due to duplicate tags. Please amend your import file and try again."

With an option link to more info, which could include a note about the full output being in the console.

[PaulAdamDavis]

I guess another, additional improvement to all the above would be to add a max height of something like 400px (with media queries for smaller height screens). Though it wouldn't look pretty for most people until custom scrollbars are implemented.

This may also help with translated messages. Not the best solution, but a decent fallback for when anything mental gets chucked into a notification.

[JohnONolan]

That's not a bad idea - just need the scrollbars!

[PxlBuzzard]

+1 for scrollbars. Alternatively, adding a bottom-based close button might look good and solve the problem: