Merge pull request #12433 from influxdata/fix/filter-user-dropdown

Update users dropdown to filter out the users that already exist in org

ui/src/organizations/components/AddMembersForm.tsx

@@ -5,11 +5,13 @@ import React, {PureComponent} from 'react'
 import {Button, ButtonType} from '@influxdata/clockface'
 import {Form, Grid} from 'src/clockface'
 import SelectUsers from 'src/organizations/components/SelectUsers'
-import {User} from '@influxdata/influx'
+
+// Types
+import {UsersMap} from 'src/organizations/components/Members'
 
 interface Props {
   onCloseModal: () => void
-  users: User[]
+  users: UsersMap
   onSelect: (selectedIDs: string[]) => void
   selectedUserIDs: string[]
   onSave: () => void

ui/src/organizations/components/AddMembersOverlay.tsx

@@ -4,11 +4,14 @@ import React, {PureComponent} from 'react'
 // Components
 import {OverlayBody, OverlayHeading, OverlayContainer} from 'src/clockface'
 import AddMembersForm from './AddMembersForm'
-import {User, AddResourceMemberRequestBody} from '@influxdata/influx'
+import {AddResourceMemberRequestBody} from '@influxdata/influx'
+
+// Types
+import {UsersMap} from 'src/organizations/components/Members'
 
 interface Props {
   onCloseModal: () => void
-  users: User[]
+  users: UsersMap
   addUser: (user: AddResourceMemberRequestBody) => void
 }
 
@@ -54,12 +57,8 @@ export default class AddMembersOverlay extends PureComponent<Props, State> {
     const {selectedUserIDs} = this.state
 
     selectedUserIDs.forEach(id => {
-      const user = users.find(l => {
-        return l.id === id
-      })
-
-      if (user) {
-        addUser({id: user.id, name: user.name})
+      if (users[id]) {
+        addUser({id: id, name: users[id].name})
       }
     })
   }

ui/src/organizations/components/Members.tsx

@@ -14,6 +14,7 @@ import {
 import MemberList from 'src/organizations/components/MemberList'
 import FilterList from 'src/shared/components/Filter'
 import AddMembersOverlay from 'src/organizations/components/AddMembersOverlay'
+import {Button, ComponentColor} from '@influxdata/clockface'
 
 // Actions
 import * as NotificationsActions from 'src/types/actions/notifications'
@@ -21,11 +22,10 @@ import * as NotificationsActions from 'src/types/actions/notifications'
 // Types
 import {
   ResourceOwner,
-  User,
   AddResourceMemberRequestBody,
+  User,
 } from '@influxdata/influx'
 import {OverlayState} from 'src/types'
-import {Button, ComponentColor} from '@influxdata/clockface'
 
 // APIs
 import {client} from 'src/utils/api'
@@ -34,17 +34,22 @@ import {
   memberAddFailed,
 } from 'src/shared/copy/v2/notifications'
 
+export interface UsersMap {
+  [userID: string]: User
+}
+
 interface Props {
   members: ResourceOwner[]
   orgName: string
   orgID: string
+  onChange: () => void
   notify: NotificationsActions.PublishNotificationActionCreator
 }
 
 interface State {
   searchTerm: string
   overlayState: OverlayState
-  users: User[]
+  users: UsersMap
 }
 
 export default class Members extends PureComponent<Props, State> {
@@ -53,7 +58,7 @@ export default class Members extends PureComponent<Props, State> {
     this.state = {
       searchTerm: '',
       overlayState: OverlayState.Closed,
-      users: [],
+      users: {},
     }
   }
   public render() {
@@ -109,8 +114,23 @@ export default class Members extends PureComponent<Props, State> {
   }
 
   private async getUsers() {
+    const {members} = this.props
+
     const data = await client.users.getAllUsers()
-    this.setState({users: data.users})
+
+    const users = {}
+
+    data.users.forEach(key => {
+      users[key.id] = key
+    })
+
+    members.forEach(m => {
+      if (users[m.id]) {
+        delete users[m.id]
+      }
+    })
+
+    this.setState({users: users})
   }
 
   private addUser = async (user: AddResourceMemberRequestBody) => {
@@ -120,6 +140,7 @@ export default class Members extends PureComponent<Props, State> {
       await client.organizations.addMember(this.props.orgID, user)
       this.setState({overlayState: OverlayState.Closed})
       notify(memberAddSuccess())
+      this.props.onChange()
     } catch (e) {
       console.error(e)
       this.setState({overlayState: OverlayState.Closed})

ui/src/organizations/components/SelectUsers.tsx

@@ -1,16 +1,22 @@
 // Libraries
 import React, {PureComponent} from 'react'
+
+//Components
 import {MultiSelectDropdown, Dropdown} from 'src/clockface'
-import {User} from '@influxdata/influx'
+
+// Types
+import {UsersMap} from 'src/organizations/components/Members'
 
 interface Props {
-  users: User[]
+  users: UsersMap
   onSelect: (selectedIDs: string[]) => void
   selectedUserIDs: string[]
 }
 
 export default class SelectUsers extends PureComponent<Props> {
   public render() {
+    const {users} = this.props
+
     return (
       <>
         <MultiSelectDropdown
@@ -18,9 +24,9 @@ export default class SelectUsers extends PureComponent<Props> {
           onChange={this.props.onSelect}
           emptyText="Select user"
         >
-          {this.props.users.map(cn => (
-            <Dropdown.Item id={cn.id} key={cn.id} value={cn}>
-              {cn.name}
+          {Object.keys(users).map(key => (
+            <Dropdown.Item id={key} key={key} value={users[key]}>
+              {users[key].name}
             </Dropdown.Item>
           ))}
         </MultiSelectDropdown>

ui/src/organizations/containers/OrgMembersIndex.tsx

@@ -76,7 +76,7 @@ class OrgMembersIndex extends Component<Props> {
                     organization={org}
                     fetcher={getOwnersAndMembers}
                   >
-                    {(members, loading) => (
+                    {(members, loading, fetch) => (
                       <SpinnerContainer
                         loading={loading}
                         spinnerComponent={<TechnoSpinner />}
@@ -86,6 +86,7 @@ class OrgMembersIndex extends Component<Props> {
                           orgName={org.name}
                           orgID={org.id}
                           notify={notify}
+                          onChange={fetch}
                         />
                       </SpinnerContainer>
                     )}