shadcn.io is not affiliated with official shadcn/ui
Schema Migrated Success Block for Radix UI
A confirmation panel for three database migrations: figures worked out from the ledger, an accordion of the migrations with their SQL as plus and minus lines, and a Roll back button that asks in an alert dialog before it changes the ledger.
Installation
Overview
Show what a migration changed with this confirmation panel for React with Radix UI. It is the panel Schemaloom, database tooling, shows after three migrations ran: a header with one action, the Shine Button that opens the diff, over one framed card in three bands. The first is three figures on shared hairlines (migrations, time, rows touched). The second is the ledger, an Accordion with one migration open at a time, each opening onto its statements as plus and minus lines in monospace. The foot has a live line, a Roll back button that asks in an Alert Dialog first and an Apply again button that undoes it. For database tooling, schema changes and any change you may have to undo.
FAQ
What stays in the page, and how do I wire it for real?
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.
How does the ledger behave?
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). The arrow keys move between the migration rows. The open migration shows when it ran, how long it took and how many rows it touched, then its statements.
How are the statements shown?
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.
What does Roll back 0043 do?
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.
Which numbers are worked out?
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.
Where does the link go?
View the diff is the Shine Button in the header. It is a link to your own route. It is a Shine Button with asChild around an a element.