Merge pull request #643 from osmlab/prerelease

3.2 Release

.env

@@ -1,3 +1,5 @@
+SASS_PATH=node_modules:src
+
 # Version Info
 REACT_APP_VERSION_SEMVER=$npm_package_version
 

.gitignore

@@ -2,7 +2,9 @@
 
 # dependencies
 /node_modules
-/src/**/*.css
+
+# Built by tailwind
+src/index.css
 
 # Imagery
 src/imagery.json

.travis.yml

@@ -8,4 +8,3 @@ cache:
     - node_modules
 script:
   - yarn run build
-  - yarn test

CHANGELOG.md

@@ -7,6 +7,30 @@ The format is based on
 This project adheres to
 [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [v3.2] - 2019-02-15
+### Added
+- New user interface
+- Full-fledged home page (#426)
+- New user dashboard page with quick access to challenges of interest (#521)
+- Highlight new challenges (#509)
+- Highlight popular challenges (#447)
+- Task completion page is now widget based
+- Access to all task-completion statuses from step 1 of task completion
+- Points ticker in top-nav to see current score
+- Updated README
+
+### Fixed
+- Require sign-in before naming a new virtual challenge (#579)
+- Multiple trash cans in challenge-administration confusing (#529)
+
+### Changed
+- Create & Manage link has moved to dropdown menu in top nav
+- The term "review" for spot-checking new tasks is now called "inspect"
+- User now needs to be signed in prior to viewing task completion page
+- [internal] redux store is no longer persisted
+- [internal] back-end now treated as pure API server
+
+
 ## [v3.1.3] - 2019-02-05
 ### Added
 - Support for [simplestyle](https://github.com/mapbox/simplestyle-spec) task-feature styling by @zverik

README.md

@@ -14,7 +14,7 @@ not use the production server for development purposes.**
 
 ### Basic Dependencies:
 
-* [Node 8 LTS](https://nodejs.org/)
+* [Node 10 LTS](https://nodejs.org/)
 * [yarn](https://yarnpkg.com/)
 * [jq](https://stedolan.github.io/jq/)
 * [curl](https://curl.haxx.se/)
@@ -63,13 +63,13 @@ server.
    on the command line (e.g. `-Dmr3.host="http://127.0.0.1:3000`). See the
    maproulette2 docs for details on starting up the server
 
-5. Point your browser at the back-end server, http://127.0.0.1:9000 by
-   default
-
-> While you can also point your browser directly at the front-end server on
-> port 3000, OAuth will not work correctly and you therefore won't be able to
-> sign in. When you first fire up the front-end server, it will automatically
-> open a browser tab pointing port 3000 -- just close it.
+5. Edit your `.env.development.local` file in your front-end project and set:
+   ```
+   REACT_APP_SERVER_OAUTH_URL='http://127.0.0.1:9000/auth/authenticate?redirect=http://127.0.0.1:3000'
+   ```
+   (assuming your back-end server is on port 9000 and front-end is on port 3000).
+   Restart or startup your front-end server, and then navigate to the front-end
+   at http://127.0.0.1:3000
 
 #### Developing with a pre-existing back-end server
 
@@ -78,7 +78,9 @@ a local one you have installed. *Please do not use the production MapRoulette
 server for development use*
 
 1. Open MapRoulette on that server normally in your browser, visit your user
-   profile, and take note of your API key at the bottom of the page
+   profile, and take note of your API key at the bottom of the page.
+   Alternatively, you can use the server's `super.key` if it has been setup
+   with one and you have access to it
 
 2. Edit your `.env.development.local` file and override the following config
    variables:
@@ -87,8 +89,8 @@ server for development use*
   REACT_APP_SERVER_API_KEY='your-api-key-for-that-server'
   ```
 
-3. Restart your dev server if it's already running (ctrl-c then `yarn run
-   start` again)
+3. Restart your front-end dev server if it's already running (ctrl-c then `yarn
+   run start` again)
 
 4. Point your browser directly at the front-end server, http://127.0.0.1:3000
    by default. Once the page finishes loading, you should show up as signed-in
@@ -177,6 +179,9 @@ Unit tests are built with [Jest](https://facebook.github.io/jest/) +
 
 ## End-to-End Tests
 
+> Note: End-to-End tests are temporarily disabled as the Chimp framework is not
+> compatible with Node 10 LTS.
+
 End-to-end tests are built with [Chimp](https://chimp.readme.io/), which
 combines [Webdriver.io](http://webdriver.io/guide.html) for Selenium +
 [Cucumber](https://cucumber.io/docs/reference) and
@@ -195,21 +200,15 @@ access to their cross-browser testing platform.
 
 ## CSS Styling and Naming
 
-The app uses [Sass/scss](http://sass-lang.com/) in combination with the
-[Bulma](https://bulma.io) CSS framework. The [BEM](http://getbem.com/introduction/)
-methodology has been loosely used as a guide for CSS class naming within
-components.
-
-The [node-sass-chokidar](https://www.npmjs.com/package/node-sass-chokidar)
-package is used for compiling the .scss files into .css, which are then imported
-into the components (the .css files are not added to source control). It's
-run automatically as part of the yarn start and build scripts, so there's no need
-to run it separately.
-
-The `src/variables.scss` includes global sass variables (such as colors), some
-Bulma variable overrides, etc.. Reusable mixins are kept in `src/mixins.scss`.
-Everything is pulled together (including Bulma's own Sass) into the
-`src/theme.scss` file.
+We are currently in transition between the old styling that used the
+[Bulma](https://bulma.io) framework with SASS and new styling using [Tailwind
+CSS](https://tailwindcss.com) with PostCSS. New CSS classes are prefixed with
+`mr-` to distinguish them from any existing Bulma classes, but during this
+transition there are still situations where a mix of both Tailwind and Bulma
+are in play.
+
+Tailwind configuration is controlled with the `src/tailwind.js` file. New CSS
+classes can be found in `src/styles/`
 
 ## Internationalization and Localization
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maproulette3",
-  "version": "3.1.3",
+  "version": "3.2",
   "private": true,
   "dependencies": {
     "@mapbox/geojsonhint": "^2.0.1",
@@ -26,21 +26,24 @@
     "leaflet-vectoricon": "^0.2.0",
     "leaflet.markercluster": "^1.3.0",
     "localforage": "^1.5.2",
+    "node-sass": "^4.11.0",
     "normalize.css": "^7.0.0",
     "normalizr": "^3.2.3",
     "piwik-react-router": "^0.12.1",
     "prop-types": "^15.6.0",
     "query-string": "^5.1.0",
     "react": "16.3.2",
+    "react-animate-height": "^2.0.7",
     "react-burger-menu": "^2.4.4",
     "react-calendar-heatmap": "^1.6.3",
+    "react-clickout": "^3.0.8",
     "react-copy-to-clipboard": "^5.0.1",
     "react-delayed": "^0.2.0",
     "react-dom": "^16.0.0",
     "react-dom-confetti": "^0.0.10",
     "react-dropzone": "^4.2.3",
     "react-grid-layout": "^0.16.6",
-    "react-intl": "^2.3.0",
+    "react-intl": "^2.8.0",
     "react-intl-formatted-duration": "^3.0.0",
     "react-jsonschema-form": "1.0.3",
     "react-jsonschema-form-async": "^0.2.0",
@@ -50,14 +53,14 @@
     "react-redux": "^5.0.5",
     "react-responsive": "^4.1.0",
     "react-router-dom": "^4.2.2",
-    "react-scripts": "1.1.4",
+    "react-scripts": "2.1.3",
     "react-share": "^1.16.0",
     "react-syntax-highlighter": "^7.0.2",
     "react-table": "^6.7.6",
     "react-tagsinput": "^3.19.0",
     "react-transition-group": "^2.2.1",
     "redux": "^3.7.0",
-    "redux-persist": "^5.0.1",
+    "redux-persist": "^5.10.0",
     "redux-thunk": "^2.2.0",
     "remark": "^7.0.1",
     "remark-external-links": "^3.0.0",
@@ -70,22 +73,38 @@
     "combine-react-intl-messages": "^1.0.6",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "node-sass-chokidar": "^0.0.3",
     "npm-run-all": "^4.1.1",
+    "postcss-cli": "^6.1.0",
+    "postcss-import": "^12.0.1",
+    "postcss-nested": "^4.1.1",
+    "postcss-simple-vars": "^5.0.1",
     "react-test-renderer": "^16.2.0",
     "redux-mock-store": "^1.4.0",
-    "shelljs": "^0.8.2"
+    "shelljs": "^0.8.2",
+    "tailwindcss": "^0.7.3",
+    "tailwindcss-gradients": "^1.1.0",
+    "tailwindcss-grid": "^1.2.0",
+    "tailwindcss-owl": "^1.1.1",
+    "tailwindcss-transforms": "^1.0.2",
+    "tailwindcss-transition": "^1.0.5",
+    "tailwindcss-visuallyhidden": "^1.0.2"
   },
   "scripts": {
-    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
-    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
+    "build-postcss": "postcss src/styles/index.css -o src/index.css",
+    "watch-postcss": "postcss src/styles/index.css -o src/index.css -w",
     "build-intl": "yarn run combine-messages -i './src/**/*.js' -o './src/lang/en-US.json'",
     "update-layers": "node scripts/update_layers.js",
     "start-js": "react-scripts start",
-    "start": "npm-run-all -p update-layers watch-css start-js",
-    "build": "npm run build-css && yarn run build-intl && yarn run update-layers && react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "start": "npm-run-all -p update-layers watch-postcss start-js",
+    "build": "yarn run build-intl && yarn run update-layers && yarn run build-postcss && react-scripts build",
+    "test": "react-scripts test",
     "e2e": "yarn run chimp",
     "eject": "react-scripts eject"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

postcss.config.js

@@ -0,0 +1,11 @@
+const tailwindcss = require('tailwindcss')
+
+module.exports = () => ({
+  plugins: [
+    require('postcss-import'),
+    tailwindcss('./src/tailwind.js'),
+    require('postcss-simple-vars'),
+    require('postcss-nested'),
+    require('autoprefixer'),
+  ],
+})

src/App.js

@@ -1,7 +1,13 @@
 import React, { Component } from 'react'
 import { Switch, Route } from 'react-router-dom'
 import { withRouter } from 'react-router'
-import HomePane from './components/HomePane/HomePane'
+import Home from './pages/Home/Home'
+import Profile from './pages/Profile/Profile'
+import Dashboard from './pages/Dashboard/Dashboard.js'
+import Leaderboard from './pages/Leaderboard/Leaderboard'
+import ChallengeLeaderboard from './pages/Leaderboard/ChallengeLeaderboard'
+import ProjectLeaderboard from './pages/Leaderboard/ProjectLeaderboard'
+import CountryLeaderboard from './pages/Leaderboard/CountryLeaderboard'
 import ChallengePane from './components/ChallengePane/ChallengePane'
 import TaskPane from './components/TaskPane/TaskPane'
 import AdminPane from './components/AdminPane/AdminPane'
@@ -18,16 +24,13 @@ import LoadRandomChallengeTask
 import LoadRandomVirtualChallengeTask
        from './components/LoadRandomVirtualChallengeTask/LoadRandomVirtualChallengeTask'
 import Navbar from './components/Navbar/Navbar'
-import UserProfile from './components/UserProfile/UserProfile'
-import Leaderboard from './components/Leaderboard/Leaderboard'
-import ChallengeLeaderboard from './components/ChallengeLeaderboard/ChallengeLeaderboard'
-import ProjectLeaderboard from './components/ProjectLeaderboard/ProjectLeaderboard'
-import CountryLeaderboard from './components/CountryLeaderboard/CountryLeaderboard'
+import Footer from './components/Footer/Footer'
 import ErrorModal from './components/ErrorModal/ErrorModal'
 import Sprites from './components/Sprites/Sprites'
 import MobileNotSupported
        from './components/MobileNotSupported/MobileNotSupported'
-import './App.css'
+import './components/Widgets/widget_registry'
+import './App.scss'
 
 // Setup child components with necessary HOCs
 const TopNav = withRouter(WithCurrentUser(Navbar))
@@ -39,16 +42,8 @@ const ErrorPane = WithExternalError(ChallengePane)
 
 /**
  * App represents the top level component of the application.  It renders a
- * TopNav, the appropriate component pane based on the current route, and some
- * utility components like the Sprites and ErrorModal.
- *
- * @see See TopNav
- * @see See ChallengePane
- * @see See TaskPane
- * @see See AdminPane
- * @see See HomePane
- * @see See ErrorModal
- * @see See Sprites
+ * Navbar, the appropriate page based on the current route, and some utility
+ * components like the Sprites and ErrorModal
  *
  * @author [Neil Rotstan](https://github.com/nrotstan)
  */
@@ -72,33 +67,37 @@ export class App extends Component {
     }
 
     return (
-      <div className="App">
+      <React.Fragment>
         <TopNav />
 
-        <Switch>
-          <CachedRoute exact path='/' component={HomePane} />
-          <CachedRoute path='/browse/challenges/:challengeId?' component={ChallengePane} />
-          <CachedRoute path='/browse/virtual/:virtualChallengeId' component={VirtualChallengePane} />
-          <CachedRoute exact path='/challenge/:challengeId/task/:taskId' component={CurrentTaskPane} />
-          <CachedRoute exact path='/challenge/:challengeId' component={LoadRandomChallengeTask} />
-          <CachedRoute exact path='/virtual/:virtualChallengeId/task/:taskId'
-                 component={CurrentVirtualChallengeTaskPane} />
-          <CachedRoute exact path='/virtual/:virtualChallengeId'
-                 component={LoadRandomVirtualChallengeTask} />
-          <CachedRoute exact path='/task/:taskId' component={CurrentTaskPane} />
-          <CachedRoute path='/user/profile' component={UserProfile} />
-          <CachedRoute path='/leaderboard' component={Leaderboard} />
-          <CachedRoute path='/challenge/:challengeId/leaderboard' component={ChallengeLeaderboard} />
-          <CachedRoute path='/project/:projectId/leaderboard' component={ProjectLeaderboard} />
-          <CachedRoute path='/country/:countryCode/leaderboard' component={CountryLeaderboard} />
-          <CachedRoute path='/admin' component={AdminPane} />
-          <CachedRoute path='/error' component={ErrorPane} />
-          <Route component={PageNotFound} />
-        </Switch>
+        <main role="main" className="mr-bg-white mr-text-grey">
+          <Switch>
+            <CachedRoute exact path='/' component={Home} />
+            <CachedRoute path='/browse/challenges/:challengeId?' component={ChallengePane} />
+            <CachedRoute path='/browse/virtual/:virtualChallengeId' component={VirtualChallengePane} />
+            <CachedRoute exact path='/challenge/:challengeId/task/:taskId' component={CurrentTaskPane} />
+            <CachedRoute exact path='/challenge/:challengeId' component={LoadRandomChallengeTask} />
+            <CachedRoute exact path='/virtual/:virtualChallengeId/task/:taskId'
+                  component={CurrentVirtualChallengeTaskPane} />
+            <CachedRoute exact path='/virtual/:virtualChallengeId'
+                  component={LoadRandomVirtualChallengeTask} />
+            <CachedRoute exact path='/task/:taskId' component={CurrentTaskPane} />
+            <CachedRoute path='/user/profile' component={Profile} />
+            <CachedRoute path='/dashboard' component={Dashboard} />
+            <CachedRoute path='/leaderboard' component={Leaderboard} />
+            <CachedRoute path='/challenge/:challengeId/leaderboard' component={ChallengeLeaderboard} />
+            <CachedRoute path='/project/:projectId/leaderboard' component={ProjectLeaderboard} />
+            <CachedRoute path='/country/:countryCode/leaderboard' component={CountryLeaderboard} />
+            <CachedRoute path='/admin' component={AdminPane} />
+            <CachedRoute path='/error' component={ErrorPane} />
+            <Route component={PageNotFound} />
+          </Switch>
+        </main>
 
+        <Footer />
         <ErrorModal />
         <Sprites />
-      </div>
+      </React.Fragment>
     )
   }
 }