IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 09:33:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

AccessControl: Make Permissions component customizable (#43992)

Browse Source 
* Setting default values for props

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Using table instead

Co-authored-by: Kalle Persson <kalle.persson@grafana.com>
This commit is contained in:
Gabriel MABILLE 2022-01-19 12:19:46 +01:00 committed by GitHub
parent e9f8b40e18
commit fc405ea9da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/core/components/AccessControl/AddPermission.tsx
View File

@ -7,6 +7,7 @@ import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
import { Assignments, PermissionTarget, SetPermission } from './types';
export interface Props {
title?: string;
permissions: string[];
assignments: Assignments;
canListUsers: boolean;
@ -14,7 +15,14 @@ export interface Props {
onAdd: (state: SetPermission) => void;
}
export const AddPermission = ({ permissions, assignments, canListUsers, onAdd, onCancel }: Props) => {
export const AddPermission = ({
title = 'Add Permission For',
permissions,
assignments,
canListUsers,
onAdd,
onCancel,
}: Props) => {
const [target, setPermissionTarget] = useState<PermissionTarget>(PermissionTarget.User);
const [teamId, setTeamId] = useState(0);
const [userId, setUserId] = useState(0);
@ -49,7 +57,7 @@ export const AddPermission = ({ permissions, assignments, canListUsers, onAdd, o
return (
<div className="cta-form" aria-label="Permissions slider">
<CloseButton onClick={onCancel} />
<h5>Add Permission For</h5>
<h5>{title}</h5>
<Form
name="addPermission"
maxWidth="none"

10
public/app/core/components/AccessControl/PermissionList.tsx
View File

@ -18,8 +18,16 @@ export const PermissionList = ({ title, items, permissionLevels, canSet, onRemov
return (
<div>
<h5>{title}</h5>
<table className="filter-table gf-form-group">
<thead>
<tr>
<th style={{ width: '1%' }} />
<th>{title}</th>
<th>Permission</th>
<th style={{ width: '1%' }} />
<th style={{ width: '1%' }} />
</tr>
</thead>
<tbody>
{items.map((item, index) => (
<PermissionListItem

2
public/app/core/components/AccessControl/PermissionListItem.tsx
View File

@ -14,8 +14,6 @@ export const PermissionListItem = ({ item, permissionLevels, canSet, onRemove, o
<tr>
<td style={{ width: '1%' }}>{getAvatar(item)}</td>
<td style={{ width: '90%' }}>{getDescription(item)}</td>
<td />
<td className="query-keyword">Can</td>
<td>
<div className="gf-form">
<Select

28
public/app/core/components/AccessControl/Permissions.tsx
View File

@ -20,6 +20,9 @@ const INITIAL_DESCRIPTION: Description = {
};
export type Props = {
title?: string;
buttonLabel?: string;
addPermissionTitle?: string;
resource: string;
resourceId: number;
@ -27,7 +30,15 @@ export type Props = {
canSetPermissions: boolean;
};
export const Permissions = ({ resource, resourceId, canListUsers, canSetPermissions }: Props) => {
export const Permissions = ({
title = 'Permissions',
buttonLabel = 'Add a permission',
resource,
resourceId,
canListUsers,
canSetPermissions,
addPermissionTitle,
}: Props) => {
const [isAdding, setIsAdding] = useState(false);
const [items, setItems] = useState<ResourcePermission[]>([]);
const [desc, setDesc] = useState(INITIAL_DESCRIPTION);
@ -114,11 +125,11 @@ export const Permissions = ({ resource, resourceId, canListUsers, canSetPermissi
return (
<div>
<div className="page-action-bar">
<h3 className="page-sub-heading">Permissions</h3>
<h3 className="page-sub-heading">{title}</h3>
<div className="page-action-bar__spacer" />
{canSetPermissions && (
<Button variant={'primary'} key="add-permission" onClick={() => setIsAdding(true)}>
Add a permission
{buttonLabel}
</Button>
)}
</div>
@ -126,6 +137,7 @@ export const Permissions = ({ resource, resourceId, canListUsers, canSetPermissi
<div>
<SlideDown in={isAdding}>
<AddPermission
title={addPermissionTitle}
onAdd={onAdd}
permissions={desc.permissions}
assignments={desc.assignments}
@ -134,7 +146,7 @@ export const Permissions = ({ resource, resourceId, canListUsers, canSetPermissi
/>
</SlideDown>
<PermissionList
title="Roles"
title="Role"
items={builtInRoles}
permissionLevels={desc.permissions}
onChange={onChange}
@ -142,7 +154,7 @@ export const Permissions = ({ resource, resourceId, canListUsers, canSetPermissi
canSet={canSetPermissions}
/>
<PermissionList
title="Users"
title="User"
items={users}
permissionLevels={desc.permissions}
onChange={onChange}
@ -150,7 +162,7 @@ export const Permissions = ({ resource, resourceId, canListUsers, canSetPermissi
canSet={canSetPermissions}
/>
<PermissionList
title="Teams"
title="Team"
items={teams}
permissionLevels={desc.permissions}
onChange={onChange}
@ -171,8 +183,8 @@ const getDescription = async (resource: string): Promise<Description> => {
}
};
const getPermissions = (resource: string, datasourceId: number): Promise<ResourcePermission[]> =>
getBackendSrv().get(`/api/access-control/${resource}/${datasourceId}`);
const getPermissions = (resource: string, resourceId: number): Promise<ResourcePermission[]> =>
getBackendSrv().get(`/api/access-control/${resource}/${resourceId}`);
const setUserPermission = (resource: string, resourceId: number, userId: number, permission: string) =>
setPermission(resource, resourceId, 'users', userId, permission);