Environment Variable Updated Success Block for React

Nothing was saved or redeployed. The variables, their scopes and the sample values are typed constants at the top of the file, and Redeploy now only closes the dialog, sets the badge on the drawn page and says so in the status line. To wire it, build CHANGES from the difference between the saved and the submitted variables, call your deploy API from the Redeploy now handler, and show a failure in the status line. Send the real values to the browser only when the person asks to reveal them, never in the page's first payload.

So a gallery cell and the viewer show the open state. On load the dialog is a native dialog drawn open in place over the stage, wearing the alert dialog's own classes, so nothing is trapped, hidden or focused. Its Later button, Escape while focus is inside the stage and the real dialog's Escape all mean the same thing: the dialog closes, the redeploy is skipped and focus returns to View changes. View changes then opens the real alert dialog with its focus trap. In your app keep the AlertDialog, drop the in-place copy and the state that draws it.

Every value is masked with dots and a screen reader hears that it is hidden. Reveal values is a toggle button (it keeps its label and says it is pressed) that swaps the dots for typed sample values, such as sample-old-41 and sample-new-77, and changes the line under the list to "These are typed samples, not real secrets." Closing the dialog masks them again. Rows keep their height whichever way they show, so nothing moves.

Each row starts with a glyph in a small tile and says its word first (Added, Changed, Removed), then the variable's name in a mono chip, then its values: "Value" for an added variable, "Was … , now …" for a changed one and "Was …" for a removed one. State is never a colour, so it reads the same in every theme and to someone who can't tell colours apart. The title counts them from the list ("3 variables saved to Production and Preview").

Focus starts on Later, the safe answer, not on Redeploy now. A click outside does not close an alert dialog, and Escape means Later. After a choice focus goes back to View changes, and the result is spoken from the polite status line a moment after the dialog has gone, because the page is hidden from assistive technology while it is open.

The in-place dialog docks to the foot of the stage with its footer pinned, the buttons stacked with Redeploy now on top, and the list scrolls if the stage is short. The real dialog uses the catalog's own phone layout.