New assets, fixed list box scrolling, header text, etc..

website/src/App.js

@@ -3,15 +3,20 @@ import { Login, Logout, ResetPassword, ForgotPassword, ConfirmEmail, ProtectedRo
 import { Home } from './Home'
 import { Profile } from './Profile'
 import { Users } from './Users'
-import { HeaderButton, Column, Row, Text, Box } from 'ui'
+import { HeaderButton, HeaderText, Column, Row, Text, Box } from 'ui'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import logoImage from 'images/logo.png'
 import { versionInfo } from './version'
 import { sizeInfo, colorInfo } from 'ui/style'
 import { api } from 'src/API'
 import { reactAutoBind } from 'auto-bind2'
+import PropTypes from 'prop-types'
 
 export class App extends Component {
+  static propTypes = {
+    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  }
+
   constructor(props) {
     super(props)
     reactAutoBind(this)
@@ -35,7 +40,16 @@ export class App extends Component {
   }
 
   handleLogout() {
-    api.logout()
+    // We have to use window here because App does not have history in it's props
+    window.location.replace('/logout')
+  }
+
+  handleHome() {
+    window.location.replace('/')
+  }
+
+  handleChangeTitle(title) {
+    this.setState({ title })
   }
 
   render() {
@@ -45,11 +59,13 @@ export class App extends Component {
 
     if (loggedInUser) {
       headerButtonsLeft = (
-        <HeaderButton image={logoImage} />
+        <Fragment>
+          <HeaderButton image={logoImage} onClick={this.handleHome} />
+          <HeaderText text={this.state.title} />
+        </Fragment>
       )
       headerButtonsRight = (
         <Fragment>
-          <HeaderButton icon='profile' />
           <HeaderButton icon='logout' onClick={this.handleLogout} />
         </Fragment>
       )
@@ -73,7 +89,7 @@ export class App extends Component {
             <Route path='/reset-password' component={ResetPassword} />
             <Route path='/forgot-password' component={ForgotPassword} />
             <ProtectedRoute path='/profile' component={Profile} />
-            <ProtectedRoute path='/users' component={Users} />
+            <ProtectedRoute path='/users' render={props => (<Users {...props} onChangeTitle={this.handleChangeTitle} />)} />
             <ProtectedRoute path='/teams' component={Users} />
             <ProtectedRoute path='/system' component={Users} />
             <ProtectedRoute path='/logout' component={Logout} />