handle get workspaces request errors in the ui

4 files changed, 46 insertions, 23 deletions

diff --git a/src/features/workspaces/api.js b/src/features/workspaces/api.js
index 634f9f989..3da265e5e 100644
--- a/src/features/workspaces/api.js
+++ b/src/features/workspaces/api.js
@@ -2,7 +2,6 @@ import { pick } from 'lodash';
 import { sendAuthRequest } from '../../api/utils/auth';
 import { API, API_VERSION } from '../../environment';
 import Request from '../../stores/lib/Request';
-import CachedRequest from '../../stores/lib/CachedRequest';
 import Workspace from './models/Workspace';
 
 const debug = require('debug')('Franz:feature:workspaces:api');
@@ -54,7 +53,7 @@ export const workspaceApi = {
   },
 };
 
-export const getUserWorkspacesRequest = new CachedRequest(workspaceApi, 'getUserWorkspaces');
+export const getUserWorkspacesRequest = new Request(workspaceApi, 'getUserWorkspaces');
 export const createWorkspaceRequest = new Request(workspaceApi, 'createWorkspace');
 export const deleteWorkspaceRequest = new Request(workspaceApi, 'deleteWorkspace');
 export const updateWorkspaceRequest = new Request(workspaceApi, 'updateWorkspace');
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 17b3755d7..2ccea1d55 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
@@ -7,6 +7,8 @@ import injectSheet from 'react-jss';
 import Loader from '../../../components/ui/Loader';
 import WorkspaceItem from './WorkspaceItem';
 import CreateWorkspaceForm from './CreateWorkspaceForm';
+import Request from '../../../stores/lib/Request';
+import Infobox from '../../../components/ui/Infobox';
 
 const messages = defineMessages({
   headline: {
@@ -17,6 +19,14 @@ const messages = defineMessages({
     id: 'settings.workspaces.noWorkspacesAdded',
     defaultMessage: '!!!You haven\'t added any workspaces yet.',
   },
+  workspacesRequestFailed: {
+    id: 'settings.workspaces.workspacesRequestFailed',
+    defaultMessage: '!!!Could not load your workspaces',
+  },
+  tryReloadWorkspaces: {
+    id: 'settings.workspaces.tryReloadWorkspaces',
+    defaultMessage: '!!!Try again',
+  },
 });
 
 const styles = () => ({
@@ -26,11 +36,11 @@ const styles = () => ({
   },
 });
 
-@observer @injectSheet(styles)
+@injectSheet(styles) @observer
 class WorkspacesDashboard extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
-    isLoadingWorkspaces: PropTypes.bool.isRequired,
+    getUserWorkspacesRequest: PropTypes.instanceOf(Request).isRequired,
     onCreateWorkspaceSubmit: PropTypes.func.isRequired,
     onWorkspaceClick: PropTypes.func.isRequired,
     workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -42,14 +52,13 @@ class WorkspacesDashboard extends Component {
 
   render() {
     const {
-      workspaces,
-      isLoadingWorkspaces,
+      classes,
+      getUserWorkspacesRequest,
       onCreateWorkspaceSubmit,
       onWorkspaceClick,
-      classes,
+      workspaces,
     } = this.props;
     const { intl } = this.context;
-
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -60,20 +69,34 @@ class WorkspacesDashboard extends Component {
             <div className={classes.createForm}>
               <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} />
             </div>
-            {isLoadingWorkspaces ? (
+            {getUserWorkspacesRequest.isExecuting ? (
               <Loader />
             ) : (
-              <table className="workspace-table">
-                <tbody>
-                  {workspaces.map(workspace => (
-                    <WorkspaceItem
-                      key={workspace.id}
-                      workspace={workspace}
-                      onItemClick={w => onWorkspaceClick(w)}
-                    />
-                  ))}
-                </tbody>
-              </table>
+              <Fragment>
+                {getUserWorkspacesRequest.error ? (
+                  <Infobox
+                    icon="alert"
+                    type="danger"
+                    ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
+                    ctaLoading={getUserWorkspacesRequest.isExecuting}
+                    ctaOnClick={getUserWorkspacesRequest.retry}
+                  >
+                    {intl.formatMessage(messages.workspacesRequestFailed)}
+                  </Infobox>
+                ) : (
+                  <table className="workspace-table">
+                    <tbody>
+                      {workspaces.map(workspace => (
+                        <WorkspaceItem
+                          key={workspace.id}
+                          workspace={workspace}
+                          onItemClick={w => onWorkspaceClick(w)}
+                        />
+                      ))}
+                    </tbody>
+                  </table>
+                )}
+              </Fragment>
             )}
           </div>
         </div>
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index 5fdea217e..89bd2a2ef 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -22,7 +22,7 @@ class WorkspacesScreen extends Component {
       <ErrorBoundary>
         <WorkspacesDashboard
           workspaces={workspaceStore.workspaces}
-          isLoadingWorkspaces={getUserWorkspacesRequest.isExecuting}
+          getUserWorkspacesRequest={getUserWorkspacesRequest}
           onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
           onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
         />
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 86a8a2c76..3cec5f360 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -30,7 +30,7 @@ export default class WorkspacesStore {
 
   @computed get workspaces() {
     if (!this.isFeatureActive) return [];
-    return getUserWorkspacesRequest.execute().result || [];
+    return getUserWorkspacesRequest.result || [];
   }
 
   constructor() {
@@ -57,6 +57,7 @@ export default class WorkspacesStore {
     this.actions = actions;
     this._reactions.forEach(r => r.start());
     this.isFeatureActive = true;
+    getUserWorkspacesRequest.execute();
   }
 
   stop() {