Environment Config Diff Changelog Block for React

Edit GROUPS at the top of the file. A setting is a key, its staging and production values and, for a secret, secret set so the values are treated as fingerprints. Two values that are equal read "Match"; anything else is a mismatch. The headline count, the switch's results and the line under the table are computed from the list.

They are never shown. A secret's cell draws eight dots and a short fingerprint ("fp 3a9c"), and screen readers hear "Hidden value, fingerprint 3a9c". Two secrets match when their fingerprints do, which is all a diff needs. Put fingerprints, never values, in the data.

"Mismatches only" hides the matching rows and any group that ends up empty; a polite line under the table says how many rows show. The table sits in a scroll region of fixed height, so the block never changes size when you flip the switch.

Yes: a native table with a caption, scope on every header, the key as the row header and group names as row-group headers. The scroll region has a name and takes focus, so the keyboard can reach rows past the bottom edge.

Below md the Staging and Production columns are replaced by two lines under the key, so a row keeps its key, both values and its result without scrolling sideways. In a right-to-left layout the table mirrors while keys, values and counts keep their reading order.

The header and the frame fade up once on load, with CSS transitions. With reduced motion they are off. Flipping the switch changes the rows at once.