diff --git a/public/app/core/components/UserPicker/UserPicker.jest.tsx b/public/app/core/components/UserPicker/UserPicker.jest.tsx
new file mode 100644
index 00000000000..0e3c672dcbe
--- /dev/null
+++ b/public/app/core/components/UserPicker/UserPicker.jest.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import UserPicker from './UserPicker';
+
+const model = {
+ backendSrv: {
+ get: () => {
+ return new Promise((resolve, reject) => {});
+ },
+ },
+ refreshList: () => {},
+ teamId: '1',
+};
+
+describe('UserPicker', () => {
+ it('renders correctly', () => {
+ const tree = renderer.create(
).toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+});
diff --git a/public/app/core/components/UserPicker/UserPicker.tsx b/public/app/core/components/UserPicker/UserPicker.tsx
new file mode 100644
index 00000000000..12aca15e510
--- /dev/null
+++ b/public/app/core/components/UserPicker/UserPicker.tsx
@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import { debounce } from 'lodash';
+import Select from 'react-select';
+import UserPickerOption from './UserPickerOption';
+
+export interface IProps {
+ backendSrv: any;
+ teamId: string;
+ refreshList: any;
+}
+
+export interface User {
+ id: number;
+ name: string;
+ login: string;
+ email: string;
+}
+
+class UserPicker extends Component
{
+ debouncedSearchUsers: any;
+ backendSrv: any;
+ teamId: string;
+ refreshList: any;
+
+ constructor(props) {
+ super(props);
+ this.backendSrv = this.props.backendSrv;
+ this.teamId = this.props.teamId;
+ this.refreshList = this.props.refreshList;
+
+ this.searchUsers = this.searchUsers.bind(this);
+ this.handleChange = this.handleChange.bind(this);
+ this.addUser = this.addUser.bind(this);
+ this.toggleLoading = this.toggleLoading.bind(this);
+
+ this.debouncedSearchUsers = debounce(this.searchUsers, 300, {
+ leading: true,
+ trailing: false,
+ });
+
+ this.state = {
+ multi: false,
+ isLoading: false,
+ };
+ }
+
+ handleChange(user) {
+ this.addUser(user.id);
+ }
+
+ toggleLoading(isLoading) {
+ this.setState(prevState => {
+ return {
+ ...prevState,
+ isLoading: isLoading,
+ };
+ });
+ }
+
+ addUser(userId) {
+ this.toggleLoading(true);
+ this.backendSrv.post(`/api/teams/${this.teamId}/members`, { userId: userId }).then(() => {
+ this.refreshList();
+ this.toggleLoading(false);
+ });
+ }
+
+ searchUsers(query) {
+ this.toggleLoading(true);
+
+ return this.backendSrv.get(`/api/users/search?perpage=10&page=1&query=${query}`).then(result => {
+ const users = result.users.map(user => {
+ return {
+ id: user.id,
+ label: `${user.login} - ${user.email}`,
+ avatarUrl: user.avatarUrl,
+ };
+ });
+ this.toggleLoading(false);
+ return { options: users };
+ });
+ }
+
+ render() {
+ const AsyncComponent = this.state.creatable ? Select.AsyncCreatable : Select.Async;
+
+ return (
+
+ );
+ }
+}
+
+export default UserPicker;
diff --git a/public/app/core/components/UserPicker/UserPickerOption.jest.tsx b/public/app/core/components/UserPicker/UserPickerOption.jest.tsx
new file mode 100644
index 00000000000..6903d648870
--- /dev/null
+++ b/public/app/core/components/UserPicker/UserPickerOption.jest.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import UserPickerOption from './UserPickerOption';
+
+const model = {
+ onSelect: () => {},
+ onFocus: () => {},
+ isFocused: () => {},
+ option: {
+ title: 'Model title',
+ avatarUrl: 'url/to/avatar',
+ label: 'User picker label',
+ },
+ className: 'class-for-user-picker',
+};
+
+describe('UserPickerOption', () => {
+ it('renders correctly', () => {
+ const tree = renderer.create().toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+});
diff --git a/public/app/core/components/UserPicker/UserPickerOption.tsx b/public/app/core/components/UserPicker/UserPickerOption.tsx
new file mode 100644
index 00000000000..42a079802a8
--- /dev/null
+++ b/public/app/core/components/UserPicker/UserPickerOption.tsx
@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+export interface IProps {
+ onSelect: any;
+ onFocus: any;
+ option: any;
+ isFocused: any;
+ className: any;
+}
+class UserPickerOption extends Component {
+ constructor(props) {
+ super(props);
+ this.handleMouseDown = this.handleMouseDown.bind(this);
+ this.handleMouseEnter = this.handleMouseEnter.bind(this);
+ this.handleMouseMove = this.handleMouseMove.bind(this);
+ }
+
+ handleMouseDown(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ this.props.onSelect(this.props.option, event);
+ }
+
+ handleMouseEnter(event) {
+ this.props.onFocus(this.props.option, event);
+ }
+
+ handleMouseMove(event) {
+ if (this.props.isFocused) {
+ return;
+ }
+ this.props.onFocus(this.props.option, event);
+ }
+
+ render() {
+ const { option, children, className } = this.props;
+
+ return (
+
+ );
+ }
+}
+
+export default UserPickerOption;
diff --git a/public/app/core/components/UserPicker/__snapshots__/UserPicker.jest.tsx.snap b/public/app/core/components/UserPicker/__snapshots__/UserPicker.jest.tsx.snap
new file mode 100644
index 00000000000..26e331b7403
--- /dev/null
+++ b/public/app/core/components/UserPicker/__snapshots__/UserPicker.jest.tsx.snap
@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserPicker renders correctly 1`] = `
+
+
+
+
+
+ Loading...
+
+
+
+
+
+
+
+
+
+
+
+