dashfolders: Working user picker on the dashboard permissions page #10275

public/app/core/components/Permissions/Permissions.tsx

 import React, { Component } from 'react';
 import React, { Component } from 'react';
 import PermissionsList from './PermissionsList';
 import PermissionsList from './PermissionsList';
-import _ from 'lodash';
 import DevTools from 'mobx-react-devtools';
 import DevTools from 'mobx-react-devtools';
 import { inject, observer } from 'mobx-react';
 import { inject, observer } from 'mobx-react';
-// import UserPicker from 'app/core/components/UserPicker/UserPicker';
+import UserPicker, { User } from 'app/core/components/UserPicker/UserPicker';
 
 
 export interface DashboardAcl {
 export interface DashboardAcl {
   id?: number;
   id?: number;
@@ -29,6 +28,7 @@ export interface IProps {
   dashboardId: number;
   dashboardId: number;
   permissions?: any;
   permissions?: any;
   isFolder: boolean;
   isFolder: boolean;
+  backendSrv: any;
 }
 }
 
 
 @inject('permissions')
 @inject('permissions')
@@ -49,6 +49,7 @@ class Permissions extends Component<IProps, any> {
   newType: string;
   newType: string;
   canUpdate: boolean;
   canUpdate: boolean;
   error: string;
   error: string;
+  refreshList: any;
 
 
   readonly duplicateError = 'This permission exists already.';
   readonly duplicateError = 'This permission exists already.';
 
 
@@ -59,6 +60,7 @@ class Permissions extends Component<IProps, any> {
     this.typeChanged = this.typeChanged.bind(this);
     this.typeChanged = this.typeChanged.bind(this);
     this.removeItem = this.removeItem.bind(this);
     this.removeItem = this.removeItem.bind(this);
     this.update = this.update.bind(this);
     this.update = this.update.bind(this);
+    this.userPicked = this.userPicked.bind(this);
     permissions.load(dashboardId, isFolder);
     permissions.load(dashboardId, isFolder);
 
 
     this.state = {
     this.state = {
@@ -70,13 +72,8 @@ class Permissions extends Component<IProps, any> {
     console.log('nextProps', nextProps);
     console.log('nextProps', nextProps);
   }
   }
 
 
-  sortItems(items) {
-    return _.orderBy(items, ['sortRank', 'sortName'], ['desc', 'asc']);
-  }
-
   permissionChanged(index: number, permission: number, permissionName: string) {
   permissionChanged(index: number, permission: number, permissionName: string) {
     const { permissions } = this.props;
     const { permissions } = this.props;
-    // permissions.items[index].updatePermission(permission, permissionName);
     permissions.updatePermissionOnIndex(index, permission, permissionName);
     permissions.updatePermissionOnIndex(index, permission, permissionName);
   }
   }
 
 
@@ -117,9 +114,14 @@ class Permissions extends Component<IProps, any> {
     });
     });
   }
   }
 
 
+  userPicked(user: User) {
+    const { permissions } = this.props;
+    permissions.addStoreItem({ userId: user.id, userLogin: user.login, permission: 1 });
+  }
+
   render() {
   render() {
     console.log('Permissions render');
     console.log('Permissions render');
-    const { error, permissions } = this.props;
+    const { error, permissions, backendSrv } = this.props;
     const { newType } = this.state;
     const { newType } = this.state;
 
 
     return (
     return (
@@ -155,30 +157,26 @@ class Permissions extends Component<IProps, any> {
                   /> */}
                   /> */}
                 </div>
                 </div>
               </div>
               </div>
-              {/*
+
               {newType === 'User' ? (
               {newType === 'User' ? (
                 <div className="gf-form">
                 <div className="gf-form">
-                  {' '}
-                  User picker
-                  <user-picker user-picked="ctrl.userPicked($user)" />
+                  {/* <user-picker user-picked="ctrl.userPicked($user)" />
                   <select-user-picker
                   <select-user-picker
                     backendSrv="ctrl.backendSrv"
                     backendSrv="ctrl.backendSrv"
                     teamId="ctrl.$routeParams.id"
                     teamId="ctrl.$routeParams.id"
                     refreshList="ctrl.get"
                     refreshList="ctrl.get"
                     teamMembers="ctrl.teamMembers"
                     teamMembers="ctrl.teamMembers"
-                  />
-                  <UserPicker backendSrv={backendSrv} teamId={0} />
+                  /> */}
+                  <UserPicker backendSrv={backendSrv} userPicked={this.userPicked} />
                 </div>
                 </div>
               ) : null}
               ) : null}
 
 
               {newType === 'Group' ? (
               {newType === 'Group' ? (
                 <div className="gf-form">
                 <div className="gf-form">
-                  {' '}
                   Team picker
                   Team picker
-                  <team-picker team-picked="ctrl.groupPicked($group)" />
+                  {/* <team-picker team-picked="ctrl.groupPicked($group)" /> */}
                 </div>
                 </div>
               ) : null}
               ) : null}
-              */}
             </div>
             </div>
           </form>
           </form>
           {error ? (
           {error ? (

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

@@ -13,9 +13,9 @@ export interface IProps {
 
 
 export interface User {
 export interface User {
   id: number;
   id: number;
-  name: string;
+  label: string;
+  avatarUrl: string;
   login: string;
   login: string;
-  email: string;
 }
 }
 
 
 class UserPicker extends Component<IProps, any> {
 class UserPicker extends Component<IProps, any> {
@@ -33,12 +33,12 @@ class UserPicker extends Component<IProps, any> {
     });
     });
   }
   }
 
 
-  handleChange(user) {
+  handleChange(user: User) {
     const { userPicked } = this.props;
     const { userPicked } = this.props;
     userPicked(user);
     userPicked(user);
   }
   }
 
 
-  searchUsers(query) {
+  searchUsers(query?: string) {
     const { toggleLoading, backendSrv } = this.props;
     const { toggleLoading, backendSrv } = this.props;
 
 
     toggleLoading(true);
     toggleLoading(true);
@@ -48,6 +48,7 @@ class UserPicker extends Component<IProps, any> {
           id: user.id,
           id: user.id,
           label: `${user.login} - ${user.email}`,
           label: `${user.login} - ${user.email}`,
           avatarUrl: user.avatarUrl,
           avatarUrl: user.avatarUrl,
+          login: user.login,
         };
         };
       });
       });
       toggleLoading(false);
       toggleLoading(false);

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

 import React, { Component } from 'react';
 import React, { Component } from 'react';
 
 
-export interface IProps {}
+export interface IProps {
+  backendSrv: any;
+  userPicked: (user) => void;
+}
 
 
 // export interface User {
 // export interface User {
 //     id: number;
 //     id: number;

public/app/stores/PermissionsStore/PermissionsStore.ts

@@ -51,13 +51,9 @@ export const PermissionsStore = types
       self.canUpdate = true;
       self.canUpdate = true;
     },
     },
     updatePermissionOnIndex(idx: number, permission: number, permissionName: string) {
     updatePermissionOnIndex(idx: number, permission: number, permissionName: string) {
-      // self.items[idx].permission = permission;
-      // self.items[idx].permissionName = permissionName;
       self.items[idx].updatePermission(permission, permissionName);
       self.items[idx].updatePermission(permission, permissionName);
       self.canUpdate = true;
       self.canUpdate = true;
     },
     },
-    // load: flow(function* load(dashboardId: number) {
-
     update: flow(function* update(dashboardId: number) {
     update: flow(function* update(dashboardId: number) {
       const backendSrv = getEnv(self).backendSrv;
       const backendSrv = getEnv(self).backendSrv;
       const updated = [];
       const updated = [];
@@ -95,13 +91,12 @@ const prepareServerResponse = (response, dashboardId: number, isFolder: boolean)
 };
 };
 
 
 const prepareItem = (item, dashboardId: number, isFolder: boolean) => {
 const prepareItem = (item, dashboardId: number, isFolder: boolean) => {
-  // TODO: this.meta
-  // item.inherited = !this.meta.isFolder && this.dashboardId !== item.dashboardId;
   item.inherited = !isFolder && dashboardId !== item.dashboardId;
   item.inherited = !isFolder && dashboardId !== item.dashboardId;
-  // item.inherited = dashboardId !== item.dashboardId;
+
   item.sortRank = 0;
   item.sortRank = 0;
   if (item.userId > 0) {
   if (item.userId > 0) {
     item.icon = 'fa fa-fw fa-user';
     item.icon = 'fa fa-fw fa-user';
+    // TODO: Check what sce.trustAsHtml did
     //   item.nameHtml = this.$sce.trustAsHtml(item.userLogin);
     //   item.nameHtml = this.$sce.trustAsHtml(item.userLogin);
     item.nameHtml = item.userLogin;
     item.nameHtml = item.userLogin;
     item.sortName = item.userLogin;
     item.sortName = item.userLogin;