New: Server Side UI Filtering, Error Boundaries (#501)

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/Components/Modal/Modal.js

@@ -6,6 +6,8 @@ import elementClass from 'element-class';
 import getUniqueElememtId from 'Utilities/getUniqueElementId';
 import * as keyCodes from 'Utilities/Constants/keyCodes';
 import { sizes } from 'Helpers/Props';
+import ErrorBoundary from 'Components/Error/ErrorBoundary';
+import ModalError from './ModalError';
 import styles from './Modal.css';
 
 const openModals = [];
@@ -153,7 +155,8 @@ class Modal extends Component {
       backdropClassName,
       size,
       children,
-      isOpen
+      isOpen,
+      onModalClose
     } = this.props;
 
     if (!isOpen) {
@@ -177,7 +180,12 @@ class Modal extends Component {
             )}
             style={style}
           >
-            {children}
+            <ErrorBoundary
+              errorComponent={ModalError}
+              onModalClose={onModalClose}
+            >
+              {children}
+            </ErrorBoundary>
           </div>
         </div>
       </div>,

frontend/src/Components/Modal/ModalError.css

@@ -0,0 +1,15 @@
+.message {
+  composes: message from 'Components/Error/ErrorBoundaryError.css';
+
+  margin: 0;
+  margin-bottom: 30px;
+  font-weight: normal;
+  font-size: 26px;
+}
+
+.details {
+  composes: details from 'Components/Error/ErrorBoundaryError.css';
+
+  margin: 0;
+  margin-top: 20px;
+}

frontend/src/Components/Modal/ModalError.js

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ErrorBoundaryError from 'Components/Error/ErrorBoundaryError';
+import Button from 'Components/Link/Button';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import styles from './ModalError.css';
+
+function ModalError(props) {
+  const {
+    onModalClose,
+    ...otherProps
+  } = props;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        Error
+      </ModalHeader>
+
+      <ModalBody>
+        <ErrorBoundaryError
+          messageClassName={styles.message}
+          detailsClassName={styles.details}
+          {...otherProps}
+          message='There was an error loading this item'
+        />
+      </ModalBody>
+
+      <ModalFooter>
+        <Button
+          onPress={onModalClose}
+        >
+          Close
+        </Button>
+      </ModalFooter>
+    </ModalContent>);
+}
+
+ModalError.propTypes = {
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default ModalError;