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=development

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,82 @@
+import { AuthenticationGuard } from '@authentication/components/AuthenticationGuard';
+import { invenioConfig } from '@config';
+import { BackOfficeRoutes } from '@routes/backoffice/backofficeUrls';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Overridable from 'react-overridable';
+import { Icon, Label } from 'semantic-ui-react';
+import _get from 'lodash/get';
+
+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;
+  const environmentConfig = invenioConfig.APP.environments.find(
+    env => env.name === environment
+  );
+  const display = _get(environmentConfig, 'display');
+  if (display) {
+    const environmentLabel = (
+      <EnvironmentLabelLayout
+        text={display.text}
+        color={display.color}
+        icon={display.icon}
+        pointing={pointing}
+        {...uiProps}
+      />
+    );
+
+    if (display.roles) {
+      // Highlight base on role
+      return (
+        <AuthenticationGuard
+          silent
+          path={BackOfficeRoutes.home}
+          authorizedComponent={() => environmentLabel}
+          loginComponent={() => null}
+          roles={display.roles}
+        />
+      );
+    } else {
+      // Unconditional highlighting
+      return environmentLabel;
+    }
+  } else {
+    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,26 @@ 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>
+                    <EnvironmentLabel
+                      pointing="left"
+                      style={{ marginLeft: '1.6em' }}
+                    />
+                  </div>
                 </Menu.Item>
                 <Menu.Menu position="right">
                   <Overridable id="ILSMenu.RightMenuItems" />
@@ -123,18 +132,26 @@ 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>
+                    <EnvironmentLabel
+                      pointing="left"
+                      style={{ marginLeft: '1.6em' }}
+                    />
+                  </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 {
+  Container,
+  Divider,
+  Header,
+  Icon,
+  Label,
+  List,
+  Menu,
+} from 'semantic-ui-react';
 import AdminMenu from './AdminMenu';
 
 class Sidebar extends Component {
@@ -43,6 +52,9 @@ class Sidebar extends Component {
     return (
       <Overridable id="Sidebar.layout">
         <>
+          <Container textAlign="center">
+            <EnvironmentLabel pointing="below" style={{ marginBottom: 0 }} />
+          </Container>
           <Header as="h3" className="bo-menu-header">
             <Icon name="user circle" color="grey" />
             <Header.Content>

src/lib/config/defaultConfig.js

@@ -38,6 +38,33 @@ export const APP_CONFIG = {
     { name: 'contact', route: '/contact', apiURL: '2' },
   ],
   supportEmail: 'info@inveniosoftware.org',
+  environments: [
+    {
+      name: 'development',
+      display: {
+        text: 'Development environment',
+        color: 'blue',
+        icon: 'code',
+      },
+    },
+    {
+      name: 'sandbox',
+      display: {
+        text: 'Sandbox environment',
+        color: 'teal',
+        icon: 'camera',
+      },
+    },
+    {
+      name: 'production',
+      display: {
+        roles: ['admin'],
+        text: 'Production environment',
+        color: 'red',
+        icon: 'warning',
+      },
+    },
+  ],
 };
 
 export const RECORDS_CONFIG = {