Add discreet build version indicator to top bar

- Added BuildVersion component with timestamp, version, and commit info
- Displays in top-right corner with subtle styling
- Shows 'dev • timestamp' in development mode
- Shows 'v1.0.0 • commit • timestamp' in production
- Updated Dockerfile to inject build args (version, timestamp, commit SHA)
- Updated GitHub Actions to pass build metadata to Docker
- Helps identify when new deployments are live

Author: mbertelsen

.github/workflows/deploy-azure-publishprofile.yml

@@ -58,6 +58,10 @@ jobs:
         push: true
         tags: ${{ steps.meta.outputs.tags }}
         labels: ${{ steps.meta.outputs.labels }}
+        build-args: |
+          REACT_APP_VERSION=1.0.0
+          REACT_APP_BUILD_TIME=${{ github.event.head_commit.timestamp }}
+          REACT_APP_COMMIT_SHA=${{ github.sha }}
         cache-from: type=gha
         cache-to: type=gha,mode=max
         platforms: linux/amd64,linux/arm64

.github/workflows/docker-build.yml

@@ -2,6 +2,16 @@
 FROM node:18-alpine AS build
 WORKDIR /app
 
+# Build arguments for version info
+ARG REACT_APP_VERSION=1.0.0
+ARG REACT_APP_BUILD_TIME
+ARG REACT_APP_COMMIT_SHA
+
+# Set environment variables for the build
+ENV REACT_APP_VERSION=$REACT_APP_VERSION
+ENV REACT_APP_BUILD_TIME=$REACT_APP_BUILD_TIME
+ENV REACT_APP_COMMIT_SHA=$REACT_APP_COMMIT_SHA
+
 # Copy package files first for better Docker layer caching
 COPY package.json package-lock.json ./
 
@@ -12,7 +22,7 @@ RUN npm pkg delete devDependencies.@rollup/rollup-win32-x64-msvc && \
 # Copy source code
 COPY . .
 
-# Build the application
+# Build the application with version info
 RUN npm run build
 
 # Production stage

editor/Dockerfile

@@ -0,0 +1,16 @@
+import React from 'react';
+import { getBuildInfo, formatBuildInfo } from '../utils/buildInfo';
+
+export const BuildVersion: React.FC = () => {
+  const buildInfo = getBuildInfo();
+  const buildText = formatBuildInfo(buildInfo);
+
+  return (
+    <div 
+      className="build-version" 
+      title={`Build: ${buildText}`}
+    >
+      {buildText}
+    </div>
+  );
+};

editor/src/components/BuildVersion.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { FacilitySelectorPortal } from './FacilitySelectorPortal';
+import { BuildVersion } from './BuildVersion';
 
 interface Facility {
   id: string;
@@ -48,7 +49,7 @@ export const TopBar: React.FC<TopBarProps> = ({
           </div>
         </div>
         <div className="top-bar-right">
-          {/* Additional controls can go here */}
+          <BuildVersion />
         </div>
       </div>
     </div>

editor/src/components/TopBar.tsx

@@ -1007,3 +1007,23 @@ pre::-webkit-scrollbar-thumb:hover { background:#c2ccd5; }
   font-size: 14px;
 }
 
+/* Build Version Indicator */
+.build-version {
+  font-size: 11px;
+  color: #999;
+  font-family: 'Courier New', Consolas, monospace;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: default;
+  opacity: 0.8;
+  padding: 3px 8px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: opacity 0.2s ease;
+}
+
+.build-version:hover {
+  opacity: 1;
+}
+

editor/src/treeview.css

@@ -0,0 +1,37 @@
+// Build information utility
+export interface BuildInfo {
+  version: string;
+  timestamp: string;
+  commit?: string;
+}
+
+export const getBuildInfo = (): BuildInfo => {
+  // In development, use current timestamp
+  if (import.meta.env.DEV) {
+    return {
+      version: 'dev',
+      timestamp: new Date().toISOString().slice(0, 16).replace('T', ' '),
+    };
+  }
+
+  // In production, these will be replaced by build process
+  return {
+    version: process.env.REACT_APP_VERSION || 'unknown',
+    timestamp: process.env.REACT_APP_BUILD_TIME || new Date().toISOString().slice(0, 16).replace('T', ' '),
+    commit: process.env.REACT_APP_COMMIT_SHA?.slice(0, 7) || undefined,
+  };
+};
+
+export const formatBuildInfo = (buildInfo: BuildInfo): string => {
+  const { version, timestamp, commit } = buildInfo;
+  
+  if (version === 'dev') {
+    return `dev • ${timestamp}`;
+  }
+  
+  if (commit) {
+    return `v${version} • ${commit} • ${timestamp}`;
+  }
+  
+  return `v${version} • ${timestamp}`;
+};