feat: introduce alerts component to show alerts as alert-bars in a stack #486
Conversation
adapter/src/index.js
Outdated
| @@ -15,6 +16,7 @@ const App = ({ url, apiVersion, appName, children }) => ( | |||
| <HeaderBar appName={appName} /> | |||
| <AuthBoundary url={url}> | |||
| <div className="app-shell-app">{children}</div> | |||
| <Alerts /> | |||
There was a problem hiding this comment.
I felt that inserting Alerts here, as a child of the AuthBoundary and sibling of div.app-shell-app was most appropriate. But that did force me to change prop-types on the AuthBoundary.
| "@dhis2/d2-i18n": "^1.0.5", | ||
| "@dhis2/ui": "^5.4.2", | ||
| "@dhis2/ui": "^5.7.2", |
There was a problem hiding this comment.
We needed a higher version of @dhis2/ui which includes dhis2/ui#300 to avoid an infinite loop when showing more than one alert.
| @@ -28,6 +28,6 @@ export const AuthBoundary = ({ url, children }) => { | |||
| } | |||
|
|
|||
| AuthBoundary.propTypes = { | |||
| children: PropTypes.element, | |||
| children: PropTypes.node, | |||
There was a problem hiding this comment.
See #486 (comment)
Hmmm... should we put it outside the Auth boundary? That way we can show alerts when, i.e., an authentication attempt fails. |
|
Looks great! I think my only recommendation wouuld be to move the AlertStack outside the AuthBoundary |
# [5.5.0](v5.4.2...v5.5.0) (2020-11-16) ### Bug Fixes * **alerts:** make Alerts a sibling of AuthBoundary ([2b607b8](2b607b8)) ### Features * introduce alerts component to show alerts as alert-bars in a stack ([9aea659](9aea659)) * introduce alerts component to show alerts as alert-bars in a stack ([#486](#486)) ([fd22504](fd22504))
|
🎉 This PR is included in version 5.5.0 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
This is the component that goes with the alerts-service. It simply displays the alerts from the alert context as
AlertBarsin anAlertStack. TheonHiddencallback on theAlertBarwill execute theonHiddenpassed as an option touseAlertand also theremovefunction on thealert, which will remove thealertfrom the context.onHiddenis called from theAlertBarafter the hide-animation completes, so things are hiding smoothly.I'll leave some small notes in the code as well.