Add confirmation before deleting a role or user.

ui/src/admin/components/DeleteRow.js

@@ -0,0 +1,87 @@
+import React, {PropTypes, Component} from 'react'
+
+const DeleteButton = ({onConfirm}) => (
+  <button
+    className="btn btn-xs btn-danger admin-table--delete"
+    onClick={onConfirm}
+  >
+    Delete
+  </button>
+)
+
+const ConfirmButtons = ({onDelete, item, onCancel}) => (
+  <div className="admin-table--delete">
+    <button
+      className="btn btn-xs btn-primary "
+      onClick={() => onDelete(item)}
+    >
+      Confirm
+    </button>
+    <button
+      className="btn btn-xs btn-default"
+      onClick={onCancel}
+    >
+      Cancel
+    </button>
+  </div>
+)
+
+class DeleteRow extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isConfirmed: false,
+    }
+    this.handleConfirm = ::this.handleConfirm
+    this.handleCancel = ::this.handleCancel
+  }
+
+  handleConfirm() {
+    this.setState({isConfirmed: true})
+  }
+
+  handleCancel() {
+    this.setState({isConfirmed: false})
+  }
+
+  render() {
+    const {onDelete, item} = this.props
+    const {isConfirmed} = this.state
+
+    if (isConfirmed) {
+      return (
+        <ConfirmButtons
+          onDelete={onDelete}
+          item={item}
+          onCancel={this.handleCancel}
+        />
+      )
+    }
+
+    return (
+      <DeleteButton onConfirm={this.handleConfirm} />
+    )
+  }
+}
+
+const {
+  func,
+  shape,
+} = PropTypes
+
+DeleteButton.propTypes = {
+  onConfirm: func.isRequired,
+}
+
+ConfirmButtons.propTypes = {
+  onDelete: func.isRequired,
+  item: shape({}).isRequired,
+  onCancel: func.isRequired,
+}
+
+DeleteRow.propTypes = {
+  item: shape({}),
+  onDelete: func.isRequired,
+}
+
+export default DeleteRow

ui/src/admin/components/RoleRow.js

@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react'
 import _ from 'lodash'
 
 import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
+import DeleteRow from 'src/admin/components/DeleteRow'
 
 const PERMISSIONS = [
   "NoPermissions",
@@ -51,12 +52,7 @@ const RoleRow = ({role: {name, permissions, users}, role, onDelete}) => (
       }
     </td>
     <td className="text-right">
-      <button
-        className="btn btn-xs btn-danger admin-table--delete"
-        onClick={() => onDelete(role)}
-      >
-        Delete
-      </button>
+      <DeleteRow onDelete={onDelete} item={role} />
     </td>
   </tr>
 )

ui/src/admin/components/UserRow.js

@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react'
 import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
+import DeleteRow from 'src/admin/components/DeleteRow'
 
 const UserRow = ({user: {name, roles, permissions}, user, onDelete}) => (
   <tr>
@@ -27,12 +28,7 @@ const UserRow = ({user: {name, roles, permissions}, user, onDelete}) => (
       }
     </td>
     <td>
-      <button
-        className="btn btn-xs btn-danger admin-table--delete"
-        onClick={() => onDelete(user)}
-      >
-        Delete
-      </button>
+      <DeleteRow onDelete={onDelete} item={user} />
     </td>
   </tr>
 )