issue 1650 add advisory message bar for staging environment

 - add advisory message component and template
 - added advisory message bar to application template
 - updated client environment with getFeatureFlagShowSandboxWarning function setting FEATURE_FLAG_SHOW_SANDBOX_WARNING env var

client/app/adapters/application.js

@@ -11,7 +11,6 @@ export default class ApplicationAdapter extends JSONAPIAdapter {
   session;
 
   get headers() {
-    console.log(this.session);
     if (this.session.isAuthenticated) {
       return {
         Authorization: `Bearer ${this.session.data.authenticated.access_token}`,

client/app/components/advisory-message-bar.js

@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+import { tracked } from '@glimmer/tracking';
+import ENV from 'labs-zap-search/config/environment';
+
+export default class AdvisoryMessageBarComponent extends Component {
+  @tracked
+  showSandboxWarningOn = ENV.featureFlagShowSandboxWarning;
+
+  // @argument
+  message = false;
+}

client/app/components/application.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import config from 'client/config/environment';
+
+export default class ApplicationComponent extends Component {
+  @tracked
+  showSandboxWarningOn = config.featureFlagShowSandboxWarning;
+}

client/app/styles/app.scss

@@ -77,6 +77,7 @@ $completed-color: #a6cee3;
 @import 'modules/_m-project-summary-cards';
 @import 'modules/_m-tooltipster';
 @import 'modules/_m-zap-alerts-contact';
+@import 'modules/_m-advisory-message-bar';
 
 // Media query for project tags in templates/show-project.hbs
 @import 'modules/_m-status_tags_styles';
@@ -85,4 +86,3 @@ $completed-color: #a6cee3;
 // Addons
 @import "ember-power-select";
 @import "ember-content-placeholders";
-

client/app/styles/modules/_m-advisory-message-bar.scss

@@ -0,0 +1,13 @@
+.advisory-message {
+  background-color: #D96B27;
+  padding: 0.25rem 1rem;
+  border: 1px solid rgba(217, 107, 39, 0.25);
+  border-radius: 0;
+  position: relative;
+  text-align: center;
+
+   p {
+    margin: 0;
+    color: #FFFFFF;
+  }
+}

client/app/templates/application.hbs

@@ -1,3 +1,8 @@
+{{#if this.featureFlagShowSandboxWarning}}
+  {{advisory-message-bar message="Sandbox for Testing Purposes"}}
+{{/if}}
+
+
 {{#labs-ui/site-header
   responsiveNav=true
   responsiveSize='large'

client/app/templates/components/advisory-message-bar.hbs

@@ -0,0 +1,5 @@
+<div class="advisory-message">
+  <p>
+    {{this.message}}
+  </p>
+</div>

client/config/environment.js

@@ -2,8 +2,7 @@
 
 const { MIRAGE_SCENARIO } = process.env;
 const NYCID_CLIENT_ID = process.env.NYCID_CLIENT_ID || 'lup-portal-local';
-const NYC_ID_HOST =
-  process.env.NYC_ID_HOST || 'https://accounts-nonprd.nyc.gov/account';
+const NYC_ID_HOST = process.env.NYC_ID_HOST || 'https://accounts-nonprd.nyc.gov/account';
 
 module.exports = function (environment) {
   const ENV = {
@@ -18,6 +17,8 @@ module.exports = function (environment) {
     NYC_ID_HOST,
     maintenanceTimes: getMaintenanceTimes(),
     showAlerts: getFeatureFlagShowAlerts(),
+    featureFlagShowSandboxWarning: getFeatureFlagShowSandboxWarning(),
+
     host: getHost(environment),
     OAUTH_ENDPOINT: `${NYC_ID_HOST}/api/oauth/authorize.htm?response_type=token&client_id=${NYCID_CLIENT_ID}`,
     LUPP_ENABLED: true,
@@ -150,8 +151,7 @@ module.exports = function (environment) {
       enabled: false,
     };
 
-    ENV['mapbox-gl'].map.style =
-      'https://labs-layers-api.herokuapp.com/v1/base/style.json';
+    ENV['mapbox-gl'].map.style = 'https://labs-layers-api.herokuapp.com/v1/base/style.json';
   }
 
   if (environment !== 'production') {
@@ -186,4 +186,8 @@ function getMaintenanceTimes() {
 
 function getFeatureFlagShowAlerts() {
   return process.env.SHOW_ALERTS === 'ON';
-}
+}
+
+function getFeatureFlagShowSandboxWarning() {
+  return process.env.FEATURE_FLAG_SHOW_SANDBOX_WARNING === 'ON';
+}

client/package.json

@@ -118,6 +118,7 @@
     "@turf/circle": "6.0.1",
     "@turf/intersect": "6.1.3",
     "deepmerge": "3.2.0",
+    "ember-cli-dotenv": "2.0.0",
     "jwt-decode": "3.1",
     "nouislider": "13.1.5",
     "numeral": "^2.0.6",

client/yarn.lock

@@ -6928,6 +6928,11 @@ dot-prop@^4.1.0:
   dependencies:
     is-obj "^1.0.0"
 
+dotenv@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
+  integrity sha512-XcaMACOr3JMVcEv0Y/iUM2XaOsATRZ3U1In41/1jjK6vJZ2PZbQ1bzCG8uvaByfaBpl9gqc9QWJovpUGBXLLYQ==
+
 duplexer2@~0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
@@ -7329,6 +7334,15 @@ [email protected]:
     chalk "^2.3.0"
     semver "^5.5.0"
 
+[email protected]:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ember-cli-dotenv/-/ember-cli-dotenv-2.0.0.tgz#2c09fc5f8b60f690c9e02428b4f4e3f0b8c64421"
+  integrity sha512-cDdOlw4dvkTLwoKulbSlOOfKahfaAWpRLWpRl9LZV/CS4HEKEI2iH+hpav8TH98ri/4EWDEINtaNnhYAUL3MXQ==
+  dependencies:
+    dotenv "^4.0.0"
+    ember-cli-babel "^6.6.0"
+    minimist "^1.2.0"
+
 ember-cli-eslint@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/ember-cli-eslint/-/ember-cli-eslint-5.1.0.tgz#acdb9b072911e04b07c313b610f514db4086d21a"

netlify.toml

@@ -5,15 +5,15 @@
   ignore = "false"
 
 [context.develop]
-  environment = { HOST="https://zap-api-staging.herokuapp.com", NYCID_CLIENT_ID="lup-portal-staging", NYC_ID_HOST="https://accounts-nonprd.nyc.gov/account", MAINTENANCE_START='06/01/22 15:00', MAINTENANCE_END='06/01/22 16:00', SHOW_ALERTS='ON' }
+  environment = { HOST="https://zap-api-staging.herokuapp.com", NYCID_CLIENT_ID="lup-portal-staging", NYC_ID_HOST="https://accounts-nonprd.nyc.gov/account", MAINTENANCE_START='06/01/22 15:00', MAINTENANCE_END='06/01/22 16:00', SHOW_ALERTS='ON', FEATURE_FLAG_SHOW_SANDBOX_WARNING=ON }
 
 [context.master]
-  environment = { HOST="https://zap-api-production.herokuapp.com", NYCID_CLIENT_ID="lup-portal-production", NYC_ID_HOST="https://www1.nyc.gov/account", MAINTENANCE_START='06/01/22 15:00', MAINTENANCE_END='06/01/22 16:00', SHOW_ALERTS='OFF' }
+  environment = { HOST="https://zap-api-production.herokuapp.com", NYCID_CLIENT_ID="lup-portal-production", NYC_ID_HOST="https://www1.nyc.gov/account", MAINTENANCE_START='06/01/22 15:00', MAINTENANCE_END='06/01/22 16:00', SHOW_ALERTS='OFF', FEATURE_FLAG_SHOW_SANDBOX_WARNING=OFF }
 
 # qa team
 [context.qa]
-  environment = { HOST="https://zap-api-staging.herokuapp.com", NYCID_CLIENT_ID="lup-portal-staging", NYC_ID_HOST="https://accounts-nonprd.nyc.gov/account", MAINTENANCE_START='06/01/22 15:00', MAINTENANCE_END='06/01/22 16:00', SHOW_ALERTS='OFF' }
+  environment = { HOST="https://zap-api-staging.herokuapp.com", NYCID_CLIENT_ID="lup-portal-staging", NYC_ID_HOST="https://accounts-nonprd.nyc.gov/account", MAINTENANCE_START='06/01/22 15:00', MAINTENANCE_END='06/01/22 16:00', SHOW_ALERTS='OFF', FEATURE_FLAG_SHOW_SANDBOX_WARNING=ON }
 
 # deploy-preview
 [context.deploy-preview]
- environment = { HOST="https://zap-api-staging.herokuapp.com", NYCID_CLIENT_ID="lup-portal-staging", NYC_ID_HOST="https://accounts-nonprd.nyc.gov/account", MAINTENANCE_START='06/01/22 15:00', MAINTENANCE_END='06/01/22 16:00', SHOW_ALERTS='ON' }
+ environment = { HOST="https://zap-api-staging.herokuapp.com", NYCID_CLIENT_ID="lup-portal-staging", NYC_ID_HOST="https://accounts-nonprd.nyc.gov/account", MAINTENANCE_START='06/01/22 15:00', MAINTENANCE_END='06/01/22 16:00', SHOW_ALERTS='ON', FEATURE_FLAG_SHOW_SANDBOX_WARNING=ON }