Feature Toggles Settings Block for React

Add an attribute to ATTRIBUTES with its label and the values the value select offers, and a field for it to Person; factOf and matches read the attribute by name, so give each new attribute its own line there. Add a sample user to PEOPLE with a plan, a country and a bucket, and the rules SAVED holds when the page opens. The sentence on top, the table, the evaluator and the unsaved count all read from those.

It reads the rules from the top and stops at the first one that matches: a match rule checks the person's plan or country against its value (is, or is not), a rollout matches when the person's bucket is under its share, and the Otherwise rule takes whoever is left. The kill switch overrides all of it. A bucket is a number from 0 to 99 that a real service computes from the flag key and the user, so a person stays on the same side of a rollout as it widens; here each person has a fixed one, typed in PEOPLE.

Turning it off serves Off to everyone whatever the rules say, which is the one change that affects every user at once, so it asks in an alert dialog that opens with focus on Keep it live, can't be closed by clicking outside it and, once confirmed, keeps the rules as they were. Turning it on again needs no question. Focus returns to the switch when the dialog closes.

Everything. Nothing is flagged: the rules and the four people are typed sample data, Save keeps the rules in this page's state, Remove and Undo walk a stack in the page and a reload brings back the starting rules. To make it real, store the rules on your server, evaluate them in your SDK from the same list, in the same order, and hash the user and the flag key into the bucket.

A rule that repeats an earlier match rule (same attribute, operator and value) would never run, and a rollout share must be a whole number from 0 to 100; Save names the rule, marks it and moves focus to its first control. Move up and Move down are buttons named for the rule ("Move rule 2 up"), quiet at the ends and still answering in words, and focus stays on the pressed button, or goes to the other one when the pressed button reaches an end.

Each rule becomes a card: its number and three buttons on the first line, the attribute, operator and value in one row and what it serves under them, so a rule reads on one screen. Every control has a name that says which rule it belongs to, the radios are in a fieldset with a legend and the status line is a polite live region that announces moves, removals and who a flag serves.