fix map style creation workflow (#688)

GeoNode · Dec 21, 2021 · 88ddede · 88ddede
1 parent 9645f8b
commit 88ddede
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 26 deletions.
diff --git a/geonode_mapstore_client/client/js/epics/visualstyleeditor.js b/geonode_mapstore_client/client/js/epics/visualstyleeditor.js
@@ -26,7 +26,6 @@ import {
 } from '@js/actions/visualstyleeditor';
 import { saveDirectContent } from '@js/actions/gnsave';
 import tinycolor from 'tinycolor2';
-import { isNewResource } from '@js/selectors/resource';
 import { parseStyleName, parseMetadata } from '@js/utils/ResourceUtils';
 
 function getBaseCSSStyle({ type, title }) {
@@ -119,26 +118,27 @@ export const gnRequestDatasetAvailableStyles = (action$, store) =>
         .switchMap((action) => {
             const state = store.getState();
             const styleService = action?.options?.styleService || styleServiceSelector(state);
-            return Observable.defer(() => getGeoNodeStyles({ layer: action.layer, styleService }))
-                .switchMap(([styles, update]) => {
-                    const style = action?.options?.style || styles?.[0]?.name;
-                    return Observable.concat(
-                        Observable.of(setControlProperty('visualStyleEditor', 'enabled', true)),
-                        Observable.defer(() => StylesAPI.getStylesInfo({
-                            baseUrl: styleService?.baseUrl,
-                            styles
-                        }))
-                            .switchMap((availableStyles) => {
-                                return Observable.of(
-                                    updateNode(action.layer.id, 'layer', { availableStyles }),
-                                    updateSettingsParams({ style }, true),
-                                    updateAdditionalLayer(action.layer.id, STYLE_OWNER_NAME, 'override', {}),
-                                    updateStatus('edit'),
-                                    ...(update && !isNewResource(state)  ? [saveDirectContent()] : [])
-                                );
-                            })
-                    );
-                });
+            return Observable.concat(
+                Observable.of(setControlProperty('visualStyleEditor', 'enabled', true)),
+                Observable.defer(() => getGeoNodeStyles({ layer: action.layer, styleService }))
+                    .switchMap(([styles]) => {
+                        const style = action?.options?.style || styles?.[0]?.name;
+                        return Observable.concat(
+                            Observable.defer(() => StylesAPI.getStylesInfo({
+                                baseUrl: styleService?.baseUrl,
+                                styles
+                            }))
+                                .switchMap((availableStyles) => {
+                                    return Observable.of(
+                                        updateNode(action.layer.id, 'layer', { availableStyles }),
+                                        updateSettingsParams({ style }, true),
+                                        updateAdditionalLayer(action.layer.id, STYLE_OWNER_NAME, 'override', {}),
+                                        updateStatus('edit')
+                                    );
+                                })
+                        );
+                    })
+            );
         });
 
 export const gnCreateStyle = (action$, store) =>

diff --git a/geonode_mapstore_client/client/js/plugins/visualstyleeditor/TemplateSelector.jsx b/geonode_mapstore_client/client/js/plugins/visualstyleeditor/TemplateSelector.jsx
@@ -30,6 +30,7 @@ function TemplateSelector({
 
     const isMounted = useRef();
     const [templates, setTemplates] = useState([]);
+    const [selectedTemplate, setSelectedTemplate] = useState();
 
     useEffect(() => {
         isMounted.current = true;
@@ -55,6 +56,7 @@ function TemplateSelector({
         if (isOpen) {
             onStoreTmpCode(code);
         } else {
+            setSelectedTemplate(undefined);
             if (tmpCode) {
                 onSelect(tmpCode);
             }
@@ -78,7 +80,8 @@ function TemplateSelector({
         onSelect(styleTemplate);
     }
 
-    function replaceTemplateMetadata(templateCode) {
+    function replaceTemplateMetadata({ code: templateCode }, idx) {
+        setSelectedTemplate(idx);
         const styleTitle = selectedStyle?.metadata?.title || selectedStyle?.label || selectedStyle?.title || selectedStyle?.name || '';
         getStyleParser(format)
             .writeStyle({
@@ -107,8 +110,8 @@ function TemplateSelector({
                             return (
                                 <li
                                     key={idx}
-                                    className="gn-visual-style-editor-template"
-                                    onClick={() => replaceTemplateMetadata(styleTemplate.code)}
+                                    className={`gn-visual-style-editor-template${selectedTemplate === idx ? ' selected' : ''}`}
+                                    onClick={() => replaceTemplateMetadata(styleTemplate, idx)}
                                 >
                                     <div className="gn-visual-style-editor-template-preview">
                                         {styleTemplate?.preview?.config
@@ -121,7 +124,7 @@ function TemplateSelector({
                         })}
                     </ul>
                     <div className="gn-visual-style-editor-templates-footer">
-                        <Button size="xs" variant="primary" onClick={handleApply}><Message msgId="gnviewer.applyStyle"/></Button>
+                        <Button size="xs" disabled={selectedTemplate === undefined} variant="primary" onClick={handleApply}><Message msgId="gnviewer.applyStyle"/></Button>
                     </div>
                 </div>
             }

diff --git a/geonode_mapstore_client/client/js/utils/ResourceUtils.js b/geonode_mapstore_client/client/js/utils/ResourceUtils.js
@@ -512,8 +512,11 @@ export function toMapStoreMapConfig(resource, baseConfig) {
  * @param {Array} entry Array containing layer metadata information
  * @returns {Object} metadata object
  */
-export const parseMetadata = ({ entry }) => {
+export const parseMetadata = ({ entry } = {}) => {
     const metadata = {};
+    if (!entry) {
+        return metadata;
+    }
     entry.forEach((entryObj) => {
         const entryArray = Object.values(entryObj);
         if (entryArray.length > 1) {

diff --git a/geonode_mapstore_client/client/js/utils/__tests__/ResourceUtils-test.js b/geonode_mapstore_client/client/js/utils/__tests__/ResourceUtils-test.js
@@ -427,4 +427,8 @@ describe('Test Resource Utils', () => {
 
         expect(metadataObj).toEqual({key1: 'test', key2: 'test2'});
     });
+    it('should return empty object if entry is not defined', () => {
+        const metadataObj = parseMetadata();
+        expect(metadataObj).toEqual({});
+    });
 });
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_visual-style-editor.less b/geonode_mapstore_client/client/themes/geonode/less/_visual-style-editor.less
@@ -13,6 +13,11 @@
     .gn-visual-style-editor-styles {
         .border-bottom-color-var(@theme-vars[main-border-color]);
     }
+    .gn-visual-style-editor-template {
+        &.selected {
+            .outline-color-var(@theme-vars[focus-color]);
+        }
+    }
 }
 
 // **************
@@ -134,6 +139,10 @@
             overflow: hidden;
             text-align: center;
         }
+        &.selected {
+            outline-width: 2px;
+            outline-style: solid;
+        }
     }
 }