added ability to display the environment in the frontend header bar w/ burnettk

spiffworkflow-frontend/src/components/NavigationBar.tsx

@@ -25,6 +25,7 @@ import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 import { PermissionsToCheck } from '../interfaces';
 import { usePermissionFetcher } from '../hooks/PermissionService';
 import { UnauthenticatedError } from '../services/HttpService';
+import { SPIFF_ENVIRONMENT } from '../config';
 
 // for ref: https://react-bootstrap.github.io/components/navbar/
 export default function NavigationBar() {
@@ -80,7 +81,12 @@ export default function NavigationBar() {
     if (UserService.isLoggedIn()) {
       return (
         <>
-          <HeaderGlobalAction className="username-header-text">
+          {SPIFF_ENVIRONMENT ? (
+            <HeaderGlobalAction className="spiff-environment-header-text unclickable-text">
+              {SPIFF_ENVIRONMENT}
+            </HeaderGlobalAction>
+          ) : null}
+          <HeaderGlobalAction className="username-header-text unclickable-text">
             {UserService.getPreferredUsername()}
           </HeaderGlobalAction>
           <HeaderGlobalAction

spiffworkflow-frontend/src/config.tsx

@@ -10,12 +10,15 @@ declare global {
   }
 }
 
+let spiffEnvironment = '';
 let appRoutingStrategy = 'subdomain_based';
-if (
-  'spiffworkflowFrontendJsenv' in window &&
-  'APP_ROUTING_STRATEGY' in window.spiffworkflowFrontendJsenv
-) {
-  appRoutingStrategy = window.spiffworkflowFrontendJsenv.APP_ROUTING_STRATEGY;
+if ('spiffworkflowFrontendJsenv' in window) {
+  if ('APP_ROUTING_STRATEGY' in window.spiffworkflowFrontendJsenv) {
+    appRoutingStrategy = window.spiffworkflowFrontendJsenv.APP_ROUTING_STRATEGY;
+  }
+  if ('ENVIRONMENT_IDENTIFIER' in window.spiffworkflowFrontendJsenv) {
+    spiffEnvironment = window.spiffworkflowFrontendJsenv.ENVIRONMENT_IDENTIFIER;
+  }
 }
 
 let hostAndPortAndPathPrefix;
@@ -34,6 +37,20 @@ if (/^\d+\./.test(hostname) || hostname === 'localhost') {
   }
   hostAndPortAndPathPrefix = `${hostname}:${serverPort}`;
   protocol = 'http';
+
+  if (spiffEnvironment === '') {
+    // using destructuring on an array where we only want the first element
+    // seems super confusing for non-javascript devs to read so let's NOT do that.
+    // eslint-disable-next-line prefer-destructuring
+    spiffEnvironment = hostname.split('.')[0];
+  }
+}
+
+if (
+  'spiffworkflowFrontendJsenv' in window &&
+  'APP_ROUTING_STRATEGY' in window.spiffworkflowFrontendJsenv
+) {
+  appRoutingStrategy = window.spiffworkflowFrontendJsenv.APP_ROUTING_STRATEGY;
 }
 
 let url = `${protocol}://${hostAndPortAndPathPrefix}/v1.0`;
@@ -62,3 +79,5 @@ export const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 export const TIME_FORMAT_HOURS_MINUTES = 'HH:mm';
 export const DATE_FORMAT = 'yyyy-MM-dd';
 export const DATE_FORMAT_CARBON = 'Y-m-d';
+
+export const SPIFF_ENVIRONMENT = spiffEnvironment;

spiffworkflow-frontend/src/index.css

@@ -14,6 +14,21 @@
   width: 5rem;
 }
 
+.cds--header__action.spiff-environment-header-text {
+  width: 5rem;
+  color: #126d82;
+}
+
+.cds--header__action.unclickable-text:hover {
+  background-color: #161616;
+  cursor: default;
+}
+.cds--header__action.unclickable-text:focus {
+  border: none;
+  box-shadow: none;
+  border-color: none;
+}
+
 h1 {
   font-weight: 400;
   font-size: 28px;