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

dhis2 · Nov 16, 2020 · 9aea659 · 9aea659
1 parent e74bed0
commit 9aea659
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 85 deletions.
diff --git a/adapter/src/components/Alerts.js b/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>
+    )
+}
diff --git a/adapter/src/components/AuthBoundary.js b/adapter/src/components/AuthBoundary.js
@@ -28,6 +28,6 @@ export const AuthBoundary = ({ url, children }) => {
 }
 
 AuthBoundary.propTypes = {
-    children: PropTypes.element,
+    children: PropTypes.node,
     url: PropTypes.string,
 }
diff --git a/adapter/src/index.js b/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'
 
@@ -15,6 +16,7 @@ const App = ({ url, apiVersion, appName, children }) => (
                 <HeaderBar appName={appName} />
                 <AuthBoundary url={url}>
                     <div className="app-shell-app">{children}</div>
+                    <Alerts />
                 </AuthBoundary>
             </div>
         </ServerVersionProvider>

diff --git a/examples/simple-app/src/Alerter.js b/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>
+    )
+}
diff --git a/examples/simple-app/src/App.js b/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>

diff --git a/shell/package.json b/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",

diff --git a/yarn.lock b/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"