AccessControl: Make Permissions component customizable (#43992)

* 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>

public/app/core/components/AccessControl/AddPermission.tsx

@@ -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"

public/app/core/components/AccessControl/PermissionList.tsx

@@ -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

public/app/core/components/AccessControl/PermissionListItem.tsx

@@ -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

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

@@ -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[]> =>
+const getPermissions = (resource: string, resourceId: number): Promise<ResourcePermission[]> =>
-  getBackendSrv().get(`/api/access-control/${resource}/${datasourceId}`);
+  getBackendSrv().get(`/api/access-control/${resource}/${resourceId}`);
 
 const setUserPermission = (resource: string, resourceId: number, userId: number, permission: string) =>
   setPermission(resource, resourceId, 'users', userId, permission);