Fix: Show error message when creating Workspace failed.

app/components/Workspace/actions.js

@@ -35,12 +35,19 @@ export function toggleCreatingWorkspace (isCreating) {
   return {type: WORKSPACE_CREATING, isCreating}
 }
 
+export const WORKSPACE_CREATING_ERROR = 'WORKSPACE_CREATING_ERROR'
+export function toggleCreatingWorkspaceErr (msg) {
+  return {type: WORKSPACE_CREATING_ERROR, msg}
+}
+
 export function createWorkspace (url) {
   return dispatch => {
     dispatch(toggleCreatingWorkspace(true))
     api.createWorkspace(url).then(ws => {
       dispatch(fetchWorkspaceList())
       dispatch(toggleCreatingWorkspace(false))
+    }).catch(e => {
+      dispatch(toggleCreatingWorkspaceErr(e.msg))
     })
   }
 }

app/components/Workspace/index.jsx

@@ -16,7 +16,7 @@ class WorkspaceList extends Component {
   }
 
   render () {
-    const {workspaces, publicKey, fingerprint, isCreating, ...actionProps} = this.props
+    const {workspaces, publicKey, fingerprint, isCreating, errMsg, ...actionProps} = this.props
     const {openWorkspace, createWorkspace, deleteWorkspace} = actionProps
     return (
       <div className='workspace-list'>
@@ -38,6 +38,7 @@ class WorkspaceList extends Component {
                 onClick={e => createWorkspace(this.gitUrlInput.value)}>Create</button> }
           </div>
           { isCreating ? <p className='creating-workspace-indicator'>Creating</p> : null }
+          { errMsg ? <p className='creating-workspace-indicator-error'>Error: {errMsg}</p> : null }
         </div>
         <div className='workspace-list-container'>
           { workspaces.map(ws =>

app/components/Workspace/reducer.js

@@ -3,7 +3,8 @@ import {
   WORKSPACE_FETCH_PUBLIC_KEY,
   WORKSPACE_FETCH_LIST,
   WORKSPACE_OPEN,
-  WORKSPACE_CREATING
+  WORKSPACE_CREATING,
+  WORKSPACE_CREATING_ERROR
 } from './actions'
 
 const defaultState = {
@@ -12,7 +13,8 @@ const defaultState = {
   currentWorkspace: null,
   publicKey: null,
   fingerprint: null,
-  isCreating: false
+  isCreating: false,
+  errMsg: null
 }
 
 export default function (state = defaultState, action) {
@@ -32,6 +34,9 @@ export default function (state = defaultState, action) {
     case WORKSPACE_CREATING:
       return {...state, isCreating: action.isCreating}
 
+    case WORKSPACE_CREATING_ERROR:
+      return {...state, isCreating: false, errMsg: action.msg}
+
     default:
       return state
   }

app/styles/components/Workspace.styl

@@ -65,3 +65,7 @@
     animation: CREATING-WORKSPACE 3s infinite;
   }
 }
+.creating-workspace-indicator-error {
+  opacity: 0.7;
+  color: red;
+}