grafana/public/app/stores/PermissionsStore/PermissionsStore.ts
Daniel Lee 5ee2d1de05 dashfolders: select with description for permissions
The dropdown for selecting permission is a new component built on
react-select that includes a description for the permission for
every option in the select.
2018-01-29 13:56:12 +01:00

172 lines
4.9 KiB
TypeScript

import { types, getEnv, flow } from 'mobx-state-tree';
import { PermissionsStoreItem } from './PermissionsStoreItem';
const duplicateError = 'This permission exists already.';
export const permissionOptions = [
{ value: 1, label: 'View', description: 'Can view dashboards.' },
{ value: 2, label: 'Edit', description: 'Can add, edit and delete dashboards.' },
{
value: 4,
label: 'Admin',
description: 'Can add/remove permissions and can add, edit and delete dashboards.',
},
];
export const aclTypes = [
{ value: 'Group', text: 'Team' },
{ value: 'User', text: 'User' },
{ value: 'Viewer', text: 'Everyone With Viewer Role' },
{ value: 'Editor', text: 'Everyone With Editor Role' },
];
const defaultNewType = aclTypes[0].value;
export const PermissionsStore = types
.model('PermissionsStore', {
fetching: types.boolean,
isFolder: types.maybe(types.boolean),
dashboardId: types.maybe(types.number),
items: types.optional(types.array(PermissionsStoreItem), []),
error: types.maybe(types.string),
originalItems: types.optional(types.array(PermissionsStoreItem), []),
newType: types.optional(types.string, defaultNewType),
})
.views(self => ({
isValid: item => {
const dupe = self.items.find(it => {
return isDuplicate(it, item);
});
if (dupe) {
self.error = duplicateError;
return false;
}
return true;
},
}))
.actions(self => ({
load: flow(function* load(dashboardId: number, isFolder: boolean) {
const backendSrv = getEnv(self).backendSrv;
self.fetching = true;
self.isFolder = isFolder;
self.dashboardId = dashboardId;
const res = yield backendSrv.get(`/api/dashboards/id/${dashboardId}/acl`);
const items = prepareServerResponse(res, dashboardId, isFolder);
self.items = items;
self.originalItems = items;
self.fetching = false;
}),
addStoreItem: flow(function* addStoreItem(item) {
self.error = null;
if (!self.isValid(item)) {
return undefined;
}
self.items.push(prepareItem(item, self.dashboardId, self.isFolder));
return updateItems(self);
}),
removeStoreItem: flow(function* removeStoreItem(idx: number) {
self.error = null;
self.items.splice(idx, 1);
return updateItems(self);
}),
updatePermissionOnIndex: flow(function* updatePermissionOnIndex(
idx: number,
permission: number,
permissionName: string
) {
self.error = null;
self.items[idx].updatePermission(permission, permissionName);
return updateItems(self);
}),
setNewType(newType: string) {
self.newType = newType;
},
resetNewType() {
self.newType = defaultNewType;
},
}));
const updateItems = self => {
self.error = null;
const backendSrv = getEnv(self).backendSrv;
const updated = [];
for (let item of self.items) {
if (item.inherited) {
continue;
}
updated.push({
id: item.id,
userId: item.userId,
teamId: item.teamId,
role: item.role,
permission: item.permission,
});
}
let res;
try {
res = backendSrv.post(`/api/dashboards/id/${self.dashboardId}/acl`, {
items: updated,
});
} catch (error) {
console.error(error);
}
return res;
};
const prepareServerResponse = (response, dashboardId: number, isFolder: boolean) => {
return response.map(item => {
return prepareItem(item, dashboardId, isFolder);
});
};
const prepareItem = (item, dashboardId: number, isFolder: boolean) => {
item.inherited = !isFolder && item.dashboardId > 0 && dashboardId !== item.dashboardId;
item.sortRank = 0;
if (item.userId > 0) {
item.icon = 'fa fa-fw fa-user';
// TODO: Check what sce.trustAsHtml did
// item.nameHtml = this.$sce.trustAsHtml(item.userLogin);
item.nameHtml = item.userLogin;
item.sortName = item.userLogin;
item.sortRank = 10;
} else if (item.teamId > 0) {
item.icon = 'fa fa-fw fa-users';
// item.nameHtml = this.$sce.trustAsHtml(item.team);
item.nameHtml = item.team;
item.sortName = item.team;
item.sortRank = 20;
} else if (item.role) {
item.icon = 'fa fa-fw fa-street-view';
// item.nameHtml = this.$sce.trustAsHtml(`Everyone with <span class="query-keyword">${item.role}</span> Role`);
item.nameHtml = `Everyone with <span class="query-keyword">${item.role}</span> Role`;
item.sortName = item.role;
item.sortRank = 30;
if (item.role === 'Viewer') {
item.sortRank += 1;
}
}
if (item.inherited) {
item.sortRank += 100;
}
return item;
};
const isDuplicate = (origItem, newItem) => {
if (origItem.inherited) {
return false;
}
return (
(origItem.role && newItem.role && origItem.role === newItem.role) ||
(origItem.userId && newItem.userId && origItem.userId === newItem.userId) ||
(origItem.teamId && newItem.teamId && origItem.teamId === newItem.teamId)
);
};