Merge 7bf7a14 into ea6525c

.eslintrc

@@ -34,6 +34,8 @@
     "no-constant-condition": [2, {"checkLoops": false}],
     "react/jsx-filename-extension": [0],
     "func-names": [0],
-    "react/prefer-stateless-function": [1]
+    "react/prefer-stateless-function": [1],
+    "no-console": "off",
+    "no-underscore-dangle": "off"
   }
 }

src/components/GhostButton/GhostButton.test.js

@@ -0,0 +1,19 @@
+import test from 'ava';
+import React from 'react';
+import { shallow } from 'enzyme';
+import GhostButton from './GhostButton';
+
+const setup = () => {
+  const spies = {
+  };
+  const props = {
+  };
+  const component = shallow(<GhostButton label="Ghost Button" />);
+
+  return { component, props, spies };
+};
+
+test('(Component) Has expected elements.', t => {
+  const { component } = setup();
+  t.is(component.find('RaisedButton').length, 1);
+});

src/components/GlobalNav/GlobalNav.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { endDemoSession } from 'modules/demos';
 import IconButton from 'material-ui/IconButton';
-import { Toolbar, ToolbarGroup, ToolbarTitle, ToolbarSeparator } from 'material-ui/Toolbar';
+import { Toolbar, ToolbarGroup, ToolbarTitle } from 'material-ui/Toolbar';
 import { Icon } from 'react-fa';
 import { Link } from 'react-router';
 import RoleSwitcher from 'containers/RoleSwitcherContainer';
@@ -11,15 +13,18 @@ const styles = {
     margin: '0px 0.75rem 0px 1rem',
   },
   toolbarTitle: {
-    fontSize: '.8rem',
+    fontSize: '0.8rem',
     fontWeight: '600',
   },
   toolbar: {
-    height: '42px',
+    height: '56px',
+  },
+  iconButton: {
+    top: '-1.5px',
   },
 };
 
-export const GlobalNav = () => (
+export const GlobalNav = (props) => (
   <div className={classes.globalNav}>
     <Toolbar style={styles.toolbar}>
       <ToolbarGroup firstChild>
@@ -29,9 +34,8 @@ export const GlobalNav = () => (
       </ToolbarGroup>
 
       <ToolbarGroup>
-        <RoleSwitcher />
-        <ToolbarSeparator style={styles.separator} />
-        <IconButton >
+        <RoleSwitcher logout={props.endDemoSession} />
+        <IconButton style={styles.iconButton}>
           <a href="https://github.com/IBM-Bluemix/logistics-wizard" target="_blank">
             <Icon
               name="github"
@@ -46,6 +50,15 @@ export const GlobalNav = () => (
 );
 
 GlobalNav.propTypes = {
+  endDemoSession: React.PropTypes.func.isRequired,
+};
+
+const mapActionCreators = {
+  endDemoSession,
 };
 
-export default GlobalNav;
+const mapStateToProps = () => ({
+});
+
+// export default GlobalNav;
+export default connect(mapStateToProps, mapActionCreators)(GlobalNav);

src/components/GlobalNav/GlobalNav.scss

@@ -1,7 +1,8 @@
 @import '~styles/base/colors';
 
 .title {
-  padding-left: 2rem;
+  margin-left: 0;
+  padding-left: 24px;
   color: $alternateTextColor;
 }
 

src/components/GlobalNav/GlobalNav.test.js

@@ -1,7 +1,7 @@
 import test from 'ava';
 import React from 'react';
 import { shallow } from 'enzyme';
-import GlobalNav from './GlobalNav';
+import { GlobalNav } from './GlobalNav';
 
 const setup = () => {
   const spies = {
@@ -15,7 +15,6 @@ const setup = () => {
 
 test('(Component) Has expected elements.', t => {
   const { component } = setup();
-
   t.is(component.find('Connect(RoleSwitcher)').length, 1);
   t.is(component.find('Link').length, 1);
   t.is(component.find('Link').first().props().to, '/');

src/components/GlobalNav/RoleSwitcher/RoleItem.scss

@@ -13,6 +13,7 @@
   margin: 0;
   padding: 0;
   padding-left: 5px;
+  padding-right: 5px;
   outline: none;
 
   &:last-child {
@@ -29,7 +30,6 @@
 .iconContainer {
   border-left: 5px solid transparent;
   align-self: center;
-
 }
 
 .icon {

src/components/GlobalNav/RoleSwitcher/RoleSwitcher.jsx

@@ -3,8 +3,10 @@ import IconMenu from 'material-ui/IconMenu';
 import IconButton from 'material-ui/IconButton';
 import AccountUser from 'material-ui/svg-icons/action/account-circle';
 import { palette } from 'styles/muiTheme';
-import RoleItem from './RoleItem';
 import LoadingSpinner from 'components/LoadingSpinner';
+import RoleItem from './RoleItem';
+import classes from './RoleItem.scss';
+
 
 const iconStyles = {
   width: '1.7rem',
@@ -20,20 +22,31 @@ const AccountButton = () => (
   </IconButton>
 );
 
-export const RoleSwitcher = ({ users, login, createUser }) => (
-  users
+export const RoleSwitcher = (props) => (
+  props.users
   ? <IconMenu
     anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
     iconButtonElement={AccountButton()}
   >
-    {users.map((user, key) => (
+    {props.users.map((user, key) => (
       <RoleItem
         key={key}
         user={user}
-        roleAction={login}
+        roleAction={props.login}
       />
     ))}
-    <RoleItem roleAction={createUser} />
+    <button className={classes.item} onClick={props.logout}>
+      <div className={classes.iconContainer}>
+        <i className={`${classes.icon} fa-sign-out fa`} />
+      </div>
+      <div className={classes.textContainer}>
+        <div className={classes.label}>
+          End Session
+        </div>
+      </div>
+    </button>
+    {/*  keep new user creation disabled until it becomes useful */}
+    {/* <RoleItem roleAction={createUser} /> */}
   </IconMenu>
   : <div><LoadingSpinner color={palette.primary3Color} /></div>
 );
@@ -47,6 +60,7 @@ RoleSwitcher.propTypes = {
   }).isRequired),
   login: React.PropTypes.func.isRequired,
   createUser: React.PropTypes.func.isRequired,
+  logout: React.PropTypes.func.isRequired,
 };
 
 export default RoleSwitcher;

src/components/GlobalNav/RoleSwitcher/RoleSwitcher.test.js

@@ -0,0 +1,20 @@
+import test from 'ava';
+import React from 'react';
+import { shallow } from 'enzyme';
+import RoleSwitcher from './RoleSwitcher';
+
+const setup = () => {
+  const spies = {
+  };
+  const props = {
+  };
+  const component = shallow(<RoleSwitcher />);
+
+  return { component, props, spies };
+};
+
+test('(Component) Has expected elements.', t => {
+  const { component } = setup();
+  t.is(component.find('div').length, 1);
+  t.is(component.find('LoadingSpinner').length, 1);
+});

src/components/LoadingSpinner/LoadingSpinner.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import CircularProgress from 'material-ui/CircularProgress';
+import { palette } from 'styles/muiTheme';
 
 const LoadingSpinner = (props) => (
   <CircularProgress
-    style={props.style || {marginLeft: '50%'}}
-    color={props.color}
-    size={props.size || .5}
+    style={props.style || {}}
+    color={props.color || palette.primary3Color}
+    size={props.size || 32}
   />
 );
 

src/components/LoadingSpinner/LoadingSpinner.story.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import LoadingSpinner from './LoadingSpinner';
+
+storiesOf('LoadingSpinner', module)
+  .add('default', () => (
+    <LoadingSpinner />
+  ));

src/components/LoadingSpinner/LoadingSpinner.test.js

@@ -0,0 +1,19 @@
+import test from 'ava';
+import React from 'react';
+import { shallow } from 'enzyme';
+import LoadingSpinner from './LoadingSpinner';
+
+const setup = () => {
+  const spies = {
+  };
+  const props = {
+  };
+  const component = shallow(<LoadingSpinner />);
+
+  return { component, props, spies };
+};
+
+test('(Component) Has expected elements.', t => {
+  const { component } = setup();
+  t.is(component.find('CircularProgress').length, 1);
+});

src/containers/AppContainer.jsx

@@ -10,7 +10,7 @@ const AppContainer = (props) => {
   return (
     <Provider store={store}>
       <MuiThemeProvider muiTheme={muiTheme}>
-        <div style={{ height: '100vh' }}>
+        <div style={{ display: 'flex', flexGrow: 1, flexDirection: 'column' }}>
           <Router history={history} children={routes} />
         </div>
       </MuiThemeProvider>

src/index.html

@@ -7,6 +7,6 @@
   <link href="https://fonts.googleapis.com/css?family=Libre+Franklin:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
 </head>
 <body>
-  <div id="root" style="height: 100%"></div>
+  <div id="root" style="display: flex; flex-direction: column; height: 100%"></div>
 </body>
 </html>

src/layouts/CoreLayout/CoreLayout.jsx

@@ -4,12 +4,14 @@ import 'styles/core.scss';
 
 const styles = {
   wrapper: {
-    height: '100%',
     display: 'flex',
     flexDirection: 'column',
+    flexGrow: 1,
   },
   content: {
-    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
   },
 };
 

src/modules/demos.js

@@ -9,6 +9,7 @@ import { getAdminData } from 'routes/Dashboard/modules/Dashboard';
 export const CREATE_DEMO = 'demos/CREATE_DEMO';
 export const CREATE_DEMO_FAILURE = 'demos/CREATE_DEMO_FAILURE';
 export const GET_DEMO_SESSION = 'demos/GET_DEMO_SESSION';
+export const END_DEMO_SESSION = 'demos/END_DEMO_SESSION';
 export const GET_DEMO_SUCCESS = 'demos/GET_DEMO_SUCCESS';
 export const LOGIN = 'demos/LOGIN';
 export const LOGIN_SUCCESS = 'demos/LOGIN_SUCCESS';
@@ -33,6 +34,10 @@ export const getDemoSession = (guid) => ({
   guid,
 });
 
+export const endDemoSession = () => ({
+  type: END_DEMO_SESSION,
+});
+
 export const getDemoSuccess = (payload) => ({
   type: GET_DEMO_SUCCESS,
   demo: payload.demo,
@@ -165,6 +170,21 @@ export function *watchGetDemoSession() {
   }
 }
 
+export function *watchEndDemoSession() {
+  while (true) {
+    yield take(END_DEMO_SESSION);
+    const demoState = yield select(demoSelector);
+    try {
+      yield call(api.endDemo, demoState.guid);
+    }
+    catch (error) {
+      console.log('Error during logout', error);
+    }
+    window.localStorage.removeItem('savedGuid');
+    yield put(push('/'));
+  }
+}
+
 export function *watchLogin() {
   while (true) {
     const { userid } = yield take(LOGIN);
@@ -183,6 +203,7 @@ export function *watchLogin() {
 
 export const sagas = [
   watchCreateDemo,
+  watchEndDemoSession,
   watchGetDemoSession,
   watchLogin,
 ];

src/routes/Dashboard/components/AlertsCard/AlertsCard.jsx

@@ -2,25 +2,25 @@ import React from 'react';
 import { connect } from 'react-redux';
 import classes from './AlertsCard.scss';
 
-export const AlertsCard = ({ weather }) => (
-  <div className={weather.length > 0 ? classes.wrapper : classes.hidden}>
+export const AlertsCard = ({ storms }) => (
+  <div className={storms.length > 0 ? classes.wrapper : classes.hidden}>
     <div className={classes.content}>
-      <div>{weather.length} storm(s) detected!</div>
+      <div>{storms.length} storm(s) detected!</div>
       <i className={`fa fa-times-circle-o ${classes.closeIcon}`} />
     </div>
   </div>
 );
 
 AlertsCard.propTypes = {
-  weather: React.PropTypes.array,
+  storms: React.PropTypes.array,
 };
 
 // ------------------------------------
 // Connect Component to Redux
 // ------------------------------------
 
 const mapStateToProps = (state) => ({
-  weather: state.dashboard.weather,
+  storms: state.dashboard.storms,
 });
 
 export default connect(mapStateToProps, {})(AlertsCard);

src/routes/Dashboard/components/AlertsCard/AlertsCard.scss

@@ -2,7 +2,7 @@
 
 .wrapper {
   border: 1px solid $map2Primary;
-  margin-bottom: 1rem;
+  margin: 1rem;
   background-color: $map2Accent;
   padding: 6px;
   padding-left: 12px;