mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-31 00:16:47 +01:00
bb026c0ba1
## About the changes Implements custom root roles, encompassing a lot of different areas of the project, and slightly refactoring the current roles logic. It includes quite a clean up. This feature itself is behind a flag: `customRootRoles` This feature covers root roles in: - Users; - Service Accounts; - Groups; Apologies in advance. I may have gotten a bit carried away 🙈 ### Roles We now have a new admin tab called "Roles" where we can see all root roles and manage custom ones. We are not allowed to edit or remove *predefined* roles.  This meant slightly pushing away the existing roles to `project-roles` instead. One idea we want to explore in the future is to unify both types of roles in the UI instead of having 2 separate tabs. This includes modernizing project roles to fit more into our current design and decisions. Hovering the permissions cell expands detailed information about the role:  ### Create and edit role Here's how the role form looks like (create / edit):  Here I categorized permissions so it's easier to visualize and manage from a UX perspective. I'm using the same endpoint as before. I tried to unify the logic and get rid of the `projectRole` specific hooks. What distinguishes custom root roles from custom project roles is the extra `root-custom` type we see on the payload. By default we assume `custom` (custom project role) instead, which should help in terms of backwards compatibility. ### Delete role When we delete a custom role we try to help the end user make an informed decision by listing all the entities which currently use this custom root role:  ~~As mentioned in the screenshot, when deleting a custom role, we demote all entities associated with it to the predefined `Viewer` role.~~ **EDIT**: Apparently we currently block this from the API (access-service deleteRole) with a message:  What should the correct behavior be? ### Role selector I added a new easy-to-use role selector component that is present in: - Users  - Service Accounts  - Groups  ### Role description I also added a new role description component that you can see below the dropdown in the selector component, but it's also used to better describe each role in the respective tables:  I'm not listing all the permissions of predefined roles. Those simply show the description in the tooltip:  ### Role badge Groups is a bit different, since it uses a list of cards, so I added yet another component - Role badge:  I'm using this same component on the profile tab:  ## Discussion points - Are we being defensive enough with the use of the flag? Should we cover more? - Are we breaking backwards compatibility in any way? - What should we do when removing a role? Block or demote? - Maybe some existing permission-related issues will surface with this change: Are we being specific enough with our permissions? A lot of places are simply checking for `ADMIN`; - We may want to get rid of the API roles coupling we have with the users and SAs and instead use the new hooks (e.g. `useRoles`) explicitly; - We should update the docs; - Maybe we could allow the user to add a custom role directly from the role selector component; --------- Co-authored-by: Gastón Fournier <gaston@getunleash.io>
72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { styled, Tooltip, tooltipClasses, TooltipProps } from '@mui/material';
|
|
import { SpacingArgument } from '@mui/system/createTheme/createSpacing';
|
|
|
|
const StyledHtmlTooltipBody = styled('div')(({ theme }) => ({
|
|
overflow: 'auto',
|
|
padding: theme.spacing(1, 1.5),
|
|
}));
|
|
|
|
const StyledHtmlTooltip = styled(
|
|
({
|
|
className,
|
|
maxWidth,
|
|
maxHeight,
|
|
fontSize,
|
|
...props
|
|
}: IHtmlTooltipProps) => (
|
|
<Tooltip
|
|
{...props}
|
|
title={<StyledHtmlTooltipBody>{props.title}</StyledHtmlTooltipBody>}
|
|
classes={{ popper: className }}
|
|
/>
|
|
),
|
|
{
|
|
shouldForwardProp: prop =>
|
|
prop !== 'maxWidth' && prop !== 'maxHeight' && prop !== 'fontSize',
|
|
}
|
|
)<{
|
|
maxWidth?: SpacingArgument;
|
|
maxHeight?: SpacingArgument;
|
|
fontSize?: string;
|
|
}>(
|
|
({
|
|
theme,
|
|
maxWidth = theme.spacing(37.5),
|
|
maxHeight = theme.spacing(37.5),
|
|
fontSize = theme.fontSizes.smallerBody,
|
|
}) => ({
|
|
maxWidth,
|
|
[`& .${tooltipClasses.tooltip}`]: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
backgroundColor: theme.palette.background.paper,
|
|
padding: 0,
|
|
borderRadius: theme.shape.borderRadiusMedium,
|
|
boxShadow: theme.shadows[2],
|
|
color: theme.palette.text.primary,
|
|
fontWeight: theme.fontWeight.medium,
|
|
maxWidth: 'inherit',
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
maxHeight,
|
|
fontSize,
|
|
},
|
|
[`& .${tooltipClasses.arrow}`]: {
|
|
'&:before': {
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
},
|
|
color: theme.palette.background.paper,
|
|
},
|
|
})
|
|
);
|
|
|
|
export interface IHtmlTooltipProps extends TooltipProps {
|
|
maxWidth?: SpacingArgument;
|
|
maxHeight?: SpacingArgument;
|
|
fontSize?: string;
|
|
}
|
|
|
|
export const HtmlTooltip = (props: IHtmlTooltipProps) => {
|
|
if (!Boolean(props.title)) return props.children;
|
|
return <StyledHtmlTooltip {...props}>{props.children}</StyledHtmlTooltip>;
|
|
};
|