feat: plugin handling

dhis2 · Feb 9, 2023 · 7ee8ed6 · 7ee8ed6
1 parent 7fd0605
commit 7ee8ed6
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 23 deletions.
diff --git a/adapter/i18n/en.pot b/adapter/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2022-09-22T19:11:17.660Z\n"
-"PO-Revision-Date: 2022-09-22T19:11:17.660Z\n"
+"POT-Creation-Date: 2023-02-08T14:36:41.461Z\n"
+"PO-Revision-Date: 2023-02-08T14:36:41.461Z\n"
 
 msgid "Save your data"
 msgstr "Save your data"
@@ -39,12 +39,12 @@ msgstr "An error occurred in the DHIS2 application."
 msgid "Technical details copied to clipboard"
 msgstr "Technical details copied to clipboard"
 
-msgid "Something went wrong"
-msgstr "Something went wrong"
-
 msgid "Try again"
 msgstr "Try again"
 
+msgid "Something went wrong"
+msgstr "Something went wrong"
+
 msgid "Hide technical details"
 msgstr "Hide technical details"
 

diff --git a/adapter/src/components/AppWrapper.js b/adapter/src/components/AppWrapper.js
@@ -1,26 +1,35 @@
 import PropTypes from 'prop-types'
-import React, {createContext, useContext, useState} from 'react'
+import React, { createContext, useContext, useState } from 'react'
 import { useCurrentUserLocale } from '../utils/useLocale.js'
 import { useVerifyLatestUser } from '../utils/useVerifyLatestUser.js'
 import { Alerts } from './Alerts.js'
 import { ConnectedHeaderBar } from './ConnectedHeaderBar.js'
 import { ErrorBoundary } from './ErrorBoundary.js'
 import { LoadingMask } from './LoadingMask.js'
 import { styles } from './styles/AppWrapper.style.js'
-import { PluginErrorProvider, usePluginErrorContext } from '@dhis2/app-runtime'
+import { usePluginContext } from '@dhis2/app-runtime'
 
-const PluginErrorBoundaryWrapper = ({children}) => {
-    const {onPluginError} = usePluginErrorContext()
+const PluginErrorBoundaryWrapper = ({ children }) => {
+    const { onPluginError, clearPluginError } = usePluginContext()
+
+    const retry = () => {
+        clearPluginError()
+        window.location.reload()
+    }
     return (
-        <ErrorBoundary plugin={true} onPluginError={onPluginError} onRetry={() => window.location.reload()}>
+        <ErrorBoundary
+            plugin={true}
+            onPluginError={onPluginError}
+            onRetry={retry}
+        >
             {children}
-        </ErrorBoundary>    
+        </ErrorBoundary>
     )
 }
 
 const AppWrapper = ({ children, plugin }) => {
     const { loading: localeLoading } = useCurrentUserLocale()
-    const { loading: latestUserLoading } = useVerifyLatestUser()    
+    const { loading: latestUserLoading } = useVerifyLatestUser()
 
     if (localeLoading || latestUserLoading) {
         return <LoadingMask />
@@ -31,15 +40,13 @@ const AppWrapper = ({ children, plugin }) => {
             <div className="app-shell-adapter">
                 <style jsx>{styles}</style>
                 <div className="app-shell-app">
-                    <PluginErrorProvider>
-                        <PluginErrorBoundaryWrapper>
-                            {children}
-                        </PluginErrorBoundaryWrapper>
-                    </PluginErrorProvider>
+                    <PluginErrorBoundaryWrapper>
+                        {children}
+                    </PluginErrorBoundaryWrapper>
                 </div>
                 <Alerts />
             </div>
-        )        
+        )
     }
 
     return (
@@ -61,4 +68,4 @@ AppWrapper.propTypes = {
     plugin: PropTypes.bool,
 }
 
-export {usePluginErrorContext, AppWrapper}
+export { AppWrapper }
diff --git a/adapter/src/components/ErrorBoundary.js b/adapter/src/components/ErrorBoundary.js
@@ -69,8 +69,15 @@ export class ErrorBoundary extends Component {
                 return (
                     <>
                         <style jsx>{styles}</style>
-                        <div className='pluginBoundary'>
+                        <div className="pluginBoundary">
                             <span>I am the default plugin boundary</span>
+                            {onRetry && (
+                                <div className="retry">
+                                    <UIButton onClick={onRetry}>
+                                        {i18n.t('Try again')}
+                                    </UIButton>
+                                </div>
+                            )}
                         </div>
                     </>
                 )

diff --git a/adapter/src/components/ServerVersionProvider.js b/adapter/src/components/ServerVersionProvider.js
@@ -13,6 +13,7 @@ export const ServerVersionProvider = ({
     url,
     apiVersion,
     pwaEnabled,
+    plugin,
     children,
 }) => {
     const offlineInterface = useOfflineInterface()
@@ -66,6 +67,7 @@ export const ServerVersionProvider = ({
                 pwaEnabled,
             }}
             offlineInterface={offlineInterface}
+            plugin={plugin}
         >
             {children}
         </Provider>
@@ -79,4 +81,5 @@ ServerVersionProvider.propTypes = {
     children: PropTypes.element,
     pwaEnabled: PropTypes.bool,
     url: PropTypes.string,
+    plugin: PropTypes.bool,
 }
diff --git a/adapter/src/components/styles/ErrorBoundary.style.js b/adapter/src/components/styles/ErrorBoundary.style.js
@@ -109,5 +109,4 @@ export default css`
     .pluginBoundary span {
         display: inline-block;
     }
-    
 `
diff --git a/adapter/src/index.js b/adapter/src/index.js
@@ -1,7 +1,7 @@
 import { checkForSWUpdateAndReload } from '@dhis2/pwa'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { usePluginErrorContext, AppWrapper } from './components/AppWrapper.js'
+import { AppWrapper } from './components/AppWrapper.js'
 import { ErrorBoundary } from './components/ErrorBoundary.js'
 import { OfflineInterfaceProvider } from './components/OfflineInterfaceContext.js'
 import { PWALoadingBoundary } from './components/PWALoadingBoundary.js'
@@ -29,6 +29,7 @@ const AppAdapter = ({
                     url={url}
                     apiVersion={apiVersion}
                     pwaEnabled={pwaEnabled}
+                    plugin={plugin}
                 >
                     <AppWrapper plugin={plugin}>{children}</AppWrapper>
                 </ServerVersionProvider>
@@ -48,4 +49,3 @@ AppAdapter.propTypes = {
 }
 
 export default AppAdapter
-export { AppAdapter as AppAdapter, usePluginErrorContext }
-Original file line number
+Diff line change
@@ Expand Up / @@ -109,5 +109,4 @@ export default css` @@
         .pluginBoundary span {
             display: inline-block;
         }
     `