Fix #861 Introduce wizard-like help system (#1426)

* Added Tutorial Plugin

* added react-joyride library to control the steps of tutorial
* added tutorial plugin | auto-start or start from burger menu tutorial button
* 3 preset configuration: map, home, mapMobile

package.json

@@ -118,6 +118,7 @@
     "react-draggable": "1.3.4",
     "react-dropzone": "3.4.0",
     "react-intl": "https://github.com/geosolutions-it/react-intl/tarball/react_014_1x",
+    "react-joyride": "1.10.1",
     "react-nouislider": "1.11.0",
     "react-overlays": "0.6.3",
     "react-pdf": "0.0.10",

web/client/actions/__tests__/tutorial-test.js

@@ -0,0 +1,70 @@
+/**
+ * Copyright 2017, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var expect = require('expect');
+
+var {
+    START_TUTORIAL,
+    SETUP_TUTORIAL,
+    UPDATE_TUTORIAL,
+    DISABLE_TUTORIAL,
+    RESET_TUTORIAL,
+    startTutorial,
+    setupTutorial,
+    updateTutorial,
+    disableTutorial,
+    resetTutorial
+} = require('../tutorial');
+
+describe('Test the tutorial actions', () => {
+
+    it('startTutorial', () => {
+        const retval = startTutorial();
+        expect(retval).toExist();
+        expect(retval.type).toBe(START_TUTORIAL);
+    });
+
+    it('setupTutorial', () => {
+        const steps = 'steps';
+        const style = 'style';
+        const checkbox = 'checkbox';
+        const defaultStep = 'defaultStep';
+        const retval = setupTutorial(steps, style, checkbox, defaultStep);
+        expect(retval).toExist();
+        expect(retval.type).toBe(SETUP_TUTORIAL);
+        expect(retval.steps).toBe(steps);
+        expect(retval.style).toBe(style);
+        expect(retval.checkbox).toBe(checkbox);
+        expect(retval.defaultStep).toBe(defaultStep);
+    });
+
+    it('updateTutorial', () => {
+        const tour = 'tour';
+        const steps = 'steps';
+        const error = 'error';
+        const retval = updateTutorial(tour, steps, error);
+        expect(retval).toExist();
+        expect(retval.type).toBe(UPDATE_TUTORIAL);
+        expect(retval.tour).toBe(tour);
+        expect(retval.steps).toBe(steps);
+        expect(retval.error).toBe(error);
+    });
+
+    it('disableTutorial', () => {
+        const retval = disableTutorial();
+        expect(retval).toExist();
+        expect(retval.type).toBe(DISABLE_TUTORIAL);
+    });
+
+    it('resetTutorial', () => {
+        const retval = resetTutorial();
+        expect(retval).toExist();
+        expect(retval.type).toBe(RESET_TUTORIAL);
+    });
+
+});

web/client/actions/tutorial.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright 2017, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const START_TUTORIAL = 'START_TUTORIAL';
+const SETUP_TUTORIAL = 'SETUP_TUTORIAL';
+const UPDATE_TUTORIAL = 'UPDATE_TUTORIAL';
+const DISABLE_TUTORIAL = 'DISABLE_TUTORIAL';
+const RESET_TUTORIAL = 'RESET_TUTORIAL';
+
+
+function startTutorial() {
+    return {
+        type: START_TUTORIAL
+    };
+}
+
+function setupTutorial(steps, style, checkbox, defaultStep) {
+    return {
+        type: SETUP_TUTORIAL,
+        steps,
+        style,
+        checkbox,
+        defaultStep
+    };
+}
+
+function updateTutorial(tour, steps, error) {
+    return {
+        type: UPDATE_TUTORIAL,
+        tour,
+        steps,
+        error
+    };
+}
+
+function disableTutorial() {
+    return {
+        type: DISABLE_TUTORIAL
+    };
+}
+
+
+function resetTutorial() {
+    return {
+        type: RESET_TUTORIAL
+    };
+}
+
+module.exports = {
+    START_TUTORIAL,
+    SETUP_TUTORIAL,
+    UPDATE_TUTORIAL,
+    DISABLE_TUTORIAL,
+    RESET_TUTORIAL,
+    startTutorial,
+    setupTutorial,
+    updateTutorial,
+    disableTutorial,
+    resetTutorial
+};

web/client/components/mapcontrols/search/SearchBar.jsx

@@ -95,7 +95,7 @@ let SearchBar = React.createClass({
             placeholder = this.props.placeholder;
         }
         return (
-            <div style={this.props.style} className={"MapSearchBar" + (this.props.className ? " " + this.props.className : "")}>
+            <div id="map-search-bar" style={this.props.style} className={"MapSearchBar" + (this.props.className ? " " + this.props.className : "")}>
                 <Input
                     key="search-input"
                     placeholder={placeholder}

web/client/components/maps/MapGrid.jsx

@@ -104,7 +104,7 @@ var MapGrid = React.createClass({
     },
     render: function() {
         return (
-                <Grid fluid={this.props.fluid}>
+                <Grid id="mapstore-maps-grid" fluid={this.props.fluid}>
                     <Row>
                         {this.props.loading && this.props.maps.length === 0 ? this.renderLoading() : this.renderMaps(this.props.maps || [], this.props.mapType)}
                     </Row>