Update current user in global state when connecting / disconnecting

e2e_tests/integration/0.index.spec.js

@@ -114,6 +114,25 @@ describe('Neo4j Browser', () => {
     cy.get('[data-test-id="sidebarMetaItem"]', { timeout: 30000 }).should(p => {
       expect(p).to.have.length.above(17)
     })
+    cy.get('[data-test-id="drawerDB"]').click()
+  })
+  it('displays user info in sidebar (when connected)', () => {
+    cy.executeCommand(':clear')
+    cy.get('[data-test-id="drawerDB"]').click()
+    cy.get('[data-test-id="user-details-username"]').should('contain', 'neo4j')
+    cy.get('[data-test-id="user-details-roles"]').should('contain', 'admin')
+    cy.executeCommand(':clear')
+    cy.executeCommand(':server disconnect')
+    cy.get('[data-test-id="user-details-username"]').should('have.length', 0)
+    cy.get('[data-test-id="user-details-roles"]').should('have.length', 0)
+    cy.connect(
+      'neo4j',
+      Cypress.config.password
+    )
+    cy.executeCommand(':clear')
+    cy.get('[data-test-id="user-details-username"]').should('contain', 'neo4j')
+    cy.get('[data-test-id="user-details-roles"]').should('contain', 'admin')
+    cy.get('[data-test-id="drawerDB"]').click()
   })
   it('will clear local storage when clicking "Clear local data"', () => {
     const scriptName = 'foo'
@@ -139,4 +158,11 @@ describe('Neo4j Browser', () => {
     // once data is cleared the user is logged out and the connect form is displayed
     cy.get('input[data-test-id="boltaddress"]')
   })
+  it('displays no user info in sidebar (when not connected)', () => {
+    cy.executeCommand(':clear')
+    cy.get('[data-test-id="drawerDB"]').click()
+    cy.get('[data-test-id="user-details-username"]').should('have.length', 0)
+    cy.get('[data-test-id="user-details-roles"]').should('have.length', 0)
+    cy.get('[data-test-id="drawerDB"]').click()
+  })
 })

e2e_tests/integration/bolt.spec.js

@@ -76,4 +76,14 @@ describe('Bolt connections', () => {
       '.'
     )
   })
+  it('displays user info in sidebar (when connected)', () => {
+    cy.executeCommand(':clear')
+    cy.get('[data-test-id="drawerDB"]').click()
+    cy.get('[data-test-id="user-details-username"]').should(
+      'contain',
+      'no-roles'
+    )
+    cy.get('[data-test-id="user-details-roles"]').should('contain', '-')
+    cy.get('[data-test-id="drawerDB"]').click()
+  })
 })

src/browser/modules/DatabaseInfo/DatabaseInfo.jsx

@@ -22,8 +22,9 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { withBus } from 'react-suber'
 import { executeCommand } from 'shared/modules/commands/commandsDuck'
+import { getCurrentUser } from 'shared/modules/currentUser/currentUserDuck'
 import { LabelItems, RelationshipItems, PropertyItems } from './MetaItems'
-import UserDetails from './UserDetails'
+import { UserDetails } from './UserDetails'
 import DatabaseKernelInfo from './DatabaseKernelInfo'
 import { Drawer, DrawerBody, DrawerHeader } from 'browser-components/drawer'
 
@@ -47,12 +48,11 @@ export class DatabaseInfo extends Component {
       labels = [],
       relationshipTypes = [],
       properties = [],
-      userDetails,
       databaseKernelInfo,
-      onItemClick,
       nodes,
       relationships
-    } = this.props
+    } = this.props.meta
+    const { user, onItemClick } = this.props
 
     return (
       <Drawer id='db-drawer'>
@@ -85,7 +85,7 @@ export class DatabaseInfo extends Component {
             onMoreClick={this.onMoreClick.bind(this)('properties')}
             moreStep={this.state.moreStep}
           />
-          <UserDetails userDetails={userDetails} onItemClick={onItemClick} />
+          <UserDetails user={user} onItemClick={onItemClick} />
           <DatabaseKernelInfo
             databaseKernelInfo={databaseKernelInfo}
             onItemClick={onItemClick}
@@ -97,7 +97,7 @@ export class DatabaseInfo extends Component {
 }
 
 const mapStateToProps = state => {
-  return state.meta || {}
+  return { meta: state.meta, user: getCurrentUser(state) }
 }
 const mapDispatchToProps = (_, ownProps) => {
   return {
@@ -109,5 +109,8 @@ const mapDispatchToProps = (_, ownProps) => {
 }
 
 export default withBus(
-  connect(mapStateToProps, mapDispatchToProps)(DatabaseInfo)
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(DatabaseInfo)
 )

src/browser/modules/DatabaseInfo/UserDetails.jsx

@@ -19,10 +19,6 @@
  */
 
 import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import { withBus } from 'react-suber'
-import { CYPHER_REQUEST } from 'shared/modules/cypher/cypherDuck'
-import { executeCommand } from 'shared/modules/commands/commandsDuck'
 
 import Render from 'browser-components/Render'
 import {
@@ -33,41 +29,8 @@ import {
 import { StyledTable, StyledKey, StyledValue, Link } from './styled'
 
 export class UserDetails extends Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      userDetails: props.userDetails || {}
-    }
-  }
-  fetchUserData () {
-    this.props.bus.self(
-      CYPHER_REQUEST,
-      { query: 'CALL dbms.security.showCurrentUser()' },
-      response => {
-        if (!response.success) return
-        const result = response.result
-        const keys = result.records[0].keys
-        this.setState({
-          userDetails: {
-            username: keys.includes('username')
-              ? result.records[0].get('username')
-              : '-',
-            roles: keys.includes('roles')
-              ? result.records[0].get('roles')
-              : ['admin']
-          }
-        })
-      }
-    )
-  }
-  componentWillMount (props) {
-    this.fetchUserData()
-  }
-  componentWillReceiveProps (props) {
-    this.fetchUserData()
-  }
   render () {
-    const userDetails = this.state.userDetails
+    const userDetails = this.props.user
     if (userDetails.username) {
       const mappedRoles =
         userDetails.roles.length > 0 ? userDetails.roles.join(', ') : '-'
@@ -82,19 +45,24 @@ export class UserDetails extends Component {
               <tbody>
                 <tr>
                   <StyledKey>Username:</StyledKey>
-                  <StyledValue>{userDetails.username}</StyledValue>
+                  <StyledValue data-test-id='user-details-username'>
+                    {userDetails.username}
+                  </StyledValue>
                 </tr>
                 <tr>
                   <StyledKey>Roles:</StyledKey>
-                  <StyledValue>{mappedRoles}</StyledValue>
+                  <StyledValue data-test-id='user-details-roles'>
+                    {mappedRoles}
+                  </StyledValue>
                 </tr>
                 <Render if={hasAdminRole}>
                   <tr>
                     <StyledKey className='user-list-button'>Admin:</StyledKey>
                     <StyledValue>
                       <Link
                         onClick={() =>
-                          this.props.onItemClick(':server user add')}
+                          this.props.onItemClick(':server user add')
+                        }
                       >
                         :server user add
                       </Link>
@@ -111,14 +79,3 @@ export class UserDetails extends Component {
     }
   }
 }
-
-const mapDispatchToProps = (dispatch, ownProps) => {
-  return {
-    onItemClick: cmd => {
-      const action = executeCommand(cmd)
-      ownProps.bus.send(action.type, action)
-    }
-  }
-}
-
-export default withBus(connect(null, mapDispatchToProps)(UserDetails))

src/browser/modules/User/UserAdd.jsx

@@ -289,4 +289,9 @@ const mapStateToProps = state => {
   }
 }
 
-export default withBus(connect(mapStateToProps, null)(UserAdd))
+export default withBus(
+  connect(
+    mapStateToProps,
+    null
+  )(UserAdd)
+)

src/browser/modules/User/UserList.jsx

@@ -34,6 +34,7 @@ import { StyledTable, StyledTh } from 'browser-components/DataTables'
 import { StyledButtonContainer } from './styled'
 
 import FrameTemplate from '../Stream/FrameTemplate'
+import { forceFetch } from 'shared/modules/currentUser/currentUserDuck'
 
 export class UserList extends Component {
   constructor (props) {
@@ -57,6 +58,7 @@ export class UserList extends Component {
           this.setState({
             userList: this.extractUserNameAndRolesFromBolt(response.result)
           })
+          this.props.bus.send(forceFetch().type, forceFetch())
         }
       }
     )