@ -1,6 +1,6 @@
import React , { useEffect , useMemo , useState } from 'react' ;
import { Alert , Button , Form , HorizontalGroup , Input , Select } from '@grafana/ui' ;
import { Button , Form , HorizontalGroup , Select } from '@grafana/ui' ;
import { CloseButton } from 'app/core/components/CloseButton/CloseButton' ;
import { TeamPicker } from 'app/core/components/Select/TeamPicker' ;
import { UserPicker } from 'app/core/components/Select/UserPicker' ;
@ -12,20 +12,12 @@ export interface Props {
title? : string ;
permissions : string [ ] ;
assignments : Assignments ;
canListUsers : boolean ;
onCancel : ( ) = > void ;
onAdd : ( state : SetPermission ) = > void ;
}
export const AddPermission = ( {
title = 'Add Permission For' ,
permissions ,
assignments ,
canListUsers ,
onAdd ,
onCancel ,
} : Props ) = > {
const [ target , setPermissionTarget ] = useState < PermissionTarget > ( PermissionTarget . User ) ;
export const AddPermission = ( { title = 'Add Permission For' , permissions , assignments , onAdd , onCancel } : Props ) = > {
const [ target , setPermissionTarget ] = useState < PermissionTarget > ( PermissionTarget . None ) ;
const [ teamId , setTeamId ] = useState ( 0 ) ;
const [ userId , setUserId ] = useState ( 0 ) ;
const [ builtInRole , setBuiltinRole ] = useState ( '' ) ;
@ -33,8 +25,8 @@ export const AddPermission = ({
const targetOptions = useMemo ( ( ) = > {
const options = [ ] ;
if ( assignments . users && canListUsers ) {
options . push ( { value : PermissionTarget.User , label : 'User' , isDisabled : false } ) ;
if ( assignments . users ) {
options . push ( { value : PermissionTarget.User , label : 'User' } ) ;
}
if ( assignments . teams ) {
options . push ( { value : PermissionTarget.Team , label : 'Team' } ) ;
@ -43,7 +35,7 @@ export const AddPermission = ({
options . push ( { value : PermissionTarget.BuiltInRole , label : 'Role' } ) ;
}
return options ;
} , [ assignments , canListUsers ] ) ;
} , [ assignments ] ) ;
useEffect ( ( ) = > {
if ( permissions . length > 0 ) {
@ -56,22 +48,11 @@ export const AddPermission = ({
( target === PermissionTarget . User && userId > 0 ) ||
( PermissionTarget . BuiltInRole && OrgRole . hasOwnProperty ( builtInRole ) ) ;
const renderMissingListUserRights = ( ) = > {
return (
< Alert severity = "info" title = "Missing permission" >
You are missing the permission to list users ( org.users :read ) . Please contact your administrator to get this
resolved .
< / Alert >
) ;
} ;
return (
< div className = "cta-form" aria - label = "Permissions slider" >
< CloseButton onClick = { onCancel } / >
< h5 > { title } < / h5 >
{ target === PermissionTarget . User && ! canListUsers && renderMissingListUserRights ( ) }
< Form
name = "addPermission"
maxWidth = "none"
@ -87,10 +68,9 @@ export const AddPermission = ({
disabled = { targetOptions . length === 0 }
/ >
{ target === PermissionTarget . User && canListUsers && (
{ target === PermissionTarget . User && (
< UserPicker onSelected = { ( u ) = > setUserId ( u . value || 0 ) } className = { 'width-20' } / >
) }
{ target === PermissionTarget . User && ! canListUsers && < Input disabled = { true } className = { 'width-20' } / > }
{ target === PermissionTarget . Team && (
< TeamPicker onSelected = { ( t ) = > setTeamId ( t . value ? . id || 0 ) } className = { 'width-20' } / >