status-im/spiff-arena
2
0
Fork 0
mirror of https://github.com/status-im/spiff-arena.git synced 2025-01-20 06:58:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jasquat 2023-02-17 14:35:13 -05:00
parent 2cf38abedc
commit 651ffc711a
No known key found for this signature in database
3 changed files with 46 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
spiffworkflow-frontend/src/components/NavigationBar.tsx
View File

@ -25,6 +25,7 @@ import { useUriListForPermissions } from '../hooks/UriListForPermissions';
import { PermissionsToCheck } from '../interfaces'; import { PermissionsToCheck } from '../interfaces';
import { usePermissionFetcher } from '../hooks/PermissionService'; import { usePermissionFetcher } from '../hooks/PermissionService';
import { UnauthenticatedError } from '../services/HttpService'; import { UnauthenticatedError } from '../services/HttpService';
import { SPIFF_ENVIRONMENT } from '../config';
// for ref: https://react-bootstrap.github.io/components/navbar/ // for ref: https://react-bootstrap.github.io/components/navbar/
export default function NavigationBar() { export default function NavigationBar() {
@ -80,7 +81,12 @@ export default function NavigationBar() {
if (UserService.isLoggedIn()) { if (UserService.isLoggedIn()) {
return ( 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()} {UserService.getPreferredUsername()}
</HeaderGlobalAction> </HeaderGlobalAction>
<HeaderGlobalAction <HeaderGlobalAction

29
spiffworkflow-frontend/src/config.tsx
View File

@ -10,12 +10,15 @@ declare global {
} }
} }
let spiffEnvironment = '';
let appRoutingStrategy = 'subdomain_based'; let appRoutingStrategy = 'subdomain_based';
if ( if ('spiffworkflowFrontendJsenv' in window) {
'spiffworkflowFrontendJsenv' in window && if ('APP_ROUTING_STRATEGY' in window.spiffworkflowFrontendJsenv) {
'APP_ROUTING_STRATEGY' in window.spiffworkflowFrontendJsenv appRoutingStrategy = window.spiffworkflowFrontendJsenv.APP_ROUTING_STRATEGY;
) { }
appRoutingStrategy = window.spiffworkflowFrontendJsenv.APP_ROUTING_STRATEGY; if ('ENVIRONMENT_IDENTIFIER' in window.spiffworkflowFrontendJsenv) {
spiffEnvironment = window.spiffworkflowFrontendJsenv.ENVIRONMENT_IDENTIFIER;
}
} }
let hostAndPortAndPathPrefix; let hostAndPortAndPathPrefix;
@ -34,6 +37,20 @@ if (/^\d+\./.test(hostname) || hostname === 'localhost') {
} }
hostAndPortAndPathPrefix = `${hostname}:${serverPort}`; hostAndPortAndPathPrefix = `${hostname}:${serverPort}`;
protocol = 'http'; 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`; 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 TIME_FORMAT_HOURS_MINUTES = 'HH:mm';
export const DATE_FORMAT = 'yyyy-MM-dd'; export const DATE_FORMAT = 'yyyy-MM-dd';
export const DATE_FORMAT_CARBON = 'Y-m-d'; export const DATE_FORMAT_CARBON = 'Y-m-d';
export const SPIFF_ENVIRONMENT = spiffEnvironment;

15
spiffworkflow-frontend/src/index.css
View File

@ -14,6 +14,21 @@
width: 5rem; 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 { h1 {
font-weight: 400; font-weight: 400;
font-size: 28px; font-size: 28px;