global: environment labeling

[FlorianCassayre]

• addresses ui: highlight that user is on QA/Dev instance CERNDocumentServer/cds-ils#35

Displays a label on all pages indicating the current environment that is being run. If production nothing is displayed. The environment type can be set in .env by setting a value to REACT_APP_ENV_NAME. The currently supported values are development, preprod and production. An empty value is considered as a development environment. The component in charge of this can be overridden to support more environment types, along with their label.

Development environment

Frontsite

Login

Backoffice

Pre-prod / QA

(ditto for the two other ends)

[ntarocco]

super nice thank you!

[ntarocco]

I would propose to put by default our envs, so we don't have to override :)
or maybe you can add to the invenioConfig.APP a new obj/list with all the possible envs, e.g.:

invenioConfig.APP.environments: [{
  name: 'dev',
  text: 'Dev environment',
  color: 'blue'
 icon: ...
}]

and then here:

env = invenioConfig.APP.environments.filter(env => env.name === process.env.REACT_APP_ENV_NAME);
return (
      <EnvironmentLabelLayout
        icon="code"
        text="Development environment"
        color="blue"
        pointing={pointing}
        {...uiProps}
      />
    );
...

in CDS-ILS, we will have only to add the config.
WDYT?

I will add now the var REACT_APP_ENV_NAME to the deployment

[FlorianCassayre]

What REACT_APP_ENV_NAME name did you use in the end? So that we align.

Edit: sandbox

[ntarocco]

If we want to make more visible, maybe we can add a colored very thick line on the very top?

(sorry for the bad screenshot, but it is just do explain what I mean...)

[ntarocco]

In CDS-ILS this will be called sandbox, and prod not sure yet between prod and production. If you keep qa here, please create a PR in CDS-ILS to override the config

[kpsherva]

If we go with the red maybe we can take a bit less eyes hurting shade? :)

[FlorianCassayre]

Will update qa to sandbox. For the naming I would personally go for production and development, to match sandbox.

[FlorianCassayre]

I came up with the following:

{
  name: 'production',
  display: {
    roles: ['admin'],
    text: 'Production environment',
    color: 'red',
    icon: 'warning',
  },
}

Production will be highlighted to logged-in admins only.

The other environment configurations (development and sandbox) are left untouched and will be highlighted regardless of the role.