Merge pull request #195 from edgi-govdata-archiving/environment-banner

Environment banner

src/components/__tests__/environment-banner.test.jsx

@@ -0,0 +1,24 @@
+/* eslint-env jest */
+
+import EnvironmentBanner from '../environment-banner';
+import React from 'react';
+import {mount} from 'enzyme';
+
+describe('EnvironmentBanner', () => {
+  it('renders nothing in the production environment', () => {
+    const banner = mount(<EnvironmentBanner
+      apiUrl="https://api.monitoring.envirodatagov.org"
+    />);
+
+    expect(banner.children().exists()).toBe(false);
+  });
+
+  it('renders a message indicating the environment in staging', () => {
+    const banner = mount(<EnvironmentBanner
+      apiUrl="https://api-staging.monitoring.envirodatagov.org"
+    />);
+
+    expect(banner.children().exists()).toBe(true);
+    expect(banner.text()).toMatch(/\bstaging\b/);
+  });
+});

src/components/environment-banner.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+/**
+ * @typedef EnvironmentBannerProps
+ * @property {string} apiUrl
+ */
+
+/**
+ * A banner to conditionally display warnings to users about the environment.
+ *
+ * @class EnvironmentBanner
+ * @extends {React.Component}
+ * @param {EnvironmentBannerProps} props
+ */
+export default class EnvironmentBanner extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      apiEnvironment: 'production',
+      dismissed: false,
+    };
+  }
+
+  componentDidMount() {
+    // This is not a good method, but a proof of concept.
+    // TODO: see about querying the data via this.context.api
+    const environment = (this.props.apiUrl.match(/api-([^.]+)/i) || [])[1];
+    if (environment) {
+      this.setState({apiEnvironment: environment});
+    }
+  }
+
+  dismiss() {
+    this.setState({dismissed: true});
+  }
+
+  render() {
+    const showBanner =
+      !(this.state.apiEnvironment === 'production')
+      && !this.state.dismissed;
+
+    return showBanner ? (
+      <section className='environment-banner bg-warning'>
+        <div className='container-fluid'>
+          <p>Environment: {this.state.apiEnvironment}</p>
+          {/* Uncomment to make dismissible
+           <div className='close-x' onClick={this.dismiss.bind(this)}>✕</div>
+           */}
+        </div>
+      </section>
+    ) : null;
+  }
+}

src/components/nav-bar.jsx

@@ -13,7 +13,7 @@ import {Link, NavLink} from 'react-router-dom';
  * The NavBar component renders an app title, user info, links, etc.
  * @param {NavBarProps} props
  */
-export default ({title = 'EDGI Web Monitoring', user = null, showLogin, logOut, pageFilter, setPageFilter}) => (
+export default ({children = null, title = 'EDGI Web Monitoring', user = null, showLogin, logOut, pageFilter, setPageFilter}) => (
   <nav className="navbar navbar-inverse">
     <div className="container-fluid">
       <div className="navbar-header">
@@ -25,6 +25,7 @@ export default ({title = 'EDGI Web Monitoring', user = null, showLogin, logOut,
         <li>{renderUserInfo(user, showLogin, logOut)}</li>
       </ul>
     </div>
+    {children}
   </nav>
 );
 

src/components/web-monitoring-ui.jsx

@@ -4,6 +4,7 @@ import AriaModal from 'react-aria-modal';
 import {BrowserRouter as Router, Redirect, Route} from 'react-router-dom';
 import WebMonitoringApi from '../services/web-monitoring-api';
 import WebMonitoringDb from '../services/web-monitoring-db';
+import EnvironmentBanner from './environment-banner';
 import Loading from './loading';
 import LoginForm from './login-form';
 import NavBar from './nav-bar';
@@ -160,7 +161,9 @@ export default class WebMonitoringUi extends React.Component {
             logOut={this.logOut}
             pageFilter={this.state.pageFilter}
             setPageFilter={this.setPageFilter}
-          />
+          >
+            <EnvironmentBanner apiUrl={api.url}/>
+          </NavBar>
           <Route exact path="/" render={() => {
             if (this.state.user) {
               return <Redirect to="/assignedPages" />;

src/css/styles.css

@@ -447,3 +447,22 @@ iframe {
 .versionista-info i {
   margin-left: 0.5em;
 }
+
+/* ===== Environment Banner ====== */
+.environment-banner {
+  color: #333;
+}
+
+.environment-banner p {
+  display: inline-block;
+  margin: 10px 0;
+}
+
+.environment-banner .close-x {
+  float: right;
+  margin: 10px;
+}
+
+.environment-banner .close-x:hover {
+  cursor: pointer;
+}