dashfolders: Re-use the API of the angular user picker instead, which is reusable #10275

public/app/core/angular_wrappers.ts

@@ -14,12 +14,12 @@ export function registerAngularDirectives() {
   react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
   react2AngularDirective('loginBackground', LoginBackground, []);
   react2AngularDirective('searchResult', SearchResult, []);
-  react2AngularDirective('selectUserPicker', UserPicker, ['backendSrv', 'teamId', 'refreshList']);
   react2AngularDirective('tagFilter', TagFilter, [
     'tags',
     ['onSelect', { watchDepth: 'reference' }],
     ['tagOptions', { watchDepth: 'reference' }],
   ]);
+  react2AngularDirective('selectUserPicker', UserPicker, ['backendSrv', 'userPicked']);
   react2AngularDirective('permissions', Permissions, [
     'error',
     'newType',

public/app/core/components/UserPicker/UserPicker.tsx

-import React, { Component } from 'react';
-import { debounce } from 'lodash';
+import React, { Component } from 'react';
 import Select from 'react-select';
 import UserPickerOption from './UserPickerOption';
+import withPicker from './withPicker';
+import { debounce } from 'lodash';
 
 export interface IProps {
   backendSrv: any;
-  teamId: string;
-  refreshList: any;
+  isLoading: boolean;
+  toggleLoading: any;
+  userPicked: (user) => void;
 }
 
 export interface User {
@@ -19,56 +21,28 @@ export interface User {
 class UserPicker extends Component<IProps, any> {
   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.state = {};
     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);
-    });
+    const { userPicked } = this.props;
+    userPicked(user);
   }
 
   searchUsers(query) {
-    this.toggleLoading(true);
+    const { toggleLoading, backendSrv } = this.props;
 
-    return this.backendSrv.get(`/api/users/search?perpage=10&page=1&query=${query}`).then(result => {
+    toggleLoading(true);
+    return backendSrv.get(`/api/users/search?perpage=10&page=1&query=${query}`).then(result => {
       const users = result.users.map(user => {
         return {
           id: user.id,
@@ -76,7 +50,7 @@ class UserPicker extends Component<IProps, any> {
           avatarUrl: user.avatarUrl,
         };
       });
-      this.toggleLoading(false);
+      toggleLoading(false);
       return { options: users };
     });
   }
@@ -91,7 +65,7 @@ class UserPicker extends Component<IProps, any> {
           multi={this.state.multi}
           labelKey="label"
           cache={false}
-          isLoading={this.state.isLoading}
+          isLoading={this.props.isLoading}
           loadOptions={this.debouncedSearchUsers}
           loadingPlaceholder="Loading..."
           noResultsText="No users found"
@@ -105,4 +79,4 @@ class UserPicker extends Component<IProps, any> {
   }
 }
 
-export default UserPicker;
+export default withPicker(UserPicker);

public/app/core/components/UserPicker/withPicker.tsx

+import React, { Component } from 'react';
+
+export interface IProps {}
+
+// export interface User {
+//     id: number;
+//     name: string;
+//     login: string;
+//     email: string;
+// }
+
+export default function withPicker(WrappedComponent) {
+  return class WithPicker extends Component<IProps, any> {
+    constructor(props) {
+      super(props);
+      this.toggleLoading = this.toggleLoading.bind(this);
+
+      this.state = {
+        multi: false,
+        isLoading: false,
+      };
+    }
+
+    toggleLoading(isLoading) {
+      this.setState(prevState => {
+        return {
+          ...prevState,
+          isLoading: isLoading,
+        };
+      });
+    }
+
+    render() {
+      return <WrappedComponent toggleLoading={this.toggleLoading} isLoading={this.state.isLoading} {...this.props} />;
+    }
+  };
+}

public/app/features/org/partials/team_details.html

@@ -29,7 +29,11 @@
 		<form name="ctrl.addMemberForm" class="gf-form-group">
       <div class="gf-form">
         <span class="gf-form-label width-10">Add member</span>
-				<select-user-picker backendSrv="ctrl.backendSrv" teamId="ctrl.$routeParams.id" refreshList="ctrl.get" teamMembers="ctrl.teamMembers"></select-user-picker>
+				<!--
+				Old picker
+				<user-picker user-picked="ctrl.userPicked($user)"></user-picker>
+				-->
+				<select-user-picker userPicked="ctrl.userPicked" backendSrv="ctrl.backendSrv"></select-user-picker>
       </div>
     </form>
 
@@ -60,3 +64,4 @@
 				This team has no members yet.
 			</em>
 		</div>
+

public/app/features/org/team_details_ctrl.ts

@@ -8,6 +8,7 @@ export default class TeamDetailsCtrl {
   /** @ngInject **/
   constructor(private $scope, private backendSrv, private $routeParams, navModelSrv) {
     this.navModel = navModelSrv.getNav('cfg', 'teams', 0);
+    this.userPicked = this.userPicked.bind(this);
     this.get = this.get.bind(this);
     this.get();
   }