feat: disallow removal of last user from account (#3663)

Co-authored-by: joelfried <jfried@influxdata.com>
Co-authored-by: Randy Coulman <rcoulman@influxdata.com>

Author: 3 people

src/users/components/UserList.tsx

@@ -1,19 +1,27 @@
 // Libraries
 import React, {FC, useContext, useState} from 'react'
+import {useSelector} from 'react-redux'
 
 // Components
 import {Columns, Grid, IndexList} from '@influxdata/clockface'
 import {UsersContext} from 'src/users/context/users'
 import UserListItem from 'src/users/components/UserListItem'
 import InviteListItem from 'src/users/components/InviteListItem'
 
+// Selectors
+import {getMe} from 'src/me/selectors'
+
 // Utils
+import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {filter} from 'src/users/utils/filter'
-import SearchWidget from '../../shared/components/search_widget/SearchWidget'
 
 const UserList: FC = () => {
   const {users, invites} = useContext(UsersContext)
 
+  const currentUserId = useSelector(getMe)?.id
+  const selfRemovalFromAccount = isFlagEnabled('selfRemovalFromAccount')
+
   const [searchTerm, setSearchTerm] = useState('')
 
   const filteredUsers = filter(
@@ -24,6 +32,9 @@ const UserList: FC = () => {
 
   const filteredInvites = filter(invites, ['email', 'role'], searchTerm)
 
+  const isDeletable = user =>
+    selfRemovalFromAccount ? users.length > 1 : user.id !== currentUserId
+
   return (
     <Grid>
       <Grid.Row>
@@ -49,7 +60,11 @@ const UserList: FC = () => {
             <InviteListItem key={`invite-${invite.id}`} invite={invite} />
           ))}
           {filteredUsers.map(user => (
-            <UserListItem key={`user-${user.id}`} user={user} />
+            <UserListItem
+              key={`user-${user.id}`}
+              user={user}
+              isDeletable={isDeletable(user)}
+            />
           ))}
         </IndexList.Body>
       </IndexList>

src/users/components/UserListItem.tsx

@@ -1,6 +1,5 @@
 // Libraries
 import React, {FC, useContext, useState} from 'react'
-import {useSelector} from 'react-redux'
 import {capitalize} from 'lodash'
 
 // Components
@@ -16,17 +15,12 @@ import {
 } from '@influxdata/clockface'
 import {UsersContext} from 'src/users/context/users'
 
-// Selectors
-import {getMe} from 'src/me/selectors'
-
 // Types
 import {CloudUser} from 'src/types'
 
-// Utils
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
-
 interface Props {
   user: CloudUser
+  isDeletable: boolean
 }
 
 // TODO: add back in once https://github.com/influxdata/quartz/issues/2389 back-filling of names is complete
@@ -47,14 +41,11 @@ interface Props {
 //   return ''
 // }
 
-const UserListItem: FC<Props> = ({user}) => {
-  const {id, email, role} = user
-  const currentUserId = useSelector(getMe)?.id
+const UserListItem: FC<Props> = ({user, isDeletable}) => {
+  const {email, role} = user
   const {handleRemoveUser, removeUserStatus} = useContext(UsersContext)
 
-  const isCurrentUser = id === currentUserId
   const [revealOnHover, toggleRevealOnHover] = useState(true)
-  const selfRemovalFromAccount = isFlagEnabled('selfRemovalFromAccount')
 
   const handleShow = () => {
     toggleRevealOnHover(false)
@@ -93,7 +84,7 @@ const UserListItem: FC<Props> = ({user}) => {
       </IndexList.Cell>
       <IndexList.Cell className="user-list-cell-status">Active</IndexList.Cell>
       <IndexList.Cell revealOnHover={revealOnHover} alignment={Alignment.Right}>
-        {(!isCurrentUser || selfRemovalFromAccount) && (
+        {isDeletable && (
           <ConfirmationButton
             icon={IconFont.Trash_New}
             onShow={handleShow}