Merge 30930bc into d741a7b

package.json

@@ -56,7 +56,7 @@
     "babel-preset-react": "^6.3.13",
     "babel-runtime": "^6.3.19",
     "classnames": "^2.1.5",
-    "cloudgov-style": "0.6.1",
+    "cloudgov-style": "^0.7.2",
     "codecov.io": "^0.1.5",
     "css-loader": "^0.23.0",
     "cssnext-loader": "^1.0.1",

static_src/actions/space_actions.js

@@ -23,5 +23,12 @@ export default {
       type: spaceActionTypes.SPACE_RECEIVED,
       space: space
     });
+  },
+
+  changeCurrentSpace(spaceGuid) {
+    AppDispatcher.handleUIAction({
+      type: spaceActionTypes.SPACE_CHANGE_CURRENT,
+      spaceGuid: spaceGuid
+    });
   }
 };

static_src/app.jsx

@@ -53,7 +53,10 @@ export default class App extends React.Component {
 
     if (this.state.isLoggedIn) {
       content = this.props.children;
-      sidebar = <Nav initialCurrentOrgGuid={ this.props.currentOrgGuid } />;
+      sidebar = <Nav
+        initialCurrentOrgGuid={ this.props.currentOrgGuid }
+        initialSpaceGuid={ this.props.initialSpaceGuid }
+      />;
     } else {
       content = <Login />;
     }
@@ -79,7 +82,12 @@ export default class App extends React.Component {
 }
 App.propTypes = {
   children: React.PropTypes.any,
-  currentOrgGuid: React.PropTypes.string
+  currentOrgGuid: React.PropTypes.string,
+  initialSpaceGuid: React.PropTypes.string
 };
 
-App.defaultProps = { children: [], currentOrgGuid: '0' };
+App.defaultProps = {
+  children: [],
+  currentOrgGuid: '0',
+  initialSpaceGuid: '0'
+};

static_src/components/app_list.jsx

@@ -14,7 +14,7 @@ function stateSetter(props) {
   const space = SpaceStore.get(props.initialSpaceGuid);
 
   return {
-    apps: space && space.apps || [],
+    apps: (space && space.apps) ? space.apps : [],
     currentOrgGuid: props.initialOrgGuid,
     currentSpaceGuid: props.initialSpaceGuid,
     loading: SpaceStore.fetching
@@ -26,7 +26,6 @@ export default class AppList extends React.Component {
     super(props);
     this.props = props;
     this.state = stateSetter(props);
-    this.state.apps = props.initialApps;
     this._onChange = this._onChange.bind(this);
     this.styler = createStyler(tableStyles);
   }

static_src/components/navbar.jsx

@@ -5,14 +5,18 @@ import React from 'react';
 import cgBaseStyles from 'cloudgov-style/css/base.css';
 import cgSidenavStyles from 'cloudgov-style/css/components/sidenav.css';
 
+import spaceActions from '../actions/space_actions.js';
 import orgActions from '../actions/org_actions.js';
 import OrgStore from '../stores/org_store.js';
+import SpaceStore from '../stores/space_store.js';
 
 function stateSetter() {
   const currentOrgGuid = OrgStore.currentOrgGuid;
+  const currentSpaceGuid = SpaceStore.currentSpaceGuid;
 
   return {
     currentOrg: OrgStore.get(currentOrgGuid),
+    currentSpace: SpaceStore.get(currentSpaceGuid),
     orgs: OrgStore.getAll()
   };
 }
@@ -23,23 +27,33 @@ export class Nav extends React.Component {
     this.props = props;
     this.state = {
       currentOrg: OrgStore.get(this.props.initialCurrentOrgGuid),
-      orgs: []
+      currentSpace: SpaceStore.get(this.props.initialSpaceGuid),
+      orgs: OrgStore.getAll() || []
     };
     this._onChange = this._onChange.bind(this);
+    this._handleOverviewClick = this._handleOverviewClick.bind(this);
   }
 
   componentDidMount() {
     OrgStore.addChangeListener(this._onChange);
+    SpaceStore.addChangeListener(this._onChange);
   }
 
   componentWillUnmount() {
     OrgStore.removeChangeListener(this._onChange);
+    SpaceStore.removeChangeListener(this._onChange);
   }
 
   _onChange() {
     this.setState(stateSetter());
   }
 
+  _handleOverviewClick() {
+    // orgActions.changeCurrentOrg('0');
+    orgActions.toggleSpaceMenu('0');
+    spaceActions.changeCurrentSpace('0');
+  }
+
   _handleOrgClick(orgGuid) {
     orgActions.changeCurrentOrg(orgGuid);
   }
@@ -66,18 +80,25 @@ export class Nav extends React.Component {
     return this.orgSubHref(org, `/spaces/${spaceGuid}`);
   }
 
+  isCurrentSpace(spaceGuid) {
+    if (!this.state.currentSpace) return false;
+    if (this.state.currentSpace.guid === spaceGuid) return true;
+    return false;
+  }
+
   render() {
     const mainList = classNames(
       cgBaseStyles['usa-sidenav-list'],
       cgSidenavStyles['sidenav-list'], cgSidenavStyles['sidenav-level-one']
     );
     const secondList = classNames(
-      cgBaseStyles['usa-sidenav-sub_list'],
+      cgBaseStyles['usa-sidenav-list'],
       cgSidenavStyles['sidenav-list'],
       cgSidenavStyles['sidenav-level-two']
     );
     const thirdList = classNames(
       cgSidenavStyles['sidenav-list'],
+      cgBaseStyles['usa-sidenav-sub_list'],
       cgSidenavStyles['sidenav-level-three']
     );
     const downArrow = classNames(
@@ -91,33 +112,52 @@ export class Nav extends React.Component {
       cgSidenavStyles['sidenav-arrow-right']
     );
     const subMenu = classNames('sub-menu');
+    const header = classNames(
+      cgSidenavStyles['sidenav-header']
+    );
+
+    if (this.state.orgs) {
+      const openOrg = this.state.orgs.find((org) => {
+        return org.space_menu_open;
+      });
+      console.log('render open', openOrg);
+      if (openOrg) {
+        console.log('render spaces', openOrg.spaces);
+      }
+    }
 
     return (
       <div className={ classNames('test-nav-primary') }>
         <ul className={ mainList }>
-          <li key="overview">
-            <a href="/#">Overview</a>
+          <li key="overview" className={cgSidenavStyles['sidenav-entity']}>
+            <a href="/#" onClick={this._handleOverviewClick}>Overview</a>
+          </li>
+          <li key="organizations" className={classNames(
+              cgSidenavStyles['sidenav-header'])}>
+            <span className={cgSidenavStyles['sidenav-header-text']}>
+              Organizations</span>
           </li>
         { this.state.orgs.map((org) => {
           let toggleSpaceHandler = this._toggleSpacesMenu.bind(this, org.guid);
           let arrowClasses = (org.space_menu_open) ? downArrow : rightArrow;
-          let spacesDisplayStyle = { display: (org.space_menu_open) ? 'block' : 'none' };
-          return (
-            <li key={ org.guid } className={ subMenu }>
-              <a href={ this.orgHref(org) }>
-                <span>{ org.name }</span>
-              </a>
+          let activeOrgClasses = (org.space_menu_open) ?
+            cgSidenavStyles['sidenav-active'] : '';
+          let subList = <div></div>;
+
+          if (org.space_menu_open) {
+            subList = (
               <ul className={ secondList }>
-                <li className={ subMenu }>
-                  <a onClick={ toggleSpaceHandler } href="#">
-                    <span>Spaces</span>
-                    <span className={ arrowClasses }>
-                    </span>
+                <li className={ header }>
+                  <a href={ this.orgHref(org) }>
+                    <span className={cgSidenavStyles['sidenav-header-text']}>
+                      Spaces</span>
                   </a>
-                  <ul className={ thirdList } style={ spacesDisplayStyle }>
+                  <ul className={ thirdList }>
                     { org.spaces.map((space) => {
+                      let activeSpaceClasses = (this.isCurrentSpace(space.guid)) ?
+                          cgSidenavStyles['sidenav-active'] : '';
                       return (
-                        <li key={ space.guid }>
+                        <li key={ space.guid } className={activeSpaceClasses}>
                           <a href={ this.spaceHref(org, space.guid) }>
                             <span>{ space.name }</span>
                           </a>
@@ -126,10 +166,20 @@ export class Nav extends React.Component {
                     })}
                   </ul>
                 </li>
-                <li className={ subMenu }>
+                <li className={cgSidenavStyles.marketplace}>
                   <a href={ this.marketplaceHref(org) }>Marketplace</a>
                 </li>
               </ul>
+            );
+          }
+
+          return (
+            <li key={ org.guid } className={ activeOrgClasses }>
+              <a href="#" onClick={ toggleSpaceHandler } >
+                <span>{ org.name }</span>
+                <span className={ arrowClasses }></span>
+              </a>
+              { subList }
             </li>
           );
         })}
@@ -140,8 +190,10 @@ export class Nav extends React.Component {
 }
 Nav.propTypes = {
   subLinks: React.PropTypes.array,
-  initialCurrentOrgGuid: React.PropTypes.string
-}
+  initialCurrentOrgGuid: React.PropTypes.string,
+  initialSpaceGuid: React.PropTypes.string
+};
 Nav.defaultProps = {
-  initialCurrentOrgGuid: '0'
+  initialCurrentOrgGuid: '0',
+  initialSpaceGuid: '0'
 };

static_src/components/space.jsx

@@ -72,16 +72,15 @@ export default class Space extends React.Component {
   }
 
   render() {
-    var Content = this.currentContent,
-        tabNav;
+    let Content = this.currentContent;
+    let tabNav = <div></div>;
+    let main = <h4>Space not found</h4>;
 
-    if (this.state.space.guid) {
+    if (this.state.space && this.state.space.guid) {
       tabNav = (
         <Tabnav items={ this.subNav } initialItem={ this.props.currentPage } />
       );
-    }
-
-    return (
+      main = (
       <div>
         <div>
           <h2>
@@ -96,11 +95,19 @@ export default class Space extends React.Component {
           <div role="tabpanel" id={ this.props.currentPage }>
             <Content
               initialOrgGuid={ this.state.currentOrg.guid }
-              initialSpaceGuid={ this.state.currentSpaceGuid }
+              initialSpaceGuid={ this.state.space.guid }
+              intitialApps={ this.state.space.apps || [] }
             />
           </div>
         </div>
       </div>
+      );
+    }
+
+    return (
+      <div>
+        { main }
+      </div>
     );
   }
 };

static_src/constants.js

@@ -35,7 +35,9 @@ const spaceActionTypes = keymirror({
   // Action to fetch a single space from the server.
   SPACE_FETCH: null,
   // Action when a single space is received from the server.
-  SPACE_RECEIVED: null
+  SPACE_RECEIVED: null,
+  // When the user changes the current space they are looking at.
+  SPACE_CHANGE_CURRENT: null
 });
 
 const serviceActionTypes = keymirror({

static_src/main.js

@@ -15,8 +15,8 @@ import Login from './components/login.jsx';
 import Marketplace from './components/marketplace.jsx';
 import orgActions from './actions/org_actions.js';
 import routeActions from './actions/route_actions.js';
-import serviceActions from './actions/service_actions.js';
 import spaceActions from './actions/space_actions.js';
+import serviceActions from './actions/service_actions.js';
 import Space from './components/space.jsx';
 import SpaceList from './components/space_list.jsx';
 import { trackPageView } from './util/analytics.js';
@@ -37,6 +37,7 @@ function dashboard() {
 
 function org(orgGuid) {
   orgActions.changeCurrentOrg(orgGuid);
+  orgActions.toggleSpaceMenu(orgGuid);
   cfApi.fetchOrg(orgGuid);
   ReactDOM.render(
     <App>
@@ -46,6 +47,8 @@ function org(orgGuid) {
 
 function space(orgGuid, spaceGuid, potentialPage) {
   orgActions.changeCurrentOrg(orgGuid);
+  orgActions.toggleSpaceMenu(orgGuid);
+  spaceActions.changeCurrentSpace(spaceGuid);
   // TODO what happens if the space arrives before the changelistener is added?
   cfApi.fetchOrg(orgGuid);
   spaceActions.fetch(spaceGuid);
@@ -56,7 +59,7 @@ function space(orgGuid, spaceGuid, potentialPage) {
     userActions.fetchSpaceUsers(spaceGuid);
   }
   ReactDOM.render(
-    <App>
+    <App initialSpaceGuid={spaceGuid}>
       <Space
         initialSpaceGuid={ spaceGuid}
         initialOrgGuid={ orgGuid }
@@ -66,11 +69,12 @@ function space(orgGuid, spaceGuid, potentialPage) {
 }
 
 function app(orgGuid, spaceGuid, appGuid) {
-  appActions.fetchAll(appGuid);
-
+  spaceActions.changeCurrentSpace(spaceGuid);
+  appActions.fetch(appGuid);
+  appActions.fetchStats(appGuid);
   routeActions.fetchRoutesForApp(appGuid);
   ReactDOM.render(
-    <App>
+    <App initialSpaceGuid={ spaceGuid }>
       <AppPage
         initialAppGuid={ appGuid }
       />
@@ -81,6 +85,8 @@ function marketplace(orgGuid, serviceGuid, servicePlanGuid) {
   orgActions.fetch(orgGuid);
   serviceActions.fetchAllServices(orgGuid);
   orgActions.changeCurrentOrg(orgGuid);
+  orgActions.toggleSpaceMenu(orgGuid);
+  spaceActions.changeCurrentSpace('0');
   if (serviceGuid && servicePlanGuid) {
     serviceActions.createInstanceForm(serviceGuid, servicePlanGuid);
   }