Merge pull request #8558 from alexander-fedorenko/backport-2022.02.xx…

…-module-plugins [Backport 2022.02.xx] module plugins PRs
geosolutions-it · Sep 7, 2022 · ba30a0a · ba30a0a
2 parents 4059f96 + cf504c9
commit ba30a0a
Show file tree

Hide file tree

Showing 127 changed files with 2,559 additions and 3,234 deletions.
diff --git a/build/buildConfig.js b/build/buildConfig.js
@@ -175,7 +175,6 @@ module.exports = (...args) => mapArgumentsToObject(args, ({
         new ProvidePlugin({
             Buffer: ['buffer', 'Buffer']
         }),
-        new NormalModuleReplacementPlugin(/leaflet$/, path.join(paths.framework, "libs", "leaflet")),
         new NormalModuleReplacementPlugin(/proj4$/, path.join(paths.framework, "libs", "proj4")),
         // it's not possible to load directly from the module name `cesium/Build/Cesium/Widgets/widgets.css`
         // see https://github.com/CesiumGS/cesium/issues/9212

diff --git a/docs/developer-guide/extensions.md b/docs/developer-guide/extensions.md
@@ -73,6 +73,32 @@ As you can see from the code, the most important difference is that you need to
 The extension definition will import or define all the needed dependencies (components, reducers, epics) as well as the plugin configuration elements
 (e.g. containers).
 
+### Dynamic import of extension
+
+MapStore supports dynamic import of plugins and extensions.
+In this case, plugin or extension is loaded when app demands to render it for the first time.
+
+There are few changes required to make extension loaded dynamically:
+
+1. Create `Module.jsx` file in `js/extension/plugins/` and populate it with `js/extension/plugins/Extension.jsx` content.
+2. Update content of `js/extension/plugins/Extension.jsx` to be like:
+```jsx
+import {toModulePlugin} from "@mapstore/utils/ModulePluginsUtils";
+import { name } from '../../../config';
+
+export default toModulePlugin(name, () => import(/* webpackChunkName: 'extensionName' */ './Module'));
+```
+3. Update `js/extensions.js` and remove `createPlugin` wrapper from `Extension` export. File content should look like:
+```js
+import Extension from './extension/plugins/Extension';
+import { name } from '../config';
+
+
+export default {
+    [name]: Extension
+};
+```
+
 ### Distributing your extension as an uploadable module
 
 The sample project allow you to create the final zip file for you.
@@ -131,11 +157,16 @@ The `index.json file should contain all the information about the extension:
 ### Installing Extensions
 
 Extensions can be uploaded using the context creator UI of MapStore. The storage and configuration of the uploaded zip bundle is managed by a dedicated MapStore backend service, the ***Upload Service***.
-The Upload Service is responsible of unzipping the bundle, storing javascript and the other extension assets in the extensions folder and updating the configuration files needed by MapStore to use the extension:
+The Upload Service is responsible for unzipping the bundle, storing javascript and the other extension assets in the extensions folder and updating the configuration files needed by MapStore to use the extension:
 
 * `extensions.json` (the extensions registry)
 * `pluginsConfig.json.patch` (the context creator plugins catalog patch file)
 
+### Updating Extensions
+
+Please refer to the [How to update extensions](../../user-guide/application-context/#how-to-update-extensions) section of user guide to get more information about extensions update workflow.
+
+
 ### Extensions and datadir
 
 Extensions work better if you use a [datadir](externalized-configuration.md#externalized-configuration), because when a datadir is configured,
@@ -144,7 +175,7 @@ you upgrade MapStore to a newer version).
 
 ### Extensions for dependent projects
 
-Extensions build in MapStore actually can run only in MapStore product. They can not be installed in dependent projects. If you have a custom project and you want to add support for extensions, you will have to create your build system for extensions dedicated to your application, to build the Javascript with the correct paths.
+Extensions build in MapStore actually can run only in MapStore product. They can not be installed in dependent projects. If you have a custom project, and you want to add support for extensions, you will have to create your build system for extensions dedicated to your application, to build the Javascript with the correct paths.
 Moreover, to enable extensions to work with the datadir in a dependent project (MapStore product is already configured to use it) you need to configure (or customize) the following configuration properties in your `app.jsx`:
 
 #### Externalize the extensions configuration
@@ -179,7 +210,9 @@ Assets are loaded using a different service, `/rest/config/loadasset`.
 Extension could implement drawing interactions, and it's necessary to prevent a situation when multiple tools from different plugins or extensions have active drawing, otherwise it could end up in an unpredicted or buggy behavior.
 
 There are two ways how drawing interaction can be implemented in plugin or extension:
+
 - Using DrawSupport (e.g. Annotations plugin)
+
 - By intercepting click on the map interactions (e.g. Measure plugin)
 
 ### Making another plugins aware of your extension starts drawing

diff --git a/docs/developer-guide/mapstore-migration-guide.md b/docs/developer-guide/mapstore-migration-guide.md
@@ -22,6 +22,43 @@ This is a list of things to check if you want to update from a previous version
 
 ## Migration from 2022.01.02 to 2022.02.00
 
+### HTML pages optimization
+
+We removed script and css link to leaflet CDN in favor of a dynamic import of the libraries in the main bundle, now leaflet is only loaded when the library is selected as map type of the viewer. You can update the project HTML files by removing these tags:
+
+```diff
+- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
+- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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/leaflet/1.3.1/leaflet.js"></script>
+- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
+```
+
+We also made asynchronous the script to detect valid browser. This should slightly improve the initial requests time.
+ You can updated the script in your project as following:
+
+
+```html
+<script async type="text/javascript" src="https://unpkg.com/bowser@2.7.0/es5.js" onload="checkBrowser()"></script>
+<script type="text/javascript">
+    function checkBrowser() {
+        var browserInfo = bowser.getParser(window.navigator.userAgent);
+        var isValidBrowser = browserInfo.satisfies({
+            "edge": ">1",
+            "chrome": ">1",
+            "safari": ">1",
+            "firefox": ">1"
+        });
+        if (!isValidBrowser) {
+            window.location.href = "unsupportedBrowser.html"
+            document.querySelector("container").style.display = "none";
+        }
+    }
+</script>
+```
+
 ### Version plugin has been removed
 
 We no longer maintain the Version plugin since we have moved its content inside the About plugin (see [here](https://github.com/geosolutions-it/MapStore2/issues/7934#issuecomment-1201433942) for more details)

diff --git a/docs/developer-guide/writing-epics.md b/docs/developer-guide/writing-epics.md
@@ -196,3 +196,36 @@ const fetchDataEpic = (action$, store) => action$
             map(response => dataFetched(response.data))
     );
 ```
+
+### Muted epics: how to mute internal streams
+
+MapStore will mute all the epics whenever corresponding plugin or extension is not rendered on the page.
+Though, it might be the case that one of your epics will return internal stream, like in example below:
+
+```js
+export const dummyEpic = (action$, store) => action$.ofType(ACTION)
+    .switchMap(() => {
+        return Rx.Observable.interval(1000)
+            .switchMap(() => {
+                console.log('TEST');
+                return Rx.Observable.empty();
+            });
+    });
+```
+
+In this case, internal stream should be muted explicitly.
+
+Each epic receives third argument type of object, having property called `pluginRenderStream$`.
+Combined with `semaphore` it allows to mute internal stream whenever epic is muted:
+
+```js
+export const dummyEpic = (action$, store, { pluginRenderStream$ }) => action$.ofType(ACTION)
+    .switchMap(() => {
+        return Rx.Observable.interval(1000)
+            .let(semaphore(pluginRenderStream$.startWith(true)))
+            .switchMap(() => {
+                console.log('TEST');
+                return Rx.Observable.empty();
+            });
+    });
+```
diff --git a/docs/user-guide/application-context.md b/docs/user-guide/application-context.md
@@ -123,6 +123,35 @@ In the *Enabled Plugins* list, the following buttons are displayed for each exte
 * The **Open plugin configuration documentation** button <img src="../img/button/docu-plugin.jpg" class="ms-docbutton"/> opens the [Plugins Documentation](https://mapstore.geosolutionsgroup.com/mapstore/docs/api/plugins) in another page.
 
 
+### How to update extensions
+
+Extension can be updated using two steps:
+
+- Old extension removal.
+
+- Uploading and installation of the new version of extension.
+
+As previously stated, extension can be removed on "Configure Plugins" step of wizard using **Delete** button <img src="../img/button/delete_white_button.jpg" class="ms-docbutton"/>.
+
+<img src="../img/application-context/upload_plugin2.jpg" class="ms-docimage" style="max-width:500px;"/>
+
+At this point extension will be removed from application completely. Save context after extension removal only if you want
+to be sure that extension will not be activated for the context if it's reinstalled at some point.
+
+Do not save context and upload new version of extension right away after old version removal. Context don't need to be saved after new version installation.
+
+With all stated above, complete workflow is:
+
+- Open context editing and jump to the "Configure Plugins" step of the wizard.
+
+- Delete old version of extension using **Delete** button <img src="../img/button/delete_white_button.jpg" class="ms-docbutton"/>.
+
+- Upload and install new version of extension using the **Add extension to MapStore** button <img src="../img/button/upload-button.jpg" class="ms-docbutton"/>
+
+- Do not save context, close wizard.
+
+Existing configuration of extension (default or customized) will be preserved for all the contexts using extension.
+
 ## Configure Theme
 
 The last wizard steps allows to configure the theme to use for a context. A dropdown allows to select one of the available themes (see the [Styling and Theming](../developer-guide/customize-theme.md#styling-and-theming) section of the online documentation to know how to create and include additional themes to MapStore). By default in [MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) a **default** and a **dark** themes are available.
@@ -174,4 +203,4 @@ The colors that can be customized are the following ones:
 
 An example of a custom context can be the following:
 
-<img src="../img/application-context/cutom_context.jpg" class="ms-docimage"/>
+<img src="../img/application-context/cutom_context.jpg" class="ms-docimage"/>
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "@geosolutions/jsdoc": "3.4.4",
     "@geosolutions/mocha": "6.2.1-3",
     "@mapstore/eslint-config-mapstore": "1.0.5",
+    "@testing-library/react": "12.1.5",
     "axios-mock-adapter": "1.16.0",
     "babel-loader": "8.0.5",
     "babel-plugin-add-module-exports": "0.1.4",
@@ -162,7 +163,6 @@
     "colorbrewer": "1.0.0",
     "connected-react-router": "6.3.2",
     "create-react-class": "15.6.3",
-    "css-tree": "1.0.0-alpha24",
     "draft-js": "0.11.0",
     "draft-js-inline-toolbar-plugin": "3.0.1",
     "draft-js-plugins-editor": "2.1.1",

diff --git a/project/standard/templates/api.html b/project/standard/templates/api.html
@@ -7,13 +7,9 @@
         <title>__PROJECTDESCRIPTION__</title>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/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://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/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
         <style>
         #container {
             position: absolute;

diff --git a/project/standard/templates/apiTemplate.html b/project/standard/templates/apiTemplate.html
@@ -7,13 +7,9 @@
         <title>__PROJECTDESCRIPTION__</title>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/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://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/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
         <style>
         #container {
             position: absolute;

diff --git a/project/standard/templates/dashboard-embedded-template.html b/project/standard/templates/dashboard-embedded-template.html
@@ -95,22 +95,21 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
-        <script src="https://maps.google.com/maps/api/js?v=3"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
+        <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
+        <script async type="text/javascript" src="https://unpkg.com/bowser@2.7.0/es5.js" onload="checkBrowser()"></script>
         <script type="text/javascript">
-            var browserInfo = bowser.getParser(window.navigator.userAgent);
-            var isValidBrowser = browserInfo.satisfies({
-                "edge": ">1",
-                "chrome": ">1",
-                "safari": ">1",
-                "firefox": ">1"
-            });
-            if (!isValidBrowser) {
-                window.location.href = "unsupportedBrowser.html"
-                document.querySelector("container").style.display = "none";
+            function checkBrowser() {
+                var browserInfo = bowser.getParser(window.navigator.userAgent);
+                var isValidBrowser = browserInfo.satisfies({
+                    "edge": ">1",
+                    "chrome": ">1",
+                    "safari": ">1",
+                    "firefox": ">1"
+                });
+                if (!isValidBrowser) {
+                    window.location.href = "unsupportedBrowser.html"
+                    document.querySelector("container").style.display = "none";
+                }
             }
         </script>
     </head>

diff --git a/project/standard/templates/dashboard-embedded.html b/project/standard/templates/dashboard-embedded.html
@@ -95,11 +95,7 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
-        <script src="https://maps.google.com/maps/api/js?v=3"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
+        <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
     </head>
     <body>
         <div id="container">

diff --git a/project/standard/templates/embedded.html b/project/standard/templates/embedded.html
@@ -84,13 +84,9 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/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://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/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
     </head>
     <body>
         <div id="container">

diff --git a/project/standard/templates/embeddedTemplate.html b/project/standard/templates/embeddedTemplate.html
@@ -84,25 +84,23 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/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://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/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
-        <script type="text/javascript" src="https://unpkg.com/bowser@2.7.0/es5.js"></script>
+        <script async type="text/javascript" src="https://unpkg.com/bowser@2.7.0/es5.js" onload="checkBrowser()"></script>
         <script type="text/javascript">
-            var browserInfo = bowser.getParser(window.navigator.userAgent);
-            var isValidBrowser = browserInfo.satisfies({
-                "edge": ">1",
-                "chrome": ">1",
-                "safari": ">1",
-                "firefox": ">1"
-            });
-            if (!isValidBrowser) {
-                window.location.href = "unsupportedBrowser.html"
-                document.querySelector("container").style.display = "none";
+            function checkBrowser() {
+                var browserInfo = bowser.getParser(window.navigator.userAgent);
+                var isValidBrowser = browserInfo.satisfies({
+                    "edge": ">1",
+                    "chrome": ">1",
+                    "safari": ">1",
+                    "firefox": ">1"
+                });
+                if (!isValidBrowser) {
+                    window.location.href = "unsupportedBrowser.html"
+                    document.querySelector("container").style.display = "none";
+                }
             }
         </script>
     </head>