Apply role-based action visibility

Derive visible and disabled controls from permissions without duplicating authorization logic.

EasyReact Permissions

30 min0% acceptance

Description

Build RoleBasedActions from declarative action definitions, a current role, granted permissions, and context. Hide actions the user may never perform, disable temporarily blocked actions with reasons, preserve definition order, and recompute correctly when authorization inputs change.

Requirements

Export a RoleBasedActions component from src/App.tsx.
Do not render actions whose role or required permission is unavailable.
Render authorized actions disabled when blockedReasons contains a reason for their ID.
Associate each disabled control with its nonempty contextual reason.
Keep visible actions in their original definition order.
Recompute visibility when role or granted permissions change.
Use native buttons so visible actions remain keyboard operable and disabled behavior is native.
Do not mutate, sort, or annotate action definitions or permission arrays.

Hidden action

Input

Viewer role without document:delete permission

Expected output

Delete document is absent

Explanation

Unauthorized actions are not merely styled as disabled.

Contextually disabled

Input

Editor may Publish but the document is invalid

Expected output

Publish remains visible and disabled with the validation reason

Explanation

Temporary state does not change authorization.

Constraints

Role and permission checks are both required when both are declared
An empty roles list authorizes no role
Never invoke onAction for a disabled action

Hints

Hint 1

Filter authorization before looking up a blocked reason.

Hint 2

Convert permissions to a Set without changing the incoming array.

Hint 3

Connect disabled descriptions with aria-describedby rather than placing reasons only in tooltips.

Reactpermissionsderived state