Various error handling improvements

src/components/tw-restore-point-modal/restore-point-modal.jsx

@@ -51,8 +51,9 @@ const RestorePointModal = props => (
                 <div className={styles.error}>
                     <p>
                         <FormattedMessage
-                            defaultMessage="Restore points are disabled because an error was encountered:"
-                            description="Error message in restore point manager"
+                            defaultMessage="Restore points are not available due to an error:"
+                            // eslint-disable-next-line max-len
+                            description="Error message in restore point manager when the list of restore points cannot be loaded. Followed by an error message."
                             id="tw.restorePoints.error"
                             values={{
                                 error: props.error
@@ -121,7 +122,7 @@ const RestorePointModal = props => (
                 </div>
             )}
 
-            {!props.error && !props.isLoading && (
+            {!props.isLoading && (
                 <div className={styles.legacyTransition}>
                     {/* This is going away within a few days */}
                     {/* No reason to bother translating */}

src/containers/tw-restore-point-manager.jsx

@@ -35,6 +35,11 @@ const messages = defineMessages({
         defaultMessage: 'Are you sure you want to delete ALL restore points? This cannot be undone.',
         description: 'Confirmation that appears when deleting ALL restore points.',
         id: 'tw.restorePoints.confirmDeleteAll'
+    },
+    loadError: {
+        defaultMessage: 'Error loading restore point: {error}',
+        description: 'Error message when a restore point could not be loaded',
+        id: 'tw.restorePoints.error'
     }
 });
 
@@ -177,8 +182,7 @@ class TWRestorePointManager extends React.Component {
                 this._finishLoading(true);
             })
             .catch(error => {
-                this.handleModalError(error);
-                this._finishLoading(false);
+                this.handleLoadError(error);
             });
     }
 
@@ -187,28 +191,36 @@ class TWRestorePointManager extends React.Component {
             return;
         }
         this._startLoading();
+        this.props.vm.stop();
         RestorePointAPI.loadLegacyRestorePoint()
             .then(buffer => this.props.vm.loadProject(buffer))
             .then(() => {
+                setTimeout(() => {
+                    this.props.vm.renderer.draw();
+                });
                 this._finishLoading(true);
             })
             .catch(error => {
-                // Don't handleError on this because we're expecting error 90% of the time
-                alert(error);
-                this._finishLoading(false);
+                this.handleLoadError(error);
             });
     }
 
+    handleLoadError (error) {
+        log.error(error);
+        alert(this.props.intl.formatMessage(messages.loadError, {
+            error
+        }));
+        this._finishLoading(false);
+    }
+
     queueRestorePoint () {
         if (this.timeout) {
             return;
         }
         this.timeout = setTimeout(() => {
             this.createRestorePoint(RestorePointAPI.TYPE_AUTOMATIC).then(() => {
                 this.timeout = null;
-
                 if (this.shouldBeAutosaving()) {
-                    // Project is still not saved
                     this.queueRestorePoint();
                 }
             });
@@ -238,11 +250,17 @@ class TWRestorePointManager extends React.Component {
             sleep(MINIMUM_SAVE_TIME)
         ])
             .then(() => {
+                this.props.onFinishCreatingRestorePoint();
+                if (this.props.isModalVisible) {
+                    this.refreshState();
+                }
+            })
+            .catch(error => {
+                log.error(error);
+                this.props.onErrorCreatingRestorePoint();
                 if (this.props.isModalVisible) {
                     this.refreshState();
                 }
-
-                this.props.onFinishCreatingRestorePoint();
             });
     }
 
@@ -268,7 +286,8 @@ class TWRestorePointManager extends React.Component {
     handleModalError (error) {
         log.error('Restore point error', error);
         this.setState({
-            error: `${error}`
+            error: `${error}`,
+            loading: false
         });
     }
 
@@ -300,6 +319,7 @@ TWRestorePointManager.propTypes = {
     projectTitle: PropTypes.string.isRequired,
     onStartCreatingRestorePoint: PropTypes.func.isRequired,
     onFinishCreatingRestorePoint: PropTypes.func.isRequired,
+    onErrorCreatingRestorePoint: PropTypes.func.isRequired,
     onStartLoadingRestorePoint: PropTypes.func.isRequired,
     onFinishLoadingRestorePoint: PropTypes.func.isRequired,
     onCloseModal: PropTypes.func.isRequired,
@@ -308,6 +328,7 @@ TWRestorePointManager.propTypes = {
     isModalVisible: PropTypes.bool.isRequired,
     vm: PropTypes.shape({
         loadProject: PropTypes.func.isRequired,
+        stop: PropTypes.func.isRequired,
         renderer: PropTypes.shape({
             draw: PropTypes.func.isRequired
         }).isRequired
@@ -326,6 +347,7 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
     onStartCreatingRestorePoint: () => dispatch(showStandardAlert('twCreatingRestorePoint')),
     onFinishCreatingRestorePoint: () => showAlertWithTimeout(dispatch, 'twRestorePointSuccess'),
+    onErrorCreatingRestorePoint: () => showAlertWithTimeout(dispatch, 'twRestorePointError'),
     onStartLoadingRestorePoint: loadingState => {
         dispatch(openLoadingProject());
         dispatch(requestProjectUpload(loadingState));

src/lib/alerts/index.jsx

@@ -187,10 +187,11 @@ const alerts = [
     {
         alertId: 'twCreatingRestorePoint',
         alertType: AlertTypes.INLINE,
+        clearList: ['twRestorePointSuccess', 'twRestorePointError'],
         content: (
             <FormattedMessage
                 defaultMessage="Creating restore point…"
-                description="Message indicating that a restore point is being automatically created"
+                description="Menu bar message indicating that a restore point is being automatically created"
                 id="tw.alerts.creatingRestorePoint"
             />
         ),
@@ -205,14 +206,30 @@ const alerts = [
             <FormattedMessage
                 defaultMessage="Access restore points in &quot;File&quot;"
                 // eslint-disable-next-line max-len
-                description="Message indicating that a restore point was successfully created. File refers to the file dropdown menu."
+                description="Menu bar message indicating that a restore point was successfully created. File refers to the file dropdown menu."
                 id="tw.alerts.restorePointSuccess"
             />
         ),
         iconURL: successImage,
         level: AlertLevels.SUCCESS,
         maxDisplaySecs: 3
     },
+    {
+        alertId: 'twRestorePointError',
+        alertType: AlertTypes.INLINE,
+        clearList: ['twCreatingRestorePoint'],
+        content: (
+            <FormattedMessage
+                defaultMessage="Could not create restore point"
+                // eslint-disable-next-line max-len
+                description="Menu bar message indicating that a restore point could not be created."
+                id="tw.alerts.restorePointError"
+            />
+        ),
+        iconURL: successImage,
+        level: AlertLevels.WARN,
+        maxDisplaySecs: 5
+    },
     {
         alertId: 'cloudInfo',
         alertType: AlertTypes.STANDARD,