Refactor DeleteConfirmButtons as shared component, compose as DeleteConfirmTableCell, clean up

ui/src/admin/components/DeleteRow.js

@@ -1,71 +0,0 @@
-import React, {PropTypes, Component} from 'react'
-
-import OnClickOutside from 'shared/components/OnClickOutside'
-import ConfirmButtons from 'src/admin/components/ConfirmButtons'
-
-const DeleteButton = ({onConfirm}) => (
-  <button
-    className="btn btn-xs btn-danger admin-table--delete"
-    onClick={onConfirm}
-  >
-    Delete
-  </button>
-)
-
-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})
-  }
-
-  handleClickOutside() {
-    this.setState({isConfirmed: false})
-  }
-
-  render() {
-    const {onDelete, item} = this.props
-    const {isConfirmed} = this.state
-
-    if (isConfirmed) {
-      return (
-        <ConfirmButtons
-          onConfirm={onDelete}
-          item={item}
-          onCancel={this.handleCancel}
-        />
-      )
-    }
-
-    return (
-      <DeleteButton onConfirm={this.handleConfirm} />
-    )
-  }
-}
-
-const {
-  func,
-  shape,
-} = PropTypes
-
-DeleteButton.propTypes = {
-  onConfirm: func.isRequired,
-}
-
-DeleteRow.propTypes = {
-  item: shape({}),
-  onDelete: func.isRequired,
-}
-
-export default OnClickOutside(DeleteRow)

ui/src/admin/components/RoleRow.js

@@ -5,7 +5,7 @@ import _ from 'lodash'
 import RoleEditingRow from 'src/admin/components/RoleEditingRow'
 import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
 import ConfirmButtons from 'src/admin/components/ConfirmButtons'
-import DeleteRow from 'src/admin/components/DeleteRow'
+import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
 
 const RoleRow = ({
   role: {name, permissions, users},
@@ -69,9 +69,7 @@ const RoleRow = ({
             /> : null
         }
       </td>
-      <td className="text-right" style={{width: "85px"}}>
+      <DeleteConfirmTableCell onDelete={onDelete} item={role} />
-        <DeleteRow onDelete={onDelete} item={role} />
-      </td>
     </tr>
   )
 }

ui/src/admin/components/UserRow.js

@@ -5,7 +5,7 @@ import _ from 'lodash'
 import UserEditingRow from 'src/admin/components/UserEditingRow'
 import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
 import ConfirmButtons from 'src/admin/components/ConfirmButtons'
-import DeleteRow from 'src/admin/components/DeleteRow'
+import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
 
 const UserRow = ({
   user: {name, roles, permissions},
@@ -69,9 +69,7 @@ const UserRow = ({
             /> : null
         }
       </td>
-      <td className="text-right" style={{width: "85px"}}>
+      <DeleteConfirmTableCell onDelete={onDelete} item={user} />
-        <DeleteRow onDelete={onDelete} item={user} />
-      </td>
     </tr>
   )
 }

ui/src/shared/components/DeleteConfirmButtons.js

@@ -0,0 +1,58 @@
+import React, {PropTypes, Component} from 'react'
+
+import OnClickOutside from 'shared/components/OnClickOutside'
+import ConfirmButtons from 'src/admin/components/ConfirmButtons'
+
+const DeleteButton = ({onClickDelete}) => (
+  <button className="btn btn-xs btn-danger admin-table--delete" onClick={onClickDelete}>
+    Delete
+  </button>
+)
+
+class DeleteConfirmButtons extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isConfirming: false,
+    }
+    this.handleClickDelete = ::this.handleClickDelete
+    this.handleCancel = ::this.handleCancel
+  }
+
+  handleClickDelete() {
+    this.setState({isConfirming: true})
+  }
+
+  handleCancel() {
+    this.setState({isConfirming: false})
+  }
+
+  handleClickOutside() {
+    this.setState({isConfirming: false})
+  }
+
+  render() {
+    const {onDelete, item} = this.props
+    const {isConfirming} = this.state
+
+    return isConfirming ?
+      <ConfirmButtons onConfirm={onDelete} item={item} onCancel={this.handleCancel} /> :
+      <DeleteButton onClickDelete={this.handleClickDelete} />
+  }
+}
+
+const {
+  func,
+  shape,
+} = PropTypes
+
+DeleteButton.propTypes = {
+  onClickDelete: func.isRequired,
+}
+
+DeleteConfirmButtons.propTypes = {
+  item: shape({}),
+  onDelete: func.isRequired,
+}
+
+export default OnClickOutside(DeleteConfirmButtons)

ui/src/shared/components/DeleteConfirmTableCell.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'
+
+const DeleteTableCell = (props) => (
+  <td className="text-right" style={{width: "85px"}}>
+    <DeleteConfirmButtons {...props} />
+  </td>
+)
+
+export default DeleteTableCell