mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
dashfolders: Rename UserPicker folder => Picker. Inject the permission-store in the FolderPermissions-container instead of the Permissions component, add the PermissionsStore to the RootStore and and the error-message to the Permissions-store #10275
This commit is contained in:
parent
126607de83
commit
3a94918b8f
@ -1,6 +1,7 @@
|
||||
import { SearchStore } from './../stores/SearchStore/SearchStore';
|
||||
import { ServerStatsStore } from './../stores/ServerStatsStore/ServerStatsStore';
|
||||
import { NavStore } from './../stores/NavStore/NavStore';
|
||||
import { PermissionsStore } from './../stores/PermissionsStore/PermissionsStore';
|
||||
import { AlertListStore } from './../stores/AlertListStore/AlertListStore';
|
||||
import { ViewStore } from './../stores/ViewStore/ViewStore';
|
||||
import { FolderStore } from './../stores/FolderStore/FolderStore';
|
||||
@ -10,6 +11,7 @@ interface IContainerProps {
|
||||
serverStats: typeof ServerStatsStore.Type;
|
||||
nav: typeof NavStore.Type;
|
||||
alertList: typeof AlertListStore.Type;
|
||||
permissions: typeof PermissionsStore.Type;
|
||||
view: typeof ViewStore.Type;
|
||||
folder: typeof FolderStore.Type;
|
||||
backendSrv: any;
|
||||
|
@ -5,7 +5,7 @@ import IContainerProps from 'app/containers/IContainerProps';
|
||||
import PageHeader from 'app/core/components/PageHeader/PageHeader';
|
||||
import Permissions from 'app/core/components/Permissions/Permissions';
|
||||
|
||||
@inject('nav', 'folder', 'view')
|
||||
@inject('nav', 'folder', 'view', 'permissions')
|
||||
@observer
|
||||
export class FolderPermissions extends Component<IContainerProps, any> {
|
||||
dashboard: any;
|
||||
@ -24,7 +24,7 @@ export class FolderPermissions extends Component<IContainerProps, any> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { nav, folder } = this.props;
|
||||
const { nav, folder, permissions } = this.props;
|
||||
|
||||
if (!folder.folder || !nav.main) {
|
||||
return <h2>Loading</h2>;
|
||||
@ -34,7 +34,13 @@ export class FolderPermissions extends Component<IContainerProps, any> {
|
||||
<div>
|
||||
<PageHeader model={nav as any} />
|
||||
<div className="page-container page-body">
|
||||
<Permissions isFolder={true} error="" newType="" dashboardId={1} backendSrv={this.props.backendSrv} />
|
||||
<Permissions
|
||||
permissions={permissions}
|
||||
isFolder={true}
|
||||
error=""
|
||||
dashboardId={1}
|
||||
backendSrv={this.props.backendSrv}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -4,8 +4,8 @@ import PageHeader from './components/PageHeader/PageHeader';
|
||||
import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
|
||||
import LoginBackground from './components/Login/LoginBackground';
|
||||
import { SearchResult } from './components/search/SearchResult';
|
||||
import UserPicker from './components/UserPicker/UserPicker';
|
||||
import { TagFilter } from './components/TagFilter/TagFilter';
|
||||
import UserPicker from './components/Picker/UserPicker';
|
||||
import Permissions from './components/Permissions/Permissions';
|
||||
|
||||
export function registerAngularDirectives() {
|
||||
@ -20,12 +20,5 @@ export function registerAngularDirectives() {
|
||||
['tagOptions', { watchDepth: 'reference' }],
|
||||
]);
|
||||
react2AngularDirective('selectUserPicker', UserPicker, ['backendSrv', 'handlePicked']);
|
||||
react2AngularDirective('permissions', Permissions, [
|
||||
'error',
|
||||
'newType',
|
||||
'aclTypes',
|
||||
'typeChanged',
|
||||
'backendSrv',
|
||||
'dashboardId',
|
||||
]);
|
||||
react2AngularDirective('permissions', Permissions, ['error', 'aclTypes', 'typeChanged', 'backendSrv', 'dashboardId']);
|
||||
}
|
||||
|
@ -1,8 +1,8 @@
|
||||
import React, { Component } from 'react';
|
||||
import PermissionsList from './PermissionsList';
|
||||
import { inject, observer } from 'mobx-react';
|
||||
import UserPicker, { User } from 'app/core/components/UserPicker/UserPicker';
|
||||
import TeamPicker, { Team } from 'app/core/components/UserPicker/TeamPicker';
|
||||
import { observer } from 'mobx-react';
|
||||
import UserPicker, { User } from 'app/core/components/Picker/UserPicker';
|
||||
import TeamPicker, { Team } from 'app/core/components/Picker/TeamPicker';
|
||||
|
||||
export interface DashboardAcl {
|
||||
id?: number;
|
||||
@ -24,17 +24,14 @@ export interface DashboardAcl {
|
||||
|
||||
export interface IProps {
|
||||
error: string;
|
||||
newType: string;
|
||||
dashboardId: number;
|
||||
permissions?: any;
|
||||
isFolder: boolean;
|
||||
backendSrv: any;
|
||||
}
|
||||
|
||||
@inject('permissions')
|
||||
@observer
|
||||
class Permissions extends Component<IProps, any> {
|
||||
// TODO Remove Inner from Name when we get access via ReactContainer
|
||||
dashboardId: any;
|
||||
meta: any;
|
||||
items: DashboardAcl[];
|
||||
@ -51,8 +48,6 @@ class Permissions extends Component<IProps, any> {
|
||||
error: string;
|
||||
refreshList: any;
|
||||
|
||||
readonly duplicateError = 'This permission exists already.';
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { dashboardId, permissions, isFolder } = this.props;
|
||||
@ -69,10 +64,6 @@ class Permissions extends Component<IProps, any> {
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
console.log('nextProps', nextProps);
|
||||
}
|
||||
|
||||
permissionChanged(index: number, permission: number, permissionName: string) {
|
||||
const { permissions } = this.props;
|
||||
permissions.updatePermissionOnIndex(index, permission, permissionName);
|
||||
@ -127,7 +118,7 @@ class Permissions extends Component<IProps, any> {
|
||||
|
||||
render() {
|
||||
console.log('Permissions render');
|
||||
const { error, permissions, backendSrv } = this.props;
|
||||
const { permissions, backendSrv } = this.props;
|
||||
const { newType } = this.state;
|
||||
|
||||
return (
|
||||
@ -154,25 +145,11 @@ class Permissions extends Component<IProps, any> {
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
|
||||
{/* <select
|
||||
className="gf-form-input gf-size-auto"
|
||||
ng-model="ctrl.newType"
|
||||
ng-options="p.value as p.text for p in ctrl.aclTypes"
|
||||
ng-change="ctrl.typeChanged()"
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{newType === 'User' ? (
|
||||
<div className="gf-form">
|
||||
{/* <user-picker user-picked="ctrl.userPicked($user)" />
|
||||
<select-user-picker
|
||||
backendSrv="ctrl.backendSrv"
|
||||
teamId="ctrl.$routeParams.id"
|
||||
refreshList="ctrl.get"
|
||||
teamMembers="ctrl.teamMembers"
|
||||
/> */}
|
||||
<UserPicker backendSrv={backendSrv} handlePicked={this.userPicked} />
|
||||
</div>
|
||||
) : null}
|
||||
@ -184,11 +161,11 @@ class Permissions extends Component<IProps, any> {
|
||||
) : null}
|
||||
</div>
|
||||
</form>
|
||||
{error ? (
|
||||
{permissions.error ? (
|
||||
<div className="gf-form width-17">
|
||||
<span ng-if="ctrl.error" className="text-error p-l-1">
|
||||
<i className="fa fa-warning" />
|
||||
{error}
|
||||
{permissions.error}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import UserPickerOption from './UserPickerOption';
|
||||
import PickerOption from './PickerOption';
|
||||
|
||||
const model = {
|
||||
onSelect: () => {},
|
||||
@ -14,9 +14,9 @@ const model = {
|
||||
className: 'class-for-user-picker',
|
||||
};
|
||||
|
||||
describe('UserPickerOption', () => {
|
||||
describe('PickerOption', () => {
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer.create(<UserPickerOption {...model} />).toJSON();
|
||||
const tree = renderer.create(<PickerOption {...model} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
@ -1,6 +1,6 @@
|
||||
import React, { Component } from 'react';
|
||||
import Select from 'react-select';
|
||||
import UserPickerOption from './UserPickerOption';
|
||||
import PickerOption from './PickerOption';
|
||||
import withPicker from './withPicker';
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
@ -26,7 +26,7 @@ class TeamPicker extends Component<IProps, any> {
|
||||
super(props);
|
||||
this.state = {};
|
||||
this.search = this.search.bind(this);
|
||||
// this.handleChange = this.handleChange.bind(this);
|
||||
|
||||
this.debouncedSearch = debounce(this.search, 300, {
|
||||
leading: true,
|
||||
trailing: false,
|
||||
@ -37,10 +37,8 @@ class TeamPicker extends Component<IProps, any> {
|
||||
const { toggleLoading, backendSrv } = this.props;
|
||||
|
||||
toggleLoading(true);
|
||||
|
||||
return backendSrv.get(`/api/teams/search?perpage=10&page=1&query=${query}`).then(result => {
|
||||
const teams = result.teams.map(team => {
|
||||
// return { text: ug.name, value: ug };
|
||||
return {
|
||||
id: team.id,
|
||||
label: team.name,
|
||||
@ -62,7 +60,7 @@ class TeamPicker extends Component<IProps, any> {
|
||||
<div className="user-picker">
|
||||
<AsyncComponent
|
||||
valueKey="id"
|
||||
multi={this.state.multi}
|
||||
multi={false}
|
||||
labelKey="label"
|
||||
cache={false}
|
||||
isLoading={isLoading}
|
||||
@ -70,7 +68,7 @@ class TeamPicker extends Component<IProps, any> {
|
||||
loadingPlaceholder="Loading..."
|
||||
onChange={handlePicked}
|
||||
className="width-8 gf-form-input gf-form-input--form-dropdown"
|
||||
optionComponent={UserPickerOption}
|
||||
optionComponent={PickerOption}
|
||||
placeholder="Choose"
|
||||
/>
|
||||
</div>
|
@ -1,6 +1,6 @@
|
||||
import React, { Component } from 'react';
|
||||
import Select from 'react-select';
|
||||
import UserPickerOption from './UserPickerOption';
|
||||
import PickerOption from './PickerOption';
|
||||
import withPicker from './withPicker';
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
@ -26,7 +26,7 @@ class UserPicker extends Component<IProps, any> {
|
||||
super(props);
|
||||
this.state = {};
|
||||
this.search = this.search.bind(this);
|
||||
// this.handleChange = this.handleChange.bind(this);
|
||||
|
||||
this.debouncedSearch = debounce(this.search, 300, {
|
||||
leading: true,
|
||||
trailing: false,
|
||||
@ -59,7 +59,7 @@ class UserPicker extends Component<IProps, any> {
|
||||
<div className="user-picker">
|
||||
<AsyncComponent
|
||||
valueKey="id"
|
||||
multi={this.state.multi}
|
||||
multi={false}
|
||||
labelKey="label"
|
||||
cache={false}
|
||||
isLoading={isLoading}
|
||||
@ -68,7 +68,7 @@ class UserPicker extends Component<IProps, any> {
|
||||
noResultsText="No users found"
|
||||
onChange={handlePicked}
|
||||
className="width-8 gf-form-input gf-form-input--form-dropdown"
|
||||
optionComponent={UserPickerOption}
|
||||
optionComponent={PickerOption}
|
||||
placeholder="Choose"
|
||||
/>
|
||||
</div>
|
@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`UserPickerOption renders correctly 1`] = `
|
||||
exports[`PickerOption renders correctly 1`] = `
|
||||
<button
|
||||
className="user-picker-option__button btn btn-link class-for-user-picker"
|
||||
onMouseDown={[Function]}
|
@ -5,13 +5,6 @@ export interface IProps {
|
||||
handlePicked: (data) => void;
|
||||
}
|
||||
|
||||
// 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) {
|
||||
@ -19,7 +12,6 @@ export default function withPicker(WrappedComponent) {
|
||||
this.toggleLoading = this.toggleLoading.bind(this);
|
||||
|
||||
this.state = {
|
||||
multi: false,
|
||||
isLoading: false,
|
||||
};
|
||||
}
|
@ -10,6 +10,7 @@ export const PermissionsStore = types
|
||||
dashboardId: types.maybe(types.number),
|
||||
canUpdate: types.boolean,
|
||||
items: types.optional(types.array(PermissionsStoreItem), []),
|
||||
error: types.maybe(types.string),
|
||||
originalItems: types.optional(types.array(PermissionsStoreItem), []),
|
||||
})
|
||||
.views(self => ({
|
||||
@ -19,7 +20,7 @@ export const PermissionsStore = types
|
||||
});
|
||||
|
||||
if (dupe) {
|
||||
this.error = duplicateError;
|
||||
self.error = duplicateError;
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -39,6 +40,7 @@ export const PermissionsStore = types
|
||||
self.fetching = false;
|
||||
}),
|
||||
addStoreItem: item => {
|
||||
self.error = null;
|
||||
if (!self.isValid(item)) {
|
||||
return;
|
||||
}
|
||||
@ -47,14 +49,17 @@ export const PermissionsStore = types
|
||||
self.canUpdate = true;
|
||||
},
|
||||
removeStoreItem: idx => {
|
||||
self.error = null;
|
||||
self.items.splice(idx, 1);
|
||||
self.canUpdate = true;
|
||||
},
|
||||
updatePermissionOnIndex(idx: number, permission: number, permissionName: string) {
|
||||
self.error = null;
|
||||
self.items[idx].updatePermission(permission, permissionName);
|
||||
self.canUpdate = true;
|
||||
},
|
||||
update: flow(function* update(dashboardId: number) {
|
||||
self.error = null;
|
||||
const backendSrv = getEnv(self).backendSrv;
|
||||
const updated = [];
|
||||
for (let item of self.items) {
|
||||
|
Loading…
Reference in New Issue
Block a user