mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
dashfolders: Re-use the API of the angular user picker instead, which is reusable #10275
This commit is contained in:
parent
1d8ce3673e
commit
b79a15b057
@ -14,12 +14,12 @@ export function registerAngularDirectives() {
|
|||||||
react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
|
react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
|
||||||
react2AngularDirective('loginBackground', LoginBackground, []);
|
react2AngularDirective('loginBackground', LoginBackground, []);
|
||||||
react2AngularDirective('searchResult', SearchResult, []);
|
react2AngularDirective('searchResult', SearchResult, []);
|
||||||
react2AngularDirective('selectUserPicker', UserPicker, ['backendSrv', 'teamId', 'refreshList']);
|
|
||||||
react2AngularDirective('tagFilter', TagFilter, [
|
react2AngularDirective('tagFilter', TagFilter, [
|
||||||
'tags',
|
'tags',
|
||||||
['onSelect', { watchDepth: 'reference' }],
|
['onSelect', { watchDepth: 'reference' }],
|
||||||
['tagOptions', { watchDepth: 'reference' }],
|
['tagOptions', { watchDepth: 'reference' }],
|
||||||
]);
|
]);
|
||||||
|
react2AngularDirective('selectUserPicker', UserPicker, ['backendSrv', 'userPicked']);
|
||||||
react2AngularDirective('permissions', Permissions, [
|
react2AngularDirective('permissions', Permissions, [
|
||||||
'error',
|
'error',
|
||||||
'newType',
|
'newType',
|
||||||
|
@ -1,12 +1,14 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { debounce } from 'lodash';
|
|
||||||
import Select from 'react-select';
|
import Select from 'react-select';
|
||||||
import UserPickerOption from './UserPickerOption';
|
import UserPickerOption from './UserPickerOption';
|
||||||
|
import withPicker from './withPicker';
|
||||||
|
import { debounce } from 'lodash';
|
||||||
|
|
||||||
export interface IProps {
|
export interface IProps {
|
||||||
backendSrv: any;
|
backendSrv: any;
|
||||||
teamId: string;
|
isLoading: boolean;
|
||||||
refreshList: any;
|
toggleLoading: any;
|
||||||
|
userPicked: (user) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface User {
|
export interface User {
|
||||||
@ -19,56 +21,28 @@ export interface User {
|
|||||||
class UserPicker extends Component<IProps, any> {
|
class UserPicker extends Component<IProps, any> {
|
||||||
debouncedSearchUsers: any;
|
debouncedSearchUsers: any;
|
||||||
backendSrv: any;
|
backendSrv: any;
|
||||||
teamId: string;
|
|
||||||
refreshList: any;
|
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.backendSrv = this.props.backendSrv;
|
this.state = {};
|
||||||
this.teamId = this.props.teamId;
|
|
||||||
this.refreshList = this.props.refreshList;
|
|
||||||
|
|
||||||
this.searchUsers = this.searchUsers.bind(this);
|
this.searchUsers = this.searchUsers.bind(this);
|
||||||
this.handleChange = this.handleChange.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, {
|
this.debouncedSearchUsers = debounce(this.searchUsers, 300, {
|
||||||
leading: true,
|
leading: true,
|
||||||
trailing: false,
|
trailing: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
this.state = {
|
|
||||||
multi: false,
|
|
||||||
isLoading: false,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange(user) {
|
handleChange(user) {
|
||||||
this.addUser(user.id);
|
const { userPicked } = this.props;
|
||||||
}
|
userPicked(user);
|
||||||
|
|
||||||
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) {
|
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 => {
|
const users = result.users.map(user => {
|
||||||
return {
|
return {
|
||||||
id: user.id,
|
id: user.id,
|
||||||
@ -76,7 +50,7 @@ class UserPicker extends Component<IProps, any> {
|
|||||||
avatarUrl: user.avatarUrl,
|
avatarUrl: user.avatarUrl,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
this.toggleLoading(false);
|
toggleLoading(false);
|
||||||
return { options: users };
|
return { options: users };
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -91,7 +65,7 @@ class UserPicker extends Component<IProps, any> {
|
|||||||
multi={this.state.multi}
|
multi={this.state.multi}
|
||||||
labelKey="label"
|
labelKey="label"
|
||||||
cache={false}
|
cache={false}
|
||||||
isLoading={this.state.isLoading}
|
isLoading={this.props.isLoading}
|
||||||
loadOptions={this.debouncedSearchUsers}
|
loadOptions={this.debouncedSearchUsers}
|
||||||
loadingPlaceholder="Loading..."
|
loadingPlaceholder="Loading..."
|
||||||
noResultsText="No users found"
|
noResultsText="No users found"
|
||||||
@ -105,4 +79,4 @@ class UserPicker extends Component<IProps, any> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default UserPicker;
|
export default withPicker(UserPicker);
|
||||||
|
37
public/app/core/components/UserPicker/withPicker.tsx
Normal file
37
public/app/core/components/UserPicker/withPicker.tsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
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} />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
@ -29,7 +29,11 @@
|
|||||||
<form name="ctrl.addMemberForm" class="gf-form-group">
|
<form name="ctrl.addMemberForm" class="gf-form-group">
|
||||||
<div class="gf-form">
|
<div class="gf-form">
|
||||||
<span class="gf-form-label width-10">Add member</span>
|
<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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@ -60,3 +64,4 @@
|
|||||||
This team has no members yet.
|
This team has no members yet.
|
||||||
</em>
|
</em>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -8,6 +8,7 @@ export default class TeamDetailsCtrl {
|
|||||||
/** @ngInject **/
|
/** @ngInject **/
|
||||||
constructor(private $scope, private backendSrv, private $routeParams, navModelSrv) {
|
constructor(private $scope, private backendSrv, private $routeParams, navModelSrv) {
|
||||||
this.navModel = navModelSrv.getNav('cfg', 'teams', 0);
|
this.navModel = navModelSrv.getNav('cfg', 'teams', 0);
|
||||||
|
this.userPicked = this.userPicked.bind(this);
|
||||||
this.get = this.get.bind(this);
|
this.get = this.get.bind(this);
|
||||||
this.get();
|
this.get();
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user