From a2e4316879908c5bc2c38cef81eef9152476b6f6 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 26 Mar 2019 15:26:20 +0100
Subject: show infobox when updating workspaces

---
 .../workspaces/components/WorkspacesDashboard.js   | 89 +++++++++++++---------
 1 file changed, 55 insertions(+), 34 deletions(-)

(limited to 'src/features/workspaces/components')

diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 2ccea1d55..3db38aff4 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -3,12 +3,13 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
+import { Infobox } from '@meetfranz/ui';
 
 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';
+import Appear from '../../../components/ui/effects/Appear';
 
 const messages = defineMessages({
   headline: {
@@ -27,6 +28,10 @@ const messages = defineMessages({
     id: 'settings.workspaces.tryReloadWorkspaces',
     defaultMessage: '!!!Try again',
   },
+  updatedInfo: {
+    id: 'settings.workspaces.updatedInfo',
+    defaultMessage: '!!!Your changes have been saved',
+  },
 });
 
 const styles = () => ({
@@ -34,6 +39,9 @@ const styles = () => ({
     height: 'auto',
     marginBottom: '20px',
   },
+  appear: {
+    height: 'auto',
+  },
 });
 
 @injectSheet(styles) @observer
@@ -41,6 +49,7 @@ class WorkspacesDashboard extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     getUserWorkspacesRequest: PropTypes.instanceOf(Request).isRequired,
+    updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
     onCreateWorkspaceSubmit: PropTypes.func.isRequired,
     onWorkspaceClick: PropTypes.func.isRequired,
     workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -54,6 +63,7 @@ class WorkspacesDashboard extends Component {
     const {
       classes,
       getUserWorkspacesRequest,
+      updateWorkspaceRequest,
       onCreateWorkspaceSubmit,
       onWorkspaceClick,
       workspaces,
@@ -65,40 +75,51 @@ class WorkspacesDashboard extends Component {
           <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body">
-          <div className={classes.body}>
-            <div className={classes.createForm}>
-              <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} />
-            </div>
-            {getUserWorkspacesRequest.isExecuting ? (
-              <Loader />
-            ) : (
-              <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>
-            )}
+          {updateWorkspaceRequest.wasExecuted && updateWorkspaceRequest.result && (
+            <Appear className={classes.appear}>
+              <Infobox
+                type="success"
+                icon="checkbox-marked-circle-outline"
+                dismissable
+                onDismiss={updateWorkspaceRequest.reset}
+                onUnmount={updateWorkspaceRequest.reset}
+              >
+                {intl.formatMessage(messages.updatedInfo)}
+              </Infobox>
+            </Appear>
+          )}
+          <div className={classes.createForm}>
+            <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} />
           </div>
+          {getUserWorkspacesRequest.isExecuting ? (
+            <Loader />
+          ) : (
+            <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>
     );
-- 
cgit v1.2.3-70-g09d2