feat: introduce alerts component to show alerts as alert-bars in a st…

…ack (#486)

* feat: introduce alerts component to show alerts as alert-bars in a stack

* fix(alerts): make Alerts a sibling of AuthBoundary

adapter/src/components/Alerts.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { useAlerts } from '@dhis2/app-runtime'
+import { AlertBar, AlertStack } from '@dhis2/ui'
+
+export const Alerts = () => {
+ const alerts = useAlerts()
+
+ return (
+ <AlertStack>
+ {alerts.map(
+ ({ message, remove, id, options: { onHidden, ...props } }) => (
+ <AlertBar
+ {...props}
+ key={id}
+ onHidden={() => {
+ onHidden && onHidden()
+ remove()
+ }}
+ >
+ {message}
+ </AlertBar>
+ )
+ )}
+ </AlertStack>
+ )
+}

adapter/src/index.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { HeaderBar } from '@dhis2/ui'
+import { Alerts } from './components/Alerts'
+import { AuthBoundary } from './components/AuthBoundary'
 import { FatalErrorBoundary } from './components/FatalErrorBoundary'
 import { ServerVersionProvider } from './components/ServerVersionProvider'
-import { AuthBoundary } from './components/AuthBoundary'
 
 import { styles } from './styles.js'
 
@@ -16,6 +17,7 @@ const App = ({ url, apiVersion, appName, children }) => (
  <AuthBoundary url={url}>
  <div className="app-shell-app">{children}</div>
  </AuthBoundary>
+ <Alerts />
  </div>
  </ServerVersionProvider>
  </FatalErrorBoundary>

examples/simple-app/src/Alerter.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { useAlert } from '@dhis2/app-runtime'
+import { InputField, Button } from '@dhis2/ui'
+
+export const Alerter = () => {
+ const [message, setMessage] = useState('')
+ const { show } = useAlert(str => str)
+
+ return (
+ <div>
+ <InputField
+ placeholder="Type alert message"
+ value={message}
+ onChange={({ value }) => setMessage(value)}
+ />
+ <Button onClick={() => show(message)}>Show alert</Button>
+ <style jsx>{`
+ div {
+ display: flex;
+ align-items: baseline;
+ }
+ `}</style>
+ </div>
+ )
+}

examples/simple-app/src/App.js

@@ -2,6 +2,7 @@ import React from 'react'
 import i18n from './locales'
 import moment from 'moment'
 import { useDataQuery } from '@dhis2/app-runtime'
+import { Alerter } from './Alerter.js'
 import style from './App.style'
 
 const query = {
@@ -27,6 +28,7 @@ const Component = () => {
  ],
  })}
  </h3>
+ <Alerter />
  </>
  )}
  </div>

shell/package.json

@@ -13,9 +13,9 @@
  },
  "dependencies": {
  "@dhis2/app-adapter": "5.4.2",
- "@dhis2/app-runtime": "^2.2.2",
+ "@dhis2/app-runtime": "^2.6.1",
  "@dhis2/d2-i18n": "^1.0.5",
- "@dhis2/ui": "^5.4.2",
+ "@dhis2/ui": "^5.7.2",
  "classnames": "^2.2.6",
  "moment": "^2.24.0",
  "prop-types": "^15.7.2",

yarn.lock

@@ -1971,6 +1971,13 @@
  dependencies:
  regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.1":
+ version "7.12.5"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
+ integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
+ dependencies:
+ regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.3.1", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
  version "7.9.6"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
@@ -2245,23 +2252,29 @@
  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
  integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
-"@dhis2/app-runtime@^2.2.2":
- version "2.2.2"
- resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-2.2.2.tgz#c2129c03d4ff3bca4eb3811d82f24d3acea07e5a"
- integrity sha512-0890q1deNT/aJtjtxkDROViZBrA0EP00HVMht8YAfM+uJsnvADrtjizP53r68uamZWpCZmLQsi+2xiVAQZmvXA==
+"@dhis2/app-runtime@^2.6.1":
+ version "2.6.1"
+ resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-2.6.1.tgz#cd0b08dff51847d5694d756bfda86867480d2359"
+ integrity sha512-gfg2cdbL7zWErhM4Q9OE9P3XTt1E/P0iM2NN/JoXE+w+NxxU8z4V82VBtmRwbuERYP9g2FfPFPY8CeIyRjCJTg==
  dependencies:
- "@dhis2/app-service-config" "2.2.2"
- "@dhis2/app-service-data" "2.2.2"
+ "@dhis2/app-service-alerts" "2.6.1"
+ "@dhis2/app-service-config" "2.6.1"
+ "@dhis2/app-service-data" "2.6.1"
 
-"@dhis2/app-service-config@2.2.2":
- version "2.2.2"
- resolved "https://registry.yarnpkg.com/@dhis2/app-service-config/-/app-service-config-2.2.2.tgz#9de0bc717ede669ee810fb7d4d84c0d35532a426"
- integrity sha512-ohPCNX1hBMh/+0L5gxrSrfH/Bz787x60L4GMWODO0WEO73M6kGCjzaYZ0vjgmSCSUYJxZ6cBeybr0FBArxHjbw==
+"@dhis2/app-service-alerts@2.6.1":
+ version "2.6.1"
+ resolved "https://registry.yarnpkg.com/@dhis2/app-service-alerts/-/app-service-alerts-2.6.1.tgz#5bae66ecac1c11c65ab3ad2d7c574de9402353ad"
+ integrity sha512-O+y6dKODnnUCw+JcKmDlEKqYXIYwv4X+e7YY6fhF+QrucGiiX//8B8l7G729/fxccORKHCtAqDF0ag5eMAMgmg==
 
-"@dhis2/[email protected]":
- version "2.2.2"
- resolved "https://registry.yarnpkg.com/@dhis2/app-service-data/-/app-service-data-2.2.2.tgz#093d45b8bb71b5b1e81876281379cda52b6632a7"
- integrity sha512-QJrYTFj+vINcqvr27yLIKunbNJTVmDPGr9fUliUdmTkCikTwlnK8fu6TPz3rhkOUYX0VrwzFJXp3ofKQajZ9mQ==
+"@dhis2/[email protected]":
+ version "2.6.1"
+ resolved "https://registry.yarnpkg.com/@dhis2/app-service-config/-/app-service-config-2.6.1.tgz#df9fe47c84be18a43074c09364fa9266ec36a688"
+ integrity sha512-E6GJ+jEgWIcD9i1aKMUnhIHIr55TjixJcetwSua5ZETo3VSnjoM47mepqYQwULv21VosnNOzdiCZDMw7dAXLGA==
+
+"@dhis2/[email protected]":
+ version "2.6.1"
+ resolved "https://registry.yarnpkg.com/@dhis2/app-service-data/-/app-service-data-2.6.1.tgz#260e3aa2e3901198b3c1adf0aa1696437544f40f"
+ integrity sha512-J0fOxRgrxTJaIh31pi/gdg7J0UsstTzuLBCxtyLWCifGam3FehtZM9YQRkmOY7cANYVJfk3BqGVTP0nVXoQCVg==
 
 "@dhis2/[email protected]":
  version "2.0.1"
@@ -2351,59 +2364,59 @@
  dependencies:
  prop-types "^15"
 
-"@dhis2/ui-constants@5.4.2":
- version "5.4.2"
- resolved "https://registry.yarnpkg.com/@dhis2/ui-constants/-/ui-constants-5.4.2.tgz#b5e50ceadfc791ead5f956490fd60c41f40589a8"
- integrity sha512-PhcmVTvgPWRzgWH0BkLm2QtrAXUlnIp8AR6pPDY6MqHq2+43Mqhe/5Zlss7Wg9BGL7XbmJEzeku539QAwVBDcQ==
+"@dhis2/ui-constants@5.7.3":
+ version "5.7.3"
+ resolved "https://registry.yarnpkg.com/@dhis2/ui-constants/-/ui-constants-5.7.3.tgz#6c484133fdb17e0b71ddb6d621c472b510b3093f"
+ integrity sha512-bs7Y9KPtC/7z9usIUSJxtNqNMGW3f1gZ3tYqGdHnPNknr3RyKPVzgF9VH8r5bNVZUJqSN4EbwtjB2i53EsNHFA==
  dependencies:
  "@dhis2/prop-types" "^1.6.4"
 
-"@dhis2/ui-core@5.4.2":
- version "5.4.2"
- resolved "https://registry.yarnpkg.com/@dhis2/ui-core/-/ui-core-5.4.2.tgz#90ea4ded3786dd0499480d939db0918d95400bc8"
- integrity sha512-1ET0KiBj957h8051niSTzDSNaJz6iKooV3qiV8u+AyWY56ukUMtqpCFz4Vt/6WoYKqHbE2RF/WeFO55YYvvJqw==
+"@dhis2/ui-core@5.7.3":
+ version "5.7.3"
+ resolved "https://registry.yarnpkg.com/@dhis2/ui-core/-/ui-core-5.7.3.tgz#0b20723de22b1ac2ef4a7d9a91bd909573d044a8"
+ integrity sha512-2kP/D61amgCrr0FZZBTniWLGLCdMlQbQxAC7WCP1NVYufFmIHcjLyRvhGLZbHfqsFppHF0CNiQOxZB6oKI3gvg==
  dependencies:
  "@dhis2/prop-types" "^1.6.4"
- "@popperjs/core" "^2.4.2"
+ "@popperjs/core" "^2.5.3"
  classnames "^2.2.6"
  react-popper "^2.2.3"
  resize-observer-polyfill "^1.5.1"
 
-"@dhis2/ui-forms@5.4.2":
- version "5.4.2"
- resolved "https://registry.yarnpkg.com/@dhis2/ui-forms/-/ui-forms-5.4.2.tgz#921203365ae1829affa72c1ee91cf20a7c4a4e71"
- integrity sha512-xK8tsmZT+TKw+QO7c2JdFXX7SOCuWC0Jv5HK0PgKuy6dE9xT9+PqmNzpWXXrL3yXO33RzI2+/DkQw1aTerHREQ==
+"@dhis2/ui-forms@5.7.3":
+ version "5.7.3"
+ resolved "https://registry.yarnpkg.com/@dhis2/ui-forms/-/ui-forms-5.7.3.tgz#cb84339089234d9565654937611fd70dbacdd9c9"
+ integrity sha512-sKBvolbcffC01+t1krDrA2y8oEmsenkLSFi6AyXmQN8M8YD2x8SECoJILLGUVVaeMXQ81tvgFzfnjh1XZjaI4A==
  dependencies:
  "@dhis2/prop-types" "^1.6.4"
  classnames "^2.2.6"
- final-form "^4.20.0"
- react-final-form "^6.5.0"
+ final-form "^4.20.1"
+ react-final-form "^6.5.1"
 
-"@dhis2/ui-icons@5.4.2":
- version "5.4.2"
- resolved "https://registry.yarnpkg.com/@dhis2/ui-icons/-/ui-icons-5.4.2.tgz#ba96f071ed6a72c238b88d7d2dddbd07c6c653b1"
- integrity sha512-sznJw/ODCvsTLt6t+4Nesks7P5J+7jLAmjc4i8RF55IB1UXlo6T6339yleupHnMzFvmLHQe3DlhRtWP1drCZRg==
+"@dhis2/ui-icons@5.7.3":
+ version "5.7.3"
+ resolved "https://registry.yarnpkg.com/@dhis2/ui-icons/-/ui-icons-5.7.3.tgz#d6df117b0001a405caa874d5f887c4f088bc1357"
+ integrity sha512-UGBhF41JmVrZcz2Acliv7TCJhTP1tu7zv3iQQgzm9QG4iwXj6sD0veiLgOUwenw12gqPcv0HfErqjigYflyVLw==
  dependencies:
  "@dhis2/prop-types" "^1.6.4"
 
-"@dhis2/ui-widgets@5.4.2":
- version "5.4.2"
- resolved "https://registry.yarnpkg.com/@dhis2/ui-widgets/-/ui-widgets-5.4.2.tgz#8e2c1cf27b6515b51140e07f2c4f8cd05c6885bf"
- integrity sha512-TpTDIqjGO52CMzmAtuwO7HjUVaWm+7gP68FM14nOI40nwCHaWe5j8XLBhtlGAsnmSxRewCd7Iohdqd1NbABYsA==
+"@dhis2/ui-widgets@5.7.3":
+ version "5.7.3"
+ resolved "https://registry.yarnpkg.com/@dhis2/ui-widgets/-/ui-widgets-5.7.3.tgz#89fdb5a693968da53cb673df22d27dee7bec8164"
+ integrity sha512-J5xHpR502/yi+mZl4x19PxlRnFlcparIgICD0FuAhwWazbjWKi2xJr3fcff2kej+qWdPQx+oum2d4UYPfkUOCg==
  dependencies:
  "@dhis2/prop-types" "^1.6.4"
  classnames "^2.2.6"
 
-"@dhis2/ui@^5.4.2":
- version "5.4.2"
- resolved "https://registry.yarnpkg.com/@dhis2/ui/-/ui-5.4.2.tgz#a47461606dc1aa3540d01124e419dd5abb868ba8"
- integrity sha512-BwMbjDFderkRXgoGmvHvjgo90/9kg94iV1q3NJ9ZsPWK54KUubVCEXkjBqJnUPqsHmpdgH+wPyIIhlYdKwENsA==
+"@dhis2/ui@^5.7.2":
+ version "5.7.3"
+ resolved "https://registry.yarnpkg.com/@dhis2/ui/-/ui-5.7.3.tgz#78c6abdf2482a9ebb487f6d6666111a59f4ebb06"
+ integrity sha512-MXc9JxTJ5Z9tmDJbzNKsjcTJfvUWkypdTV2fGmaMpx3HInx+w8Y3FhivUrcsFXtpARmG/58YerWwYZaWS0OyBQ==
  dependencies:
- "@dhis2/ui-constants" "5.4.2"
- "@dhis2/ui-core" "5.4.2"
- "@dhis2/ui-forms" "5.4.2"
- "@dhis2/ui-icons" "5.4.2"
- "@dhis2/ui-widgets" "5.4.2"
+ "@dhis2/ui-constants" "5.7.3"
+ "@dhis2/ui-core" "5.7.3"
+ "@dhis2/ui-forms" "5.7.3"
+ "@dhis2/ui-icons" "5.7.3"
+ "@dhis2/ui-widgets" "5.7.3"
 
 "@eslint/eslintrc@^0.2.1":
  version "0.2.1"
@@ -2828,10 +2841,10 @@
  schema-utils "^2.6.5"
  source-map "^0.7.3"
 
-"@popperjs/core@^2.4.2":
- version "2.4.4"
- resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.4.tgz#11d5db19bd178936ec89cd84519c4de439574398"
- integrity sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg==
+"@popperjs/core@^2.5.3":
+ version "2.5.4"
+ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.5.4.tgz#de25b5da9f727985a3757fd59b5d028aba75841a"
+ integrity sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ==
 
 "@rollup/plugin-node-resolve@^7.1.1":
  version "7.1.3"
@@ -2861,11 +2874,6 @@
  estree-walker "^1.0.1"
  picomatch "^2.2.2"
 
-"@scarf/scarf@^1.0.5":
- version "1.0.5"
- resolved "https://registry.yarnpkg.com/@scarf/scarf/-/scarf-1.0.5.tgz#accee0bce88a9047672f7c8faf3cada59c996b81"
- integrity sha512-9WKaGVpQH905Aqkk+BczFEeLQxS07rl04afFRPUG9IcSlOwmo5EVVuuNu0d4M9LMYucObvK0LoAe+5HfMW2QhQ==
-
 "@sindresorhus/is@^0.14.0":
  version "0.14.0"
  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
@@ -4912,15 +4920,10 @@ caniuse-api@^3.0.0:
  lodash.memoize "^4.1.2"
  lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001043:
- version "1.0.30001052"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001052.tgz#33a5ddd13783cfe2c8a6a846ab983387d4edff75"
- integrity sha512-b2/oWZwkpWzEB1+Azr2Z4FcpdDkH+9R4dn+bkwk/6eH9mRSrnZjhA6v32+zsV+TSqC0pp2Rxush2yUVTJ0dJTQ==
-
-caniuse-lite@^1.0.30001125:
- version "1.0.30001154"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001154.tgz#f3bbc245ce55e4c1cd20fa731b097880181a7f17"
- integrity sha512-y9DvdSti8NnYB9Be92ddMZQrcOe04kcQtcxtBx4NkB04+qZ+JUWotnXBJTmxlKudhxNTQ3RRknMwNU2YQl/Org==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001125:
+ version "1.0.30001158"
+ resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001158.tgz"
+ integrity sha512-s5loVYY+yKpuVA3HyW8BarzrtJvwHReuzugQXlv1iR3LKSReoFXRm86mT6hT7PEF5RxW+XQZg+6nYjlywYzQ+g==
 
 capture-exit@^2.0.0:
  version "2.0.0"
@@ -7555,13 +7558,12 @@ fill-range@^7.0.1:
  dependencies:
  to-regex-range "^5.0.1"
 
-final-form@^4.20.0:
- version "4.20.0"
- resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.20.0.tgz#454ba46f783a4c4404ad875cf36f470395ad5efa"
- integrity sha512-kdPGNlR/23M2p7ccVwE/vCBQH9TH1NAhhMVkETHbaQXkTWIJdEii3ZdHrOgYvFY7O87myEhcqzx3zjMERtoNJg==
+final-form@^4.20.1:
+ version "4.20.1"
+ resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.20.1.tgz#525a7f7f27f55c28d8994b157b24d6104fc560e9"
+ integrity sha512-IIsOK3JRxJrN72OBj7vFWZxtGt3xc1bYwJVPchjVWmDol9DlzMSAOPB+vwe75TUYsw1JaH0fTQnIgwSQZQ9Acg==
  dependencies:
  "@babel/runtime" "^7.10.0"
- "@scarf/scarf" "^1.0.5"
 
 [email protected], finalhandler@~1.1.2:
  version "1.1.2"
@@ -13322,14 +13324,12 @@ react-fast-compare@^3.0.1:
  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
-react-final-form@^6.5.0:
- version "6.5.0"
- resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-6.5.0.tgz#b0440acf534fd57991c048764ab20af13124aed6"
- integrity sha512-H97PLCtfMIN32NHqm85E738Pj+NOF1p0eQEG+h5DbdaofwtqDRp7taHu45+PlXOqg9ANbM6MyXkYxWpIiE6qbQ==
+react-final-form@^6.5.1:
+ version "6.5.2"
+ resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-6.5.2.tgz#d04d1eb7d92eabc6f6c35206bb0eebfc4bfd924b"
+ integrity sha512-c5l45FYOoxtfpvsvMFh3w2WW8KNxbuebBUrM16rUrooQkewTs0Zahmv0TuKFX5jsC9BKn5Fo84j3ZVXQdURS4w==
  dependencies:
- "@babel/runtime" "^7.10.0"
- "@scarf/scarf" "^1.0.5"
- ts-essentials "^6.0.5"
+ "@babel/runtime" "^7.12.1"
 
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
  version "16.13.1"
@@ -15615,11 +15615,6 @@ tryer@^1.0.1:
  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
  integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
-ts-essentials@^6.0.5:
- version "6.0.5"
- resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-6.0.5.tgz#dd5b98f73bd56dc94d15dfbc0fbf01da3163eb42"
- integrity sha512-RSAKlpu+E0DCGY8FsbG92EveRLw2Y+UgK3ksX01w1VaHeG01dKkYo/KtAV4q0qPT6nPbLfyerb2YPVSediP+8g==
-
 [email protected], ts-pnp@^1.1.6:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"