50beaef35d
* feat: create permissions tab * style: add tsdocs to getPermissionMetadata and buildPermissionMatrix * style: fix padding on rows table * feat: add skeleton and improve testing * feat: create ResourceTooltip component and enhance types for permission matrix by role and resource * style: enhance tooltip styles and permissions displayed order * test: remove data-testid for PermissionTable * style: use card for adding background color to the permission table component
32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import { Icon, OverlayTrigger, Popover } from '@openedx/paragon';
|
|
import { Info } from '@openedx/paragon/icons';
|
|
import { PermissionsResourceGrouped, RoleResourceGroup } from '@src/types';
|
|
|
|
type ResourceTooltipProps = {
|
|
resourceGroup: PermissionsResourceGrouped | RoleResourceGroup;
|
|
};
|
|
|
|
const ResourceTooltip = ({ resourceGroup }:ResourceTooltipProps) => (
|
|
<OverlayTrigger
|
|
key={`overlay-${resourceGroup.key}`}
|
|
placement="auto"
|
|
overlay={(
|
|
<Popover id={`tooltip-${resourceGroup.label}`}>
|
|
<Popover.Content className="p-3">
|
|
<h4 className="text-primary">{resourceGroup.label}</h4>
|
|
<p className="small">{resourceGroup.description}</p>
|
|
<ul className="small">
|
|
{resourceGroup.permissions.map(permission => (
|
|
<li><b>{permission.label.trim()}:</b> {permission.description}</li>
|
|
))}
|
|
</ul>
|
|
</Popover.Content>
|
|
</Popover>
|
|
)}
|
|
>
|
|
<Icon className="d-inline-block text-gray ml-2 my-auto" size="inline" src={Info} />
|
|
</OverlayTrigger>
|
|
);
|
|
|
|
export default ResourceTooltip;
|