Feature Flags Dashboard Block for React Aria

Add an object to FLAGS: an id, a title, a key, an owner, a description, whether it needs review, its rollout percent and the environments it starts on in. USERS is the number of Production users the blast radius is counted against, and the header counts come from the switches.

A flag marked Needs review shouldn't reach Production without a second look, so turning it on there opens a dialog that says how many users it would reach at its rollout. Cancel (the default) leaves the switch off and returns focus to it; Turn on switches it on. Turning a flag off never asks. On React Aria the dialog sets focus on Cancel shortly after it opens.

It sets the percentage of Production users who get the chosen flag, in steps of 5, and the sentence beside it works out the users from 48,200. If Production is off for that flag the sentence says so and shows what it would reach once it is on.

No. The search matches the name, key, owner and description, the list keeps its height so the rollout band doesn't jump, and a search with no match shows a short message with a Clear search button.

Every switch and the rollout. Changes live in the page and the polite status line says what changed and that nothing was deployed. In your app call your flag service from the switch and slider handlers and read the starting state from it.

Each flag is a block: its name and key, the owner, and its three switches in a row with their labels above them. The rollout slider sits under the list.