Visual Distinction between Environments

[pwei1018]

Part of the QA process for for both dev/feature testing and market release verification requires end to end testing in the DEV and TEST environments, as well as a spot check of the UI in PROD. As such, being logged in to two or all three environments is often required for comparisons. Currently there is no visual distinction at all between the environments, meaning if one is not paying close attention, it is quite possible to perform an action or task/transaction in the incorrect environment.

Some sort of standard color coded banner or badge should always be present in the DEV and TEST environments with language something like "You are logged in to the TEST environment" so that teams can easily see where they are and what they should be doing. The colors between DEV and TEST should also be different from each other, and neither should be using the banner alert colour that is in place in PROD.

Design:

https://www.figma.com/file/fP5tJHl6QSURASmYkfHl19/Visual-Distinction%3A-DEV%2C-TEST%2C-SANDBOX?type=design&node-id=0%3A1&mode=design&t=334LJZW2r5i4sM5F-1

[pwei1018]

@ozamani9gh @davemck513 @JazzarKarim

[ozamani9gh]

@pwei1018 I will get @EPortman to work on this. does it need to be this sprint, or can we groom it and give it to him next week

[EPortman]

Finished coding for this. The new component needs to be assed the environment variable for this to work. It can be passed either 'DEV', 'TEST', OR 'SANDBOX'. Passing it anything else or nothing at all will cause the banner to not appear.

[EPortman]

@pwei1018. This has been merged to master. Visual distinction between environments are displayed when the app-header gets passed the environment variable. An example of using this:
`

  <SbcHeader
    id="namerequest-sbc-header"
    :inAuth="false"
    :showActions="true"
    :environment="environment"
  />

`

The environment needs to be 'DEV', 'TEST', or 'SANDBOX'. Anything else and the environment alert in the app header will not render.

[EPortman]

The repo this belongs to is https://github.com/bcgov/sbc-common-components

[EPortman]

App Header is located in:
sbc-common-components/vue/sbc-common-components/src/components/SbcHeader.vue