From a9734f24bf15ab322c8244fbb8e86c37caf30f4a Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 21 Mar 2019 15:04:31 +0100
Subject: improve workspace switching ux

---
 .../workspaces/components/WorkspaceDrawer.js       |  7 +--
 .../components/WorkspaceSwitchingIndicator.js      | 56 ++++++++++++++++++++++
 .../workspaces/components/WorkspacesDashboard.js   |  4 +-
 3 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 src/features/workspaces/components/WorkspaceSwitchingIndicator.js

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

diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 27bf08361..c9c4d3bc9 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -54,7 +54,8 @@ class WorkspaceDrawer extends Component {
       getServicesForWorkspace,
     } = this.props;
     const { intl } = this.context;
-
+    const { activeWorkspace, isSwitchingWorkspace, nextWorkspace } = workspacesState;
+    const actualWorkspace = isSwitchingWorkspace ? nextWorkspace : activeWorkspace;
     return (
       <div className={classes.drawer}>
         <H1 className={classes.headline}>
@@ -74,13 +75,13 @@ class WorkspaceDrawer extends Component {
             name={intl.formatMessage(messages.allServices)}
             onClick={() => workspaceActions.deactivate()}
             services={getServicesForWorkspace(null)}
-            isActive={workspacesState.activeWorkspace == null}
+            isActive={actualWorkspace == null}
           />
           {workspacesState.workspaces.map(workspace => (
             <WorkspaceDrawerItem
               key={workspace.id}
               name={workspace.name}
-              isActive={workspacesState.activeWorkspace === workspace}
+              isActive={actualWorkspace === workspace}
               onClick={() => workspaceActions.activate({ workspace })}
               services={getServicesForWorkspace(workspace)}
             />
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
new file mode 100644
index 000000000..4a279afaf
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { workspacesState } from '../state';
+import LoaderComponent from '../../../components/ui/Loader';
+
+const styles = () => ({
+  wrapper: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    position: 'absolute',
+    width: '100%',
+    marginTop: '20px',
+  },
+  component: {
+    background: 'rgba(20, 20, 20, 0.4)',
+    padding: 20,
+    width: 'auto',
+    height: 'auto',
+    margin: [0, 'auto'],
+    borderRadius: 6,
+    alignItems: 'flex-start',
+    zIndex: 200,
+  },
+  name: {
+    fontSize: 35,
+    marginBottom: '10px',
+  },
+});
+
+@injectSheet(styles) @observer
+class WorkspaceSwitchingIndicator extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { isSwitchingWorkspace, nextWorkspace } = workspacesState;
+    if (!isSwitchingWorkspace) return null;
+    const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services';
+    return (
+      <div className={classes.wrapper}>
+        <div className={classes.component}>
+          <h1 className={classes.name}>
+            {`Switching to ${nextWorkspaceName}`}
+          </h1>
+          <LoaderComponent />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WorkspaceSwitchingIndicator;
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 917807302..df35b3590 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -30,7 +30,7 @@ const styles = () => ({
 class WorkspacesDashboard extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
-    isLoading: PropTypes.bool.isRequired,
+    isLoadingWorkspaces: PropTypes.bool.isRequired,
     onCreateWorkspaceSubmit: PropTypes.func.isRequired,
     onWorkspaceClick: PropTypes.func.isRequired,
     workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -60,7 +60,7 @@ class WorkspacesDashboard extends Component {
             <div className={classes.createForm}>
               <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} />
             </div>
-            {isLoading ? (
+            {isLoadingWorkspaces ? (
               <Loader />
             ) : (
               <table className="workspace-table">
-- 
cgit v1.2.3-70-g09d2