From a8e0cfdd889b67cce9e653ef0e0ca5e890e2137c Mon Sep 17 00:00:00 2001 From: CollinBeczak Date: Wed, 14 Aug 2024 16:12:16 -0500 Subject: [PATCH 1/4] add staging notice banner on admin pages --- src/components/AdminPane/AdminPane.jsx | 2 ++ .../Manage/TestEnvironmentNotice/Messages.js | 16 ++++++++++++ .../TestEnvironmentNotice.js | 25 +++++++++++++++++++ 3 files changed, 43 insertions(+) create mode 100644 src/components/AdminPane/Manage/TestEnvironmentNotice/Messages.js create mode 100644 src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.js 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..7d9f94a2f --- /dev/null +++ b/src/components/AdminPane/Manage/TestEnvironmentNotice/Messages.js @@ -0,0 +1,16 @@ +import { defineMessages } from 'react-intl' + +/** + * Internationalized messages for use with TaskUploadingProgress + */ +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.js b/src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.js new file mode 100644 index 000000000..f14b6398d --- /dev/null +++ b/src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.js @@ -0,0 +1,25 @@ +import React from "react"; +import { FormattedMessage, injectIntl } from 'react-intl' +import WithCurrentUser from "../../../HOCs/WithCurrentUser/WithCurrentUser"; +import messages from "./Messages"; +import MarkdownContent from "../../../MarkdownContent/MarkdownContent"; + +const TestEnvironmentNotice = (props) => { + return ( +
    +
  • +
    +
    + +
    + +
    +
    • +
+ ); +}; + +export default WithCurrentUser(injectIntl(TestEnvironmentNotice)); From a0e1cbde02abab9c129c2113e89109b4149328db Mon Sep 17 00:00:00 2001 From: CollinBeczak Date: Wed, 6 Nov 2024 11:48:27 -0600 Subject: [PATCH 2/4] update banner notice and add environment indication variable --- .env | 3 ++ src/App.jsx | 2 ++ ...entNotice.js => TestEnvironmentNotice.jsx} | 12 +++++--- .../TestEnvironmentBanner/Messages.js | 15 ++++++++++ .../TestEnvironmentBanner.jsx | 29 +++++++++++++++++++ 5 files changed, 57 insertions(+), 4 deletions(-) rename src/components/AdminPane/Manage/TestEnvironmentNotice/{TestEnvironmentNotice.js => TestEnvironmentNotice.jsx} (81%) create mode 100644 src/components/TestEnvironmentBanner/Messages.js create mode 100644 src/components/TestEnvironmentBanner/TestEnvironmentBanner.jsx 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/Manage/TestEnvironmentNotice/TestEnvironmentNotice.js b/src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.jsx similarity index 81% rename from src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.js rename to src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.jsx index f14b6398d..7137c848b 100644 --- a/src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.js +++ b/src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.jsx @@ -1,11 +1,12 @@ import React from "react"; import { FormattedMessage, injectIntl } from 'react-intl' -import WithCurrentUser from "../../../HOCs/WithCurrentUser/WithCurrentUser"; import messages from "./Messages"; import MarkdownContent from "../../../MarkdownContent/MarkdownContent"; const TestEnvironmentNotice = (props) => { - return ( + const environment = window.env.REACT_APP_ENVIRONMENT; + if(environment === 'production'){ + return (
  • @@ -19,7 +20,10 @@ const TestEnvironmentNotice = (props) => {
- ); + ); + } else { + return null; + } }; -export default WithCurrentUser(injectIntl(TestEnvironmentNotice)); +export default injectIntl(TestEnvironmentNotice); diff --git a/src/components/TestEnvironmentBanner/Messages.js b/src/components/TestEnvironmentBanner/Messages.js new file mode 100644 index 000000000..9754403c1 --- /dev/null +++ b/src/components/TestEnvironmentBanner/Messages.js @@ -0,0 +1,15 @@ +import { defineMessages } from 'react-intl' + +/** + * Internationalized messages for use with TaskUploadingProgress + */ +export default defineMessages({ + stagingTitle: { + id: 'Admin.testEnvironmentNotice.stagingTitle', + defaultMessage: "You are in a MapRoulette Staging environment.", + }, + localTitle: { + id: 'Admin.testEnvironmentNotice.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); From 29150994f160e5b47cb82e9ddd89db681411582b Mon Sep 17 00:00:00 2001 From: CollinBeczak Date: Wed, 6 Nov 2024 14:54:19 -0600 Subject: [PATCH 3/4] fix descriptions and ids --- .../AdminPane/Manage/TestEnvironmentNotice/Messages.js | 2 +- src/components/TestEnvironmentBanner/Messages.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/AdminPane/Manage/TestEnvironmentNotice/Messages.js b/src/components/AdminPane/Manage/TestEnvironmentNotice/Messages.js index 7d9f94a2f..c773213aa 100644 --- a/src/components/AdminPane/Manage/TestEnvironmentNotice/Messages.js +++ b/src/components/AdminPane/Manage/TestEnvironmentNotice/Messages.js @@ -1,7 +1,7 @@ import { defineMessages } from 'react-intl' /** - * Internationalized messages for use with TaskUploadingProgress + * Internationalized messages for use with testEnvironmentNotice */ export default defineMessages({ title: { diff --git a/src/components/TestEnvironmentBanner/Messages.js b/src/components/TestEnvironmentBanner/Messages.js index 9754403c1..9a74e6090 100644 --- a/src/components/TestEnvironmentBanner/Messages.js +++ b/src/components/TestEnvironmentBanner/Messages.js @@ -1,15 +1,15 @@ import { defineMessages } from 'react-intl' /** - * Internationalized messages for use with TaskUploadingProgress + * Internationalized messages for use with testEnvironmentBanner */ export default defineMessages({ stagingTitle: { - id: 'Admin.testEnvironmentNotice.stagingTitle', + id: 'Admin.testEnvironmentBanner.stagingTitle', defaultMessage: "You are in a MapRoulette Staging environment.", }, localTitle: { - id: 'Admin.testEnvironmentNotice.localTitle', + id: 'Admin.testEnvironmentBanner.localTitle', defaultMessage: "You are in a MapRoulette Local environment.", } }) From 00513bed112100789ec6f18ae27a9d602fd6df48 Mon Sep 17 00:00:00 2001 From: CollinBeczak Date: Wed, 6 Nov 2024 14:55:51 -0600 Subject: [PATCH 4/4] formatting --- .../Manage/TestEnvironmentNotice/TestEnvironmentNotice.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.jsx b/src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.jsx index 7137c848b..f052c1300 100644 --- a/src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.jsx +++ b/src/components/AdminPane/Manage/TestEnvironmentNotice/TestEnvironmentNotice.jsx @@ -4,8 +4,9 @@ import messages from "./Messages"; import MarkdownContent from "../../../MarkdownContent/MarkdownContent"; const TestEnvironmentNotice = (props) => { - const environment = window.env.REACT_APP_ENVIRONMENT; - if(environment === 'production'){ + const environment = window.env.REACT_APP_ENVIRONMENT; + + if(environment === 'production'){ return (