From 651ffc711ac63cb331f3bafefa6eac201ed39377 Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Fri, 17 Feb 2023 14:35:13 -0500
Subject: [PATCH] added ability to display the environment in the frontend
 header bar w/ burnettk

---
 .../src/components/NavigationBar.tsx          |  8 ++++-
 spiffworkflow-frontend/src/config.tsx         | 29 +++++++++++++++----
 spiffworkflow-frontend/src/index.css          | 15 ++++++++++
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx
index e482ae52..b1ed09a4 100644
--- a/spiffworkflow-frontend/src/components/NavigationBar.tsx
+++ b/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
diff --git a/spiffworkflow-frontend/src/config.tsx b/spiffworkflow-frontend/src/config.tsx
index e38ab19d..6d0c47c4 100644
--- a/spiffworkflow-frontend/src/config.tsx
+++ b/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;
diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css
index a8ac90cd..411766b3 100644
--- a/spiffworkflow-frontend/src/index.css
+++ b/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;