indicate any server interaction with spinners and infoboxes

6 files changed, 76 insertions, 44 deletions

diff --git a/src/features/workspaces/api.js b/src/features/workspaces/api.js
index 3da265e5e..0ec20c9ea 100644
--- a/src/features/workspaces/api.js
+++ b/src/features/workspaces/api.js
@@ -36,7 +36,7 @@ export const workspaceApi = {
     const result = await sendAuthRequest(url, { method: 'DELETE' });
     debug('deleteWorkspace RESULT', result);
     if (!result.ok) throw result;
-    return (await result.json()).deleted;
+    return true;
   },
 
   updateWorkspace: async (workspace) => {
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
index 83f6e07f7..8b5039246 100644
--- a/src/features/workspaces/components/CreateWorkspaceForm.js
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -10,7 +10,7 @@ import { required } from '../../../helpers/validation-helpers';
 const messages = defineMessages({
   submitButton: {
     id: 'settings.workspace.add.form.submitButton',
-    defaultMessage: '!!!Save workspace',
+    defaultMessage: '!!!Create workspace',
   },
   name: {
     id: 'settings.workspace.add.form.name',
@@ -40,6 +40,7 @@ class CreateWorkspaceForm extends Component {
 
   static propTypes = {
     classes: PropTypes.object.isRequired,
+    isSubmitting: PropTypes.bool.isRequired,
     onSubmit: PropTypes.func.isRequired,
   };
 
@@ -69,7 +70,7 @@ class CreateWorkspaceForm extends Component {
 
   render() {
     const { intl } = this.context;
-    const { classes } = this.props;
+    const { classes, isSubmitting } = this.props;
     const { form } = this;
     return (
       <div className={classes.form}>
@@ -84,6 +85,8 @@ class CreateWorkspaceForm extends Component {
           type="submit"
           label={intl.formatMessage(messages.submitButton)}
           onClick={this.submitForm.bind(this, form)}
+          busy={isSubmitting}
+          buttonType={isSubmitting ? 'secondary' : 'primary'}
         />
       </div>
     );
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index 48090f608..a9fd4d21c 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -11,6 +11,7 @@ import Service from '../../../models/Service';
 import Form from '../../../lib/Form';
 import { required } from '../../../helpers/validation-helpers';
 import ServiceListItem from './ServiceListItem';
+import Request from '../../../stores/lib/Request';
 
 const messages = defineMessages({
   buttonDelete: {
@@ -52,12 +53,12 @@ class EditWorkspaceForm extends Component {
 
   static propTypes = {
     classes: PropTypes.object.isRequired,
-    isDeleting: PropTypes.bool.isRequired,
-    isSaving: PropTypes.bool.isRequired,
     onDelete: PropTypes.func.isRequired,
     onSave: PropTypes.func.isRequired,
     services: PropTypes.arrayOf(PropTypes.instanceOf(Service)).isRequired,
     workspace: PropTypes.instanceOf(Workspace).isRequired,
+    updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
+    deleteWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
   };
 
   form = this.prepareWorkspaceForm(this.props.workspace);
@@ -112,14 +113,16 @@ class EditWorkspaceForm extends Component {
     const { intl } = this.context;
     const {
       classes,
-      isDeleting,
-      isSaving,
       onDelete,
       workspace,
       services,
+      deleteWorkspaceRequest,
+      updateWorkspaceRequest,
     } = this.props;
     const { form } = this;
     const workspaceServices = form.$('services').value;
+    const isDeleting = deleteWorkspaceRequest.isExecuting;
+    const isSaving = updateWorkspaceRequest.isExecuting;
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -151,38 +154,24 @@ class EditWorkspaceForm extends Component {
         </div>
         <div className="settings__controls">
           {/* ===== Delete Button ===== */}
-          {isDeleting ? (
-            <Button
-              label={intl.formatMessage(messages.buttonDelete)}
-              loaded={false}
-              buttonType="secondary"
-              className="settings__delete-button"
-              disabled
-            />
-          ) : (
-            <Button
-              buttonType="danger"
-              label={intl.formatMessage(messages.buttonDelete)}
-              className="settings__delete-button"
-              onClick={onDelete}
-            />
-          )}
+          <Button
+            label={intl.formatMessage(messages.buttonDelete)}
+            loaded={false}
+            busy={isDeleting}
+            buttonType={isDeleting ? 'secondary' : 'danger'}
+            className="settings__delete-button"
+            disabled={isDeleting}
+            onClick={onDelete}
+          />
           {/* ===== Save Button ===== */}
-          {isSaving ? (
-            <Button
-              type="submit"
-              label={intl.formatMessage(messages.buttonSave)}
-              loaded={!isSaving}
-              buttonType="secondary"
-              disabled
-            />
-          ) : (
-            <Button
-              type="submit"
-              label={intl.formatMessage(messages.buttonSave)}
-              onClick={this.submitForm.bind(this, form)}
-            />
-          )}
+          <Button
+            type="submit"
+            label={intl.formatMessage(messages.buttonSave)}
+            busy={isSaving}
+            buttonType={isSaving ? 'secondary' : 'primary'}
+            onClick={this.submitForm.bind(this, form)}
+            disabled={isSaving}
+          />
         </div>
       </div>
     );
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 3db38aff4..b31581a5b 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -32,6 +32,10 @@ const messages = defineMessages({
     id: 'settings.workspaces.updatedInfo',
     defaultMessage: '!!!Your changes have been saved',
   },
+  deletedInfo: {
+    id: 'settings.workspaces.deletedInfo',
+    defaultMessage: '!!!Workspace has been deleted',
+  },
 });
 
 const styles = () => ({
@@ -49,6 +53,8 @@ class WorkspacesDashboard extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     getUserWorkspacesRequest: PropTypes.instanceOf(Request).isRequired,
+    createWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
+    deleteWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
     updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
     onCreateWorkspaceSubmit: PropTypes.func.isRequired,
     onWorkspaceClick: PropTypes.func.isRequired,
@@ -63,38 +69,63 @@ class WorkspacesDashboard extends Component {
     const {
       classes,
       getUserWorkspacesRequest,
+      createWorkspaceRequest,
+      deleteWorkspaceRequest,
       updateWorkspaceRequest,
       onCreateWorkspaceSubmit,
       onWorkspaceClick,
       workspaces,
     } = this.props;
     const { intl } = this.context;
+    console.log(deleteWorkspaceRequest.result);
     return (
       <div className="settings__main">
         <div className="settings__header">
           <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body">
+
+          {/* ===== Workspace updated info ===== */}
           {updateWorkspaceRequest.wasExecuted && updateWorkspaceRequest.result && (
             <Appear className={classes.appear}>
               <Infobox
                 type="success"
-                icon="checkbox-marked-circle-outline"
+                icon="mdiCheckboxMarkedCircleOutline"
                 dismissable
-                onDismiss={updateWorkspaceRequest.reset}
                 onUnmount={updateWorkspaceRequest.reset}
               >
                 {intl.formatMessage(messages.updatedInfo)}
               </Infobox>
             </Appear>
           )}
+
+          {/* ===== Workspace deleted info ===== */}
+          {deleteWorkspaceRequest.wasExecuted && deleteWorkspaceRequest.result && (
+            <Appear className={classes.appear}>
+              <Infobox
+                type="success"
+                icon="mdiCheckboxMarkedCircleOutline"
+                dismissable
+                onUnmount={deleteWorkspaceRequest.reset}
+              >
+                {intl.formatMessage(messages.deletedInfo)}
+              </Infobox>
+            </Appear>
+          )}
+
+          {/* ===== Create workspace form ===== */}
           <div className={classes.createForm}>
-            <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} />
+            <CreateWorkspaceForm
+              isSubmitting={createWorkspaceRequest.isExecuting}
+              onSubmit={onCreateWorkspaceSubmit}
+            />
           </div>
+
           {getUserWorkspacesRequest.isExecuting ? (
             <Loader />
           ) : (
             <Fragment>
+              {/* ===== Workspace could not be loaded error ===== */}
               {getUserWorkspacesRequest.error ? (
                 <Infobox
                   icon="alert"
@@ -107,6 +138,7 @@ class WorkspacesDashboard extends Component {
                 </Infobox>
               ) : (
                 <table className="workspace-table">
+                  {/* ===== Workspaces list ===== */}
                   <tbody>
                     {workspaces.map(workspace => (
                       <WorkspaceItem
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.js
index 1c4633e71..248b40131 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.js
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.js
@@ -7,6 +7,7 @@ import EditWorkspaceForm from '../components/EditWorkspaceForm';
 import ServicesStore from '../../../stores/ServicesStore';
 import Workspace from '../models/Workspace';
 import { workspaceStore } from '../index';
+import { deleteWorkspaceRequest, updateWorkspaceRequest } from '../api';
 
 @inject('stores', 'actions') @observer
 class EditWorkspaceScreen extends Component {
@@ -48,8 +49,8 @@ class EditWorkspaceScreen extends Component {
           services={stores.services.all}
           onDelete={this.onDelete}
           onSave={this.onSave}
-          isDeleting={false}
-          isSaving={false}
+          updateWorkspaceRequest={updateWorkspaceRequest}
+          deleteWorkspaceRequest={deleteWorkspaceRequest}
         />
       </ErrorBoundary>
     );
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index 3f41de0c2..2ab565fa1 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -4,7 +4,12 @@ import PropTypes from 'prop-types';
 import WorkspacesDashboard from '../components/WorkspacesDashboard';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import { workspaceStore } from '../index';
-import { getUserWorkspacesRequest, updateWorkspaceRequest } from '../api';
+import {
+  createWorkspaceRequest,
+  deleteWorkspaceRequest,
+  getUserWorkspacesRequest,
+  updateWorkspaceRequest,
+} from '../api';
 
 @inject('actions') @observer
 class WorkspacesScreen extends Component {
@@ -23,6 +28,8 @@ class WorkspacesScreen extends Component {
         <WorkspacesDashboard
           workspaces={workspaceStore.workspaces}
           getUserWorkspacesRequest={getUserWorkspacesRequest}
+          createWorkspaceRequest={createWorkspaceRequest}
+          deleteWorkspaceRequest={deleteWorkspaceRequest}
           updateWorkspaceRequest={updateWorkspaceRequest}
           onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
           onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}