Schema Migrated Success Block for React

Nothing ran and nothing is rolled back. The three migrations, their times and rows are typed sample data, and the rollback only changes the ledger on the page. To wire it, fill MIGRATIONS from your migration table (id, name, the statements as added or removed lines, milliseconds and rows) and run the rollback in confirm; the figures, the sentence and every count are worked out from the migrations that are applied.

One migration is open at a time and one is always open, so the panel keeps its height (every panel has the same minimum height and holds up to three statements). Tab moves between the migration rows; the arrow keys do not. The open migration shows when it ran, how long it took and how many rows it touched, then its statements.

Each line starts with a plus (added) or a minus (removed) as a character, never a colour, and is read out as Added or Removed. The box scrolls sideways when a statement is long and takes focus with the keyboard, and it stays left to right in a right-to-left page.

It opens an alert dialog that says what the rollback would drop (the locale column and its values) and keeps 0041 and 0042. Cancel comes first and has the focus; Escape also closes it. The action is red because the values would be lost. Confirming marks 0043 as Rolled back and takes it out of the figures (2 of 3 applied); Apply 0043 again, beside it, then puts it back at once, and while it is rolled back Roll back stays in place and answers in words if pressed. Nothing is changed in any database.

The count of applied migrations, the total time (5.1 s from 38 ms, 112 ms and 4.9 s) and the rows touched (16,286), all summed from the ledger and recomputed when a migration is rolled back.

View the diff is the Shine Button in the header. It is a link to your own route. It is a Shine Button with render set to an a element and nativeButton={false}.