Move Permissions to Resource details panel (#2017)

Author: dsuren1

geonode_mapstore_client/client/js/epics/__tests__/gnsearch-test.js

@@ -697,22 +697,25 @@ export const gnSelectResourceEpic = (action$, store) =>
                     setResourceCompactPermissions(undefined)
                 );
             }
-            const user = userSelector(store.getState());
+            const state = store.getState();
+            const user = userSelector(state);
+            const { resource_type: resourceType, pk, subtype } = selectedResource;
             const _selectedResource = getResourceWithDetail(selectedResource);
             const initialActions = !_selectedResource ? [] : [
                 setResource(_selectedResource, true),
                 setSelectedResource(_selectedResource)
             ];
             return Observable.defer(() => Promise.all([
-                getResourceByTypeAndByPk(selectedResource?.resource_type, selectedResource?.pk, selectedResource?.subtype),
+                getResourceByTypeAndByPk(resourceType, pk, subtype),
                 user
-                    ? getCompactPermissionsByPk(selectedResource?.pk)
+                    ? getCompactPermissionsByPk(pk)
                         .then((compactPermissions) => compactPermissions)
                         .catch(() => null)
                     : Promise.resolve(null)
             ]))
                 .switchMap(([resource, compactPermissions]) => {
                     return Observable.of(
+                        setResourceType(resourceType),
                         setResource(getResourceWithDetail(resource)),
                         ...(compactPermissions ? [setResourceCompactPermissions(compactPermissions)] : [])
                     );

geonode_mapstore_client/client/js/epics/gnresource.js

@@ -13,6 +13,7 @@ import { createStructuredSelector } from 'reselect';
 import PropTypes from 'prop-types';
 import { requestResource } from '@js/actions/gnresource';
 import controls from '@mapstore/framework/reducers/controls';
+import config from '@mapstore/framework/reducers/config';
 import gnresource from '@js/reducers/gnresource';
 import {
     getResourceData,
@@ -207,6 +208,13 @@ function ResourceDetailsPanel({
                 }
             ]
         },
+        {
+            "type": "permissions",
+            "id": "permissions",
+            "labelId": "gnviewer.permissions",
+            "disableIf": "{!context.canAccessPermissions(state('gnResourceData'))}",
+            "items": [true]
+        },
         {
             "type": "locations",
             "id": "locations",
@@ -435,6 +443,7 @@ export default createPlugin('ResourceDetails', {
     },
     reducers: {
         gnresource,
-        controls
+        controls,
+        config
     }
 });

geonode_mapstore_client/client/js/epics/gnsearch.js

@@ -20,7 +20,7 @@ import Spinner from '@mapstore/framework/components/layout/Spinner';
 import BaseMap from '@mapstore/framework/components/map/BaseMap';
 import mapTypeHOC from '@mapstore/framework/components/map/enhancers/mapType';
 import { getConfigProp } from '@mapstore/framework/utils/ConfigUtils';
-import { ResourceTypes, GXP_PTYPES, isDefaultDatasetSubtype, resourceToLayerConfig } from '@js/utils/ResourceUtils';
+import { ResourceTypes, GXP_PTYPES, isDefaultDatasetSubtype, resourceToLayers } from '@js/utils/ResourceUtils';
 
 const Map = mapTypeHOC(BaseMap);
 Map.displayName = 'Map';
@@ -86,28 +86,6 @@ const MapThumbnailView = ({
     );
 };
 
-function resourceToLayers(resource) {
-    if (resource?.resource_type === ResourceTypes.DATASET) {
-        return [resourceToLayerConfig(resource)];
-    }
-    if (resource.maplayers && resource?.resource_type === ResourceTypes.MAP) {
-        return resource.maplayers
-            .map(maplayer => {
-                maplayer.dataset ? resourceToLayerConfig(maplayer.dataset) : null;
-                if (maplayer.dataset) {
-                    const layer = resourceToLayerConfig(maplayer.dataset);
-                    return {
-                        ...layer,
-                        style: maplayer.current_style
-                    };
-                }
-                return null;
-            })
-            .filter(value => value);
-    }
-    return [];
-}
-
 function DetailsThumbnail({
     icon,
     editing,

geonode_mapstore_client/client/js/plugins/ResourceDetails/ResourceDetails.jsx

@@ -8,14 +8,24 @@
 
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { connect } from "react-redux";
+import { createSelector } from "reselect";
+
 import BaseMap from '@mapstore/framework/components/map/BaseMap';
 import mapTypeHOC from '@mapstore/framework/components/map/enhancers/mapType';
 import LocalDrawSupport from '@mapstore/framework/components/geostory/common/map/LocalDrawSupport';
 import FitBounds from '@mapstore/framework/components/geostory/common/map/FitBounds';
 import Button from '@mapstore/framework/components/layout/Button';
 import Icon from '@mapstore/framework/plugins/ResourcesCatalog/components/Icon';
 import Spinner from '@mapstore/framework/components/layout/Spinner';
+import Popover from "@mapstore/framework/components/styleeditor/Popover";
+import useIsMounted from "@mapstore/framework/hooks/useIsMounted";
+import { mapInfoSelector } from "@mapstore/framework/selectors/map";
+
 import { getExtent } from '@js/utils/CoordinatesUtils';
+import { getGeoLimits } from "@js/api/geonode/security";
+import { getResourceData, getResourceId } from "@js/selectors/resource";
+import { resourceToLayers } from '@js/utils/ResourceUtils';
 
 const Map = mapTypeHOC(BaseMap);
 Map.displayName = 'Map';
@@ -174,4 +184,73 @@ GeoLimits.defaultProps = {
     mapType: 'openlayers'
 };
 
-export default GeoLimits;
+const ConnectedGeoLimits = connect(
+    createSelector(
+        [getResourceId, mapInfoSelector, getResourceData],
+        (resourceId, mapInfo, resource) => ({
+            resourceId: resourceId || mapInfo?.id,
+            resource
+        })
+    )
+)(({ entry, onUpdate, resourceId, resource }) => {
+    const isMounted = useIsMounted();
+    const defaultMap = window.overrideNewMapConfig({ map: { layers: [] } });
+    const layers = [
+        ...(defaultMap?.map?.layers || []),
+        ...resourceToLayers(resource)
+    ];
+
+    function handleRequestGeoLimits(_entry) {
+        if (!_entry.geoLimitsLoading) {
+            onUpdate(_entry.id, { geoLimitsLoading: true }, true);
+            getGeoLimits(resourceId, _entry.id, _entry.type)
+                .then((collection) => {
+                    isMounted(() => {
+                        onUpdate(_entry.id, {
+                            geoLimitsLoading: false,
+                            features: collection.features || [],
+                            isGeoLimitsChanged: false
+                        });
+                    });
+                })
+                .catch(() => {
+                    isMounted(() => {
+                        onUpdate(_entry.id, {
+                            geoLimitsLoading: false,
+                            features: [],
+                            isGeoLimitsChanged: false
+                        });
+                    });
+                });
+        }
+    }
+
+    return (
+        <Popover
+            placement="left"
+            onOpen={(open) => {
+                if (open && !entry.features) {
+                    handleRequestGeoLimits(entry);
+                }
+            }}
+            content={
+                <GeoLimits
+                    key={entry.geoLimitsLoading}
+                    layers={layers}
+                    features={entry.features}
+                    loading={entry.geoLimitsLoading}
+                    onChange={(changes) =>
+                        onUpdate(entry.id, { ...changes, isGeoLimitsChanged: true })
+                    }
+                    onRefresh={handleRequestGeoLimits.bind(null, entry)}
+                />
+            }
+        >
+            <Button>
+                <Icon glyph="globe" />
+            </Button>
+        </Popover>
+    );
+});
+
+export default ConnectedGeoLimits;