Skip to content

Commit

Permalink
Group Details Entitlements UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@linathedog
linathedog committed Mar 26, 2024
1 parent 17c48d3 commit 8399969
Show file tree
Hide file tree
Showing 5 changed files with 135 additions and 102 deletions.
21 changes: 19 additions & 2 deletions src/main/resources/theme/rciam-group/account/resources/static/css/account.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,23 @@
justify-content: center!important;
}

.gm_role_add_container div {
width: 16rem;
display: inline-block;
padding-top: 0.3rem;
padding-bottom: 0.8rem;
margin-right: 1rem;
width: 16rem!important;
}

.gm_role_add_container button {
display:inline-block;
}

.gm_roles-table-popover div {
background-color:white!important;
}

.gm_cell-placeholder {
width:5rem;
}
Expand Down Expand Up @@ -380,6 +397,7 @@
text-align: left;
border-bottom: 1px solid #ddd;
vertical-align: middle;
font-weight: bold;
}

.gm_roles-table tbody tr:nth-child(even) {
Expand All @@ -402,15 +420,14 @@
}


.gm_roles-table button {
.gm_roles-table .gm_roles-delete-button {
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
padding: 0;
border: none;
background-color: #ccc;
}

.gm_roles-table svg {
Expand Down
2 changes: 1 addition & 1 deletion ...urces/theme/rciam-group/account/src/app/content/group-management-pages/AdminGroupPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ interface GroupConfiguration {
name: string;
path: string;
attributes: any;
groupRoles: string[];
groupRoles: any;
enrollmentConfigurationList: EnrollmentConfiration[];
status: string;
membershipExpiresAt: string;
Expand Down
208 changes: 112 additions & 96 deletions ...resources/theme/rciam-group/account/src/app/group-widgets/GroupAdminPage/GroupDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,77 @@
import * as React from 'react';
import {FC,useState,useRef} from 'react';
import { DataList,DataListItem,DataListItemCells,DataListItemRow,DataListCell, Button, TextInput, InputGroup, Chip, Tooltip} from '@patternfly/react-core';
import { FC, useState, useRef } from 'react';
import { DataList, DataListItem, DataListItemCells, DataListItemRow, DataListCell, Button, TextInput, InputGroup, Chip, Tooltip, ExpandableSection, ClipboardCopy, Popover } from '@patternfly/react-core';
// @ts-ignore
import { ConfirmationModal } from '../Modals';
import { GroupsServiceClient, HttpResponse } from '../../groups-mngnt-service/groups.service';
import {MinusIcon,PlusIcon } from '@patternfly/react-icons';
import { MinusIcon, PlusIcon, EyeIcon, TimesIcon,CopyIcon } from '@patternfly/react-icons';
import { Msg } from '../../widgets/Msg';
import { Alerts } from '../../widgets/Alerts';


export const GroupDetails: FC<any> = (props) => {
let groupsService = new GroupsServiceClient();
const roleRef= useRef<any>(null);
const roleRef = useRef<any>(null);
const [roleInput, setRoleInput] = useState<string>("");
const [modalInfo,setModalInfo] = useState({});
const [alert,setAlert] = useState({});
const [modalInfo, setModalInfo] = useState({});
const [alert, setAlert] = useState({});
const [isExpanded, setIsExpanded] = useState(false);

const addGroupRole = (role) =>{
groupsService!.doPost<any>("/group-admin/group/"+props.groupId+"/roles",{},{params:{name:role}})
.then((response: HttpResponse<any>) => {
if(response.status===200||response.status===204){
props.groupConfiguration.groupRoles.push(role);
props.setGroupConfiguration({...props.groupConfiguration});
setRoleInput("");
setModalInfo({});
}
})
const onToggle = (isExpanded: boolean) => {
setIsExpanded(isExpanded);
};

const addGroupRole = (role) => {
groupsService!.doPost<any>("/group-admin/group/" + props.groupId + "/roles", {}, { params: { name: role } })
.then((response: HttpResponse<any>) => {
if (response.status === 200 || response.status === 204) {
props.groupConfiguration.groupRoles.push(role);
props.setGroupConfiguration({ ...props.groupConfiguration });
setRoleInput("");
setModalInfo({});
}
})
}

const removeGroupRole = (role) => {
groupsService!.doDelete<any>("/group-admin/group/"+props.groupId+"/role/"+role)
.then((response: HttpResponse<any>) => {
if(response.status===200||response.status===204){
const index = props.groupConfiguration.groupRoles.indexOf(role);
if (index > -1) { // only splice array when item is found
props.groupConfiguration.groupRoles.splice(index, 1); // 2nd parameter means remove one item only
}
props.setGroupConfiguration({...props.groupConfiguration});
}
setModalInfo({});
}).catch(err=>{
setAlert({message:Msg.localize('deleteRoleErrorTitle'),variant:"danger",description:Msg.localize('deleteRoleErrorMessage')});
setModalInfo({});
})
groupsService!.doDelete<any>("/group-admin/group/" + props.groupId + "/role/" + role)
.then((response: HttpResponse<any>) => {
if (response.status === 200 || response.status === 204) {
const index = props.groupConfiguration.groupRoles.indexOf(role);
if (index > -1) { // only splice array when item is found
props.groupConfiguration.groupRoles.splice(index, 1); // 2nd parameter means remove one item only
}
props.setGroupConfiguration({ ...props.groupConfiguration });
}
setModalInfo({});
}).catch(err => {
setAlert({ message: Msg.localize('deleteRoleErrorTitle'), variant: "danger", description: Msg.localize('deleteRoleErrorMessage') });
setModalInfo({});
})

}


return(
return (
<React.Fragment>
<Alerts alert={alert} close={()=>{setAlert({})}}/>
<ConfirmationModal modalInfo={modalInfo}/>
<Alerts alert={alert} close={() => { setAlert({}) }} />
<ConfirmationModal modalInfo={modalInfo} />
<DataList aria-label="Compact data list example" isCompact wrapModifier={"breakWord"}>
<DataListItem aria-labelledby="compact-item1">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<span id="compact-item1"><strong><Msg msgKey='Path' /></strong></span>
</DataListCell>,
<DataListCell width={3} key="secondary content ">
<span>{props.groupConfiguration?.path}</span>
</DataListCell>
<DataListCell key="primary content">
<span id="compact-item1"><strong><Msg msgKey='Path' /></strong></span>
</DataListCell>,
<DataListCell width={3} key="secondary content ">
<span>{props.groupConfiguration?.path}</span>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>

<DataListItem aria-labelledby="compact-item2">
<DataListItemRow className="gm_role_row">
<DataListItemCells
Expand All @@ -74,79 +80,89 @@ export const GroupDetails: FC<any> = (props) => {
<span id="compact-item1"><strong><Msg msgKey='adminGroupRoles' /></strong></span>
</DataListCell>,
<DataListCell width={3} key="roles">
<table className="gm_roles-table">
<thead>
<tr>
<th>
<div className="gm_role_add_container">
<InputGroup>
<TextInput id="textInput-basic-1" value={roleInput} placeholder={Msg.localize('adminGroupRolesAddPlaceholder')} onChange={(e)=>{setRoleInput(e.trim());}} onKeyDown={(e)=>{e.key=== 'Enter'&&roleRef?.current?.click(); }} type="email" aria-label="email input field" />
<TextInput id="textInput-basic-1" value={roleInput} placeholder={Msg.localize('adminGroupRolesAddPlaceholder')} onChange={(e) => { setRoleInput(e.trim()); }} onKeyDown={(e) => { e.key === 'Enter' && roleRef?.current?.click(); }} type="email" aria-label="email input field" />
</InputGroup>
</th>
<th>
<Tooltip content={<div><Msg msgKey='adminGroupRolesAdd' /></div>}>

<Button ref={roleRef} onClick={()=>{
if(props.groupConfiguration?.groupRoles.includes(roleInput)){
<Button ref={roleRef} onClick={() => {
if (props.groupConfiguration?.groupRoles.includes(roleInput)) {
setModalInfo({
title:(Msg.localize('adminGroupRoleExistsTitle')),
accept_message: Msg.localize('OK'),
message: (Msg.localize('adminGroupRoleExistsMessage1')+" ("+ roleInput + ") "+Msg.localize('adminGroupRoleExistsMessage2')),
accept: function(){setModalInfo({})},
cancel: function(){setModalInfo({})}
title: (Msg.localize('adminGroupRoleExistsTitle')),
accept_message: Msg.localize('OK'),
message: (Msg.localize('adminGroupRoleExistsMessage1') + " (" + roleInput + ") " + Msg.localize('adminGroupRoleExistsMessage2')),
accept: function () { setModalInfo({}) },
cancel: function () { setModalInfo({}) }
});
}
else{
else {
setModalInfo({
title:(Msg.localize('Confirmation')),
title: (Msg.localize('Confirmation')),
accept_message: (Msg.localize('Yes')),
cancel_message: Msg.localize('No'),
message: (Msg.localize('adminGroupRoleAddConfirmation1')+" "+ roleInput + Msg.localize('adminGroupRoleAddConfirmation2')),
accept: function(){addGroupRole(roleInput)},
cancel: function(){setModalInfo({})}
});
message: (Msg.localize('adminGroupRoleAddConfirmation1') + " " + roleInput + Msg.localize('adminGroupRoleAddConfirmation2')),
accept: function () { addGroupRole(roleInput) },
cancel: function () { setModalInfo({}) }
});
}
}}><PlusIcon/></Button>
}}><PlusIcon /></Button>
</Tooltip>
</th>
</tr>
</thead>
<tbody>
{props.groupConfiguration?.groupRoles?.map((role,index)=>{
return <tr>
<td>
{role}
</td>
<td>
<Tooltip content={<div><Msg msgKey='adminGroupRoleRemove' /></div>}>
<Button variant="danger" onClick={()=>{
setModalInfo({
title:(Msg.localize('Confirmation')),
accept_message: (Msg.localize('Yes')),
cancel_message: (Msg.localize('No')),
message: (Msg.localize('adminGroupRoleRemoveConfirmation1')+" " + role + " "+Msg.localize('adminGroupRoleRemoveConfirmation2')),
accept: function(){removeGroupRole(role)},
cancel: function(){setModalInfo({})}
});
}}>
<MinusIcon/>
</Button>
</Tooltip>
</td>
</tr>
})}
</tbody>
</table>
</DataListCell>

</div>
<table className="gm_roles-table">
<thead>
<tr>
<th>
Role Name
</th>
<th>
Role Entitlement
</th>
<th>

</th>
</tr>
</thead>
<tbody>
{props?.groupConfiguration?.groupRoles&&Object.keys(props.groupConfiguration.groupRoles).map((role, index) => {
return <tr>
<td>
{role}
</td>
<td>
<ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied">
{props.groupConfiguration.groupRoles[role]}
</ClipboardCopy>
</td>
<td>
<Tooltip content={<div><Msg msgKey='adminGroupRoleRemove' /></div>}>
<Button className="gm_roles-delete-button" variant="danger" onClick={() => {
setModalInfo({
title: (Msg.localize('Confirmation')),
accept_message: (Msg.localize('Yes')),
cancel_message: (Msg.localize('No')),
message: (Msg.localize('adminGroupRoleRemoveConfirmation1') + " " + role + " " + Msg.localize('adminGroupRoleRemoveConfirmation2')),
accept: function () { removeGroupRole(role) },
cancel: function () { setModalInfo({}) }
});
}}>
<MinusIcon />
</Button>
</Tooltip>
</td>

</tr>
})}
</tbody>
</table>
</DataListCell>
]}
/>
</DataListItemRow>

</DataListItem>
</DataListItem>
</DataList>
</React.Fragment>

)

}

4 changes: 2 additions & 2 deletions ...resources/theme/rciam-group/account/src/app/group-widgets/GroupAdminPage/GroupMembers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export const GroupMembers: FC<any> = (props) => {
<DataListCell className="gm_vertical_center_cell" width={3} key="email-hd">
<strong><Msg msgKey='Roles' /></strong>
{props.groupConfiguration?.groupRoles &&
<DatalistFilterSelect default="" name="group-roles" options={props.groupConfiguration?.groupRoles} optionsType="raw" action={(selection)=>{setRoleSelection(selection)}}/>
<DatalistFilterSelect default="" name="group-roles" options={Object.keys(props.groupConfiguration.groupRoles)} optionsType="raw" action={(selection)=>{setRoleSelection(selection)}}/>
}


Expand Down Expand Up @@ -384,7 +384,7 @@ const EditRolesModal: React.FC<EditRolesModalProps> = (props) =>{
>
<table className="gm_roles-table gm_table-center">
<tbody>
{props.groupRoles?.map((role,index)=>{
{props?.groupRoles&&Object.keys(props.groupRoles).map((role,index)=>{
return <tr>
<td>
{role}
Expand Down
2 changes: 1 addition & 1 deletion ...theme/rciam-group/account/src/app/group-widgets/GroupEnrollment/CreateEnrollmentModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -581,7 +581,7 @@ export const EnrollmentModal: FC<any> = (props) => {
>
<table className="gm_roles-table">
<tbody>
{props.groupRoles&&props.groupRoles?.map((role,index)=>{
{props.groupRoles&&Object.keys(props.groupRoles).map((role,index)=>{
return <tr onClick={()=>{roleHandler(role);}}>
<td>
{role}
Expand Down

0 comments on commit 8399969

Please sign in to comment.