Show input box when editing

ui/src/admin/actions/index.js

@@ -8,6 +8,13 @@ export const loadUsers = ({users}) => ({
   },
 })
 
+export const loadRoles = ({roles}) => ({
+  type: 'LOAD_ROLES',
+  payload: {
+    roles,
+  },
+})
+
 export const killQuery = (queryID) => ({
   type: 'KILL_QUERY',
   payload: {
@@ -34,12 +41,6 @@ export const loadUsersAsync = (url) => async (dispatch) => {
   const {data} = await getUsers(url)
   dispatch(loadUsers(data))
 }
-export const loadRoles = ({roles}) => ({
-  type: 'LOAD_ROLES',
-  payload: {
-    roles,
-  },
-})
 
 export const loadRolesAsync = (url) => async (dispatch) => {
   const {data} = await getRoles(url)

ui/src/admin/components/UserRow.js

@@ -1,9 +1,9 @@
 import React, {PropTypes} from 'react'
 import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
 
-const UserRow = ({user: {name, roles, permissions}}) => (
+const UserRow = ({user: {name, roles, permissions}, isEditing}) => (
   <tr>
-    <td>{name}</td>
+    {isEditing ? <input type="text"></input> : <td>{name}</td>}
     <td>
       {
         roles && roles.length ?
@@ -31,6 +31,7 @@ const UserRow = ({user: {name, roles, permissions}}) => (
 
 const {
   arrayOf,
+  bool,
   shape,
   string,
 } = PropTypes
@@ -45,6 +46,7 @@ UserRow.propTypes = {
       name: string,
     })),
   }).isRequired,
+  isEditing: bool,
 }
 
 export default UserRow

ui/src/admin/components/UsersTable.js

@@ -1,43 +1,69 @@
-import React, {PropTypes} from 'react'
+import React, {Component, PropTypes} from 'react'
 import UserRow from 'src/admin/components/UserRow'
 import EmptyRow from 'src/admin/components/EmptyRow'
 
-const UsersTable = ({users}) => (
-  <div className="panel panel-info">
-    <div className="panel-heading u-flex u-ai-center u-jc-space-between">
-      <div className="users__search-widget input-group admin__search-widget">
-        <input
-          type="text"
-          className="form-control"
-          placeholder="Filter Role..."
-        />
-        <div className="input-group-addon">
-          <span className="icon search" aria-hidden="true"></span>
+class UsersTable extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {users: this.props.users}
+
+    this.addUser = ::this.addUser
+  }
+
+  addUser() {
+    const newUser = {
+      name: '',
+      roles: [],
+      permissions: [],
+      isEditing: true,
+    }
+
+    const newUsers = [...this.state.users]
+    newUsers.unshift(newUser)
+
+    this.setState({users: newUsers})
+  }
+
+  render() {
+    return (
+      <div className="panel panel-info">
+        <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+          <div className="users__search-widget input-group admin__search-widget">
+            <input
+              type="text"
+              className="form-control"
+              placeholder="Filter Role..."
+            />
+            <div className="input-group-addon">
+              <span className="icon search" aria-hidden="true"></span>
+            </div>
+          </div>
+          <button className="btn btn-primary" onClick={this.addUser}>Create User</button>
+        </div>
+        <div className="panel-body">
+          <table className="table v-center">
+            <thead>
+              <tr>
+                <th>User</th>
+                <th>Roles</th>
+                <th>Permissions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                this.state.users.length ?
+                  this.state.users.map((user) =>
+                    <UserRow key={user.name} user={user} isEditing={user.isEditing} />
+                  ) : <EmptyRow tableName={'Users'} />
+              }
+            </tbody>
+          </table>
         </div>
       </div>
-      <a href="#" className="btn btn-primary">Create User</a>
-    </div>
-    <div className="panel-body">
-      <table className="table v-center">
-        <thead>
-          <tr>
-            <th>User</th>
-            <th>Roles</th>
-            <th>Permissions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {
-            users.length ?
-              users.map((user) =>
-                <UserRow key={user.name} user={user} />
-              ) : <EmptyRow tableName={'Users'} />
-          }
-        </tbody>
-      </table>
-    </div>
-  </div>
-)
+    )
+  }
+}
 
 const {
   arrayOf,