11import React , { useEffect , useState } from "react" ;
2- import { managersByRoleId , roleByID } from "../api" ;
2+ import { institutionAdminsbyRole , managersByRoleId , roleByID } from "../api" ;
33import I18n from "../locale/I18n" ;
44import "./Role.scss" ;
55import { ButtonType , Loader , Tooltip } from "@surfnet/sds" ;
@@ -8,6 +8,7 @@ import {useAppStore} from "../stores/AppStore";
88import { UnitHeader } from "../components/UnitHeader" ;
99import WebsiteIcon from "../icons/network-information.svg" ;
1010import PersonIcon from "../icons/persons.svg" ;
11+ import InstitutionAdminIcon from "@surfnet/sds/icons/illustrative-icons/presentation-amphitheater.svg" ;
1112import { allowedToEditRole , AUTHORITIES , highestAuthority , isUserAllowed , urnFromRole } from "../utils/UserRole" ;
1213import Tabs from "../components/Tabs" ;
1314import { Page } from "../components/Page" ;
@@ -17,7 +18,7 @@ import ClipBoardCopy from "../components/ClipBoardCopy";
1718import { deriveApplicationAttributes } from "../utils/Manage" ;
1819import DOMPurify from "dompurify" ;
1920import { UnitHeaderInviter } from "../components/UnitHeaderInviter" ;
20- import { isEmpty } from "../utils/Utils" ;
21+ import { isEmpty , splitListSemantically } from "../utils/Utils" ;
2122import { displayExpiryDate , futureDate } from "../utils/Date" ;
2223
2324export const Role = ( ) => {
@@ -30,6 +31,7 @@ export const Role = () => {
3031 const [ currentTab , setCurrentTab ] = useState ( tab ) ;
3132 const [ tabs , setTabs ] = useState ( [ ] ) ;
3233 const [ managerEmails , setManagerEmails ] = useState ( [ ] ) ;
34+ const [ institutionAdmins , setInstitutionAdmins ] = useState ( [ ] ) ;
3335
3436 useEffect ( ( ) => {
3537 const isInviter = highestAuthority ( user ) === AUTHORITIES . INVITER ;
@@ -54,10 +56,12 @@ export const Role = () => {
5456 navigate ( "/404" ) ;
5557 return ;
5658 }
57- roleByID ( id , false )
58- . then ( res => {
59+ Promise . all ( [ roleByID ( id , false ) , institutionAdminsbyRole ( id ) ] )
60+ . then ( results => {
61+ const res = results [ 0 ] ;
5962 deriveApplicationAttributes ( res , I18n . locale , I18n . t ( "roles.multiple" ) , I18n . t ( "forms.and" ) )
6063 setRole ( res ) ;
64+ setInstitutionAdmins ( results [ 1 ] ) ;
6165 const isInviter = highestAuthority ( user ) === AUTHORITIES . INVITER ;
6266 if ( isInviter ) {
6367 managersByRoleId ( id ) . then ( emails => setManagerEmails ( emails ) ) ;
@@ -173,6 +177,17 @@ export const Role = () => {
173177 < ClipBoardCopy txt = { urn } transparentBackground = { true } />
174178 </ div >
175179 < div className = { "meta-data" } >
180+ < div className = { "meta-data-row" } >
181+ < InstitutionAdminIcon />
182+ { isEmpty ( institutionAdmins ) && < span >
183+ { I18n . t ( "role.noInstitutionAdmin" ) }
184+ </ span > }
185+ { ! isEmpty ( institutionAdmins ) && < span dangerouslySetInnerHTML = { {
186+ __html : DOMPurify . sanitize ( I18n . t ( "role.institutionAdmin" , {
187+ names : splitListSemantically ( institutionAdmins . map ( u => u . name ) , I18n . t ( "forms.and" ) )
188+ } ) )
189+ } } /> }
190+ </ div >
176191 < div className = { "meta-data-row" } >
177192 < PersonIcon />
178193 < span dangerouslySetInnerHTML = { {
0 commit comments