// Libraries
import React, {PureComponent} from 'react'

//Components
import {MultiSelectDropdown, Dropdown} from 'src/clockface'

// Types
import {User} from '@influxdata/influx'
import {ComponentStatus} from '@influxdata/clockface'

interface Props {
  users: User[]
  onSelect: (selectedIDs: string[]) => void
  selectedUserIDs: string[]
}

export default class SelectUsers extends PureComponent<Props> {
  public render() {
    const {users, selectedUserIDs, onSelect} = this.props

    return (
      <MultiSelectDropdown
        selectedIDs={selectedUserIDs}
        onChange={onSelect}
        emptyText={this.emptyText}
        status={this.dropdownStatus}
      >
        {users.map(u => (
          <Dropdown.Item id={u.id} key={u.id} value={u}>
            {u.name}
          </Dropdown.Item>
        ))}
      </MultiSelectDropdown>
    )
  }

  private get emptyText(): string {
    const {users} = this.props
    if (!users || !users.length) {
      return 'No users exist'
    }
    return 'Select user'
  }

  private get dropdownStatus(): ComponentStatus {
    const {users} = this.props
    if (!users || !users.length) {
      return ComponentStatus.Disabled
    }
    return ComponentStatus.Default
  }
}

// Libraries
import React, {PureComponent} from 'react'

//Components
import {MultiSelectDropdown, Dropdown} from 'src/clockface'

// Types
import {User} from '@influxdata/influx'

interface Props {
  users: User[]
  onSelect: (selectedIDs: string[]) => void
  selectedUserIDs: string[]
}

export default class SelectUsers extends PureComponent<Props> {
  public render() {
    const {users} = this.props

    return (
      <>
        <MultiSelectDropdown
          selectedIDs={this.props.selectedUserIDs}
          onChange={this.props.onSelect}
          emptyText="Select user"
        >
          {users.map(u => (
            <Dropdown.Item id={u.id} key={u.id} value={u}>
              {u.name}
            </Dropdown.Item>
          ))}
        </MultiSelectDropdown>
      </>
    )
  }
}

--- 
+++ 
@@ -6,6 +6,7 @@
 
 // Types
 import {User} from '@influxdata/influx'
+import {ComponentStatus} from '@influxdata/clockface'
 
 interface Props {
   users: User[]
@@ -15,22 +16,37 @@
 
 export default class SelectUsers extends PureComponent<Props> {
   public render() {
-    const {users} = this.props
+    const {users, selectedUserIDs, onSelect} = this.props
 
     return (
-      <>
-        <MultiSelectDropdown
-          selectedIDs={this.props.selectedUserIDs}
-          onChange={this.props.onSelect}
-          emptyText="Select user"
-        >
-          {users.map(u => (
-            <Dropdown.Item id={u.id} key={u.id} value={u}>
-              {u.name}
-            </Dropdown.Item>
-          ))}
-        </MultiSelectDropdown>
-      </>
+      <MultiSelectDropdown
+        selectedIDs={selectedUserIDs}
+        onChange={onSelect}
+        emptyText={this.emptyText}
+        status={this.dropdownStatus}
+      >
+        {users.map(u => (
+          <Dropdown.Item id={u.id} key={u.id} value={u}>
+            {u.name}
+          </Dropdown.Item>
+        ))}
+      </MultiSelectDropdown>
     )
   }
+
+  private get emptyText(): string {
+    const {users} = this.props
+    if (!users || !users.length) {
+      return 'No users exist'
+    }
+    return 'Select user'
+  }
+
+  private get dropdownStatus(): ComponentStatus {
+    const {users} = this.props
+    if (!users || !users.length) {
+      return ComponentStatus.Disabled
+    }
+    return ComponentStatus.Default
+  }
 }
Update add users dropdown with an empty state
