From 56861f4d7fed3001ea44cf90f33513976969b535 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Tue, 28 Mar 2017 15:59:22 -0700
Subject: [PATCH] Refactor DeleteConfirmButtons as shared component, compose as
 DeleteConfirmTableCell, clean up

---
 ui/src/admin/components/DeleteRow.js          | 71 -------------------
 ui/src/admin/components/RoleRow.js            |  6 +-
 ui/src/admin/components/UserRow.js            |  6 +-
 .../shared/components/DeleteConfirmButtons.js | 58 +++++++++++++++
 .../components/DeleteConfirmTableCell.js      | 10 +++
 5 files changed, 72 insertions(+), 79 deletions(-)
 delete mode 100644 ui/src/admin/components/DeleteRow.js
 create mode 100644 ui/src/shared/components/DeleteConfirmButtons.js
 create mode 100644 ui/src/shared/components/DeleteConfirmTableCell.js

diff --git a/ui/src/admin/components/DeleteRow.js b/ui/src/admin/components/DeleteRow.js
deleted file mode 100644
index a22c2ee0c2..0000000000
--- a/ui/src/admin/components/DeleteRow.js
+++ /dev/null
@@ -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)
diff --git a/ui/src/admin/components/RoleRow.js b/ui/src/admin/components/RoleRow.js
index 669a76e568..e9bb59e36c 100644
--- a/ui/src/admin/components/RoleRow.js
+++ b/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"}}>
-        <DeleteRow onDelete={onDelete} item={role} />
-      </td>
+      <DeleteConfirmTableCell onDelete={onDelete} item={role} />
     </tr>
   )
 }
diff --git a/ui/src/admin/components/UserRow.js b/ui/src/admin/components/UserRow.js
index 6d5e513c30..74cf884b43 100644
--- a/ui/src/admin/components/UserRow.js
+++ b/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"}}>
-        <DeleteRow onDelete={onDelete} item={user} />
-      </td>
+      <DeleteConfirmTableCell onDelete={onDelete} item={user} />
     </tr>
   )
 }
diff --git a/ui/src/shared/components/DeleteConfirmButtons.js b/ui/src/shared/components/DeleteConfirmButtons.js
new file mode 100644
index 0000000000..2fbd348aec
--- /dev/null
+++ b/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)
diff --git a/ui/src/shared/components/DeleteConfirmTableCell.js b/ui/src/shared/components/DeleteConfirmTableCell.js
new file mode 100644
index 0000000000..854d947a9e
--- /dev/null
+++ b/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