Audit Log Settings Block for React

Edit START, newest first or in any order: each change has an id, an area, a setting id (two changes to one setting share it), a name, the before and after values as text, who made it (actor) and an at moment in UTC. AREAS names the groups and ACTORS fills the filter. In your app the history comes from your audit service; keep the values as the strings people read, not raw JSON.

It sets the setting back to the value before the chosen change, marks that change Reverted and adds a new event to the top of its area: a revert by you, whose before and after are the other way round. Only the latest change to a setting that nothing has undone can be reverted, since reverting an older one would also throw away the newer one. Pressing Revert on any other change leaves everything as it is and says which one comes first. A revert event can't itself be reverted, and a change that has been reverted can't be again.

Everything. A revert only changes the list in the page, and the status line says nothing in your workspace was changed. To make it real, send the change's id to your server in the revert handler, let it apply the previous value and write the revert event, and replace the list from its response. Keep the rule that only the latest change can be reverted on the server too.

Each group heading is a button that opens or folds its list, with the open state announced and the group's count beside it. The filter shows only the changes by the person you choose, and each count follows it, so a group with nothing says "No changes here by" that person; the status line says how many changes are shown. The chosen change stays in the detail pane even when the filter hides it from the list.

Tab runs through the revert button, the filter, each group button, each change and the detail. The chosen change is marked aria-current, and the group buttons carry aria-expanded and aria-controls. Choosing a change on a phone moves focus to the detail's heading, and Back moves it to the change you came from. The revert button stays focusable when it can't act and explains why in the status line.

The window keeps its height and shows one pane at a time: the list first, then the detail after you choose a change, with a Back button above it. The revert button sits in the top bar and shows while the detail is open.