feat(ui): add environment badge to header for non-production deployments

Author: magkue

client/.env.example

@@ -3,6 +3,7 @@ VITE_KEYCLOAK_URL=http://localhost:8080
 VITE_KEYCLOAK_REALM=master
 VITE_KEYCLOAK_CLIENT_ID=request-client
 VITE_ADMIN_ROLE=admin
+VITE_ENVIRONMENT=development
 
 # API Configuration
 VITE_API_BASE_URL=http://localhost:3000/api

client/src/components/layout/Header.tsx

@@ -8,7 +8,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
-import { APP_NAME } from "@/config/app";
+import { APP_ENVIRONMENT, APP_NAME } from "@/config/app";
 import { useAuth } from "@/hooks/useAuth";
 
 export function Header() {
@@ -21,6 +21,11 @@ export function Header() {
         <Link to="/" className="flex items-center gap-2">
           <img src={AETLogo} alt="AET Logo" className="h-8" />
           <span className="font-semibold">{APP_NAME}</span>
+          {APP_ENVIRONMENT !== "production" && (
+            <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
+              {APP_ENVIRONMENT}
+            </span>
+          )}
         </Link>
 
         {/* Auth Section */}

client/src/config/app.ts

@@ -4,3 +4,4 @@ export const APP_VERSION = __APP_VERSION__;
 export const APP_NAME = "AET Request";
 export const APP_DESCRIPTION =
   "Request virtual machines, access permissions, and other resources at the Applied Education Technologies research group.";
+export const APP_ENVIRONMENT = import.meta.env.VITE_ENVIRONMENT ?? "production";

client/src/vite-env.d.ts

@@ -9,6 +9,7 @@ type ImportMetaEnv = {
   VITE_KEYCLOAK_REALM: string
   VITE_KEYCLOAK_CLIENT_ID: string
   VITE_ADMIN_ROLE: string
+  VITE_ENVIRONMENT: string
   VITE_OTEL_COLLECTOR_URL: string
   VITE_OTEL_SERVICE_NAME: string
   VITE_OTEL_ENVIRONMENT: string

deploy/helm/aet-request/templates/client-configmap.yaml

@@ -11,3 +11,4 @@ data:
   VITE_KEYCLOAK_REALM: {{ .Values.client.config.VITE_KEYCLOAK_REALM | quote }}
   VITE_KEYCLOAK_CLIENT_ID: {{ .Values.client.config.VITE_KEYCLOAK_CLIENT_ID | quote }}
   VITE_ADMIN_ROLE: {{ .Values.client.config.VITE_ADMIN_ROLE | quote }}
+  VITE_ENVIRONMENT: {{ .Values.client.config.VITE_ENVIRONMENT | quote }}

deploy/helm/aet-request/values.yaml

@@ -34,6 +34,7 @@ client:
     VITE_KEYCLOAK_REALM: ""
     VITE_KEYCLOAK_CLIENT_ID: ""
     VITE_ADMIN_ROLE: admin
+    VITE_ENVIRONMENT: production
 
 server:
   replicaCount: 2