Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-05 17:53:12 +02:00
Code Issues Projects Releases Wiki Activity

feat: group permissions on frontend

Browse Source
This commit is contained in:
Tymoteusz Czech 2022-11-18 13:43:02 +01:00
parent 8d2d6afde0
commit 2faeb3bd42
No known key found for this signature in database
GPG Key ID: 133555230D88D75F
1 changed files with 87 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
frontend/src/component/admin/projectRoles/ProjectRoleForm/PermissionAccordion/PermissionAccordion.tsx
View File

@ -43,6 +43,30 @@ const StyledTitle = styled(StringTruncator)(({ theme }) => ({
marginRight: theme.spacing(1),
}));
const getPermissionGroupName = (
permission: IPermission
): [groupName: string, order: number] => {
const { name } = permission;
if (name.endsWith('_PROJECT') || name === 'MOVE_FEATURE_TOGGLE') {
return ['Project', 0];
}
if (name.endsWith('_FEATURE') || name === 'UPDATE_FEATURE_ENVIRONMENT') {
return ['Feature toggles', 1];
}
if (name.endsWith('_VARIANTS')) {
return ['Variants', 2];
}
if (name.endsWith('_STRATEGY')) {
return ['Strategies', 3];
}
if (name.endsWith('_CHANGE_REQUEST')) {
return ['Change requests', 4];
}
return ['Other', 5];
};
export const PermissionAccordion: VFC<IEnvironmentPermissionAccordionProps> = ({
title,
permissions,
@ -78,6 +102,27 @@ export const PermissionAccordion: VFC<IEnvironmentPermissionAccordionProps> = ({
[permissionCount, permissions]
);
const permissionGroups = useMemo(
() =>
permissions
?.reduce((prev, next) => {
const [groupName, order] = getPermissionGroupName(next);
const id = prev.findIndex(el => el.groupName === groupName);
if (id === -1) {
prev.push({
groupName,
order,
groupPermissions: [next],
});
} else {
prev[id].groupPermissions.push(next);
}
return prev;
}, [] as Array<{ groupName: string; order: number; groupPermissions: IPermission[] }>)
.sort((a, b) => a.order - b.order),
[permissions]
);
return (
<Box
sx={{
@ -141,35 +186,50 @@ export const PermissionAccordion: VFC<IEnvironmentPermissionAccordionProps> = ({
all {context} permissions
</Button>
<Box>
{permissions?.map((permission: IPermission) => {
return (
<FormControlLabel
sx={{
minWidth: {
sm: '300px',
xs: 'auto',
},
}}
key={getRoleKey(permission)}
control={
<Checkbox
checked={
checkedPermissions[
getRoleKey(permission)
]
? true
: false
{permissionGroups.map(
({ groupName, groupPermissions }) => (
<Box key={groupName} sx={{ mt: 1 }}>
<Typography
variant="body2"
color="text.secondary"
sx={{ mb: 0.5 }}
>
{groupName}
</Typography>
{groupPermissions.map(permission => (
<FormControlLabel
sx={{
minWidth: {
sm: '300px',
xs: 'auto',
},
}}
key={getRoleKey(permission)}
control={
<Checkbox
checked={
checkedPermissions[
getRoleKey(
permission
)
]
? true
: false
}
onChange={() =>
onPermissionChange(
permission
)
}
color="primary"
/>
}
onChange={() =>
onPermissionChange(permission)
}
color="primary"
label={permission.displayName}
/>
}
label={permission.displayName}
/>
);
})}
))}
</Box>
)
)}
</Box>
</AccordionDetails>
</Accordion>