feat(Service): Add error screen for services that failed to load

4 files changed, 125 insertions, 0 deletions

diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
new file mode 100644
index 000000000..05a64209b
--- /dev/null
+++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+
+import Button from '../../../ui/Button';
+
+import styles from './styles';
+
+const messages = defineMessages({
+  headline: {
+    id: 'service.errorHandler.headline',
+    defaultMessage: '!!!Oh no!',
+  },
+  text: {
+    id: 'service.errorHandler.text',
+    defaultMessage: '!!!{name} has failed to load.',
+  },
+  action: {
+    id: 'service.errorHandler.action',
+    defaultMessage: '!!!Reload {name}',
+  },
+  editAction: {
+    id: 'service.errorHandler.editAction',
+    defaultMessage: '!!!Edit {name}',
+  },
+  errorMessage: {
+    id: 'service.errorHandler.message',
+    defaultMessage: '!!!Error: {error}',
+  },
+});
+
+export default @injectSheet(styles) @observer class WebviewCrashHandler extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    reload: PropTypes.func.isRequired,
+    edit: PropTypes.func.isRequired,
+    errorMessage: PropTypes.string.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      name,
+      reload,
+      edit,
+      errorMessage,
+      classes,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className={classes.component}>
+        <h1>{intl.formatMessage(messages.headline)}</h1>
+        <p>{intl.formatMessage(messages.text, { name })}</p>
+        <p>{intl.formatMessage(messages.errorMessage, {
+          error: errorMessage,
+        })}</p>
+        <div className={classes.buttonContainer}>
+          <Button
+            label={intl.formatMessage(messages.editAction, { name })}
+            buttonType="inverted"
+            onClick={() => edit()}
+          />
+          <Button
+            label={intl.formatMessage(messages.action, { name })}
+            buttonType="inverted"
+            onClick={() => reload()}
+          />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/content/ErrorHandlers/styles.js b/src/components/services/content/ErrorHandlers/styles.js
new file mode 100644
index 000000000..f11386798
--- /dev/null
+++ b/src/components/services/content/ErrorHandlers/styles.js
@@ -0,0 +1,25 @@
+export default {
+  component: {
+    left: 0,
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    zIndex: 0,
+    alignItems: 'center',
+    // background: $theme-gray-lighter;
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    textAlign: 'center',
+  },
+  buttonContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    height: 'auto',
+    margin: [40, 0, 20],
+
+    '& button': {
+      margin: [0, 10, 0, 10],
+    },
+  },
+};
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 6e56de92f..b3def3fa5 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -7,7 +7,9 @@ import classnames from 'classnames';
 
 import ServiceModel from '../../../models/Service';
 import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
+import WebviewLoader from '../../ui/WebviewLoader';
 import WebviewCrashHandler from './WebviewCrashHandler';
+import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
 import ServiceDisabled from './ServiceDisabled';
 
 export default @observer class ServiceWebview extends Component {
@@ -15,6 +17,7 @@ export default @observer class ServiceWebview extends Component {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
+    edit: PropTypes.func.isRequired,
     isAppMuted: PropTypes.bool.isRequired,
     enable: PropTypes.func.isRequired,
   };
@@ -58,6 +61,7 @@ export default @observer class ServiceWebview extends Component {
       service,
       setWebviewReference,
       reload,
+      edit,
       isAppMuted,
       enable,
     } = this.props;
@@ -85,6 +89,20 @@ export default @observer class ServiceWebview extends Component {
             reload={reload}
           />
         )}
+        {service.isLoading && (
+          <WebviewLoader
+            loaded={!service.isLoading}
+            name={service.name}
+          />
+        )}
+        {service.isError && (
+          <WebviewErrorHandler
+            name={service.recipe.name}
+            errorMessage={service.errorMessage}
+            reload={reload}
+            edit={edit}
+          />
+        )}
         {!service.isEnabled ? (
           <ServiceDisabled
             name={service.recipe.name}
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 4cbd51043..0d4d778cd 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -25,6 +25,7 @@ export default @observer class Services extends Component {
     handleIPCMessage: PropTypes.func.isRequired,
     openWindow: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
+    openSettings: PropTypes.func.isRequired,
     isAppMuted: PropTypes.bool.isRequired,
     update: PropTypes.func.isRequired,
   };
@@ -45,6 +46,7 @@ export default @observer class Services extends Component {
       setWebviewReference,
       openWindow,
       reload,
+      openSettings,
       isAppMuted,
       update,
     } = this.props;
@@ -79,6 +81,7 @@ export default @observer class Services extends Component {
             setWebviewReference={setWebviewReference}
             openWindow={openWindow}
             reload={() => reload({ serviceId: service.id })}
+            edit={() => openSettings({ path: `services/edit/${service.id}` })}
             isAppMuted={isAppMuted}
             enable={() => update({
               serviceId: service.id,