shadcn.io is not affiliated with official shadcn/ui
Deployment History Table Block for React Aria
A deploy history in the catalog table where a staging build that passed can be promoted to production through an alert dialog, with the reason shown under the button when it cannot, and a new Production row at the top.
Installation
Overview
Promote a good build without promoting the wrong one, with this deployment history table for React with React Aria. The catalog Table lists the deploys of a service from a deploy platform: message, commit, time, environment, build time and result. A Promote button sits on every staging row, and where it cannot act it stays in place, disabled, with the reason under it: "Build failed", "Already in production" or "Older than production". On a build that can go, pressing it opens an Alert Dialog that names the commit and the build it will replace; confirming puts a new Production row at the top marked Live, turns the build that was live into Superseded, and moves focus to the staging row's own button, which now says why it is disabled. An Environment select over the table shows all deploys, only Staging or only Production in a frame that keeps its height. This is a promotion, not a rollback. It's built from Table, Native Select, Alert Dialog, Button, Badge and Guides. For deploy dashboards, release pipelines and any list where one row can advance another.
FAQ
What decides whether Promote is enabled?
Three checks in reasonOf: the build must not have failed, its commit must not be the one already live in production, and it must not be older than the live build. Anything else is ready. The disabled button uses aria-disabled, so it stays focusable and a press answers in the status line, and its reason is the button's description.
What does confirming do?
It adds a Production row for the same commit, stamped with the page's fixed "now", marks the previous live build Superseded and says so in the polite line, along with "Nothing was deployed." Escape and Cancel close the dialog, and focus returns to the row's Promote button whichever way it closes.
Why does the table sit in a scroll frame?
So the filter and the promotion never change the block's height: the frame keeps one height whether nine rows show, three or ten after a promotion, and the rows scroll inside it.
Is it accessible?
Each button is named by its commit ("Promote e9d35b7 to production") and described by its reason. Results are a word with a dot or an icon, never colour alone, and the table has a caption. React Aria renders this catalog table as a grid, so arrow keys move between cells and the first column is its row header.
How does it look on a phone?
The Environment and Duration columns go, and the result badge, environment and build time fold under the message, so each row keeps its commit, time and the Promote button with its reason.
What stays local, and how do I wire it for real?
The nine deploys are typed in the file and a promotion only changes this page's state; nothing is deployed. To make it real, start the promotion from confirm with your platform's API, show the new row as pending until it answers, and keep the same guard on the server.