feat: cleanup plugin error boundary [UX-136]

dhis2 · Jun 21, 2024 · 700f2e5 · 700f2e5
1 parent 80336e1
commit 700f2e5
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 16 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: 2024-04-24T13:58:13.591Z\n"
-"PO-Revision-Date: 2024-04-24T13:58:13.591Z\n"
+"POT-Creation-Date: 2024-06-21T08:27:55.991Z\n"
+"PO-Revision-Date: 2024-06-21T08:27:55.991Z\n"
 
 msgid "Save your data"
 msgstr "Save your data"
@@ -39,6 +39,12 @@ msgstr "An error occurred in the DHIS2 application."
 msgid "Technical details copied to clipboard"
 msgstr "Technical details copied to clipboard"
 
+msgid "There was a problem loading this plugin"
+msgstr "There was a problem loading this plugin"
+
+msgid "Copy debug info to clipboard"
+msgstr "Copy debug info to clipboard"
+
 msgid "Try again"
 msgstr "Try again"
 
@@ -48,9 +54,6 @@ msgstr "Something went wrong"
 msgid "Redirect to safe login mode"
 msgstr "Redirect to safe login mode"
 
-msgid "Redirect to safe login mode"
-msgstr "Redirect to safe login mode"
-
 msgid "Hide technical details"
 msgstr "Hide technical details"
 

diff --git a/adapter/src/components/ErrorBoundary.js b/adapter/src/components/ErrorBoundary.js
@@ -8,18 +8,35 @@ import styles from './styles/ErrorBoundary.style.js'
 // In order to avoid using @dhis2/ui components in the error boundary - as anything
 // that breaks within it will not be caught properly - we define a component
 // with the same styles as Button
-const UIButton = ({ children, onClick }) => (
+const UIButton = ({ children, onClick, plugin }) => (
     <>
         <style jsx>{buttonStyles}</style>
-        <button onClick={onClick}>{children}</button>
+        <button className={plugin ? 'pluginButton' : null} onClick={onClick}>
+            {children}
+        </button>
     </>
 )
 
 UIButton.propTypes = {
     children: PropTypes.node.isRequired,
     onClick: PropTypes.func.isRequired,
+    plugin: PropTypes.bool,
 }
 
+const InfoIcon24 = () => (
+    <svg
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="m12 2c5.5228475 0 10 4.4771525 10 10s-4.4771525 10-10 10-10-4.4771525-10-10 4.4771525-10 10-10zm0 2c-4.418278 0-8 3.581722-8 8s3.581722 8 8 8 8-3.581722 8-8-3.581722-8-8-8zm1 7v6h-2v-6zm-1-4c.5522847 0 1 .44771525 1 1s-.4477153 1-1 1-1-.44771525-1-1 .4477153-1 1-1z"
+            fill="#A0ADBA"
+        ></path>
+    </svg>
+)
+
 const translatedErrorHeading = i18n.t(
     'An error occurred in the DHIS2 application.'
 )
@@ -61,6 +78,13 @@ export class ErrorBoundary extends Component {
         })
     }
 
+    handleCopyErrorDetailsPlugin = ({ error, errorInfo }) => {
+        const errorDetails = `${error}\n${error?.stack}\n${errorInfo?.componentStack}`
+        navigator.clipboard.writeText(errorDetails).then(() => {
+            alert(i18n.t('Technical details copied to clipboard'))
+        })
+    }
+
     handleSafeLoginRedirect = () => {
         window.location.href =
             this.props.baseURL +
@@ -77,10 +101,26 @@ export class ErrorBoundary extends Component {
                     <>
                         <style jsx>{styles}</style>
                         <div className="pluginBoundary">
-                            <span>I am the default plugin boundary</span>
+                            <InfoIcon24 />
+                            <div className="pluginErrorMessage">
+                                {i18n.t(
+                                    'There was a problem loading this plugin'
+                                )}
+                            </div>
+                            <div
+                                className="pluginErrorCopy"
+                                onClick={() => {
+                                    this.handleCopyErrorDetailsPlugin({
+                                        error: this.state.error,
+                                        errorInfo: this.state.errorInfo,
+                                    })
+                                }}
+                            >
+                                {i18n.t('Copy debug info to clipboard')}
+                            </div>
                             {onRetry && (
-                                <div className="retry">
-                                    <UIButton onClick={onRetry}>
+                                <div className="pluginRetry">
+                                    <UIButton onClick={onRetry} plugin>
                                         {i18n.t('Try again')}
                                     </UIButton>
                                 </div>

diff --git a/adapter/src/components/styles/Button.style.js b/adapter/src/components/styles/Button.style.js
@@ -7,7 +7,8 @@ import css from 'styled-jsx/css'
 const grey900 = '#21934',
     grey500 = '#a0adba',
     grey200 = '#f3f5f7',
-    primary600 = '#147cd7'
+    primary600 = '#147cd7',
+    grey600 = '#6C7787'
 
 export default css`
     button {
@@ -87,4 +88,15 @@ export default css`
     button:focus::after {
         border-color: ${primary600};
     }
+
+    .pluginButton {
+        /*small*/
+        height: 28px;
+        padding: 0 6px;
+        font-size: 14px;
+        line-height: 16px;
+
+        /*text color for plugin error*/
+        color: ${grey600};
+    }
 `
diff --git a/adapter/src/components/styles/ErrorBoundary.style.js b/adapter/src/components/styles/ErrorBoundary.style.js
@@ -6,7 +6,8 @@ const bgColor = '#F4F6F8',
     secondaryTextColor = '#494949',
     errorColor = '#D32F2F',
     grey050 = '#FBFCFD',
-    red200 = '#ffcdd2'
+    grey100 = '#F8F9FA',
+    grey600 = '#6C7787'
 
 export default css`
     .mask {
@@ -103,10 +104,28 @@ export default css`
     }
 
     .pluginBoundary {
-        background-color: ${red200};
+        background-color: ${grey100};
+        height: 100vh;
+        width: 100vw;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-block-start: 16px;
+    }
+
+    .pluginErrorMessage {
+        margin-block-start: 8px;
+        color: ${grey600};
+    }
+
+    .pluginErrorCopy {
+        margin-block-start: 8px;
+        color: ${grey600};
+        text-decoration: underline;
+        font-size: 14px;
     }
 
-    .pluginBoundary span {
-        display: inline-block;
+    .pluginRetry {
+        margin-block-start: 16px;
     }
 `
diff --git a/shell/src/PluginOuterErrorBoundary.js b/shell/src/PluginOuterErrorBoundary.js
@@ -1,6 +1,23 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
+const grey100 = '#F8F9FA',
+    grey600 = '#6C7787'
+
+const InfoIcon24 = () => (
+    <svg
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="m12 2c5.5228475 0 10 4.4771525 10 10s-4.4771525 10-10 10-10-4.4771525-10-10 4.4771525-10 10-10zm0 2c-4.418278 0-8 3.581722-8 8s3.581722 8 8 8 8-3.581722 8-8-3.581722-8-8-8zm1 7v6h-2v-6zm-1-4c.5522847 0 1 .44771525 1 1s-.4477153 1-1 1-1-.44771525-1-1 .4477153-1 1-1z"
+            fill="#A0ADBA"
+        ></path>
+    </svg>
+)
+
 export class PluginOuterErrorBoundary extends Component {
     constructor(props) {
         super(props)
@@ -20,7 +37,34 @@ export class PluginOuterErrorBoundary extends Component {
     render() {
         const { children } = this.props
         if (this.state.error) {
-            return <p>Plugin outermost error boundary</p>
+            return (
+                <>
+                    <div className="pluginBoundary">
+                        <InfoIcon24 />
+                        <div className="pluginErrorMessage">
+                            There was a problem loading this plugin
+                        </div>
+                    </div>
+                    <style jsx>
+                        {`
+                            .pluginBoundary {
+                                background-color: ${grey100};
+                                height: 100vh;
+                                width: 100vw;
+                                display: flex;
+                                flex-direction: column;
+                                align-items: center;
+                                padding-block-start: 16px;
+                            }
+
+                            .pluginErrorMessage {
+                                margin-block-start: 8px;
+                                color: ${grey600};
+                            }
+                        `}
+                    </style>
+                </>
+            )
         }
 
         return children