Merge ce1040d into bb2c4e4

.eslintignore

@@ -13,3 +13,6 @@ webpack/base.config.js
 webpack/dev.config.js
 webpack/prod.config.js
 webpack/prod.analyse.config.js
+
+## 3rd Party
+static/js/*.min.js

.gitignore

@@ -7,7 +7,10 @@ node_modules
 temp
 
 ## Configs
-config.js
+config/config.js
 
 ## Coverall
 .coveralls.yml
+
+## Content
+src/pages-content/privacy.md

CHANGES.md

@@ -8,10 +8,19 @@ adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ### Added
 
-* breakpoints constant added
+* <Routes /> component added for better and easier route management
+* Google Analytics Feature: simply add `google_analytics_property` to the config.js
+  and enable Google Analytics on the page (including a privacy page.) Take a look
+  at the [README](README#google-analytics--privacy-page) to get to know the feature.
+* CookieNotice component added, will be automatically present when Google Analytics
+  is configured
+* Markdown files can be used to create content for a page (eg. a privacy page)
+* BREAKPOINTS constant added
 
 ### Changed
 
+* jQuery (required for Trello), MaterialUI Fonts and Icons are self-hosted now
+* <Layout /> component added to easier render Pages and their shared page components
 * UI improvements
   * customize scrollbars (horizontal and vertical)
   * Options toggle (show and hide)

README.md

@@ -25,6 +25,7 @@ preferred team members.
     * [Trello API Key](#trello-api-key)
     * [Dependencies](#dependencies)
     * [Config.js](#configjs)
+    * [Google Analytics & Privacy Page](#google-analytics--privacy-page)
   * [URL Shortcuts & Bookmarks](#url-shortcuts--bookmarks)
   * [How to start the App locally](#how-to-start-the-app-locally)
   * [How to build the App for Production](#how-to-build-the-app-for-production)
@@ -125,6 +126,7 @@ your needs and eg. enter your [API key][1] and other settings into the `config.j
 module.exports = {
   app_title: 'Multiboard for Trello®',
   api_key: 'your_api_key',
+  google_analytics_property: 'UA-12345678-9',
   company_member: 'exampleusername'
   preferred_members: /exampleusername|anotheruser/,
   lists: [/#sprint1/, /#sprint2/, /#sprint3/],
@@ -144,6 +146,7 @@ The main config properties look like this:
 
 * `app_title`: name that appears in the Menubar and website title
 * `api_key`: your [trello api key][1]
+* `google_analytics_property`: your Google Analytics property
 * `company_member`: representing the company and available on all cards, because
   this user is used to calculate the company estimations when all members are
   toggled
@@ -197,6 +200,27 @@ Example:
 
 Would result in the following total estimation for the board: Example-Board \(6)\[1]
 
+### Google Analytics & Privacy Page
+
+It is possible to integrate Google Analytics with pageviews by simply adding
+`google_analytics_property` to the `config.js`. This will add
+https://www.google-analytics.com/analytics.js to the app and track pageviews.
+By default doNotTrack browser settings are respected.
+
+At the same time a privacy page (eg. http://localhost:2222/#/privacy) is created
+and a CookieNotice presented to new users. The content can be defined in
+[src/pages-content](src/pages-content) by adding a [privacy.md](src/pages-content/privacy.example.md)
+file.
+
+By default [`gaOptout`](https://developers.google.com/analytics/devguides/collection/gajs/#disable)
+is available to set a disable Google Analytics cookie in the user's browser.
+
+One can use it like this in the `privacy.md` file:
+
+```md
+Or you deactivate it with a DoNotTrack Cookie: <a href="javascript:gaOptout();">Deactive Google Analytics</a>.
+```
+
 ## URL Shortcuts & Bookmarks
 
 Certain url links can be used to eg. customize the inital lists and selected member:

config/__mocks__/config.js

@@ -0,0 +1,11 @@
+import { mockExampleBoardConfig } from '../../src/__mocks__/mocks'
+
+module.exports = {
+  app_title: 'Trello Multiboard',
+  api_key: 'your_api_key',
+  google_analytics_property: 'UA-12345678-9',
+  company_member: 'exampleusername',
+  preferred_members: /exampleusername|anotheruser/,
+  lists: [/#upcoming/],
+  boards: [mockExampleBoardConfig],
+}

config/config.example.js

@@ -2,6 +2,7 @@
 module.exports = {
   app_title: 'Multiboard for Trello®',
   api_key: 'your_api_key',
+  google_analytics_property: 'UA-12345678-9',
   company_member: 'exampleusername',
   preferred_members: /exampleusername|anotheruser/,
   lists: [/#upcoming/],

package.json

@@ -29,7 +29,7 @@
     "format:scss": "stylelint --fix ./src",
     "lint": "eslint ./src",
     "lint:scss": "stylelint ./src",
-    "postinstall": "./node_modules/.bin/cpy \"./config/config.example.js\" \"./config\" --no-overwrite --rename=\"config.js\"",
+    "postinstall": "cpy \"./config/config.example.js\" \"./config\" --no-overwrite --rename=\"config.js\" && cpy \"./src/pages-content/privacy.example.md\" \"./src/pages-content\" --no-overwrite --rename=\"privacy.md\"",
     "precommit": "npm run build && npm run analyse:size && lint-staged",
     "prepush": "npm test",
     "start": "webpack-dev-server --hot --config webpack/dev.config.js",
@@ -80,9 +80,11 @@
     "connected-react-router": "4.3.0",
     "history": "4.7.2",
     "lodash": "4.17.10",
+    "marked": "0.4.0",
     "prop-types": "15.6.1",
     "query-string": "6.1.0",
     "react": "16.4.0",
+    "react-cookie-banner": "4.0.0",
     "react-dom": "16.4.0",
     "react-redux": "5.0.7",
     "react-router-dom": "4.2.2",
@@ -101,6 +103,7 @@
     "babel-preset-env": "1.7.0",
     "babel-preset-react": "6.24.1",
     "babel-preset-stage-2": "6.24.1",
+    "copy-webpack-plugin": "4.5.2",
     "coveralls": "3.0.1",
     "cpy-cli": "2.0.0",
     "cross-env": "5.1.6",
@@ -110,11 +113,14 @@
     "enzyme-to-json": "3.3.4",
     "error-overlay-webpack-plugin": "0.1.5",
     "extract-text-webpack-plugin": "4.0.0-beta.0",
+    "file-loader": "1.1.11",
+    "html-loader": "0.5.5",
     "html-webpack-plugin": "3.2.0",
     "husky": "0.14.3",
     "jest": "23.0.1",
     "jest-styled-components": "5.0.1",
     "lint-staged": "7.1.2",
+    "markdown-loader": "3.0.0",
     "node-sass": "4.9.0",
     "redux-mock-store": "1.5.1",
     "sass-loader": "7.0.1",

setup-jest.js

@@ -10,8 +10,9 @@ import faCheckSquare from '@fortawesome/fontawesome-free-solid/faCheckSquare'
 import faCommentDots from '@fortawesome/fontawesome-free-solid/faCommentDots'
 import faPaperclip from '@fortawesome/fontawesome-free-solid/faPaperclip'
 
-// mock config
-import { mockExampleBoardConfig } from './src/__mocks__/mocks'
+// mock modules
+jest.mock('./config/config')
+jest.mock('./src/utils/google-analytics')
 
 // other enzyme tools (not used yet)
 // - https://github.com/FormidableLabs/enzyme-matchers
@@ -20,15 +21,6 @@ Enzyme.configure({ adapter: new Adapter() })
 // make icons available in all tests
 fontawesome.library.add(brands, faAlignLeft, faCheckSquare, faCommentDots, faPaperclip)
 
-jest.mock('./config/config', () => ({
-  app_title: 'Trello Multiboard',
-  api_key: 'your_api_key',
-  company_member: 'exampleusername',
-  preferred_members: /exampleusername|anotheruser/,
-  lists: [/#upcoming/],
-  boards: [mockExampleBoardConfig],
-}))
-
 // mock $ (jquery)
 window.$ = jest.fn()
 
@@ -61,3 +53,7 @@ window.TrelloCards = {
   }),
   load: jest.fn(),
 }
+
+// as long as we do not have implemented a Markdown-Loader for Jest, we mock
+// every markdown file here
+jest.mock('./src/pages-content/privacy.md', () => 'Hello Privacy.md!')

src/__tests__/__snapshots__/index.test.js.snap

@@ -14,44 +14,7 @@ exports[`Component/TrelloMultiBoard should render without throwing an error 1`]
 >
   <div>
     <WithStyles(CssBaseline) />
-    <Connect(ConnectedRouter)
-      history={
-        Object {
-          "action": "POP",
-          "block": [Function],
-          "createHref": [Function],
-          "go": [Function],
-          "goBack": [Function],
-          "goForward": [Function],
-          "length": 1,
-          "listen": [Function],
-          "location": Object {
-            "hash": "",
-            "pathname": "/",
-            "search": "",
-            "state": undefined,
-          },
-          "push": [Function],
-          "replace": [Function],
-        }
-      }
-    >
-      <Switch>
-        <Route
-          component={[Function]}
-          exact={true}
-          path="/config"
-        />
-        <Route
-          component={[Function]}
-          path="/github"
-        />
-        <Route
-          component={[Function]}
-          path="/"
-        />
-      </Switch>
-    </Connect(ConnectedRouter)>
+    <Component />
   </div>
 </Provider>
 `;

src/__tests__/index.test.js

@@ -1,5 +1,7 @@
 import React from 'react'
 import { shallow } from 'enzyme'
+import { initGA } from '../utils/google-analytics'
+import history from '../utils/history'
 
 describe('Component/TrelloMultiBoard', () => {
   const ReactDom = require('react-dom')
@@ -21,4 +23,9 @@ describe('Component/TrelloMultiBoard', () => {
   test('should render without throwing an error', () => {
     expect(shallow(<TrelloMultiBoard />)).toMatchSnapshot()
   })
+
+  test('should call initGA', () => {
+    expect(initGA).toHaveBeenCalledTimes(1)
+    expect(initGA).toHaveBeenCalledWith(history)
+  })
 })

src/components/app-menu-container/__tests__/__snapshots__/index.test.js.snap

@@ -21,6 +21,28 @@ exports[`Component/AppMenuContainer should render proper withStyles result 1`] =
       "root": "AppMenuContainer-root-1",
     }
   }
+  pages={
+    Array [
+      Object {
+        "component": [Function],
+        "icon": [Function],
+        "target": "/",
+        "title": "Dashboard",
+      },
+      Object {
+        "component": [Function],
+        "icon": [Function],
+        "target": "/github",
+        "title": "GitHub",
+      },
+      Object {
+        "component": [Function],
+        "icon": [Function],
+        "target": "/privacy",
+        "title": "Privacy",
+      },
+    ]
+  }
   theme={
     Object {
       "breakpoints": Object {
@@ -330,7 +352,30 @@ exports[`Component/AppMenuContainer should render without throwing an error 1`]
         </WithStyles(IconButton)>
       </div>
       <WithStyles(Divider) />
-      <AppMenuContent />
+      <AppMenuContent
+        pages={
+          Array [
+            Object {
+              "component": [Function],
+              "icon": [Function],
+              "target": "/",
+              "title": "Dashboard",
+            },
+            Object {
+              "component": [Function],
+              "icon": [Function],
+              "target": "/github",
+              "title": "GitHub",
+            },
+            Object {
+              "component": [Function],
+              "icon": [Function],
+              "target": "/privacy",
+              "title": "Privacy",
+            },
+          ]
+        }
+      />
     </WithStyles(Drawer)>
     <main
       className="AppMenuContainer-content-12 AppMenuContainer-content-left-13"

src/components/app-menu-container/__tests__/__snapshots__/menu.test.js.snap

@@ -1,13 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/AppMenuContent should render without throwing an error 1`] = `
-<div>
+<React.Fragment>
   <WithStyles(List)
     component="nav"
   >
     <WithStyles(ListItem)
       button={true}
       component={[Function]}
+      key="Dashboard"
       replace={true}
       to="/"
     >
@@ -21,19 +22,7 @@ exports[`Component/AppMenuContent should render without throwing an error 1`] =
     <WithStyles(ListItem)
       button={true}
       component={[Function]}
-      replace={true}
-      to="/config"
-    >
-      <WithStyles(ListItemIcon)>
-        <pure(Settings) />
-      </WithStyles(ListItemIcon)>
-      <WithStyles(ListItemText)
-        primary="Config"
-      />
-    </WithStyles(ListItem)>
-    <WithStyles(ListItem)
-      button={true}
-      component={[Function]}
+      key="GitHub"
       replace={true}
       to="/github"
     >
@@ -65,6 +54,20 @@ exports[`Component/AppMenuContent should render without throwing an error 1`] =
         primary="GitHub"
       />
     </WithStyles(ListItem)>
+    <WithStyles(ListItem)
+      button={true}
+      component={[Function]}
+      key="Privacy"
+      replace={true}
+      to="/privacy"
+    >
+      <WithStyles(ListItemIcon)>
+        <pure(Fingerprint) />
+      </WithStyles(ListItemIcon)>
+      <WithStyles(ListItemText)
+        primary="Privacy"
+      />
+    </WithStyles(ListItem)>
   </WithStyles(List)>
-</div>
+</React.Fragment>
 `;