shadcn.io is not affiliated with official shadcn/ui
Environment Config CRUD Block for Vue
A deploy tool's variables compared between two environments: pick a source and a target, edit values in place, tick the ones marked New or Changed and promote them with one button, with every change undoable from the foot.
Installation
Overview
Move variables from one environment to the next without copying them by hand, with this environment config for Vue with Ark UI. A hairline frame with a plus mark on each corner opens with a band of two Native Selects, From and To, for Development, Staging and Production (picking the target as the source swaps them). Below it, the source's variables fill a native table in a frame of fixed height: a Checkbox to tick, the key in mono, the value as an Editable that edits where it sits, and a word against the target, New, Changed or Same. A Same row has no checkbox, only a dash and its reason. Add a variable opens a draft row at the head with a key in UPPER_SNAKE that must be unique in the source. Tick all that differ selects every New and Changed row. The panel closes with the one primary, a Shine Button such as Promote 3 variables, which copies the ticked rows into the target, adding the new ones and overwriting the changed ones, and the foot says what happened beside an Undo. All values are fake and plain; nothing is deployed. For deploy tools, release pipelines and configuration dashboards.
FAQ
How do I fill it with my variables?
Edit VARS. Each has an id, an env (development, staging or production), a key and a value. The word against the target is derived by looking the key up in the target environment, so New, Changed and Same, the count of rows that differ and the promote label always agree with the data.
What exactly does Promote do?
For every ticked row it either adds the key to the target (when the target has no such key) or overwrites the target's value (when the key exists with another value). The polite line reads, for example, 2 added, 1 overwritten in Production, in this demo, and Undo restores every environment as it was. Rows that are Same cannot be ticked, so nothing is overwritten with an equal value.
Are secrets masked here?
No: this block is about comparing and copying plain configuration, with obviously fake values. For secrets, keep values out of the table and show a fingerprint instead, as the environment variables check does; never put a real secret in a table that edits in place.
What is checked when I edit or add a variable?
A value cannot be empty and stops at 80 characters; a key must be UPPER_SNAKE_CASE and not already exist in the source environment. A refused edit keeps the saved value and says why under the field and in the polite line. Changing the source or the target clears the ticks, so a promotion never carries rows from another comparison.