add staging notice banner and test environment banners

.env

@@ -3,6 +3,9 @@ REACT_APP_BASE_PATH=''
 REACT_APP_URL='http://127.0.0.1:3000'
 REACT_APP_TITLE='MapRoulette'
 
+# Set to 'production', 'staging', or 'local'
+REACT_APP_ENVIRONMENT='production'
+
 # Features flags. Set each to 'enabled' or 'disabled'.
 REACT_APP_FEATURE_MOBILE_DEVICES='disabled'
 REACT_APP_FEATURE_EDITOR_IMAGERY='disabled' # Send active imagery layer to editors

src/App.jsx

@@ -49,6 +49,7 @@ import MobileNotSupported
 import CheckForToken from './components/CheckForToken/CheckForToken'
 import './components/Widgets/widget_registry'
 import './App.scss'
+import TestEnvironmentBanner from './components/TestEnvironmentBanner/TestEnvironmentBanner.jsx'
 
 // Setup child components with necessary HOCs
 const TopNav = withRouter(WithCurrentUser(Navbar))
@@ -102,6 +103,7 @@ export class App extends Component {
     return (
       <Fragment>
         <TopNav />
+        <TestEnvironmentBanner />
         <SystemNotices />
         <FundraisingNotices />
         <CheckForToken>

src/components/AdminPane/AdminPane.jsx

@@ -21,6 +21,7 @@ import EmailRequirementNotice from "./Manage/EmailRequirementNotice/EmailRequire
 import HeadTitle from "../Head/Head";
 import "./Manage/Widgets/widget_registry.js";
 import "./AdminPane.scss";
+import TestEnvironmentNotice from "./Manage/TestEnvironmentNotice/TestEnvironmentNotice";
 
 /**
  * AdminPane is the top-level component for administration functions. It has a
@@ -55,6 +56,7 @@ export class AdminPane extends Component {
 
     return (
       <Fragment>
+        <TestEnvironmentNotice />
         <EmailRequirementNotice />
         <div className="admin mr-bg-gradient-r-green-dark-blue mr-text-white">
           <div className="admin-pane">

src/components/AdminPane/Manage/TestEnvironmentNotice/Messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from 'react-intl'
+
+/**
+ * Internationalized messages for use with testEnvironmentNotice
+ */
+export default defineMessages({
+  title: {
+    id: 'Admin.testEnvironmentNotice.title',
+    defaultMessage: "Testing Something?",
+  },
+
+  description: {
+    id: 'Admin.testEnvironmentNotice.description',
+    defaultMessage: "Consider using the [MapRoulette Staging Website](https://staging.maproulette.org), a clone of MapRoulette often used for development, where you can create test challenges, projects, and similar tasks."
+  },  
+})

src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { FormattedMessage, injectIntl } from 'react-intl'
+import messages from "./Messages";
+import MarkdownContent from "../../../MarkdownContent/MarkdownContent";
+
+const TestEnvironmentNotice = (props) => {
+  const environment = window.env.REACT_APP_ENVIRONMENT;
+
+  if(environment === 'production'){
+    return (
+        <ul className="mr-bg-gradient-b-blue-darker-blue-dark mr-text-white mr-w-full">
+        <li className="mr-flex mr-justify-between mr-items-center mr-w-full mr-py-2 mr-px-16">
+          <div className="mr-flex mr-space-x-4 mr-items-center">
+            <div className="mr-text-yellow mr-text-md mr-whitespace-nowrap">
+              <FormattedMessage {...messages.title} />
+            </div>
+            <MarkdownContent
+              markdown={props.intl.formatMessage(messages.description)}
+              className="mr-text-white mr-text-sm"
+            />
+          </div>
+        </li>
+      </ul>
+    );
+  } else {
+    return null;
+  }
+};
+
+export default injectIntl(TestEnvironmentNotice);

src/components/TestEnvironmentBanner/Messages.js

@@ -0,0 +1,15 @@
+import { defineMessages } from 'react-intl'
+
+/**
+ * Internationalized messages for use with testEnvironmentBanner
+ */
+export default defineMessages({
+  stagingTitle: {
+    id: 'Admin.testEnvironmentBanner.stagingTitle',
+    defaultMessage: "You are in a MapRoulette Staging environment.",
+  },
+  localTitle: {
+    id: 'Admin.testEnvironmentBanner.localTitle',
+    defaultMessage: "You are in a MapRoulette Local environment.",
+  }
+})

src/components/TestEnvironmentBanner/TestEnvironmentBanner.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { FormattedMessage, injectIntl } from 'react-intl';
+import messages from "./Messages";
+
+const TestEnvironmentBanner = (props) => {
+  // Check the current environment
+  const environment = window.env.REACT_APP_ENVIRONMENT;
+
+  // Only render the banner if not in production
+  if (environment === 'production') return null;
+
+  return (
+    <ul className="mr-bg-gradient-b-blue-darker-blue-dark mr-text-white mr-w-full">
+      <li className="mr-flex mr-justify-between mr-items-center mr-w-full mr-py-2 mr-px-16">
+        <div className="mr-flex mr-space-x-4 mr-items-center">
+          <div className="mr-text-yellow mr-text-md mr-whitespace-nowrap">
+            {environment === 'staging' ? 
+              <FormattedMessage {...messages.stagingTitle} />
+            : environment === 'local' ?
+              <FormattedMessage {...messages.localTitle} />
+            : null}
+            </div> 
+        </div>
+      </li>
+    </ul>
+  );
+};
+
+export default injectIntl(TestEnvironmentBanner);