Merge 1d06c51 into b10aee8

.gitignore

@@ -44,6 +44,8 @@ src/bundle.js
 src/vendor
 src/fonts
 coverage
+.coverdata
+.coveralls.yml
 .coverrun
 
 # IP #

.travis.yml

@@ -3,3 +3,4 @@ language: node_js
 install:
   - npm install -g gulp bower jest-cli browserify
   - ./frontendbuild.sh
+  - npm run coveralls

README.md

@@ -1,6 +1,6 @@
 # Dash
 
-[![Build Status](https://travis-ci.org/cfpb/dash.svg?branch=master)](https://travis-ci.org/cfpb/dash) [![Coverage Status](https://coveralls.io/repos/cfpb/dash/badge.svg?branch=master)](https://coveralls.io/r/cfpb/dash?branch=master)
+[![Build Status](https://img.shields.io/travis/cfpb/dash/master.svg?style=flat-square)](https://travis-ci.org/cfpb/dash) [![Coverage Status](https://img.shields.io/coveralls/cfpb/dash/master.svg?style=flat-square)](https://coveralls.io/r/cfpb/dash?branch=master) [![Dependency Status](https://img.shields.io/david/cfpb/dash/master.svg?style=flat-square)](https://david-dm.org/cfpb/dash)
 
 ## Installation
 
@@ -11,16 +11,15 @@
 
 * `npm test`
 
-[Jest](http://facebook.github.io/jest/) is used. Tests are located in `__test__` directories in `src`.
+[Jest](http://facebook.github.io/jest/) requires Node v0.10 :expressionless:. Tests are located in `__test__` directories in `src`.
 
 ## Developing
 
-After you've set up [`devdash`](https://github.com/cfpb/devdash#installation) so that [http://localhost:8000](http://localhost:8000) is correctly serving DevDash, you may use the following commands:
+First, set up [DevDash](https://github.com/cfpb/devdash#installation). You may use the following commands:
 
-* `npm test` to run ESLint and Jest tests.
-* `gulp build` process source files and dump them into `dist/` for production use and `dev/` for dev use.
-* `gulp build --watch` to monitor JS/Less files and automatically process them when changed.
+* `gulp build` to process source files and dump them into `dist/` for production.
+* `gulp build --watch` to monitor JS/Less files and build when changed.
 
 ## Build
 
-* Run `gulp` to run tests and build everything (it runs `npm test` and `gulp build` from above).
+* Run `gulp` to run tests and build everything.

bower.json

@@ -18,6 +18,7 @@
     "less": "~2.4.0"
   },
   "dependencies": {
-    "cf-grid": "cfpb/cf-grid#1.0"
+    "cf-grid": "cfpb/cf-grid#dev",
+    "cf-breadcrumbs": "contolini/cf-breadcrumbs#dev"
   }
 }

gulpfile.js

@@ -28,11 +28,10 @@ var onError = function(err) {
 
 // Compile JS using Browserify.
 function compileScripts() {
-  function bundle(bro, opts) {
-    var dest = opts ? './dev' : './src';
+  function bundle(bro) {
     return bro.bundle()
       .pipe(source('bundle.js'))
-      .pipe(gulp.dest(dest));
+      .pipe(gulp.dest('./src'));
   }
   var b = browserify({
     debug: true,
@@ -47,20 +46,14 @@ function compileScripts() {
       ids.forEach(function(id){
         gutil.log(id + ' changed.');
       });
-      gulp.start('lint');
-      // Once for /dev
-      bundle(b, {dev: true});
-      // Again for /dist
       bundle(b);
     });
     b.on('log', function(msg){
       gutil.log('Browserify: ' + msg);
+      gulp.start('lint');
     });
   }
   b.add('./src/js/app.jsx');
-  // Once for /dev
-  bundle(b, {dev: true});
-  // Again for /dist
   return bundle(b);
 }
 
@@ -87,49 +80,29 @@ gulp.task('coverage', ['jest'], function() {
     .pipe(coveralls());
 });
 
-gulp.task('copy-src-files-to-dev', function() {
-  return gulp.src('./src/**/*')
-    .pipe(gulp.dest('./dev/'))
-});
-
-gulp.task('browserify', function(cb) {
+gulp.task('browserify', function() {
   return compileScripts();
 });
 
 gulp.task('empty-dist-dir', function(cb) {
   rimraf('./dist', cb);
 });
 
-gulp.task('styles', function() {
-  return gulp.src(['./src/**/*', '!./src/vendor/**/*'])
-    .pipe(cache('styles'))
-    .pipe(gulp.dest('./dev/'))
-});
-
-gulp.task('process-everything', ['browserify', 'empty-dist-dir'], function(cb) {
-  // Copy all the src files over to /dev.
-  gulp.start('copy-src-files-to-dev');
-  // While that's happening, use usemin to process and optimize all assets and
-  // dump them into /dist.
+gulp.task('process-for-prod', function(cb) {
   var usem = gulp.src('./src/index.html')
         .pipe(usemin({
           less: [less(), minifyCss(), 'concat', rev()],
           js: [uglify(), rev()]
         }))
         .pipe(gulp.dest('dist/'));
-  // After usemin is done, delete the original bundle.js
-  usem.on('end', function(){
-    rimraf('./src/bundle.js', cb);
-  });
 });
 
 // Primary task
-gulp.task('build', function() {
+gulp.task('build', ['browserify', 'empty-dist-dir'], function() {
   if (argv.watch) {
-    gulp.watch(['./src/**/*.html', './src/less/**/*.less'], ['styles']);
     gulp.watch(['./src/**/__tests__/**/*.js'], ['test']);
   }
-  return gulp.start(['process-everything']);
+  gulp.start('process-for-prod');
 });
 
 gulp.task('test', ['lint', 'jest']);

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "gulp test",
-    "watch": "gulp --watch",
+    "coveralls": "gulp coverage",
     "postinstall": "bower install"
   },
   "jest": {
@@ -72,6 +72,7 @@
   },
   "dependencies": {
     "backbone": "^1.1.2",
+    "capitalize": "^0.5.0",
     "flux": "^2.0.1",
     "jquery": "^2.1.3",
     "keymirror": "~0.1.1",

src/js/components/AddAsset.jsx

@@ -53,7 +53,6 @@ var AddAsset = React.createClass({
       return (
         <span className="add-item">
         {addOrLoadingIcon}
-
         </span>
       )
     }

src/js/components/AddMember.jsx

@@ -33,8 +33,7 @@ var AddMember = React.createClass({
     });
   },
   onKeyDown: function(e) {
-    console.log(e)
-    if (e.keyCode === 13) {
+    if (e.key === 'Enter') {
       this.handleAdd();
     }
   },

src/js/components/AddTeam.jsx

@@ -18,7 +18,7 @@ var AddAsset = React.createClass({
   handleClose: function() {
     this.setState({isOpen: false});
   },
-  handleAdd: function(e) {
+  handleAdd: function( e ) {
     if (this.state.teamName.length < 3) {
       return;
     }
@@ -27,28 +27,28 @@ var AddAsset = React.createClass({
     });
     this.setState({isOpen: false});
   },
-  onKeyDown: function(e) {
-    if (e.keyCode === 13) {
+  onKeyDown: function( e ) {
+    if (e.key === 'Enter') {
       this.handleAdd();
     }
   },
-  onChange: function(e) {
+  onChange: function( e ) {
     this.state.teamName = e.target.value;
     this.setState(this.state);
   },
   render: function() {
     if (this.state.isOpen) {
       return (
-        <span className="add-item">
+        <span className="add-team">
           <input type="text" ref="input" onChange={this.onChange} placeholder="New team name" onKeyDown={this.onKeyDown} />
-          <Icon type={['plus', 'action']} className="cf-form_input-icon" disabled={this.state.teamName.length < 3} title="Add new team" onClick={this.handleAdd} />
-          <Icon type={['delete', 'action']} className="cf-form_input-icon" title="Cancel" onClick={this.handleClose} />
+          <Icon ref="plus-icon" type={['plus', 'action']} className="cf-form_input-icon" disabled={this.state.teamName.length < 3} title="Add new team" onClick={this.handleAdd} />
+          <Icon ref ="minus-icon" type={['delete', 'action']} className="cf-form_input-icon" title="Cancel" onClick={this.handleClose} />
         </span>
       );
     } else {
       return (
         <span className="add-item">
-          <Icon type={['plus', 'action']} title="Add new team" onClick={this.handleOpen} />
+          <Icon ref="plus-icon" type={['plus', 'action']} title="Add new team" onClick={this.handleOpen} />
         </span>
       )
     }

src/js/components/App.jsx

@@ -2,6 +2,7 @@
 var Header = require('./Header.jsx');
 var React = require('react');
 var Home = require('./Home.jsx');
+var Crumbs = require('./Crumbs.jsx');
 var _ = require('lodash');
 var Router = require('react-router');
 var teamStore = require('../stores/teamStore');
@@ -11,7 +12,7 @@ var loggedInUserStore = require('../stores/loggedInUserStore');
 
 var App = React.createClass({
   stores: {
-    teams: teamStore,
+    teamStore: teamStore,
     users: userStore,
     loggedInUser: loggedInUserStore,
     teamDetails: teamDetailStore
@@ -66,6 +67,7 @@ var App = React.createClass({
           <div className="content_bar"></div>
           <div className="content_wrapper">
             <div className="content_main">
+              <Crumbs />
               {Body}
             </div>
           </div>

src/js/components/AssetItem.jsx

@@ -9,11 +9,11 @@ var AssetItem = React.createClass({
     var ResourceAssetItem = resources[this.props.resourceName].assetItem
     var deleteIcon = (this.props.canRemove) ? <RemoveAsset teamName={this.props.teamName} resourceName={this.props.resourceName} assetId={this.props.asset.id} /> : '';
     return (
-
-      <li className='asset-item'>
+      <li className='list-item asset-item'>
         {deleteIcon}
         <ResourceAssetItem {...this.props}/>
-      </li>)
+      </li>
+    )
   }
 });
 

src/js/components/AssetList.jsx

@@ -5,16 +5,23 @@ var _ = require('lodash');
 var AssetList = React.createClass({
 
   render: function() {
-    var that = this;
-    var assetDetails = this.props.assetDetails;
-    var Assets = this.props.assets.map(function( asset ) {
-      var assetDetail = (_.findWhere(assetDetails, {id: asset.id}) || {details: {}}).details;
-      return <AssetItem asset={asset} key={asset.name}
-        canRemove={that.props.canRemove}
-        teamName={that.props.teamName}
-        resourceName={that.props.resourceName}
-        assetDetail={assetDetail} />;
-    });
+    var that = this,
+        assetDetails = this.props.assetDetails,
+        Assets;
+    if (this.props.assets && this.props.assets.length > 0) {
+      Assets = this.props.assets.map(function(asset) {
+        var assetDetail = (_.findWhere(assetDetails, {id: asset.id}) || {details: {}}).details;
+        return (
+            <AssetItem asset={asset} key={asset.name}
+              canRemove={that.props.canRemove}
+              teamName={that.props.teamName}
+              resourceName={that.props.resourceName}
+              assetDetail={assetDetail} />
+          )
+      });
+    } else {
+      Assets = <li ref="no-assets" className="list-item"><em>no assets found</em></li>;
+    }
     return (
       <div>
         <ul className="asset-list">

src/js/components/Button.jsx

@@ -18,10 +18,11 @@ var Button = React.createClass({
   render: function() {
 
     var buttonTypes = (this.props.type instanceof Array) ? this.props.type : [this.props.type];
-    var buttonClasses = 'btn' + buttonTypes.map(function(t) {
+    var buttonProps = _.omit(this.props, 'label', 'type', 'className');
+    var buttonClasses = this.props.className ? this.props.className + ' ' : '';
+    buttonClasses = buttonClasses + 'btn' + buttonTypes.map(function(t) {
         return ' btn__' + t
       }).join('');
-    var buttonProps = _.omit(this.props, 'label', 'type');
 
     if (this.props.href) {
       return (

src/js/components/Crumbs.jsx

@@ -0,0 +1,32 @@
+var React = require('react');
+var Router = require('react-router');
+var Link = Router.Link;
+
+var Crumbs = React.createClass({
+  mixins: [Router.State],
+  render: function() {
+    var crumbs = [];
+    var routes = this.getRoutes().filter(function(route) {
+      return !route.isDefault;
+    });
+    var currentPage = routes[routes.length - 1];
+    routes.forEach(function(route, i, arr) {
+      var link;
+      if (i != arr.length - 1) {
+        crumbs.push(
+          <li className="breadcrumbs_item" key={route.name + '' + crumbs.length}>
+            <Link to={route.path} className="breadcrumbs_link">{route.name}</Link>
+          </li>
+        );
+      }
+    });
+    crumbs.push(
+      <li className="breadcrumbs_item" key={currentPage.name + '' + crumbs.length}>
+        {this.getParams().teamName || currentPage.name}
+      </li>
+    )
+    return <ul className="breadcrumbs">{crumbs}</ul>;
+  }
+});
+
+module.exports = Crumbs;