Merge branch 'master' into LinkStoryFix

.env.example

@@ -13,3 +13,6 @@ REDIS_SESSION_PREFIX=tanto_session
 APP_NAME=Tanto
 APP_THEME=cyan
 
+SLACK_TOKEN=
+SLACK_AVATARS_PREFETCH_SCHEDULE='0 0 1 * *'
+

doc/install.md

@@ -1,51 +1,57 @@
 
 
-1. Web server
-NGINX
+##### 1. Application server requirements
 
-2. Application server
+- nodejs version 6.9.1-v.7.0
+- npm version >= 3.10.8
+- yarn (npm install yarn -g)
+- forever (npm install forever -g)
+- nginx
+- redis (local or remote)
 
-nodejs - v.6.9.1-v.7.0
-npm
-yarn
+The application uses Redis db to store session, if you can't connect to any Redis instance, please setup local one. Familiarize yourself with the installation guide http://redis.io/topics/quickstart.
 
+You might run it with `docker run -d -p 6379:6379 redis `
 
-*Production environment*
+##### 2. Enable environment variables file:
+Rename/copy file  `.env.example` to `.env` and provide variables if needed.
 
-1. Stop current node process with forever:
+- provide ***REDIS_HOST, REDIS_PORT*** if they differ from default ones
 
-List current processes
-`forever list`
+- the application uses SLACK Web API to fetch user's avatars. Make sure you provide ***SLACK_TOKEN*** in `.env` file
 
-There is only one node process should listed. Track his PID and stop the process:
+To obtain slack token for development and testing visit page https://api.slack.com/docs/oauth-test-tokens, login with your slack account and issue your personal token following the instructions.
 
-`forever stop <PID>`
+- Application authenticates user with Ono OAuth2 API and requires authentication API host and user info route
 
-2. Pull source code update
+- Application exposes ONO GraphQL API and requires ***ONO_OAUTH_CLIENT_ID*** and ***ONO_OAUTH_SECRET_ID***
 
-`hg pull -u`
 
-3. Install npm packages:
+##### 3. Run/Restart application(production)
 
-`yarn`
+If node process is already run you can simply run
 
-4. Enable environment variables file:
+`yarn restart`
 
-rename `.env.example` to `.env` and replace variables if needed.
+Check if process restarted correctly and there are no errors. Done.
 
-5. Application uses Redis db to store session, if you can't connect to any Redis instance,
-  please setup local one. Familiarize yourself with the installation guide http://redis.io/topics/quickstart.
-  You might run it with `docker run -d -p 6379:6379 redis `
+But if node process is not running, do the following(or run npm command shortcuts from package.json):
 
-6. Build project
+`git checkout -f master`
+`git pull`
+`yarn`
 `yarn run build`
-
-7. Run application
 `yarn start`
 
+Forever docs:
+https://github.com/foreverjs/forever
+
 The node process will be started on the port defined by node PORT environment variable, can be changed in package.json.
 
-8. *[THIS step should be done only once]* Add NGINX config that proxy port 80 to node process port.
+
+##### 4. NGINX
+
+*[THIS step should be done only once]* Add NGINX config that proxy port 80 to node process port. Make sure nginx listens correct port.
 
 Example:
 
@@ -62,10 +68,10 @@ server {
 }
 ```
 
-*Development environment*
+##### 5. Development environment
 
-1. Run development server:
+- Run development server:
 `yarn run dev`
 
-2. Run unit tests:
+ - Run unit tests:
 `yarn test`

package.json

@@ -15,15 +15,25 @@
     "start-dev": "better-npm-run start-dev",
     "start-prod": "better-npm-run start-prod",
     "start": "concurrently --kill-others \"npm run start-prod\"",
+    "restart": "concurrently --kill-others \"npm run restart-prod\"",
     "storybook": "NODE_PATH=src/client:src/universal:src start-storybook -p 6006 -c storybook",
     "test-watch": "better-npm-run test-watch",
     "test": "better-npm-run test",
     "watch-client": "better-npm-run watch-client",
-    "git-checkout": "git checkout -f restart-prod-script && git pull",
-    "restart-prod": "yarn run git-checkout && yarn run build && yarn start"
+    "git-checkout": "git checkout -f master && git pull",
+    "restart-prod": "yarn run git-checkout && yarn && yarn run build && better-npm-run restart-server"
   },
   "betterScripts": {
     "start-prod": {
+      "command": "forever start ./server.js &",
+      "env": {
+        "NODE_PATH": "./src",
+        "NODE_ENV": "production",
+        "PORT": 8084,
+        "HOST": "0.0.0.0"
+      }
+    },
+    "restart-server": {
       "command": "forever restart ./server.js &",
       "env": {
         "NODE_PATH": "./src",
@@ -123,6 +133,7 @@
   },
   "dependencies": {
     "@kadira/storybook": "^2.21.0",
+    "asynch": "^0.5.2",
     "babel": "^6.5.2",
     "babel-cli": "^6.18.0",
     "babel-core": "^6.5.2",
@@ -143,6 +154,7 @@
     "browser-request": "^0.3.3",
     "chai": "^3.5.0",
     "chai-as-promised": "^6.0.0",
+    "chai-spies": "^0.7.1",
     "chai-subset": "^1.3.0",
     "chalk": "^1.1.3",
     "compression": "^1.6.0",
@@ -185,8 +197,11 @@
     "lodash-webpack-plugin": "^0.11.0",
     "lusca": "^1.4.1",
     "material-ui": "^0.16.4",
+    "mockery": "^2.0.0",
     "moment": "^2.13.0",
     "morgan": "^1.7.0",
+    "node-noop": "^1.0.0",
+    "node-schedule": "^1.2.0",
     "normalizr": "^3.1.0",
     "passport": "^0.3.2",
     "passport-oauth2": "^1.3.0",
@@ -205,7 +220,7 @@
     "react-scroll": "^1.0.24",
     "react-select": "^1.0.0-beta13",
     "react-tap-event-plugin": "^2.0.1",
-    "redis": "^2.6.3",
+    "redis": "^2.6.5",
     "redux": "^3.0.4",
     "redux-form-validation": "0.0.6",
     "redux-localstorage": "^0.4.0",
@@ -216,6 +231,7 @@
     "reselect": "^2.5.4",
     "scroll-behavior": "^0.3.2",
     "serve-favicon": "^2.3.0",
+    "slack": "^8.2.0",
     "socket.io": "^1.3.7",
     "socket.io-client": "^1.3.7",
     "storybook-addon-material-ui": "^0.7.4",

src/client/components/Avatar/index.js

@@ -0,0 +1,39 @@
+/* @flow */
+
+import React from 'react'
+import { default as MaterialAvatar } from 'material-ui/Avatar'
+
+export type Props = {
+  style?: Object,
+  avatar: string,
+};
+
+const avatarStyle = {
+  borderRadius: '20%',
+  float: 'left',
+  display: 'table-column',
+  height: '40px',
+  width: '40px',
+  color: 'rgba(157, 156, 156, 0.58)',
+}
+
+function Avatar(props: Props) {
+  if (!props.avatar) {
+    return (
+      <div style={{ ...avatarStyle, padding: '7px 7px 7px 9px', backgroundColor: 'lightgrey' }} >
+        <i className="fa fa-user-o fa-2x" aria-hidden="true"></i>
+      </div>
+    )
+  }
+
+  return (
+    <MaterialAvatar
+      src={props.avatar}
+      size={40}
+      style={{ ...avatarStyle, ...props.style }}
+    />
+  )
+}
+
+export default Avatar
+

src/client/components/ChangesetList/ChangesetList.js

@@ -9,7 +9,7 @@ import ListGroup from 'react-bootstrap/lib/ListGroup'
 import ListGroupItem from 'react-bootstrap/lib/ListGroupItem'
 import type { ChangesetType } from 'universal/types'
 import ChangesetDelta from 'components/ChangesetDelta'
-import TestAvatar from 'components/TestAvatar'
+import Avatar from 'components/Avatar'
 import { Link } from 'react-router'
 import { buildChangesetLink } from 'routes/helpers'
 import Checkbox from 'material-ui/Checkbox'
@@ -132,7 +132,7 @@ class ChangesetList extends Component {
                         disableTouchRipple
                         style={{ float: 'left', padding: '10px', width: 'auto' }}
                         /> : ''}
-                    <TestAvatar />
+                    <Avatar />
                     <div style={{ paddingLeft: '10px', display: 'table' }}>
                       <Link
                         style={{

src/client/components/Comment/Comment.js

@@ -3,7 +3,7 @@
 import React, { Component } from 'react'
 import TextEditorBox from 'components/TextEditorBox'
 import Icon from 'components/Icon'
-import TestAvatar from 'components/TestAvatar'
+import Avatar from 'components/Avatar'
 import IconButton from 'material-ui/IconButton'
 import Edit from 'material-ui/svg-icons/editor/mode-edit'
 import Settings from 'material-ui/svg-icons/action/settings'
@@ -145,7 +145,7 @@ class Comment extends Component {
           {!editMode &&
             <div style={{ overflow: 'auto', padding: '3px' }}>
               <div style={{ float: 'left', padding: '6px 6px', fontFamily: 'sans-serif' }}>
-                <TestAvatar />
+                <Avatar {...comment.author.slack} />
                 <div style={headerStyle || commentHeaderStyle}>
                   <strong style={{ color: '#31708f' }}>{comment.author.fullName}</strong>
                   <span> commented {moment(comment.created).fromNow()}</span>

src/client/components/CommentsList/CommentsList.js

@@ -7,15 +7,18 @@ import ListGroupItem from 'react-bootstrap/lib/ListGroupItem'
 import ListGroup from 'react-bootstrap/lib/ListGroup'
 
 
-import TestAvatar from '../TestAvatar'
+import Avatar from 'components/Avatar'
 import './CommentsList.css'
 
 export type Props = {
   comments: Array<{
     date: string,
     message: string,
+    author?: {
+      slack: Object
+    }
   }>
-};
+}
 
 class CommentsList extends Component {
   /* eslint-disable react/sort-comp */
@@ -69,7 +72,7 @@ class CommentsList extends Component {
               {this.props.comments.map(comment => (
                 <ListGroupItem style={{ padding: '10px 10px' }} >
                   <div style={{ display: 'inline-block' }}>
-                    <TestAvatar />
+                    {comment.author && comment.author.slack && <Avatar {...comment.author.slack} />}
                     <div style={{ padding: '0 10px', display: 'table' }}>
                       <div style={{ fontSize: '13px', color: '#aaa7a7' }}>
                         <strong>

src/client/components/CommentsList/CommentsList.stories.js

@@ -10,7 +10,7 @@ storiesOf('CommentsList', module)
   .add('default', () => (
     <CommentsList
       comments={[
-        { date: '2016-08-15 20:31:23', message: 'lorem ipsum' },
+        { date: '2016-08-15 20:31:23', message: 'lorem ipsum', author: { slack: { avatar: '' } } },
         { date: '2016-08-10 20:31:23', message: 'lorem ipsum' },
       ]}
     />

src/client/components/IssuesList/IssuesList.js

@@ -12,7 +12,7 @@ import moment from 'moment'
 
 import _ from 'lodash'
 
-import TestAvatar from '../TestAvatar'
+import Avatar from 'components/Avatar'
 import './IssuesList.css'
 
 const subHeader = text => (
@@ -132,7 +132,7 @@ class IssuesList extends Component {
                   <Row>
                     <Col md={3} sm={6} xs={12}>
                       <div style={{ display: 'table' }}>
-                        <TestAvatar />
+                        <Avatar {...issue.owner.slack} />
                         <div style={{ paddingLeft: '10px', display: 'table' }}>
                           <a href="#issue">{issue.title}</a>
                           <div style={{ fontSize: '12px', color: 'grey', fontStyle: 'italic' }}>

src/client/components/NotificationList/NotificationList.js

@@ -6,11 +6,10 @@ import { darkBlack, grey400 } from 'material-ui/styles/colors'
 import ActionInfo from 'material-ui/svg-icons/action/info'
 import Update from 'material-ui/svg-icons/action/system-update-alt'
 import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'
-import TestAvatar from 'components/TestAvatar'
+import Avatar from 'components/Avatar'
 import IconButton from 'material-ui/IconButton'
 import IconMenu from 'material-ui/IconMenu'
 import MenuItem from 'material-ui/MenuItem'
-import Avatar from 'material-ui/Avatar'
 
 const primaryTextStyle = {
   fontSize: '14px',
@@ -41,7 +40,7 @@ function NotificationList() {
     <div>
       <List>
         <ListItem
-          leftAvatar={<TestAvatar />}
+          leftAvatar={<Avatar />}
           rightIconButton={rightIconMenu}
           primaryText={
             <div><div style={primaryTextStyle}>New comment in:
@@ -164,7 +163,7 @@ function NotificationList() {
         <ListItem
           rightIconButton={rightIconMenu}
           leftAvatar={
-            <TestAvatar />
+            <Avatar />
           }
           primaryText={
             <p style={primaryTextStyle}>You are mentioned in:
@@ -243,7 +242,7 @@ function NotificationList() {
         <ListItem
           rightIconButton={rightIconMenu}
           leftAvatar={
-            <TestAvatar />
+            <Avatar />
           }
           primaryText={
             <p style={primaryTextStyle}>New comment in: