Merge pull request #3073 from influxdata/bugfix/delete-chrono-user

Fix Delete Button in All Users Admin Table

CHANGELOG.md

@@ -27,6 +27,7 @@
 1.  [#2970](https://github.com/influxdata/chronograf/pull/2970): Fix hanging browser on docker host dashboard
 1.  [#3006](https://github.com/influxdata/chronograf/pull/3006): Fix Kapacitor Rules task enabled checkboxes to only toggle exactly as clicked
 1.  [#3048](https://github.com/influxdata/chronograf/pull/3048): Prevent Multi-Select Dropdown in InfluxDB Admin Users and Roles tabs from losing selection state
+1.  [#3073](https://github.com/influxdata/chronograf/pull/3073): Fix Delete button in All Users admin page
 1.  [#3068](https://github.com/influxdata/chronograf/pull/3068): Fix intermittent missing fill from graphs
 1.  [#3087](https://github.com/influxdata/chronograf/pull/3087): Exit annotation edit mode when user navigates away from dashboard
 1.  [#3079](https://github.com/influxdata/chronograf/pull/3082): Support custom time range in annotations api wrapper

ui/src/admin/components/chronograf/AllUsersTableRow.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import _ from 'lodash'
 
 import Tags from 'shared/components/Tags'
 import SlideToggle from 'shared/components/SlideToggle'
@@ -38,7 +37,9 @@ const AllUsersTableRow = ({
     name: organizations.find(o => r.organization === o.id).name,
   }))
 
-  const wrappedDelete = _.curry(onDelete, user)
+  const wrappedDelete = () => {
+    onDelete(user)
+  }
 
   const removeWarning = userIsMe
     ? 'Delete your user record\nand log yourself out?'

ui/src/admin/components/chronograf/UsersTableRow.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import Dropdown from 'shared/components/Dropdown'
-import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
+import ConfirmButton from 'shared/components/ConfirmButton'
 
 import {USER_ROLES} from 'src/admin/constants/chronografAdmin'
 import {USERS_TABLE} from 'src/admin/constants/chronografTableSizing'
@@ -26,6 +26,12 @@ const UsersTableRow = ({
 
   const userIsMe = user.id === meID
 
+  const wrappedDelete = () => {
+    onDelete(user)
+  }
+
+  const removeWarning = 'Remove this user\nfrom Current Org?'
+
   return (
     <tr className={'chronograf-admin-table--user'}>
       <td>
@@ -52,12 +58,13 @@ const UsersTableRow = ({
       </td>
       <td style={{width: colProvider}}>{user.provider}</td>
       <td style={{width: colScheme}}>{user.scheme}</td>
-      <DeleteConfirmTableCell
+      <ConfirmButton
+        confirmText={removeWarning}
+        confirmAction={wrappedDelete}
+        size="btn-xs"
+        type="btn-danger"
         text="Remove"
-        onDelete={onDelete}
-        item={user}
-        buttonSize="btn-xs"
-        disabled={userIsMe}
+        customClass="table--show-on-row-hover"
       />
     </tr>
   )