From 9ab514963e3870c0531c275ba25bba4914118972 Mon Sep 17 00:00:00 2001
From: Florian Cassayre <florian.cassayre@gmail.com>
Date: Wed, 7 Oct 2020 11:04:35 +0200
Subject: [PATCH] Global: environment labeling

---
 .env                                          |  1 +
 src/lib/authentication/pages/Login/Login.js   |  4 ++
 .../EnvironmentLabel/EnvironmentLabel.js      | 69 +++++++++++++++++++
 src/lib/components/EnvironmentLabel/index.js  |  1 +
 src/lib/components/ILSMenu/ILSMenu.js         |  7 ++
 .../components/backoffice/Sidebar/Sidebar.js  | 16 ++++-
 6 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/EnvironmentLabel/EnvironmentLabel.js
 create mode 100644 src/lib/components/EnvironmentLabel/index.js

diff --git a/.env b/.env
index 4c8528470..ba0bd8971 100644
--- a/.env
+++ b/.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=
diff --git a/src/lib/authentication/pages/Login/Login.js b/src/lib/authentication/pages/Login/Login.js
index bad2140d8..479febdbb 100644
--- a/src/lib/authentication/pages/Login/Login.js
+++ b/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 />
               )}
diff --git a/src/lib/components/EnvironmentLabel/EnvironmentLabel.js b/src/lib/components/EnvironmentLabel/EnvironmentLabel.js
new file mode 100644
index 000000000..ca1e04091
--- /dev/null
+++ b/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
+);
diff --git a/src/lib/components/EnvironmentLabel/index.js b/src/lib/components/EnvironmentLabel/index.js
new file mode 100644
index 000000000..511113cf7
--- /dev/null
+++ b/src/lib/components/EnvironmentLabel/index.js
@@ -0,0 +1 @@
+export { EnvironmentLabel } from './EnvironmentLabel';
diff --git a/src/lib/components/ILSMenu/ILSMenu.js b/src/lib/components/ILSMenu/ILSMenu.js
index c2ee56cb6..ff77afd11 100644
--- a/src/lib/components/ILSMenu/ILSMenu.js
+++ b/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';
@@ -104,6 +105,9 @@ class ILSMenu extends Component {
                       </Link>
                     )}
                   </Overridable>
+                  <div style={{ marginLeft: '0.8em' }}>
+                    <EnvironmentLabel pointing="left" />
+                  </div>
                 </Menu.Item>
                 <Menu.Menu position="right">
                   <Overridable id="ILSMenu.RightMenuItems" />
@@ -135,6 +139,9 @@ class ILSMenu extends Component {
                       </Link>
                     )}
                   </Overridable>
+                  <div style={{ marginLeft: '0.8em' }}>
+                    <EnvironmentLabel pointing="left" />
+                  </div>
                 </Menu.Item>
                 <Menu.Menu position="right">
                   <Overridable id="ILSMenu.RightMenuItemsMobile" />
diff --git a/src/lib/components/backoffice/Sidebar/Sidebar.js b/src/lib/components/backoffice/Sidebar/Sidebar.js
index 5682fa848..afeeb8fea 100644
--- a/src/lib/components/backoffice/Sidebar/Sidebar.js
+++ b/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>