Show warning banner in non-prod environments

[saadabdali]

Closes #760 , #912

In this PR

The problem this tries to solve is: "real users keep accidentally hitting the staging URL and being confused about why the data is not there, or why they can no longer log in. let's make it extremely obvious that they're not on the right URL, and easy to go to the right URL."

• We check for an environment variable VITE_ENVIRONMENT_LABEL=PROD, which tells us that our current environment is production.
• If that exists, do nothing.
• If it doesn't exist, display a prominent, un-dismissable banner on every page that says This is a test site and provides a link to production CareConnect.
• If VITE_PRODUCTION_URL_OVERRIDE is set, the link will use the URL provided there. Otherwise it falls back to the primary Production URL https://reset.careconnect.sf.gov/login, hard-coded.

Note that the env vars are build-time for Vite — they must be set when the deploy runs npm run build, not at server runtime.

Deployer instructions (Production)

Set VITE_ENVIRONMENT_LABEL=PROD. This is the only way to hide the banner. Any other value, or omitting it, shows the banner.

Deployer instructions (Dev/Staging/Etc)

Leave VITE_ENVIRONMENT_LABEL unset, or set it to anything except PROD

Developer instructions

If you do nothing, then you will see the yellow banner in your local development and testing.

You may wish to hide the banner locally, to get a more accurate view of what a real user would see.) To do this:

1. In your local client/.env, add: VITE_ENVIRONMENT_LABEL=PROD.
2. Restart your docker container to pick up the env change.

Screenshots

Caveats

• The banner appears on almost every page in the app. I deliberately left out full-screen modals and the full-page camera views. Didn't seem necessary to mess with the layout on those pages.
• Right now this designed as an extremely binary feature. It crudely differentiates between "prod" and "non-prod", and is focused on minimizing confusion for laypeople who accidentally hit a non-prod page. It doesn't show fine distinctions between environments.
• I could have called the flag HIDE_ENVIRONMENT_BANNER (with true/false) instead of asking for a VITE_ENVIRONMENT_LABEL. But in the future it's possible we'd wire additional functionality that's environment-sensitive, or want to respond in a more granular way to the different environments, or make use of the provided label. So I did it this way.

[grahamplace]

You may wish to hide the banner locally, to get a more accurate view of what a real user would see.)
In your local client/.env, add: VITE_ENVIRONMENT_LABEL=PROD.

Personally, I would never want this when running a local dev server, I obviously know it's not prod since I'm actively developing on localhost, and I agree that for dev you want the UI to be as real as possible for layouts/sizes/etc. Setting VITE_ENVIRONMENT_LABEL=PROD in my dev env feels wrong, and could cause future confusion if anyone adds anything else that uses VITE_ENVIRONMENT_LABEL

What if instead the banner can only render if import.meta.env.PROD, i.e. a production build in an environment besides the live prod env? (since that's what we're actually targeting with this banner addition, not developers' local dev servers)

[grahamplace]

Devin review caught this, I confirmed it does cause this issue with the scan modal layout

before:

after:

Devin writeup:

The components/Header.jsx now applies a top offset based on shouldShowEnvironmentBanner, but this is incorrect when the Header is rendered inside a fullscreen Modal (e.g. ScanCodeModal at client/src/components/ScanCodeModal.jsx:150). Inside the modal, the environment banner is hidden behind the overlay, so the offset creates an unintended 40px gap.

Possible approaches:
1. Accept an optional prop (e.g. `disableBannerOffset`) on components/Header.jsx and pass it from ScanCodeModal.
2. Instead of computing the offset inside Header, let callers pass the top value explicitly (or default to 0) so context-aware parents can control it.
3. Use a React context or ref to detect whether the Header is inside a Modal and skip the offset.