APPEALS-36292: Conditionally render banner alerts based on which envi…

…ronment it is deployed on (#21367)

* Conditionally render alerts based on which environment is deployed

* setting Env alert banner sitewide

* separate colors for different envs using the same alert type

* lighter reds for prodtest alert so the text is more readable

* give demo banner more contrast

* adjust specific language for demo env

* adjust logic to accept proper env var. Add style for preprod (yellow)

* isolate env alert styles

* remove duplicate 'demo' Alert

* remove development env banner to fix tests

* making conditional logic a little more bulletproof against 'production'

* update CaseWorkerIndex snapshot

* fix env var

* update snapshot from hard 'uat' setting

* conditionally render env alert on only the home page

* sticky env header statuses

* getting development alert banners to work

* target correct frontend dependency for NavigationBar changes

* connecting new frontend package with better prod exclusion logic

* make the prodtest env badge a more readable color

* cleaning up testing code

* fix linting issues

* Remove unnecessary space

* new NavigationBar update

* yarn install of new FE dependency

* remove extra package.json

* remove development env logic due to NODE_ENV bug

* fixing broken logo link padding and colors

* hardening logic to exclude other inputs

* correcting operator logic

* remove testing var

* point caseflow-frontend to master

* point at most recent caseflow-frontend master

* linting issues fix

* update Route and CaseWorker snapshot

* update snapshot for process.env.DEPLOY_ENV

---------

Co-authored-by: Craig Reese <109101548+craigrva@users.noreply.github.com>

client/app/components/Alert.jsx

@@ -21,11 +21,14 @@ export default class Alert extends React.Component {
 
     const typeClass = `usa-alert-${type}`;
 
-    const className = classnames('usa-alert', typeClass, {
-      'usa-alert-slim': !title,
-      fixed,
-      'cf-margin-bottom-2rem': lowerMargin,
-    });
+    const className = classnames('usa-alert',
+      typeClass,
+      {
+        'usa-alert-slim': !title,
+        fixed,
+        'cf-margin-bottom-2rem': lowerMargin,
+      },
+    );
 
     return (
       <div role="alert" className={className} {...styling}>

client/app/components/AppFrame.jsx

@@ -1,10 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Route } from 'react-router-dom';
 import getAppWidthStyling from
   '@department-of-veterans-affairs/caseflow-frontend-toolkit/components/util/getAppWidthStyling';
+import classnames from 'classnames';
+
+import Alert from './Alert';
+
+// eslint-disable-next-line no-process-env
+const env = process.env.DEPLOY_ENV;
+
+const className = classnames(
+  {
+    'no-env-alert': env !== 'prodtest' && env !== 'preprod' && env !== 'uat' && env !== 'demo',
+    'preprod-env-alert': env !== 'prod' && env === 'preprod',
+    'prodtest-env-alert': env !== 'prod' && env === 'prodtest',
+    'uat-env-alert': env !== 'prod' && env === 'uat',
+    'demo-env-alert': env !== 'prod' && env === 'demo',
+  },
+);
 
 const AppFrame = ({ children, wideApp }) =>
   <main {...getAppWidthStyling(wideApp)} role="main" id="Main">
+    <Route
+      exact
+      path="/"
+      title="Caseflow | Home"
+      component={() =>
+      // eslint-disable-next-line no-undefined
+        (env !== 'prod' && env !== 'production' && env !== undefined) &&
+      (<div className={className}>
+        <Alert type="warning">This is the {env} environment!</Alert>
+      </div>)
+      } />
     {children}
   </main>;
 

client/app/styles/_main.scss

@@ -116,6 +116,12 @@ body {
 }
 
 // Used for Caseflow app header rendered in React
+nav {
+  &.cf-push-left p a {
+    color: $color-gray-dark;
+  }
+}
+
 .cf-wide-app {
   .usa-grid {
     padding-left: 0;

client/app/styles/react/_alerts.scss

@@ -1,3 +1,94 @@
+.no-env-color {
+  display: none;
+}
+
+.prodtest-env-color {
+  color: $color-black-light;
+}
+
+.preprod-env-color {
+  color: $color-secondary;
+}
+
+.uat-env-color {
+  color: $color-primary-alt;
+}
+
+.demo-env-color {
+  color: $color-green-light;
+}
+
+.no-env-alert {
+  .usa-alert {
+    display: none;
+  }
+}
+
+.prodtest-env-alert {
+
+  .usa-alert {
+    background-color: $color-gold-lightest;
+    border-left: 5px solid $color-gold-lighter;
+    background-image: url('/images/warning-429d7a1540c2e7d036805bb73a0ba690.png');
+
+    .usa-alert-text {
+      padding-left: 1.5rem;
+    }
+
+    &::before {
+      background-color: $color-gold-lightest;
+    }
+  }
+}
+
+.preprod-env-alert {
+
+  .usa-alert {
+    background-color: $color-secondary-lightest;
+    border-left: 5px solid $color-secondary-light;
+    background-image: url('/images/warning-429d7a1540c2e7d036805bb73a0ba690.png');
+
+    .usa-alert-text {
+      padding-left: 1.5rem;
+    }
+
+    &::before {
+      background-color: $color-secondary-lightest;
+    }
+  }
+}
+
+.uat-env-alert {
+  .usa-alert {
+    background-color: $color-primary-alt-lightest;
+    border-left: 5px solid $color-primary-alt-light;
+    background-image: url('/images/warning-429d7a1540c2e7d036805bb73a0ba690.png');
+
+    .usa-alert-text {
+      padding-left: 1.5rem;
+    }
+
+    &::before {
+      background-color: $color-primary-alt-lightest;
+    }
+  }
+}
+
+.demo-env-alert {
+  .usa-alert {
+    background-color: $color-green-lightest;
+    border-left: 5px solid $color-green-lighter;
+    background-image: url('/images/warning-429d7a1540c2e7d036805bb73a0ba690.png');
+
+    .usa-alert-text {
+      padding-left: 1.5rem;
+    }
+
+    &::before {
+      background-color: $color-green-lightest;
+    }
+  }
+}
 
 .usa-alert {
 
@@ -14,6 +105,7 @@
   &.usa-alert-slim {
     background-size: 4rem;
 
+
     .usa-alert-body {
       padding-left: 3.5rem;
     }

client/package.json

@@ -60,7 +60,7 @@
     "@babel/preset-react": "^7.12.7",
     "@babel/register": "^7.12.1",
     "@babel/runtime-corejs2": "^7.12.5",
-    "@department-of-veterans-affairs/caseflow-frontend-toolkit": "https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#a98b291",
+    "@department-of-veterans-affairs/caseflow-frontend-toolkit": "https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#fa44cf3e",
     "@fortawesome/fontawesome-free": "^5.3.1",
     "@hookform/resolvers": "^2.0.0-beta.5",
     "@reduxjs/toolkit": "^1.9.7",

client/test/app/containers/CaseWorker/__snapshots__/CaseWorkerIndex.test.js.snap

@@ -4,21 +4,21 @@ exports[`CaseWorkerIndex renders correctly 1`] = `
 <div>
   <div>
     <header
-      data-css-uo1yys=""
+      style="background: rgb(255, 255, 255); line-height: 4em;"
     >
       <div>
         <div
           data-css-pw7rlt=""
         >
           <nav
             class="cf-push-left"
-            data-css-1vh8afw=""
+            style="display: flex; align-items: center; line-height: 4em;"
           >
             <a
               href="/dispatch/establish-claim/"
             >
               <p
-                data-css-14vgq4z=""
+                style="margin: 0px; display: inline-block; font-size: 1.7rem; font-weight: 900; line-height: 4em;"
               >
                 <a
                   href="/dispatch/establish-claim/"
@@ -59,6 +59,7 @@ exports[`CaseWorkerIndex renders correctly 1`] = `
                     class="cf-application-title"
                     data-css-1mdtwij=""
                     id="page-title"
+                    style="padding-left: .3em;"
                     tabindex="-1"
                   >
                     Dispatch
@@ -93,7 +94,7 @@ exports[`CaseWorkerIndex renders correctly 1`] = `
         </div>
       </div>
       <div
-        data-css-1tukvsd=""
+        style="border-bottom: 1px solid #d6d7d9; clear: both;"
       >
          
       </div>

client/yarn.lock

@@ -2529,9 +2529,9 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@department-of-veterans-affairs/caseflow-frontend-toolkit@https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#a98b291":
+"@department-of-veterans-affairs/caseflow-frontend-toolkit@https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#fa44cf3e":
   version "2.6.1"
-  resolved "https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#a98b29188aaf2d85f7af749eda95cc02ed1282d2"
+  resolved "https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#fa44cf3e009280d39275f16150990f8749b4818a"
   dependencies:
     classnames "^2.2.5"
     glamor "^2.20.40"