Skip to content
This repository has been archived by the owner on Apr 12, 2022. It is now read-only.

Use Toasts for Success and Error Alerts #2675

Merged
merged 4 commits into from
Dec 13, 2021
Merged

Use Toasts for Success and Error Alerts #2675

merged 4 commits into from
Dec 13, 2021

Conversation

evantahler
Copy link
Member

@evantahler evantahler commented Dec 12, 2021

This PR swaps our rather aggressive ErrorAlert and SuccessAlerts for Toasts! These toasts are 'pinned' to the UI (position:fixed) so you see them no matter where you are in the UI. Like before, they fade away after 4 seconds.

Screen Shot 2021-12-12 at 2 47 30 PM

Screen Shot 2021-12-12 at 2 47 34 PM

Screen Shot 2021-12-12 at 2 47 52 PM

This PR collapsed the APIs of SucessHandler and ErrorHandler to be the same, accepting the "message" to show to the user. This PR does not modify any of the content of these messages, except for removing a starting Error: on error messages


For Reference, here's what things used to look like:

Screen Shot 2021-12-12 at 2 56 14 PM

Checklists

Development

  • Application changes have been tested appropriately

Impact

  • Code follows company security practices and guidelines
  • Security impact of change has been considered
  • Performance impact of change has been considered
  • Possible migration needs considered (model migrations, config migrations, etc.)

Please explain any security, performance, migration, or other impacts if relevant:

Code review

  • Pull request has a descriptive title and context useful to a reviewer. Screenshots or screencasts are attached where applicable.
  • Relevant tags have been added to the PR (bug, enhancement, internal, etc.)

@evantahler evantahler added the enhancement New feature or request label Dec 12, 2021
@evantahler evantahler changed the title Use Toats for Success and Error Alerts Use Toasts for Success and Error Alerts Dec 12, 2021
Copy link
Contributor

@edmundito edmundito left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great to see this, looking much better than before.

ui/ui-components/components/alerts/Toast.tsx Outdated Show resolved Hide resolved
ui/ui-components/components/alerts/Toast.tsx Outdated Show resolved Hide resolved
ui/ui-components/components/alerts/Toast.tsx Outdated Show resolved Hide resolved
ui/ui-components/components/alerts/Toast.tsx Outdated Show resolved Hide resolved
@evantahler
Copy link
Member Author

Updated in 2610ca0 with some better types and hook logic

Copy link
Contributor

@krishnaglick krishnaglick left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems fine, I'd be inclined to stringify the errors on the way in but we might want to keep them intact in case we need them later.

Comment on lines +56 to +63
function formatMessage(message: string | Error) {
let formattedMessage = String(message);
if (formattedMessage.startsWith("Error: ")) {
formattedMessage = formattedMessage.replace("Error: ", "");
}

return formattedMessage;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick. This could be:
const formatMessage = (message: string | Error) => String(message).replace("Error: ", "");

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The startsWith check seemed important, as I didn't want to mess with There was an Error: you broke it (unlikely with that capital E in there, but you never know... it's an error).

@evantahler evantahler merged commit 9a5390e into main Dec 13, 2021
@evantahler evantahler deleted the 180481500-toasty branch December 13, 2021 17:13
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants