Fixes #2522 Embed doesn't work anymore (#2538)

geosolutions-it · Jan 19, 2018 · 5c7b0e1 · 5c7b0e1
1 parent b543420
commit 5c7b0e1
Show file tree

Hide file tree

Showing 20 changed files with 215 additions and 29 deletions.
diff --git a/buildConfig.js b/buildConfig.js
@@ -51,6 +51,18 @@ module.exports = (bundles, themeEntries, paths, extractThemesPlugin, prod, publi
             chunks: ['mapstore2'],
             inject: true,
             hash: true
+    }), new HtmlWebpackPlugin({
+            template: path.join(paths.framework, 'embeddedTemplate.html'),
+            chunks: ['embedded'],
+            inject: true,
+            hash: true,
+            filename: 'embedded.html'
+    }), new HtmlWebpackPlugin({
+            template: path.join(paths.framework, 'apiTemplate.html'),
+            chunks: ['ms2-api'],
+            inject: 'head',
+            hash: true,
+            filename: 'api.html'
     })] : []).concat(prod ? [new ParallelUglifyPlugin({
         uglifyJS: {
             sourceMap: false,

diff --git a/examples.js b/examples.js
@@ -3,14 +3,14 @@ var path = require("path");
 module.exports = {
     mouseposition: path.join(__dirname, "web", "client", "examples", "mouseposition", "app"),
     scalebar: path.join(__dirname, "web", "client", "examples", "scalebar", "app"),
-    layertree: path.join(__dirname, "web", "client", "examples", "layertree", "app"),
+    // layertree: path.join(__dirname, "web", "client", "examples", "layertree", "app"),
     "3dviewer": path.join(__dirname, "web", "client", "examples", "3dviewer", "app"),
-    queryform: path.join(__dirname, "web", "client", "examples", "queryform", "app"),
+    // queryform: path.join(__dirname, "web", "client", "examples", "queryform", "app"),
     featuregrid: path.join(__dirname, "web", "client", "examples", "featuregrid", "app"),
     print: path.join(__dirname, "web", "client", "examples", "print", "app"),
     login: path.join(__dirname, "web", "client", "examples", "login", "app"),
     plugins: path.join(__dirname, "web", "client", "examples", "plugins", "app"),
-    rasterstyler: path.join(__dirname, "web", "client", "examples", "rasterstyler", "app"),
+    // rasterstyler: path.join(__dirname, "web", "client", "examples", "rasterstyler", "app"),
     api: path.join(__dirname, "web", "client", "examples", "api", "app")
     // this example is not linked and seems to cause a big slow down with uglyfyplugin. disabled temporary
     // styler: path.join(__dirname, "web", "client", "examples", "styler", "app")

diff --git a/web/client/apiTemplate.html b/web/client/apiTemplate.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Page with MapStore 2 API</title>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" type='text/css'>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
+        <link rel="stylesheet" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/0.2.4/leaflet.draw.css" />
+        <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
+        <script src="https://maps.google.com/maps/api/js?v=3"></script>
+        <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
+        <script src="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/0.2.4/leaflet.draw.js"></script>
+        <style>
+        #container {
+            position: absolute;
+            top: 100px;
+            left: 100px;
+            right: 100px;
+            bottom: 100px;
+        }
+        #mapstore2-embedded, #map, .fill {
+            width: 100%;
+            height: 100%;
+        }
+        </style>
+    </head>
+    <body onload="init()">
+        <div id="container" class="ms2"></div>
+        <script type="text/javascript">
+        function init() {
+            MapStore2.create('container', {
+                originalUrl: "./#viewer/leaflet/0"
+            });
+        }
+        </script>
+    </body>
+</html>
diff --git a/web/client/components/share/ShareApi.jsx b/web/client/components/share/ShareApi.jsx
@@ -17,7 +17,8 @@ const CopyToClipboard = require('react-copy-to-clipboard');
 const Message = require('../../components/I18N/Message');
 const {Glyphicon, Col, Grid, Row, Tooltip, Button} = require('react-bootstrap');
 const OverlayTrigger = require('../misc/OverlayTrigger');
-
+const {validateVersion} = require('../../selectors/version');
+const {trim} = require('lodash');
 
 // css required
 require('./share.css');
@@ -29,7 +30,8 @@ const codeApi = require('raw-loader!./api-template.raw');
 class ShareApi extends React.Component {
     static propTypes = {
         shareUrl: PropTypes.string,
-        shareConfigUrl: PropTypes.string
+        shareConfigUrl: PropTypes.string,
+        version: PropTypes.string
     };
 
     state = {copied: false};
@@ -38,7 +40,8 @@ class ShareApi extends React.Component {
         const parsedCode = codeApi
           .replace('__BASE__URL__', this.props.shareUrl)
           .replace('__CONFIG__URL__', this.props.shareConfigUrl)
-          .replace('__ORIGINAL_URL__', location.href);
+          .replace('__ORIGINAL_URL__', location.href)
+          .replace('__VERSION__', validateVersion(this.props.version) ? '?' + trim(this.props.version) : '');
         const tooltip = (<Tooltip placement="bottom" className="in" id="tooltip-bottom" style={{zIndex: 2001}}>
                              {this.state.copied ? <Message msgId="share.msgCopiedUrl"/> : <Message msgId="share.msgToCopyUrl"/>}
                          </Tooltip>);

diff --git a/web/client/components/share/SharePanel.jsx b/web/client/components/share/SharePanel.jsx
@@ -50,7 +50,8 @@ class SharePanel extends React.Component {
         showAPI: PropTypes.bool,
         onClose: PropTypes.func,
         getCount: PropTypes.func,
-        closeGlyph: PropTypes.string
+        closeGlyph: PropTypes.string,
+        version: PropTypes.string
     };
 
     static defaultProps = {
@@ -83,7 +84,7 @@ class SharePanel extends React.Component {
         const social = <ShareSocials sharedTitle={this.props.sharedTitle} shareUrl={shareUrl} getCount={this.props.getCount}/>;
         const direct = <div><ShareLink shareUrl={shareUrl}/><ShareQRCode shareUrl={shareUrl}/></div>;
         const code = (<div><ShareEmbed shareUrl={shareEmbeddedUrl} {...this.props.embedOptions} />
-        {this.props.showAPI ? <ShareApi shareUrl={shareApiUrl} shareConfigUrl={this.props.shareConfigUrl}/> : null}</div>);
+        {this.props.showAPI ? <ShareApi shareUrl={shareApiUrl} shareConfigUrl={this.props.shareConfigUrl} version={this.props.version}/> : null}</div>);
 
         const tabs = (<Tabs defaultActiveKey={1} id="sharePanel-tabs">
             <Tab eventKey={1} title={<Message msgId="share.direct" />}>{direct}</Tab>

diff --git a/web/client/components/share/__tests__/ShareApi-test.jsx b/web/client/components/share/__tests__/ShareApi-test.jsx
@@ -43,4 +43,40 @@ describe("The ShareEmbed component", () => {
         expect(textareaEmbed.value.indexOf(shareConfigUrl) !== -1).toBe(true);
     });
 
+    it('add version to API template', () => {
+        const url = location.href;
+        const shareConfigUrl = 'configurl';
+        const version = '18e36c9e2ce1cbf57648907ec177e02f0118764d';
+        const cmpSharePanel = ReactDOM.render(<ShareApi shareUrl={url} shareConfigUrl={shareConfigUrl} version={version}/>, document.getElementById("container"));
+        expect(cmpSharePanel).toExist();
+
+        const textareaEmbed = ReactDOM.findDOMNode(ReactTestUtils.scryRenderedDOMComponentsWithTag(cmpSharePanel, "textarea")[0]);
+        expect(textareaEmbed).toExist();
+        expect(textareaEmbed.value.indexOf('?' + version) !== -1).toBe(true);
+    });
+
+    it('add version ${mapstore2.version} to API template', () => {
+        const url = location.href;
+        const shareConfigUrl = 'configurl';
+        const version = '${mapstore2.version}';
+        const cmpSharePanel = ReactDOM.render(<ShareApi shareUrl={url} shareConfigUrl={shareConfigUrl} version={version}/>, document.getElementById("container"));
+        expect(cmpSharePanel).toExist();
+
+        const textareaEmbed = ReactDOM.findDOMNode(ReactTestUtils.scryRenderedDOMComponentsWithTag(cmpSharePanel, "textarea")[0]);
+        expect(textareaEmbed).toExist();
+        expect(textareaEmbed.value.indexOf('?' + version) !== -1).toBe(false);
+    });
+
+    it('add no-version to API template', () => {
+        const url = location.href;
+        const shareConfigUrl = 'configurl';
+        const version = 'no-version';
+        const cmpSharePanel = ReactDOM.render(<ShareApi shareUrl={url} shareConfigUrl={shareConfigUrl} version={version}/>, document.getElementById("container"));
+        expect(cmpSharePanel).toExist();
+
+        const textareaEmbed = ReactDOM.findDOMNode(ReactTestUtils.scryRenderedDOMComponentsWithTag(cmpSharePanel, "textarea")[0]);
+        expect(textareaEmbed).toExist();
+        expect(textareaEmbed.value.indexOf('?' + version) !== -1).toBe(false);
+    });
+
 });
diff --git a/web/client/components/share/api-template.raw b/web/client/components/share/api-template.raw
@@ -29,7 +29,7 @@
     </head>
     <body onload="init()">
         <div id="container" class="ms2"></div>
-        <script id="ms2-api" src="__BASE__URL__dist/ms2-api.js"></script>
+        <script id="ms2-api" src="__BASE__URL__dist/ms2-api.js__VERSION__"></script>
         <script type="text/javascript">
         function init() {
             MapStore2.create('container',{

diff --git a/web/client/components/theme/Theme.jsx b/web/client/components/theme/Theme.jsx
@@ -9,12 +9,14 @@ const PropTypes = require('prop-types');
 const React = require('react');
 const withSideEffect = require('react-side-effect');
 const ConfigUtils = require('../../utils/ConfigUtils');
+const {validateVersion} = require('../../selectors/version');
+const {trim} = require('lodash');
 
 const reducePropsToState = (props) => {
     const innermostProps = props[props.length - 1];
     if (innermostProps && innermostProps.version) {
         return {
-            version: innermostProps.version.indexOf('${mapstore2.version}') === -1 ? "?" + innermostProps.version : '',
+            version: validateVersion(innermostProps.version) ? "?" + trim(innermostProps.version) : '',
             theme: innermostProps.theme || 'default',
             themeElement: innermostProps.themeElement || 'theme_stylesheet',
             prefix: innermostProps.prefix || ConfigUtils.getConfigProp('themePrefix') || 'ms2',

diff --git a/web/client/embeddedTemplate.html b/web/client/embeddedTemplate.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>MapStore 2 HomePage</title>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" type='text/css'>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
+        <link rel="stylesheet" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/0.2.4/leaflet.draw.css" />
+        <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
+        <script src="https://maps.google.com/maps/api/js?v=3"></script>
+        <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
+        <script src="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/0.2.4/leaflet.draw.js"></script>
+    </head>
+    <body>
+        <div id="container"></div>
+    </body>
+</html>
diff --git a/web/client/examples/layertree/index.html b/web/client/examples/layertree/index.html
@@ -11,7 +11,7 @@
         <script src="https://maps.google.com/maps/api/js?v=3"></script>
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
-
+        <link rel="stylesheet" id="theme_stylesheet" href="../../dist/themes/default.css">
         <style>
         html, body, #container, #map, .fill {
             position:absolute;

diff --git a/web/client/examples/plugins/index.html b/web/client/examples/plugins/index.html
@@ -16,8 +16,9 @@
         <script src="https://cesiumjs.org/releases/1.17/Build/Cesium/Cesium.js"></script>
         <link rel="stylesheet" href="https://cesiumjs.org/releases/1.17/Build/Cesium/Widgets/widgets.css" />
         <style id="custom_theme"></style>
+        <link rel="stylesheet" id="theme_stylesheet" href="../../dist/themes/default.css">
     </head>
-    <body>
+    <body class=" ms2" data-ms2-container="ms2">
         <div id="container"></div>
         <script src="../../dist/plugins.js"></script>
     </body>

diff --git a/web/client/jsapi/MapStore2.js b/web/client/jsapi/MapStore2.js
@@ -162,6 +162,10 @@ const MapStore2 = {
         const options = merge({}, this.defaultOptions || {}, opts);
         const {initialState, storeOpts} = options;
 
+        const {loadVersion} = require('../actions/version');
+        const {versionSelector} = require('../selectors/version');
+        const {loadAfterThemeSelector} = require('../selectors/config');
+
         const pages = [{
             name: "embedded",
             path: "/",
@@ -173,14 +177,18 @@ const MapStore2 = {
 
         const StandardRouter = connect((state) => ({
             locale: state.locale || {},
-            pages
+            pages,
+            version: versionSelector(state),
+            loadAfterTheme: loadAfterThemeSelector(state)
         }))(require('../components/app/StandardRouter'));
         const actionTrigger = generateActionTrigger(options.startAction || "CHANGE_MAP_VIEW");
         triggerAction = actionTrigger.trigger;
-        const appStore = require('../stores/StandardStore').bind(null, initialState || {}, {}, {
+        const appStore = require('../stores/StandardStore').bind(null, initialState || {}, {
+            version: require('../reducers/version')
+        }, {
             jsAPIEpic: actionTrigger.epic
         });
-        const initialActions = getInitialActions(options);
+        const initialActions = [...getInitialActions(options), loadVersion];
         const appConfig = {
             storeOpts: assign({}, storeOpts, {notify: true}),
             appStore,

diff --git a/web/client/plugins/Share.jsx b/web/client/plugins/Share.jsx
@@ -16,6 +16,7 @@ const Message = require('../components/I18N/Message');
 const {toggleControl} = require('../actions/controls');
 const ConfigUtils = require('../utils/ConfigUtils');
 const ShareUtils = require('../utils/ShareUtils');
+const {versionSelector} = require('../selectors/version');
 
 /**
  * Share Plugin allows to share the current URL (location.href) in some different ways.
@@ -38,7 +39,8 @@ const Share = connect((state) => ({
     isVisible: state.controls && state.controls.share && state.controls.share.enabled,
     shareUrl: location.href,
     shareApiUrl: ShareUtils.getApiUrl(location.href),
-    shareConfigUrl: ShareUtils.getConfigUrl(location.href, ConfigUtils.getConfigProp('geoStoreUrl'))
+    shareConfigUrl: ShareUtils.getConfigUrl(location.href, ConfigUtils.getConfigProp('geoStoreUrl')),
+    version: versionSelector(state)
 }), {
     onClose: toggleControl.bind(null, 'share', null)
 })(require('../components/share/SharePanel'));

diff --git a/web/client/product/components/home/Examples.jsx b/web/client/product/components/home/Examples.jsx
@@ -57,7 +57,7 @@ class Examples extends React.Component {
                   <Button href="examples/scalebar" bsStyle="info" bsSize="large" target="_blank"><I18N.Message msgId="home.open" /></Button>
                 </div>
               </CarouselItem>
-              <CarouselItem>
+              {/*<CarouselItem>
                 <img width={900} height={500} alt="900x500" src={carouselImages.layertree}/>
                 <div className="carousel-caption">
                     <I18N.HTML msgId="home.examples.layertree.html" />
@@ -70,7 +70,7 @@ class Examples extends React.Component {
                     <I18N.HTML msgId="home.examples.queryform.html" />
                   <Button href="examples/queryform" bsStyle="info" bsSize="large" target="_blank"><I18N.Message msgId="home.open" /></Button>
                 </div>
-              </CarouselItem>
+              </CarouselItem>*/}
               <CarouselItem>
                 <img width={900} height={500} alt="900x500" src={carouselImages.featuregrid}/>
                 <div className="carousel-caption">
@@ -99,13 +99,13 @@ class Examples extends React.Component {
                   <Button href="examples/api" bsStyle="info" bsSize="large" target="_blank"><I18N.Message msgId="home.open" /></Button>
                 </div>
               </CarouselItem>
-              <CarouselItem>
+              {/*<CarouselItem>
                 <img width={900} height={500} alt="900x500" src={carouselImages.rasterstyler}/>
                 <div className="carousel-caption">
                     <I18N.HTML msgId="home.examples.rasterstyler.html" />
                   <Button href="examples/rasterstyler" bsStyle="info" bsSize="large" target="_blank"><I18N.Message msgId="home.open" /></Button>
                 </div>
-              </CarouselItem>
+              </CarouselItem>*/}
           </Carousel>
       </Panel>);
     }

diff --git a/web/client/product/embedded.jsx b/web/client/product/embedded.jsx
@@ -12,23 +12,28 @@ const LocaleUtils = require('../utils/LocaleUtils');
 
 const startApp = () => {
     const StandardApp = require('../components/app/StandardApp');
-
+    const {loadVersion} = require('../actions/version');
+    const {versionSelector} = require('../selectors/version');
+    const {loadAfterThemeSelector} = require('../selectors/config');
     const {pages, pluginsDef, initialState, storeOpts} = require('./appConfigEmbedded');
 
     const StandardRouter = connect((state) => ({
         locale: state.locale || {},
-        pages
+        pages,
+        version: versionSelector(state),
+        loadAfterTheme: loadAfterThemeSelector(state)
     }))(require('../components/app/StandardRouter'));
 
     const appStore = require('../stores/StandardStore').bind(null, initialState, {
-        mode: (state = 'embedded') => state
+        mode: (state = 'embedded') => state,
+        version: require('../reducers/version')
     }, {});
 
     const appConfig = {
         storeOpts,
         appStore,
         pluginsDef,
-        initialActions: [],
+        initialActions: [loadVersion],
         appComponent: StandardRouter,
         printingEnabled: true
     };

diff --git a/web/client/reducers/__tests__/version-test.js b/web/client/reducers/__tests__/version-test.js
@@ -15,4 +15,9 @@ describe('Test the version reducer', () => {
         var state = version({}, {type: 'CHANGE_VERSION', version: 'myVersion'});
         expect(state.current).toBe('myVersion');
     });
+
+    it('test error version load', () => {
+        var state = version({}, {type: 'LOAD_VERSION_ERROR', error: 'error'});
+        expect(state.current).toBe('no-version');
+    });
 });
diff --git a/web/client/reducers/version.js b/web/client/reducers/version.js
@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const { CHANGE_VERSION } = require('../actions/version');
+const { CHANGE_VERSION, LOAD_VERSION_ERROR } = require('../actions/version');
 const assign = require('object-assign');
 
 /**
@@ -26,7 +26,14 @@ function version(state = null, action) {
             {
                 current: action.version
             }
-            );
+        );
+    }
+    case LOAD_VERSION_ERROR: {
+        return assign({}, state,
+            {
+                current: 'no-version'
+            }
+        );
     }
     default:
         return state;