XB UI needs to be able to check permissions and alter the UI accordingly. We need some basic utilities that will allow this to be handled consistently throughout the app.
Provide a list of permissions to the FE within drupalSettings.xb.permissions or similar.
type Permissions = string[];
interface DrupalSettings {
xb: {
...
permissions: Permissions;
}
}
Create utility functions to help manage and check permissions:
const hasPermission = (permission: string, userPermissions: Permissions): boolean => {
return userPermissions.includes(permission);
};
const hasPermissions = (requiredPermissions: Permissions, userPermissions: Permissions): boolean => {
return requiredPermissions.every(permission => userPermissions.includes(permission));
};
const hasAnyPermission = (requiredPermissions: Permissions, userPermissions: Permissions): boolean => {
return requiredPermissions.some(permission => userPermissions.includes(permission));
};
A reusable React component that can be used to conditionally render UI elements based on permissions:
import React, { ReactNode } from 'react';
interface PermissionCheckProps {
hasPermission?: string;
hasAnyPermission?: Permissions;
hasPermissions?: Permissions;
denied?: ReactNode;
children: ReactNode;
userPermissions: Permissions;
}
const PermissionCheck: React.FC<PermissionCheckProps> = ({
hasPermission,
hasAnyPermission,
hasPermissions,
denied = <div>You don’t have permission</div>,
children,
userPermissions
}) => {
const isAllowed =
(hasPermission && hasPermission(userPermissions)) ||
(hasAnyPermission && hasAnyPermission(hasAnyPermission, userPermissions)) ||
(hasPermissions && hasPermissions(hasPermissions, userPermissions));
return <>{isAllowed ? children : denied}</>;
};
export default PermissionCheck;
Example of how it would be used:
<PermissionCheck hasPermission="canAdd" denied={(<button disabled title="You do not have permission to add">Add</button>)}>
<button>Add</button>
</PermissionCheck>
Backend Enforcement: Always enforce permissions on the backend as frontend checks can be bypassed.
Real-time Updates: Real-time updates to permissions don't need to be supported; users must reload the page to get updated permissions.
We need to come up with a set of common rules/UX guidelines to cover the following and when they should be used
Active
0.0
Page builder
As long as we agree on what the server will pass to the client in 📌 Pass current user's XB permissions to the XB UI Active , work on this could begin in parallel. But that probably makes little sense?