Update add users dropdown with an empty state

ui/src/members/components/SelectUsers.tsx

@@ -6,6 +6,7 @@ import {MultiSelectDropdown, Dropdown} from 'src/clockface'
 
 // Types
 import {User} from '@influxdata/influx'
+import {ComponentStatus} from '@influxdata/clockface'
 
 interface Props {
   users: User[]
@@ -15,22 +16,37 @@ interface Props {
 
 export default class SelectUsers extends PureComponent<Props> {
   public render() {
-    const {users} = this.props
+    const {users, selectedUserIDs, onSelect} = this.props
 
     return (
-      <>
+      <MultiSelectDropdown
-        <MultiSelectDropdown
+        selectedIDs={selectedUserIDs}
-          selectedIDs={this.props.selectedUserIDs}
+        onChange={onSelect}
-          onChange={this.props.onSelect}
+        emptyText={this.emptyText}
-          emptyText="Select user"
+        status={this.dropdownStatus}
-        >
+      >
-          {users.map(u => (
+        {users.map(u => (
-            <Dropdown.Item id={u.id} key={u.id} value={u}>
+          <Dropdown.Item id={u.id} key={u.id} value={u}>
-              {u.name}
+            {u.name}
-            </Dropdown.Item>
+          </Dropdown.Item>
-          ))}
+        ))}
-        </MultiSelectDropdown>
+      </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
+  }
 }