#1947: Harmonization of download actions inside the GeoNode client

GeoNode · Jan 30, 2025 · f825b9d · f825b9d
1 parent c0f8177
commit f825b9d
Show file tree

Hide file tree

Showing 23 changed files with 196 additions and 28 deletions.
diff --git a/geonode_mapstore_client/client/js/components/Menu/DropdownList.jsx b/geonode_mapstore_client/client/js/components/Menu/DropdownList.jsx
@@ -28,10 +28,10 @@ const itemElement = ({ labelId, href, badge, target }) =>  (
 
 const itemsList = (items) => (items && items.map((item) => {
 
-    const { labelId, href, badge, target, type, Component, className } = item;
+    const { labelId, href, badge, target, type, Component, className, cfg } = item;
 
     if (type === 'plugin' && Component) {
-        return (<li><Component variant="default" className={className} showMessage /></li>);
+        return (<li><Component {...cfg} variant="default" className={className} showMessage /></li>);
     }
 
     return itemElement({ labelId, href, badge, target });
@@ -97,7 +97,7 @@ const DropdownList = ({
         .map((itm, idx) => {
 
             if (itm.type === 'plugin' && itm.Component) {
-                return (<li><itm.Component variant="default" className={itm.className} showMessage /></li>);
+                return (<li><itm.Component {...itm.cfg} variant="default" className={itm.className} showMessage /></li>);
             }
             if (itm.type === 'divider') {
                 return <Dropdown.Divider key={idx} />;

diff --git a/geonode_mapstore_client/client/js/epics/index.js b/geonode_mapstore_client/client/js/epics/index.js
@@ -68,23 +68,23 @@ export const gnFetchMissingLayerData = (action$, { getState } = {}) =>
             const layerResourceId = layer?.extendedParams?.pk;
             const layerResourceDataset = state.gnresource.data?.maplayers?.find(mapLayer => mapLayer.dataset?.pk === parseInt(layerResourceId, 10))?.dataset;
             return layerResourceDataset
-            ? isEmpty(layerResourceDataset?.linkedResources)
-                ? Rx.Observable.defer(() =>
-                    getDatasetByPk(layerResourceId)
-                        .then((layerDataset) => layerDataset)
-                        .catch(() => [])
-                ).switchMap((layerDataset) =>
-                    Rx.Observable.of(
-                        updateLayerDataset(layerDataset),
+                ? isEmpty(layerResourceDataset?.linkedResources)
+                    ? Rx.Observable.defer(() =>
+                        getDatasetByPk(layerResourceId)
+                            .then((layerDataset) => layerDataset)
+                            .catch(() => [])
+                    ).switchMap((layerDataset) =>
+                        Rx.Observable.of(
+                            updateLayerDataset(layerDataset),
+                            setLayerDataset(layerResourceId)
+                        )
+                    ).startWith(setLayerDataset())
+                    : Rx.Observable.of(
                         setLayerDataset(layerResourceId)
                     )
-                )
                 : Rx.Observable.of(
-                    setLayerDataset(layerResourceId)
-                )
-            : Rx.Observable.of(
-                setLayerDataset()
-            )
+                    setLayerDataset()
+                );
         });
 
 

diff --git a/geonode_mapstore_client/client/js/plugins/DatasetDownload.jsx b/geonode_mapstore_client/client/js/plugins/DatasetDownload.jsx
@@ -0,0 +1,87 @@
+/*
+ * Copyright 2025, 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 React from "react";
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+
+import { createPlugin } from "@mapstore/framework/utils/PluginsUtils";
+
+import Dropdown from '@js/components/Dropdown';
+import FaIcon from '@js/components/FaIcon/FaIcon';
+import { getSelectedLayerDataset } from '@js/selectors/resource';
+import { SOURCE_TYPES } from "@js/utils/ResourceUtils";
+
+const DatasetDownload = connect(
+    createSelector([
+        getSelectedLayerDataset
+    ], (resource) => ({
+        resource
+    }))
+)(({
+    items,
+    selectedNodes,
+    status,
+    statusTypes,
+    resource, // the selected layer's dataset resource
+    allowedSources = [SOURCE_TYPES.LOCAL] // allowed sources for download
+}) => {
+    const toolbarItems = items?.filter(item => item.target === "toolbar");
+    const layer = selectedNodes?.[0]?.node;
+    if ([statusTypes?.LAYER].includes(status) && layer && !layer?.error && toolbarItems.length > 0) {
+        return (
+            <div className="gn-layer-download">
+                <Dropdown className={"download-dropdown"}>
+                    <Dropdown.Toggle
+                        id={ `gn-toggle-dropdown-layer-download`}
+                        bsStyle={"primary"}
+                        noCaret
+                    >
+                        <FaIcon name={"download"} />
+                    </Dropdown.Toggle>
+                    <Dropdown.Menu>
+                        {toolbarItems.map(({Component, name}, idx) => (
+                            <Dropdown.Item eventKey={idx}>
+                                <Component
+                                    key={`${name}-item-${idx}`}
+                                    resource={resource}
+                                    allowedSources={allowedSources}
+                                    variant="default"
+                                />
+                            </Dropdown.Item>
+                        ))}
+                    </Dropdown.Menu>
+                </Dropdown>
+            </div>
+        );
+    }
+    return null;
+});
+
+/**
+ * Plugin for downloading the dataset resource
+ * via direct download or export the data associated
+ * @name DatasetDownload
+ * @example
+ * {
+ *  "name": "DatasetDownload"
+ * }
+ */
+export default createPlugin('DatasetDownload', {
+    component: DatasetDownload,
+    containers: {
+        TOC: {
+            doNotHide: true,
+            name: "DatasetDownload",
+            target: 'toolbar',
+            Component: DatasetDownload,
+            position: 11
+        }
+    },
+    epics: {},
+    reducers: {}
+});
diff --git a/geonode_mapstore_client/client/js/plugins/DownloadResource.jsx b/geonode_mapstore_client/client/js/plugins/DownloadResource.jsx
@@ -11,7 +11,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import isEmpty from 'lodash/isEmpty';
 import { createPlugin } from '@mapstore/framework/utils/PluginsUtils';
-import { getDownloadUrlInfo, isDocumentExternalSource, GXP_PTYPES } from '@js/utils/ResourceUtils';
+import { getDownloadUrlInfo, isDocumentExternalSource, GXP_PTYPES, SOURCE_TYPES } from '@js/utils/ResourceUtils';
 import Message from '@mapstore/framework/components/I18N/Message';
 import Button from '@js/components/Button';
 import tooltip from '@mapstore/framework/components/misc/enhancers/tooltip';
@@ -38,6 +38,8 @@ const DownloadButton = ({
     onAction = () => {},
     renderType = "button",
     showIcon,
+    downloadMsgId = "gnviewer.download",
+    allowedSources = [SOURCE_TYPES.LOCAL, SOURCE_TYPES.REMOTE],
     downloading
 }) => {
     const Component =  RENDER_TYPE[renderType];
@@ -51,6 +53,7 @@ const DownloadButton = ({
         || !_resource?.perms?.includes('download_resourcebase')
         || (!isButton && isNotAjaxSafe)
         || [GXP_PTYPES.REST_MAP, GXP_PTYPES.REST_IMG].includes(_resource?.ptype) // exclude arcgis remote layers from direct download
+        || !allowedSources.includes(_resource?.sourcetype)
     ) {
         return null;
     }
@@ -59,15 +62,15 @@ const DownloadButton = ({
         return downloadInfo.url ? (
             <Component
                 {...isButton && { variant, size }}
-                {...showIcon && { tooltipId: "gnviewer.download" }}
+                {...showIcon && { tooltipId: downloadMsgId }}
                 download
                 href={ downloadInfo.url }
                 target="_blank"
                 rel="noopener noreferrer"
             >
                 {showIcon
                     ? <FaIcon name={isExternal ? "external-link" : "download"} />
-                    : <Message msgId="gnviewer.download" />
+                    : <Message msgId={downloadMsgId} />
                 }
             </Component>
         ) : null;
@@ -78,11 +81,11 @@ const DownloadButton = ({
             disabled={!!downloading}
             onClick={() => downloading ? null : onAction(_resource)}
             {...isButton && { variant, size}}
-            {...showIcon && { tooltipId: "gnviewer.download" }}
+            {...showIcon && { tooltipId: downloadMsgId }}
         >
             {showIcon
                 ? <FaIcon name="download" />
-                : <Message msgId="gnviewer.download" />
+                : <Message msgId={downloadMsgId} />
             }
         </Component>
     );
@@ -133,6 +136,12 @@ export default createPlugin('DownloadResource', {
             target: 'toolbar',
             Component: DownloadResource,
             priority: 1
+        },
+        DatasetDownload: {
+            name: 'DownloadResource',
+            target: 'toolbar',
+            Component: DownloadResource,
+            priority: 1
         }
     },
     epics: {},

diff --git a/geonode_mapstore_client/client/js/plugins/VisualStyleEditor.jsx b/geonode_mapstore_client/client/js/plugins/VisualStyleEditor.jsx
@@ -52,7 +52,7 @@ import tooltip from '@mapstore/framework/components/misc/enhancers/tooltip';
 import { getSelectedLayer, layersSelector } from '@mapstore/framework/selectors/layers';
 import useLocalStorage from '@js/hooks/useLocalStorage';
 import TemplateSelector from '@js/plugins/visualstyleeditor/TemplateSelector';
-import { isDefaultDatasetSubtype } from '@js/utils/ResourceUtils';
+import { isDefaultDatasetSubtype, SOURCE_TYPES } from '@js/utils/ResourceUtils';
 
 const Button = tooltip(GNButton);
 
@@ -318,7 +318,7 @@ function StyleEditorTocButton({
     if (hide
     || status !== statusTypes.LAYER
     || !mapLayer?.dataset
-    || mapLayer?.dataset?.sourcetype === 'REMOTE'
+    || mapLayer?.dataset?.sourcetype === SOURCE_TYPES.REMOTE
     || !changeResource
     || isNew
     || !isDefaultDatasetSubtype(mapLayer?.dataset?.subtype)) {

diff --git a/geonode_mapstore_client/client/js/plugins/actionnavbar/buttons.jsx b/geonode_mapstore_client/client/js/plugins/actionnavbar/buttons.jsx
@@ -78,7 +78,7 @@ export const LayerDownloadActionButton = connect(
             size={size}
             onClick={() => onClick()}
         >
-            <Message msgId="gnhome.dataset" />
+            <Message msgId="gnviewer.exportData" />
         </Button>
     );
 });

diff --git a/geonode_mapstore_client/client/js/plugins/index.js b/geonode_mapstore_client/client/js/plugins/index.js
@@ -69,15 +69,25 @@ export const plugins = {
     OperationPlugin,
     MetadataEditorPlugin,
     MetadataViewerPlugin,
+    DatasetDownloadPlugin: toModulePlugin(
+        'DatasetDownload',
+        () => import(/* webpackChunkName: 'plugins/dataset-download' */ '@js/plugins/DatasetDownload')
+    ),
     LayerDownloadPlugin: toModulePlugin(
         'LayerDownload',
         () => import(/* webpackChunkName: 'plugins/layer-download' */ '@mapstore/framework/plugins/LayerDownload'),
         {
             overrides: {
                 containers: {
+                    TOC: {},
                     ActionNavbar: {
                         name: 'LayerDownload',
                         Component: LayerDownloadActionButton
+                    },
+                    DatasetDownload: {
+                        name: 'LayerDownload',
+                        Component: LayerDownloadActionButton,
+                        target: 'toolbar'
                     }
                 }
             }

diff --git a/geonode_mapstore_client/client/js/utils/ResourceUtils.js b/geonode_mapstore_client/client/js/utils/ResourceUtils.js
@@ -84,6 +84,11 @@ export const isDefaultDatasetSubtype = (subtype) => !subtype || ['vector', 'rast
 
 export const FEATURE_INFO_FORMAT = 'TEMPLATE';
 
+export const SOURCE_TYPES = {
+    LOCAL: 'LOCAL',
+    REMOTE: 'REMOTE'
+};
+
 const datasetAttributeSetToFields = ({ attribute_set: attributeSet = [] }) => {
     return attributeSet
         .filter(({ attribute_type: type }) => !type.includes('gml:'))
@@ -221,7 +226,7 @@ export const resourceToLayerConfig = (resource) => {
             ...(dimensions.length > 0 && ({ dimensions })),
             extendedParams,
             ...(fields && { fields }),
-            ...(sourcetype === 'REMOTE' && !wmsUrl.includes('/geoserver/') && {
+            ...(sourcetype === SOURCE_TYPES.REMOTE && !wmsUrl.includes('/geoserver/') && {
                 serverType: ServerTypes.NO_VENDOR
             })
         };
@@ -327,7 +332,7 @@ export const ResourceTypes = {
 };
 
 export const isDocumentExternalSource = (resource) => {
-    return resource && resource.resource_type === ResourceTypes.DOCUMENT && resource.sourcetype === 'REMOTE';
+    return resource && resource.resource_type === ResourceTypes.DOCUMENT && resource.sourcetype === SOURCE_TYPES.REMOTE;
 };
 
 export const getResourceTypesInfo = () => ({

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_layer-settings.less b/geonode_mapstore_client/client/themes/geonode/less/_layer-settings.less
@@ -66,3 +66,31 @@
     }
 
 }
+
+.ms-toc-container {
+    .ms-toc-toolbar-content {
+        .gn-layer-download {
+            width: 30px;
+            .download-dropdown {
+                position: absolute;
+                top: 0;
+                width: inherit;
+                button.dropdown-toggle{
+                    width: inherit;
+                }
+                ul.dropdown-menu {
+                    width: 120px;
+                    li {
+                        a[role="menuitem"] {
+                          padding: 0;  
+                        }
+                        button {
+                            width: 100%;
+                            text-align: left;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/geonode_mapstore_client/static/mapstore/configs/localConfig.json b/geonode_mapstore_client/static/mapstore/configs/localConfig.json
@@ -629,6 +629,14 @@
                             "disableIf": "{!state('selectedLayerPermissions').includes('download_resourcebase') || context.isDocumentExternalSource(state('gnResourceData'))}",
                             "type": "dropdown",
                             "items": [
+                                {
+                                    "type": "plugin",
+                                    "name": "DownloadResource",
+                                    "cfg": {
+                                        "downloadMsgId": "gnhome.dataset",
+                                        "allowedSources": ["LOCAL"]
+                                    }
+                                },
                                 {
                                     "type": "plugin",
                                     "name": "LayerDownload"
@@ -1610,6 +1618,14 @@
                     }
                 }
             },
+            {
+                "name": "DatasetDownload",
+                "mandatory": true
+            },
+            {
+                "name": "DownloadResource",
+                "mandatory": true
+            },
             {
                 "name": "MapThumbnail"
             },

diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.de-DE.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.de-DE.json
@@ -175,7 +175,8 @@
         },
         "gnviewer": {
             "edit": "Bearbeiten",
-            "export": "Export",
+            "export": "Exportieren",
+            "exportData": "Daten exportieren",
             "editInfo": "Informationen anzeigen",
             "editMetadata": "Metadaten bearbeiten",
             "editStyle": "Stil bearbeiten",

diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.en-US.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.en-US.json
@@ -176,6 +176,7 @@
         "gnviewer": {
             "edit": "Edit",
             "export": "Export",
+            "exportData": "Export Data",
             "editInfo": "Edit Info",
             "editMetadata": "Edit Metadata",
             "editStyle": "Edit Style",

diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.es-ES.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.es-ES.json
@@ -176,6 +176,7 @@
         "gnviewer": {
             "edit": "Editar",
             "export": "Exportar",
+            "exportData": "Exportar datos",
             "editInfo": "Editar información",
             "editMetadata": "Editar Metadatos",
             "editStyle": "Editar Estilo",

diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.fi-FI.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.fi-FI.json
@@ -174,6 +174,7 @@
         "gnviewer": {
             "edit": "Edit",
             "export": "Export",
+            "exportData": "Export Data",
             "editInfo": "Edit Info",
             "editMetadata": "Edit Metadata",
             "editStyle": "Edit Style",