Role Ladder Permission Denied Error Block for React

It checks that the note says something, then keeps the request in the page's state: the dialog closes, a line under the ladder says "Pending with Rhea Castellan. Recorded in this demo; nothing was sent." and Withdraw takes it back. Nothing leaves the page. To wire it for real, create the access request on your server where the code says so, show the pending state from the response, and let Withdraw cancel it.

From three typed values: the list of roles from lowest to highest, the role the visitor has (YOU) and the role the page needs (NEEDED). The gap is the difference between their positions, so "Two roles up" and the sentence under it change with the data. The state is a shape and a word, never only a colour: a solid step for yours, a dashed outline and the word Needed for the one the page wants. The scope in the code chip is a typed constant; show the one your policy engine checks.

It is the real Dialog: it traps focus while open, Escape and Cancel close it, and focus goes back to the Request access button, also after a successful send. When it opens, focus lands in the note field. An empty note keeps the dialog open, says what is missing under the field and focuses it.

From the typed list OWNER_LIST: a label and a value for each. In your app, list the people who can change roles in this workspace; with one owner, drop the Select and name them in the dialog's sentence.

No: a component can't. Send the real HTTP status from your server or framework, so monitors and API clients see a 403 and not a 200 with an error drawn on it. Use 401 when the visitor isn't signed in.

Because the ladder stacks into rows and is tall on a small screen. The button sits in a foot that is sticky at the bottom of the screen below the small breakpoint and falls back into the flow from there up, so there is one coloured button in both layouts.