Incident Escalation Settings Block for React

Edit the constants at the top. TARGETS lists who can be paged (a rota or a role, with the label the menu shows), SAVED is the policy the account has stored when the page opens: each tier has a stable id, its target, its channels and the minutes it has to answer before the next tier is paged. MAX_TIERS and MAX_MINUTES are the limits. The axis, the sentence under the rail and the counts are worked out from those, so nothing is typed twice.

The first tier is paged at minute 0. Each later tier is paged at the sum of the timeouts of the tiers before it, so a ten-minute timeout on tier 1 and a fifteen-minute one on tier 2 puts tier 3 at minute 25. The last tier has no timeout of its own, since nothing follows it; what happens after it is the re-page switch. Change a timeout, move a tier or remove one and every node after it is recalculated at once, because the numbers are never stored, only the timeouts are.

Each tier has real buttons named for who it pages ("Move Secondary on-call up", "Remove Engineering manager from the policy"), so there is no drag handle to miss. The first tier's Up button and the last tier's Down button stay focusable but say there is nowhere to go; the only tier left can't be removed, and a fifth can't be added. After a move the focus stays on the button you pressed, in its new place, after an add it goes to the new tier's menu, and after a remove to the neighbour's. The status line says what happened, such as "Secondary on-call: tier 1 of 3."

Nothing leaves the page, and nobody is paged. The block keeps two copies of the policy, the saved one and the one being edited, and counts how many settings differ, so the status line can say "3 changes not saved yet." Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copy back. Save also refuses while two tiers page the same target, with a reason and focus on the first of them, since escalating to the same person is not an escalation. To make it real, send the edited copy to your API in the save handler and update the saved copy from the response. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus.

The number is kept as typed while you edit it, and kept within 1 to 60 minutes when you leave the field, so a half-typed "1" on its way to "15" never rewrites the axis under you. The up and down buttons step by one minute.

The rail keeps its narrow axis at the start with the minute on every node, and each tier's controls stack under its name: the menu, the three chips and the timeout, one under the other, with the three tier buttons at the end of its heading. The sentence under the rail has room reserved so adding a tier never moves the buttons below, and the save bar stays pinned to the bottom of the screen.