[Backport 2.1.x] Fix loading of app templates (#102)

* fix app templates and align the configuration with other apps * update client bundle
GeoNode · Mar 30, 2021 · 9fb69b3 · 9fb69b3
1 parent 6ccf563
commit 9fb69b3
Show file tree

Hide file tree

Showing 289 changed files with 669 additions and 460 deletions.
diff --git a/geonode_mapstore_client/client/js/api/geonode/v2/index.js b/geonode_mapstore_client/client/js/api/geonode/v2/index.js
@@ -12,11 +12,13 @@ import {
     setRequestOptions,
     getRequestOptions
 } from '@js/utils/APIUtils';
-import _ from 'lodash';
+import merge from 'lodash/merge';
 import mergeWith from 'lodash/mergeWith';
 import isArray from 'lodash/isArray';
 import isString from 'lodash/isString';
+import isObject from 'lodash/isObject';
 import castArray from 'lodash/castArray';
+import get from 'lodash/get';
 import { getUserInfo } from '@js/api/geonode/v1';
 import { getConfigProp } from '@mapstore/framework/utils/ConfigUtils';
 import { setFilterById } from '@js/utils/GNSearchUtils';
@@ -280,17 +282,25 @@ export const getConfiguration = (configUrl = '/static/mapstore/configs/localConf
     return axios.get(configUrl)
         .then(({ data }) => {
             const geoNodePageConfig = window.__GEONODE_CONFIG__ || {};
-            const localConfig = _.mergeWith(
+            const localConfig = mergeWith(
                 data,
                 geoNodePageConfig.localConfig || {},
                 (objValue, srcValue) => {
-                    if (_.isArray(objValue)) {
+                    if (isArray(objValue)) {
                         return srcValue;
                     }
                     return undefined; // eslint-disable-line consistent-return
                 });
             if (geoNodePageConfig.overrideLocalConfig) {
-                return geoNodePageConfig.overrideLocalConfig(localConfig, _);
+                return geoNodePageConfig.overrideLocalConfig(localConfig, {
+                    mergeWith,
+                    merge,
+                    isArray,
+                    isString,
+                    isObject,
+                    castArray,
+                    get
+                });
             }
             return localConfig;
         });

diff --git a/geonode_mapstore_client/client/js/apps/gn-geostory.js b/geonode_mapstore_client/client/js/apps/gn-geostory.js
@@ -7,91 +7,130 @@
  */
 
 import { connect } from 'react-redux';
-import { setConfigProp, setLocalConfigurationFile } from '@mapstore/framework/utils/ConfigUtils';
-import { setRegGeoserverRule } from '@mapstore/framework/utils/LayersUtils';
-import { getSupportedLocales, setSupportedLocales } from '@mapstore/framework/utils/LocaleUtils';
-import axios from '@mapstore/framework/libs/ajax';
 import main from '@mapstore/framework/components/app/main';
+import MainLoader from '@js/components/app/MainLoader';
 import GeoStory from '@js/routes/GeoStory';
 import Router, { withRoutes } from '@js/components/app/Router';
 import security from '@mapstore/framework/reducers/security';
 import maptype from '@mapstore/framework/reducers/maptype';
 import geostory from '@mapstore/framework/reducers/geostory';
 import gnresource from '@js/reducers/gnresource';
+import gnsettings from '@js/reducers/gnsettings';
 import { registerMediaAPI } from '@mapstore/framework/api/media';
 import * as geoNodeMediaApi from '@js/observables/media/geonode';
-import { getEndpoints } from '@js/api/geonode/v2';
+import {
+    getEndpoints,
+    getConfiguration
+} from '@js/api/geonode/v2';
 import {
     setResourceType,
     setNewResource,
     setResourceId,
     setResourcePermissions
 } from '@js/actions/gnresource';
+import { updateGeoNodeSettings } from '@js/actions/gnsettings';
 import { setCurrentStory } from '@mapstore/framework/actions/geostory';
 import isMobile from 'ismobilejs';
 import uuid from 'uuid';
+import {
+    setupConfiguration,
+    getVersion,
+    initializeApp,
+    getPluginsConfiguration
+} from '@js/utils/AppUtils';
+import pluginsDefinition from '@js/plugins/index';
+import ReactSwipe from 'react-swipeable-views';
+import SwipeHeader from '@mapstore/framework/components/data/identify/SwipeHeader';
+const requires = {
+    ReactSwipe,
+    SwipeHeader
+};
 
 registerMediaAPI('geonode', geoNodeMediaApi);
 
 // TODO: check styles on less files
 import 'react-select/dist/react-select.css';
 
-// Set X-CSRFToken in axios;
-axios.defaults.xsrfHeaderName = "X-CSRFToken";
-axios.defaults.xsrfCookieName = "csrftoken";
-
 const DEFAULT_LOCALE = {};
 const ConnectedRouter = connect((state) => ({
     locale: state?.locale || DEFAULT_LOCALE
 }))(Router);
 
-const getScriptPath = function() {
-    const scriptEl = document.getElementById('ms2-api');
-    return scriptEl && scriptEl.src && scriptEl.src.substring(0, scriptEl.src.lastIndexOf('/')) || '';
-};
-
 const routes = [{
     name: 'geostory',
     path: '/',
     component: GeoStory
 }];
 
-const setLocale = (localeKey) => {
-    const supportedLocales = getSupportedLocales();
-    const locale = supportedLocales[localeKey]
-        ? { [localeKey]: supportedLocales[localeKey] }
-        : { en: supportedLocales.en };
-    setSupportedLocales(locale);
-};
-
-const getVersion = () => {
-    if (!__DEVTOOLS__) {
-        return __MAPSTORE_PROJECT_CONFIG__.version;
-    }
-    return 'dev';
+const newStoryTemplate = {
+    "type": "cascade",
+    "resources": [],
+    "settings": {
+        "theme": {
+            "general": {
+                "color": "#333333",
+                "backgroundColor": "#ffffff",
+                "borderColor": "#e6e6e6"
+            },
+            "overlay": {
+                "backgroundColor": "rgba(255, 255, 255, 0.75)",
+                "borderColor": "#dddddd",
+                "boxShadow": "0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
+                "color": "#333333"
+            }
+        }
+    },
+    "sections": [
+        {
+            "type": "title",
+            "id": "section_id",
+            "title": "Abstract",
+            "cover": true,
+            "contents": [
+                {
+                    "id": "content_id",
+                    "type": "text",
+                    "size": "large",
+                    "align": "center",
+                    "theme": "",
+                    "html": "",
+                    "background": {
+                        "fit": "cover",
+                        "size": "full",
+                        "align": "center"
+                    }
+                }
+            ]
+        }
+    ]
 };
 
-window.initMapStore = function initMapStore(geoNodeMSConfig) {
-    // get all v2 api endpoints
-    getEndpoints()
-        .then(() => {
+initializeApp();
 
+document.addEventListener('DOMContentLoaded', function() {
+    Promise.all([
+        getConfiguration(),
+        getEndpoints()
+    ])
+        .then(([localConfig]) => {
             const {
+                securityState,
+                geoNodeConfiguration,
+                pluginsConfigKey,
+                geoNodePageConfig,
+                query,
+                configEpics,
                 permissions,
-                language,
-                userDetails,
-                defaultConfig,
-                geoStoryConfig = {},
-                plugins = [],
-                isNewResource,
-                appId
-            } = geoNodeMSConfig || {};
+                onStoreInit,
+                targetId = 'ms-container',
+                settings
+            } = setupConfiguration({ localConfig });
 
-            const currentStory = isNewResource
+            const currentStory = geoNodePageConfig.isNewResource
                 // change id of new story sections and contents
                 ? {
-                    ...geoStoryConfig,
-                    sections: geoStoryConfig?.sections
+                    ...newStoryTemplate,
+                    sections: newStoryTemplate?.sections
                         .map((section) => {
                             return {
                                 ...section,
@@ -106,76 +145,74 @@ window.initMapStore = function initMapStore(geoNodeMSConfig) {
                             };
                         }) || []
                 }
-                : geoStoryConfig;
-
-            setLocalConfigurationFile('');
-            setLocale(language);
-            setRegGeoserverRule(/\/[\w- ]*geoserver[\w- ]*\/|\/[\w- ]*gs[\w- ]*\//);
-            setConfigProp('translationsPath', __MAPSTORE_PROJECT_CONFIG__.translationsPath || [
-                getScriptPath() + '/../MapStore2/web/client',
-                getScriptPath() + '/../translations'
-            ]);
-            setConfigProp('loadAfterTheme', true);
-            setConfigProp('themePrefix', 'msgapi');
-            setConfigProp('plugins', plugins);
-
-            if (defaultConfig && defaultConfig.localConfig) {
-                Object.keys(defaultConfig.localConfig).forEach(function(key) {
-                    setConfigProp(key, defaultConfig.localConfig[key]);
-                });
-            }
-
-            if (defaultConfig && defaultConfig.proxy) {
-                setConfigProp('proxyUrl', defaultConfig.proxy);
-            }
-
-            setConfigProp('initialState', {
-                defaultState: {
-                    maptype: {
-                        mapType: "{context.mode === 'desktop' ? 'openlayers' : 'leaflet'}"
-                    },
-                    security: userDetails,
-                    geostory: {
-                        isCollapsed: false,
-                        focusedContent: {},
-                        currentPage: {},
-                        settings: {},
-                        oldSettings: {},
-                        updateUrlOnScroll: false,
-                        currentStory: {},
-                        mode: isMobile.any || !permissions.canEdit ? 'view' : 'edit',
-                        resource: {
-                            canEdit: permissions.canEdit
-                        }
-                    }
-                }
-            });
+                : geoNodePageConfig.resourceConfig;
 
             main({
-                targetId: 'ms-container',
+                targetId,
                 appComponent: withRoutes(routes)(ConnectedRouter),
+                pluginsConfig: getPluginsConfiguration(localConfig.plugins, pluginsConfigKey),
+                loaderComponent: MainLoader,
+                lazyPlugins: pluginsDefinition.lazyPlugins,
                 pluginsDef: {
-                    plugins: {},
-                    requires: {}
+                    plugins: {
+                        ...pluginsDefinition.plugins
+                    },
+                    requires: {
+                        ...requires,
+                        ...pluginsDefinition.requires
+                    }
+                },
+                initialState: {
+                    defaultState: {
+                        maptype: {
+                            mapType: 'openlayers'
+                        },
+                        ...securityState,
+                        geostory: {
+                            isCollapsed: false,
+                            focusedContent: {},
+                            currentPage: {},
+                            settings: {},
+                            oldSettings: {},
+                            updateUrlOnScroll: false,
+                            currentStory: {},
+                            mode: geoNodePageConfig.isEmbed || isMobile.any || !permissions.canEdit ? 'view' : 'edit',
+                            resource: {
+                                canEdit: permissions.canEdit
+                            }
+                        }
+                    }
                 },
                 themeCfg: {
-                    path: getScriptPath() + '/themes',
-                    prefixContainer: '#ms-container',
-                    version: getVersion()
+                    path: '/static/mapstore/dist/themes',
+                    prefixContainer: '#' + targetId,
+                    version: getVersion(),
+                    prefix: 'msgapi',
+                    theme: query.theme
                 },
                 appReducers: {
                     geostory,
                     gnresource,
+                    gnsettings,
                     security,
                     maptype
                 },
+                appEpics: {
+                    ...configEpics
+                },
+                onStoreInit,
+                geoNodeConfiguration,
                 initialActions: [
+                    // add some settings in the global state to make them accessible in the monitor state
+                    // later we could use expression in localConfig
+                    updateGeoNodeSettings.bind(null, settings),
                     setCurrentStory.bind(null, currentStory),
                     setResourceType.bind(null, 'geostory'),
                     setResourcePermissions.bind(null, permissions),
-                    ...(appId ? [setResourceId.bind(null, appId)] : []),
-                    ...(isNewResource ? [setNewResource] : [])
+                    ...(geoNodePageConfig.resourceId ? [setResourceId.bind(null, geoNodePageConfig.resourceId)] : []),
+                    ...(geoNodePageConfig.isNewResource ? [setNewResource] : [])
                 ]
             });
         });
-};
+
+});
diff --git a/geonode_mapstore_client/client/js/apps/gn-map.js b/geonode_mapstore_client/client/js/apps/gn-map.js
@@ -41,7 +41,6 @@ import MapView from '@js/routes/MapView';
 
 import gnresource from '@js/reducers/gnresource';
 import gnsettings from '@js/reducers/gnsettings';
-import gnlocaleEpics from '@js/epics/gnlocale';
 
 import { getConfiguration } from '@js/api/geonode/v2';
 
@@ -171,7 +170,6 @@ Promise.all([
                     },
                     appEpics: {
                         ...standardEpics,
-                        ...gnlocaleEpics,
                         ...configEpics,
                         ...timelineEpics,
                         ...playbackEpics,

diff --git a/geonode_mapstore_client/client/js/plugins/Save.jsx b/geonode_mapstore_client/client/js/plugins/Save.jsx
@@ -101,11 +101,11 @@ export default createPlugin('Save', {
                 isLoggedIn,
                 state => state?.gnresource?.isNew,
                 state => state?.gnresource?.permissions?.canEdit,
-                state => state?.gnresource?.permissions?.type,
-                (loggedIn, isNew, canEdit, resourceType) => ({
+                mapInfoSelector,
+                (loggedIn, isNew, canEdit, mapInfo) => ({
                     // we should add permList to map pages too
-                    // no resource type means map page
-                    style: loggedIn && !isNew && (canEdit || !resourceType) ? {} : { display: 'none' }
+                    // currently the canEdit is located inside the map info
+                    style: loggedIn && !isNew && (canEdit || mapInfo?.canEdit) ? {} : { display: 'none' }
                 })
             )
         }