2354 env banner (beyondessential#3192)

* add env banner * Update EnvBanner.js * change color * Update EnvBanner.js * add branch to env * add env banner to ui components * add env banner to lesmis, psss and tupaia * move branch name to component
beyondessential · Sep 12, 2021 · dbde490 · dbde490
1 parent ccd53fd
commit dbde490
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 3 deletions.
diff --git a/packages/admin-panel/src/index.js b/packages/admin-panel/src/index.js
@@ -6,6 +6,7 @@ import React, { lazy, Suspense } from 'react';
 import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import { render as renderReactApp } from 'react-dom';
 import 'react-table/react-table.css';
+import { EnvBanner } from '@tupaia/ui-components';
 import AdminPanel from './App';
 import { AdminPanelProviders, VizBuilderProviders } from './utilities';
 import { Footer, Navbar } from './widgets';
@@ -15,6 +16,7 @@ const VizBuilder = lazy(() => import('./VizBuilderApp'));
 renderReactApp(
   <Router>
     <Suspense fallback={<div>loading...</div>}>
+      <EnvBanner />
       <Switch>
         <Route path="/viz-builder">
           <VizBuilderProviders>

diff --git a/packages/devops/scripts/ci/deployFrontend.sh b/packages/devops/scripts/ci/deployFrontend.sh
@@ -7,7 +7,7 @@ DEPLOYMENT_SSH_URL=$(${DIR}/determineDeploymentSshUrl.sh)
 DEPLOYMENT_URL=$DEPLOYMENT_SSH_URL # ssh url will resolve to tupaia web frontend desktop over HTTP
 if curl --output /dev/null --silent --head --fail $DEPLOYMENT_URL; then
     echo "Deployment for ${CI_BRANCH} exists, updating with latest changes"
-    ssh -o ServerAliveInterval=15 ubuntu@$DEPLOYMENT_SSH_URL "cd tupaia; yarn workspace @tupaia/${PACKAGE} build"
+    ssh -o ServerAliveInterval=15 ubuntu@$DEPLOYMENT_SSH_URL "cd tupaia;REACT_APP_BRANCH=${CI_BRANCH} yarn workspace @tupaia/${PACKAGE} build"
 else
     echo "No deployment exists for ${CI_BRANCH}, cancelling update"
 fi
diff --git a/packages/lesmis/src/index.js b/packages/lesmis/src/index.js
@@ -5,13 +5,15 @@
 import React from 'react';
 import { render as renderReactApp } from 'react-dom';
 import { ReactQueryDevtools } from 'react-query/devtools';
+import { EnvBanner } from '@tupaia/ui-components';
 import { App } from './App';
 import { AppProviders } from './AppProviders';
 
 const render = () => {
   return renderReactApp(
     <AppProviders>
       <ReactQueryDevtools />
+      <EnvBanner />
       <App />
     </AppProviders>,
     document.getElementById('root'),

diff --git a/packages/psss/src/index.js b/packages/psss/src/index.js
@@ -5,6 +5,7 @@
 import React from 'react';
 import { render as renderReactApp } from 'react-dom';
 import { ReactQueryDevtools } from 'react-query-devtools';
+import { EnvBanner } from '@tupaia/ui-components';
 import App from './App';
 import { AppProviders } from './AppProviders';
 import { store } from './store/store';
@@ -13,6 +14,7 @@ const render = () => {
   return renderReactApp(
     <AppProviders store={store}>
       <ReactQueryDevtools />
+      <EnvBanner />
       <App />
     </AppProviders>,
     document.getElementById('root'),

diff --git a/packages/ui-components/src/components/EnvBanner.js b/packages/ui-components/src/components/EnvBanner.js
@@ -0,0 +1,47 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ *
+ */
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import GitHubIcon from '@material-ui/icons/GitHub';
+import { FlexCenter } from './Layout';
+
+const StyledBanner = styled(FlexCenter)`
+  background: ${props => props.$color};
+  color: white;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 12px;
+  text-align: center;
+
+  .MuiSvgIcon-root {
+    font-size: 16px;
+    margin-right: 0.4rem;
+  }
+`;
+
+export const EnvBanner = ({ color }) => {
+  const branch = process.env.REACT_APP_BRANCH;
+
+  if (!branch || typeof branch !== 'string' || branch === 'master' || branch === 'main') {
+    return null;
+  }
+
+  return (
+    <StyledBanner $color={color}>
+      <GitHubIcon />
+      {branch}
+    </StyledBanner>
+  );
+};
+
+EnvBanner.propTypes = {
+  color: PropTypes.string,
+};
+
+EnvBanner.defaultProps = {
+  color: '#f39c12',
+};
diff --git a/packages/ui-components/src/index.js b/packages/ui-components/src/index.js
@@ -14,6 +14,7 @@ export * from './components/ConfirmDeleteModal';
 export * from './components/DataTable';
 export * from './components/DateRangePicker';
 export * from './components/Dialog';
+export * from './components/EnvBanner';
 export * from './components/ErrorBoundary';
 export * from './components/FetchLoader';
 export * from './components/FullPageLoader';

diff --git a/packages/web-frontend/src/App.js b/packages/web-frontend/src/App.js
@@ -5,6 +5,7 @@
 
 import React, { lazy, Suspense } from 'react';
 import { Provider } from 'react-redux';
+import { EnvBanner } from '@tupaia/ui-components';
 
 import configureStore from './configureStore';
 import { AppStyleProviders } from './AppStyleProviders';
@@ -19,8 +20,6 @@ const { dispatch } = store;
 
 initHistoryDispatcher(store);
 
-const appType = process.env.REACT_APP_APP_TYPE;
-
 const initApp = () => {
   dispatch({
     type: FETCH_INITIAL_DATA,
@@ -29,6 +28,8 @@ const initApp = () => {
 
 initApp();
 
+const appType = process.env.REACT_APP_APP_TYPE;
+
 const App = () => {
   let RootScreen = DesktopApp;
 
@@ -40,6 +41,7 @@ const App = () => {
     <Provider store={store}>
       <AppStyleProviders>
         <Suspense fallback={null}>
+          <EnvBanner />
           <RootScreen />
         </Suspense>
       </AppStyleProviders>