diff --git a/.env b/.env index dc4639cc5..cfca4e4eb 100644 --- a/.env +++ b/.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 diff --git a/src/App.jsx b/src/App.jsx index 80f7c04be..a0edb1afe 100644 --- a/src/App.jsx +++ b/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 ( + diff --git a/src/components/AdminPane/AdminPane.jsx b/src/components/AdminPane/AdminPane.jsx index 041b1b0df..04ba176e2 100644 --- a/src/components/AdminPane/AdminPane.jsx +++ b/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 ( +
diff --git a/src/components/AdminPane/Manage/TestEnvironmentNotice/Messages.js b/src/components/AdminPane/Manage/TestEnvironmentNotice/Messages.js new file mode 100644 index 000000000..c773213aa --- /dev/null +++ b/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." + }, +}) diff --git a/src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.jsx b/src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.jsx new file mode 100644 index 000000000..f052c1300 --- /dev/null +++ b/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 ( +
    +
  • +
    +
    + +
    + +
    +
  • +
+ ); + } else { + return null; + } +}; + +export default injectIntl(TestEnvironmentNotice); diff --git a/src/components/TestEnvironmentBanner/Messages.js b/src/components/TestEnvironmentBanner/Messages.js new file mode 100644 index 000000000..9a74e6090 --- /dev/null +++ b/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.", + } +}) diff --git a/src/components/TestEnvironmentBanner/TestEnvironmentBanner.jsx b/src/components/TestEnvironmentBanner/TestEnvironmentBanner.jsx new file mode 100644 index 000000000..7350b1312 --- /dev/null +++ b/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 ( +
    +
  • +
    +
    + {environment === 'staging' ? + + : environment === 'local' ? + + : null} +
    +
    +
  • +
+ ); +}; + +export default injectIntl(TestEnvironmentBanner);