shadcn.io is not affiliated with official shadcn/ui
Schema Migration Command Menu Block for Ark UI
A schema migration tool's command menu shown open over the Migrations dashboard: pending and applied migrations with a SQL pane, a dry run on the first Enter, an apply on the second, and a confirmed rollback of the newest.
Installation
Overview
Dry-run and apply schema changes in order with this migration command menu for React with Ark UI. It opens from the Migrations dashboard in Schemaline, a schema migration tool, whose header holds an outline field with its ⌘ K cap, and the dashboard is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command beside a pane: Pending migrations first and Applied ones under them, each with its version and name, and the pane follows the highlighted row and shows its SQL with the catalog SyntaxText and a result line. Enter on a pending migration runs a dry run, such as 2 statements, 0 locks, 14 ms, and Enter again applies it in order, moving the row to Applied and updating the dashboard behind the menu. Enter on the newest applied migration turns the pane into a confirm with a destructive Roll back. On a phone the pane sits under the list. For the preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same migrations. For database tools, deploy pipelines and any change you want to rehearse first.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of the Migrations dashboard, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a dry run or an apply in the copy is still there in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
Why can't I apply a migration out of order?
Migrations run in version order, so only the first pending one can be applied. A dry run is allowed on any pending migration, since it changes nothing, but the second Enter on a later one says which migration to apply first. A dry run's result is typed per migration, statements, locks and milliseconds, so the same migration always gives the same line.
How does the rollback confirm work?
Enter on the newest applied migration swaps the pane's script for a confirm: the statement that would run, a Keep it button, which takes focus, and a destructive Roll back button. Keep it, or Escape, goes back to the list with focus in the field and the menu still open; Roll back puts the migration back in Pending. Any older applied migration says that only the newest can be rolled back.
How does the pane follow the highlight?
Through the library's own highlight event, so the pane is a function of one value. The combobox reports its highlighted item. The pane has a fixed height, so moving the highlight never moves the list.
What stays local, and how do I wire it?
All of it. The migrations, the SQL and the results are typed data and no database is touched; the status line says so. In your app run the dry run and the apply through your migration runner from pick, show its real output in the result line, and keep the order rule and the confirm.
Is it accessible from the keyboard?
Type to filter by version or name, the arrow keys move through the rows, Enter dry-runs, applies or opens the roll-back confirm, and Escape leaves the confirm first and then closes the menu with focus back on the header's field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.