Implement msForceVisual style metadata property to force the switch t…

…o visual mode (#724)

geonode_mapstore_client/client/js/api/geonode/style/index.js

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2022, 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.
+ */
+
+import {
+    getStyleCodeByName,
+    updateStyle
+} from '@mapstore/framework/api/geoserver/Styles';
+
+export function getStyleProperties({ baseUrl, styleName }) {
+    return import('md5').then((mod) => {
+        const md5 = mod.default;
+        return getStyleCodeByName({
+            baseUrl,
+            styleName
+        })
+            .then((style) => {
+                const {
+                    msForceVisual,
+                    ...metadata
+                } = style?.metadata || {};
+                if (!msForceVisual || msForceVisual === '') {
+                    return style;
+                }
+                // force use of visual style editor with msForceVisual
+                // and remove the true value
+                const updatedMetadata = {
+                    ...metadata,
+                    msForceVisual: '',
+                    msEditorType: 'visual',
+                    msStyleJSON: '',
+                    msMD5Hash: md5(style?.code)
+                };
+                return updateStyle({
+                    ...style,
+                    baseUrl,
+                    styleName,
+                    metadata: updatedMetadata,
+                    options: {
+                        params: {
+                            raw: true
+                        }
+                    }
+                }).then(() => ({ ...style, metadata: updatedMetadata }));
+            });
+    });
+}

geonode_mapstore_client/client/js/epics/gnresource.js

@@ -61,7 +61,8 @@ import {
 import {
     resourceToLayerConfig,
     ResourceTypes,
-    toMapStoreMapConfig
+    toMapStoreMapConfig,
+    parseStyleName
 } from '@js/utils/ResourceUtils';
 import {
     canAddResource,
@@ -70,7 +71,6 @@ import {
 } from '@js/selectors/resource';
 import { updateAdditionalLayer } from '@mapstore/framework/actions/additionallayers';
 import { STYLE_OWNER_NAME } from '@mapstore/framework/utils/StyleEditorUtils';
-import StylesAPI from '@mapstore/framework/api/geoserver/Styles';
 import { styleServiceSelector } from '@mapstore/framework/selectors/styleeditor';
 import { updateStyleService } from '@mapstore/framework/api/StyleEditor';
 import { resizeMap } from '@mapstore/framework/actions/map';
@@ -79,6 +79,7 @@ import {
     error as errorNotification,
     success as successNotification
 } from '@mapstore/framework/actions/notifications';
+import { getStyleProperties } from '@js/api/geonode/style';
 
 const resourceTypes = {
     [ResourceTypes.DATASET]: {
@@ -99,11 +100,21 @@ const resourceTypes = {
                             return [mapConfig, gnLayer, newLayer];
                         }
 
-                        return StylesAPI.getStylesInfo({
+                        return getStyleProperties({
                             baseUrl: options?.styleService?.baseUrl,
-                            styles: [newLayer.extendedParams.defaultStyle]
-                        }).then((availableStyles) => {
-                            return [mapConfig, gnLayer, { ...newLayer, availableStyles }];
+                            styleName: parseStyleName(newLayer.extendedParams.defaultStyle)
+                        }).then((updatedStyle) => {
+                            return [
+                                mapConfig,
+                                gnLayer,
+                                {
+                                    ...newLayer,
+                                    availableStyles: [{
+                                        ...updatedStyle,
+                                        ...newLayer.extendedParams.defaultStyle
+                                    }]
+                                }
+                            ];
                         });
                     })
             )

geonode_mapstore_client/client/js/epics/visualstyleeditor.js

@@ -21,6 +21,7 @@ import {
 import { REQUEST_DATASET_AVAILABLE_STYLES } from '@js/actions/visualstyleeditor';
 import tinycolor from 'tinycolor2';
 import { parseStyleName } from '@js/utils/ResourceUtils';
+import { getStyleProperties } from '@js/api/geonode/style';
 
 /**
 * @module epics/visualstyleeditor
@@ -67,13 +68,21 @@ function getGnStyleQueryParams(style, styleService) {
         return new Promise(resolve => resolve({ msStyleJSON, msEditorType, code }));
     }
 
-    return StylesAPI.getStyleCodeByName({
+    return getStyleProperties({
         baseUrl: styleService?.baseUrl,
         styleName: parseStyleName(style)
-    }).then(updatedStyle => {
-        const { metadata = {}, code: updateStyleCode, format, languageVersion } = updatedStyle || {};
-        return { msEditorType: metadata?.msEditorType, msStyleJSON: metadata?.msStyleJSON, code: updateStyleCode, format, languageVersion };
-    }).catch(() => ({ msEditorType, msStyleJSON, code}));
+    })
+        .then(updatedStyle => {
+            const { metadata = {}, code: updateStyleCode, format, languageVersion } = updatedStyle || {};
+            return {
+                msEditorType: metadata?.msEditorType,
+                msStyleJSON: metadata?.msStyleJSON,
+                code: updateStyleCode,
+                format,
+                languageVersion
+            };
+        })
+        .catch(() => ({ msEditorType, msStyleJSON, code}));
 }
 
 function getGeoNodeStyles({ layer, styleService }) {

geonode_mapstore_client/client/themes/geonode/less/ms-theme.less

@@ -268,3 +268,13 @@ div#mapstore-globalspinner {
 .ms-side-panel .ms-header {
     box-shadow: none;
 }
+
+// missing close symbol in geocss code editor picker
+.ms-inline-widget-container {
+    .btn.close:before {
+        content: "X";
+    }
+    .btn.close:hover {
+        color: #ffffff;
+    }
+}