global: environment labeling

.env

@@ -3,3 +3,4 @@ REACT_APP_INVENIO_VERSION=1.0.0a13
 REACT_APP_INVENIO_UI_URL=https://localhost:5000
 REACT_APP_INVENIO_REST_ENDPOINTS_BASE_URL=https://localhost:5000/api
 REACT_APP_OVERLAY_VERSION=
+REACT_APP_ENV_NAME=

src/lib/authentication/pages/Login/Login.js

@@ -1,4 +1,5 @@
 import { parseParams } from '@authentication/utils';
+import { EnvironmentLabel } from '@components/EnvironmentLabel';
 import { Notifications } from '@components/Notifications';
 import { invenioConfig } from '@config';
 import { goTo } from '@history';
@@ -154,6 +155,9 @@ const LoginLayout = ({
             }}
           >
             <Container>
+              <Container textAlign="center">
+                <EnvironmentLabel pointing="below" />
+              </Container>
               {showLogo && invenioConfig.APP.LOGO_SRC && (
                 <Image src={invenioConfig.APP.LOGO_SRC} size="small" centered />
               )}

src/lib/components/EnvironmentLabel/EnvironmentLabel.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Overridable from 'react-overridable';
+import { Icon, Label } from 'semantic-ui-react';
+
+const EnvironmentLabelLayout = ({
+  text,
+  icon,
+  color,
+  pointing,
+  ...uiProps
+}) => {
+  return (
+    <Label
+      color={color}
+      pointing={pointing}
+      size="small"
+      className="environment-label"
+      {...uiProps}
+    >
+      <Icon name={icon} />
+      {text}
+    </Label>
+  );
+};
+
+EnvironmentLabelLayout.propTypes = {
+  text: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
+  pointing: PropTypes.string.isRequired,
+};
+
+const EnvironmentLabelComponent = ({ pointing, ...uiProps }) => {
+  const environment = process.env.REACT_APP_ENV_NAME;
+  if (!environment || environment === 'development') {
+    return (
+      <EnvironmentLabelLayout
+        icon="code"
+        text="Development environment"
+        color="blue"
+        pointing={pointing}
+        {...uiProps}
+      />
+    );
+  } else if (environment === 'preprod') {
+    return (
+      <EnvironmentLabelLayout
+        icon="camera"
+        text="QA environment"
+        color="teal"
+        pointing={pointing}
+        {...uiProps}
+      />
+    );
+  } else {
+    // Ignore others
+    return null;
+  }
+};
+
+EnvironmentLabelComponent.propTypes = {
+  pointing: PropTypes.string.isRequired,
+};
+
+export const EnvironmentLabel = Overridable.component(
+  'EnvironmentLabel',
+  EnvironmentLabelComponent
+);

src/lib/components/EnvironmentLabel/index.js

@@ -0,0 +1 @@
+export { EnvironmentLabel } from './EnvironmentLabel';

src/lib/components/ILSMenu/ILSMenu.js

@@ -1,5 +1,6 @@
 import { RedirectToLoginButton } from '@authentication/components/RedirectToLoginButton';
 import { authenticationService } from '@authentication/services/AuthenticationService';
+import { EnvironmentLabel } from '@components/EnvironmentLabel';
 import { invenioConfig } from '@config';
 import { BackOfficeRoutes, FrontSiteRoutes } from '@routes/urls';
 import PropTypes from 'prop-types';
@@ -92,18 +93,23 @@ class ILSMenu extends Component {
             >
               <Container>
                 <Menu.Item header>
-                  <Overridable id="ILSMenu.Logo">
-                    {invenioConfig.APP.LOGO_SRC && (
-                      <Link to="/">
-                        <Image
-                          src={invenioConfig.APP.LOGO_SRC}
-                          size="tiny"
-                          centered
-                          alt="Logo"
-                        />
-                      </Link>
-                    )}
-                  </Overridable>
+                  <div>
+                    <Overridable id="ILSMenu.Logo">
+                      {invenioConfig.APP.LOGO_SRC && (
+                        <Link to="/">
+                          <Image
+                            src={invenioConfig.APP.LOGO_SRC}
+                            size="tiny"
+                            centered
+                            alt="Logo"
+                          />
+                        </Link>
+                      )}
+                    </Overridable>
+                  </div>
+                  <div style={{ marginLeft: '0.8em' }}>
+                    <EnvironmentLabel pointing="left" />
+                  </div>
                 </Menu.Item>
                 <Menu.Menu position="right">
                   <Overridable id="ILSMenu.RightMenuItems" />
@@ -123,18 +129,23 @@ class ILSMenu extends Component {
             >
               <Container>
                 <Menu.Item header>
-                  <Overridable id="ILSMenu.LogoMobile">
-                    {invenioConfig.APP.LOGO_SRC && (
-                      <Link to="/">
-                        <Image
-                          src={invenioConfig.APP.LOGO_SRC}
-                          size="tiny"
-                          centered
-                          alt="Logo"
-                        />
-                      </Link>
-                    )}
-                  </Overridable>
+                  <div>
+                    <Overridable id="ILSMenu.LogoMobile">
+                      {invenioConfig.APP.LOGO_SRC && (
+                        <Link to="/">
+                          <Image
+                            src={invenioConfig.APP.LOGO_SRC}
+                            size="tiny"
+                            centered
+                            alt="Logo"
+                          />
+                        </Link>
+                      )}
+                    </Overridable>
+                  </div>
+                  <div style={{ marginLeft: '0.8em' }}>
+                    <EnvironmentLabel pointing="left" />
+                  </div>
                 </Menu.Item>
                 <Menu.Menu position="right">
                   <Overridable id="ILSMenu.RightMenuItemsMobile" />

src/lib/components/backoffice/Sidebar/Sidebar.js

@@ -1,5 +1,6 @@
 import { AuthenticationGuard } from '@authentication/components/AuthenticationGuard';
 import { authenticationService } from '@authentication/services/AuthenticationService';
+import { EnvironmentLabel } from '@components/EnvironmentLabel';
 import {
   AcquisitionRoutes,
   BackOfficeRoutes,
@@ -10,7 +11,15 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Overridable from 'react-overridable';
 import { Link } from 'react-router-dom';
-import { Divider, Header, Icon, Label, List, Menu } from 'semantic-ui-react';
+import {
+  Divider,
+  Grid,
+  Header,
+  Icon,
+  Label,
+  List,
+  Menu,
+} from 'semantic-ui-react';
 import AdminMenu from './AdminMenu';
 
 class Sidebar extends Component {
@@ -43,6 +52,11 @@ class Sidebar extends Component {
     return (
       <Overridable id="Sidebar.layout">
         <>
+          <Grid>
+            <Grid.Column textAlign="center" style={{ paddingBottom: 0 }}>
+              <EnvironmentLabel pointing="below" />
+            </Grid.Column>
+          </Grid>
           <Header as="h3" className="bo-menu-header">
             <Icon name="user circle" color="grey" />
             <Header.Content>