Environment Variables Settings Block for React

Edit VARIABLES at the top: each has an id, its name, whether it is a secret, and a value for each environment (empty when it is missing there). ENVIRONMENTS lists the columns and SOURCES is the order "Copy from" looks in. The strip's counts, the sentence in the heading, the label on each Copy from button and the import summary are all worked out from the data, so nothing is typed twice. The values here are fictional; your API should send back only whether a secret is set, not the secret.

Each line is trimmed, a leading export is dropped, blank lines and lines starting with # are ignored, and the text before the first = is the name and the rest the value, without its quotes or a trailing comment on an unquoted value. A name must start with a letter or an underscore and use only letters, digits and underscores. For the chosen environment a name that isn't set there is an add, one that is set to a different value is an update, and a repeated name, an unchanged value, an invalid name or a line with no equals sign is skipped, with the line number and the reason under the summary. Nothing changes until you press Import.

Everything. Copy from, Import and the reveal toggles only change this page's state, and the status line says what happened; no value is sent or stored, and nothing is read from a file. To make it real, send the import's entries to your API in the submit handler and refresh the list from its answer, and keep the reveal behind a request so a secret's value only leaves the server when someone asks for it. A name new to the table shows as missing in the other environments, which is the point of the strip.

It fills the missing cell with the value from the first environment that has one, looking at Preview, then Production, then Development, and the button is named for what it does ("Copy from Preview for MAILER_API_KEY in Production"). The cell then shows Set and the focus moves to its reveal toggle, so the keyboard doesn't lose its place, and the strip and the heading update. Every cell keeps the same height whether it is set or missing, so nothing moves when you fill one in.

Below the medium breakpoint the table becomes a card per variable with one line per environment, the paste band and the foot stack, and the Import button is pinned to the bottom of the screen. The table is native, with a caption, column headers and the variable's name as each row's header; the reveal toggles are buttons that report whether the value is shown, and the status line is a polite live region present from the start. Set and Missing are shown with a filled and a hollow dot as well as the word, never by colour alone.