Warning Dialog Block for React

So you can see it without a click. On load the alert is a copy drawn in place over the console: a native dialog element with the alertdialog role that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Run migration button in the header opens the real Alert Dialog, modal, with its focus trap, Escape and focus on Cancel, and the copy stays closed until a reload. Both show the same CautionFields component and share the block's state, so a box ticked in the copy is ticked in the real one. In your app keep the Alert Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame. On a phone the copy docks to the foot of the page as a bottom sheet, Cancel and Run anyway side by side and pinned while the text, the track and the box scroll above them; the real alert keeps the Alert Dialog's own centred layout.

Three typed times drive it: the freeze starts at 22:00, ends at 06:00 and the demo's clock reads 23:10. frozenAt shades an hour when it falls inside the freeze, which wraps midnight, waitMinutes takes the minutes to the end the same way (410, so 6 h 50 min), and the marker sits at 23:10's share of the day. The strip is one image with a sentence as its name, and the same facts are in the text under it. In your app pass the real maintenance window and read the clock from the server; the demo never reads the visitor's.

A freeze exists so that nothing changes while it holds, so the dialog asks the person to say they know what they are doing before the red button works. The checkbox sits in a label with the sentence, so the whole line is the target, and Run anyway is disabled until it is ticked. Cancel is first in the order and has focus when the alert opens, a click outside does not close it, and Escape and Cancel both leave the migration unrun. Use a typed confirmation instead when the action can't be undone at all.

Nothing runs. It marks the drawn query block "Ran during the freeze in this demo", adds a Needs review badge and says so in a polite status message. In your app start the migration in run, keep the alert open with a busy state until the server answers, mark the result only on success, and show a failure inside the alert with a retry. Record who ran it during the freeze, because the badge only helps if somebody reviews it.

The real alert is named by its title and described by its sentence, and it opens with focus on Cancel, never on Run anyway, so a stray Enter backs out. Escape and Cancel close it and return focus to Run migration. Cancel is the focus target through initialFocus. The copy shown on load moves no focus; Escape inside it, Cancel and Run anyway close it the same way.

A confirm that does something risky uses the catalog Button in its destructive variant, and the block has no Shine Button: the Shine Button is the one primary for actions that move something forward, and this one is a deliberate exception. The destructive colour is on that button only. The caution tile, the track and the lines stay in the theme's neutral tones, so the warning doesn't depend on seeing red.