Add the ability to remove a member from org

CHANGELOG.md

@@ -11,7 +11,7 @@ On most `linux` systems:
 
 ```sh
 
-# Replace <username> with your actual username. 
+# Replace <username> with your actual username.
 
 $ rm -r /home/<username>/.influxdbv2/engine
 ```
@@ -32,6 +32,7 @@ Once completed, `v2.0.0-alpha.5` can be started.
 1. [12111](https://github.com/influxdata/influxdb/pull/12111): Add ability to filter resources by clicking a label
 1. [12401](https://github.com/influxdata/influxdb/pull/12401): Add ability to add a member to org
 1. [12391](https://github.com/influxdata/influxdb/pull/12391): Improve representation of TSM tagsets on disk
+1. [12437](https://github.com/influxdata/influxdb/pull/12437): Add ability to remove a member from org
 
 ### Bug Fixes
 

ui/package.json

@@ -137,7 +137,7 @@
   },
   "dependencies": {
     "@influxdata/clockface": "0.0.5",
-    "@influxdata/influx": "0.2.28",
+    "@influxdata/influx": "0.2.29",
     "@influxdata/react-custom-scrollbars": "4.3.8",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",

ui/src/organizations/components/AddMembersOverlay.tsx

@@ -12,7 +12,7 @@ import {UsersMap} from 'src/organizations/components/Members'
 interface Props {
   onCloseModal: () => void
   users: UsersMap
-  addUser: (user: AddResourceMemberRequestBody) => void
+  addMember: (user: AddResourceMemberRequestBody) => void
 }
 
 interface State {
@@ -53,12 +53,12 @@ export default class AddMembersOverlay extends PureComponent<Props, State> {
   }
 
   private handleSave = () => {
-    const {users, addUser} = this.props
+    const {users, addMember} = this.props
     const {selectedUserIDs} = this.state
 
     selectedUserIDs.forEach(id => {
       if (users[id]) {
-        addUser({id: id, name: users[id].name})
+        addMember({id: id, name: users[id].name})
       }
     })
   }

ui/src/organizations/components/MemberList.tsx

@@ -3,23 +3,25 @@ import React, {PureComponent} from 'react'
 
 // Components
 import {IndexList} from 'src/clockface'
+import MemberRow from 'src/organizations/components/MemberRow'
 
 // Types
 import {ResourceOwner} from '@influxdata/influx'
 
 interface Props {
   members: ResourceOwner[]
   emptyState: JSX.Element
+  onDelete: (member: ResourceOwner) => void
 }
 
 export default class MemberList extends PureComponent<Props> {
   public render() {
     return (
       <IndexList>
         <IndexList.Header>
-          <IndexList.HeaderCell columnName="Username" width="25%" />
-          <IndexList.HeaderCell columnName="Role" width="25%" />
-          <IndexList.HeaderCell width="50%" />
+          <IndexList.HeaderCell columnName="Username" width="20%" />
+          <IndexList.HeaderCell columnName="Role" width="20%" />
+          <IndexList.HeaderCell width="60%" />
         </IndexList.Header>
         <IndexList.Body columnCount={3} emptyState={this.props.emptyState}>
           {this.rows}
@@ -29,12 +31,10 @@ export default class MemberList extends PureComponent<Props> {
   }
 
   private get rows(): JSX.Element[] {
-    return this.props.members.map(member => (
-      <IndexList.Row key={member.id}>
-        <IndexList.Cell>{member.name}</IndexList.Cell>
-        <IndexList.Cell>{member.role}</IndexList.Cell>
-        <IndexList.Cell />
-      </IndexList.Row>
+    const {members, onDelete} = this.props
+
+    return members.map(member => (
+      <MemberRow key={member.id} member={member} onDelete={onDelete} />
     ))
   }
 }

ui/src/organizations/components/MemberRow.tsx

@@ -0,0 +1,42 @@
+// Libraries
+import React, {PureComponent} from 'react'
+
+// Components
+import {ResourceOwner} from '@influxdata/influx'
+import {
+  IndexList,
+  ConfirmationButton,
+  ComponentSize,
+  Alignment,
+} from 'src/clockface'
+
+interface Props {
+  member: ResourceOwner
+  onDelete: (member: ResourceOwner) => void
+}
+
+export default class MemberRow extends PureComponent<Props> {
+  public render() {
+    const {member} = this.props
+
+    return (
+      <IndexList.Row key={member.id}>
+        <IndexList.Cell>{member.name}</IndexList.Cell>
+        <IndexList.Cell>{member.role}</IndexList.Cell>
+        <IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
+          <ConfirmationButton
+            size={ComponentSize.ExtraSmall}
+            text="Delete"
+            confirmText="Confirm"
+            onConfirm={this.handleDelete}
+          />
+        </IndexList.Cell>
+      </IndexList.Row>
+    )
+  }
+
+  private handleDelete = () => {
+    const {member, onDelete} = this.props
+    onDelete(member)
+  }
+}

ui/src/organizations/components/Members.tsx

@@ -32,6 +32,8 @@ import {client} from 'src/utils/api'
 import {
   memberAddSuccess,
   memberAddFailed,
+  memberRemoveSuccess,
+  memberRemoveFailed,
 } from 'src/shared/copy/v2/notifications'
 
 export interface UsersMap {
@@ -87,13 +89,19 @@ export default class Members extends PureComponent<Props, State> {
           searchKeys={['name']}
           searchTerm={searchTerm}
         >
-          {ms => <MemberList members={ms} emptyState={this.emptyState} />}
+          {ms => (
+            <MemberList
+              members={ms}
+              emptyState={this.emptyState}
+              onDelete={this.removeMember}
+            />
+          )}
         </FilterList>
         <OverlayTechnology visible={overlayState === OverlayState.Open}>
           <AddMembersOverlay
             onCloseModal={this.handleCloseModal}
             users={this.state.users}
-            addUser={this.addUser}
+            addMember={this.addMember}
           />
         </OverlayTechnology>
       </>
@@ -133,14 +141,14 @@ export default class Members extends PureComponent<Props, State> {
     this.setState({users: users})
   }
 
-  private addUser = async (user: AddResourceMemberRequestBody) => {
-    const {notify} = this.props
+  private addMember = async (user: AddResourceMemberRequestBody) => {
+    const {notify, onChange} = this.props
 
     try {
       await client.organizations.addMember(this.props.orgID, user)
       this.setState({overlayState: OverlayState.Closed})
-      notify(memberAddSuccess())
-      this.props.onChange()
+      onChange()
+      notify(memberAddSuccess(user.name))
     } catch (e) {
       console.error(e)
       this.setState({overlayState: OverlayState.Closed})
@@ -149,6 +157,20 @@ export default class Members extends PureComponent<Props, State> {
     }
   }
 
+  private removeMember = async (member: ResourceOwner) => {
+    const {orgID, notify, onChange} = this.props
+
+    try {
+      await client.organizations.removeMember(orgID, member.id)
+      onChange()
+      notify(memberRemoveSuccess(member.name))
+    } catch (e) {
+      console.error(e)
+      const message = _.get(e, 'response.data.message', 'Unknown error')
+      notify(memberRemoveFailed(message))
+    }
+  }
+
   private get emptyState(): JSX.Element {
     const {orgName} = this.props
     const {searchTerm} = this.state

ui/src/organizations/components/__snapshots__/Members.test.tsx.snap

@@ -6,98 +6,65 @@ exports[`MemberList rendering renders 1`] = `
     <IndexListHeaderCell
       alignment="left"
       columnName="Username"
-      width="25%"
+      width="20%"
     />
     <IndexListHeaderCell
       alignment="left"
       columnName="Role"
-      width="25%"
+      width="20%"
     />
     <IndexListHeaderCell
       alignment="left"
       columnName=""
-      width="50%"
+      width="60%"
     />
   </IndexListHeader>
   <IndexListBody
     columnCount={3}
     emptyState={<React.Fragment />}
   >
-    <IndexListRow
-      disabled={false}
+    <MemberRow
       key="1"
-      testID="table-row"
-    >
-      <IndexListRowCell
-        alignment="left"
-        revealOnHover={false}
-        testID="table-cell"
-      >
-        John
-      </IndexListRowCell>
-      <IndexListRowCell
-        alignment="left"
-        revealOnHover={false}
-        testID="table-cell"
-      >
-        owner
-      </IndexListRowCell>
-      <IndexListRowCell
-        alignment="left"
-        revealOnHover={false}
-        testID="table-cell"
-      />
-    </IndexListRow>
-    <IndexListRow
-      disabled={false}
+      member={
+        Object {
+          "id": "1",
+          "links": Object {
+            "self": "/api/v2/users/1",
+          },
+          "name": "John",
+          "role": "owner",
+          "status": "active",
+        }
+      }
+    />
+    <MemberRow
       key="2"
-      testID="table-row"
-    >
-      <IndexListRowCell
-        alignment="left"
-        revealOnHover={false}
-        testID="table-cell"
-      >
-        Jane
-      </IndexListRowCell>
-      <IndexListRowCell
-        alignment="left"
-        revealOnHover={false}
-        testID="table-cell"
-      >
-        owner
-      </IndexListRowCell>
-      <IndexListRowCell
-        alignment="left"
-        revealOnHover={false}
-        testID="table-cell"
-      />
-    </IndexListRow>
-    <IndexListRow
-      disabled={false}
+      member={
+        Object {
+          "id": "2",
+          "links": Object {
+            "self": "/api/v2/users/2",
+          },
+          "name": "Jane",
+          "role": "owner",
+          "status": "active",
+        }
+      }
+    />
+    <MemberRow
       key="3"
-      testID="table-row"
-    >
-      <IndexListRowCell
-        alignment="left"
-        revealOnHover={false}
-        testID="table-cell"
-      >
-        Smith
-      </IndexListRowCell>
-      <IndexListRowCell
-        alignment="left"
-        revealOnHover={false}
-        testID="table-cell"
-      >
-        owner
-      </IndexListRowCell>
-      <IndexListRowCell
-        alignment="left"
-        revealOnHover={false}
-        testID="table-cell"
-      />
-    </IndexListRow>
+      member={
+        Object {
+          "id": "3",
+          "links": Object {
+            "self": "/api/v2/users/3",
+          },
+          "name": "Smith",
+          "role": "owner",
+          "status": "active",
+        }
+      }
+    />
   </IndexListBody>
 </IndexList>
 `;

ui/src/shared/copy/v2/notifications.ts

@@ -213,12 +213,22 @@ export const telegrafDeleteFailed = (telegrafName: string): Notification => ({
   message: `Failed to delete telegraf: "${telegrafName}"`,
 })
 
-export const memberAddSuccess = (): Notification => ({
+export const memberAddSuccess = (username: string): Notification => ({
   ...defaultSuccessNotification,
-  message: 'Members added successfully',
+  message: `Member "${username}" was added successfully`,
 })
 
 export const memberAddFailed = (message: string): Notification => ({
   ...defaultErrorNotification,
   message: `Failed to add members: "${message}"`,
 })
+
+export const memberRemoveSuccess = (memberName: string): Notification => ({
+  ...defaultSuccessNotification,
+  message: `Member "${memberName}" was removed successfully`,
+})
+
+export const memberRemoveFailed = (message: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to remove members: "${message}"`,
+})