#2153: Enhancements to the Share and Details panel (#2204)

* #2153: Enhancements to the Share and Details panel

* code refactor

Author: dsuren1

geonode_mapstore_client/client/js/epics/gnsave.js

@@ -81,7 +81,8 @@ import {
     ResourceTypes,
     cleanCompactPermissions,
     toGeoNodeMapConfig,
-    RESOURCE_MANAGEMENT_PROPERTIES,
+    RESOURCE_PUBLISHING_PROPERTIES,
+    RESOURCE_OPTIONS_PROPERTIES,
     getDimensions,
     isDefaultDatasetSubtype
 } from '@js/utils/ResourceUtils';
@@ -94,7 +95,7 @@ import { layersSelector, getSelectedLayer as getSelectedNode } from '@mapstore/f
 import { styleServiceSelector, getUpdatedLayer, selectedStyleSelector } from '@mapstore/framework/selectors/styleeditor';
 import LayersAPI from '@mapstore/framework/api/geoserver/Layers';
 
-const RESOURCE_MANAGEMENT_PROPERTIES_KEYS = Object.keys(RESOURCE_MANAGEMENT_PROPERTIES);
+const RESOURCE_MANAGEMENT_PROPERTIES_KEYS = Object.keys({...RESOURCE_PUBLISHING_PROPERTIES, ...RESOURCE_OPTIONS_PROPERTIES});
 
 function parseMapBody(body) {
     const geoNodeMap = toGeoNodeMapConfig(body.data);

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

@@ -9,28 +9,35 @@
 import React, { useEffect, useState } from 'react';
 import { createPlugin } from '@mapstore/framework/utils/PluginsUtils';
 import { connect } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
+import { createStructuredSelector, createSelector } from 'reselect';
 import PropTypes from 'prop-types';
-import { requestResource, setResource } 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,
-    getResourceLoading,
-    getResourceDirtyState,
-    canEditPermissions
-} from '@js/selectors/resource';
 import usePluginItems from '@mapstore/framework/hooks/usePluginItems';
-import tabComponents from './containers/tabComponents';
+import { mapInfoSelector } from '@mapstore/framework/selectors/map';
 import ResourcesPanelWrapper from '@mapstore/framework/plugins/ResourcesCatalog/components/ResourcesPanelWrapper';
 import TargetSelectorPortal from '@mapstore/framework/plugins/ResourcesCatalog/components/TargetSelectorPortal';
 import useResourcePanelWrapper from '@mapstore/framework/plugins/ResourcesCatalog/hooks/useResourcePanelWrapper';
 import { getShowDetails } from '@mapstore/framework/plugins/ResourcesCatalog/selectors/resources';
-import { setShowDetails, setSelectedResource } from '@mapstore/framework/plugins/ResourcesCatalog/actions/resources';
+import { setShowDetails, setSelectedResource, setDetailPanelTab } from '@mapstore/framework/plugins/ResourcesCatalog/actions/resources';
 import PendingStatePrompt from '@mapstore/framework/plugins/ResourcesCatalog/containers/PendingStatePrompt';
-import DetailsPanel from './containers/DetailsPanel';
+import Button from '@mapstore/framework/components/layout/Button';
+import Message from '@mapstore/framework/components/I18N/Message';
+
+import {
+    getResourceData,
+    getResourceLoading,
+    getResourceDirtyState,
+    canEditPermissions,
+    isNewResource,
+    getResourceId
+} from '@js/selectors/resource';
+import { requestResource, setResource } from '@js/actions/gnresource';
+import gnresource from '@js/reducers/gnresource';
 import useDetectClickOut from '@js/hooks/useDetectClickOut';
+import tabComponents from '@js/plugins/ResourceDetails/containers/tabComponents';
+import DetailsPanel from '@js/plugins/ResourceDetails/containers/DetailsPanel';
 
 /**
 * @module ResourceDetails
@@ -215,7 +222,7 @@ function ResourceDetailsPanel({
             "items": "{({extent: context.get(state('gnResourceData'), 'extent')})}"
         },
         {
-            "type": "linked-resources",
+            "type": "relations",
             "id": "related",
             "labelId": "gnviewer.linkedResources.label",
             "items": "{context.get(state('gnResourceData'), 'linkedResources')}"
@@ -234,11 +241,18 @@ function ResourceDetailsPanel({
             "disableIf": "{context.get(state('gnResourceData'), 'resource_type') !== 'dataset'}",
             "items": "{context.get(state('gnResourceData'), 'attribute_set')}"
         },
+        {
+            "type": "share",
+            "id": "share",
+            "labelId": "gnviewer.share",
+            "disableIf": "{!context.canAccessPermissions(state('gnResourceData'))}",
+            "items": [true]
+        },
         {
             "type": "settings",
             "id": "settings",
-            "labelId": "gnviewer.management",
-            "disableIf": "{!context.canManageResourceSettings(state('gnResourceData')) && !context.canAccessPermissions(state('gnResourceData'))}",
+            "labelId": "gnviewer.settings",
+            "disableIf": "{!context.canManageResourceSettings(state('gnResourceData'))}",
             "items": [true]
         }
     ],
@@ -389,7 +403,7 @@ const ResourceDetailsPlugin = connect(
 export default createPlugin('ResourceDetails', {
     component: ResourceDetailsPlugin,
     containers: {
-        ActionNavbar: {
+        ActionNavbar: [{
             name: 'ResourceDetailsButton',
             Component: connect((state) => ({resource: getResourceData(state)}), { onShow: setShowDetails })(({ component, resourcesGridId, onShow, resource }) => {
                 if (!resource?.pk) return null;
@@ -409,7 +423,37 @@ export default createPlugin('ResourceDetails', {
             }),
             priority: 1,
             doNotHide: true
-        },
+        }, {
+            name: 'ShareActionButton',
+            Component: connect(
+                createSelector(
+                    isNewResource,
+                    getResourceId,
+                    mapInfoSelector,
+                    (isNew, resourceId, mapInfo) => ({
+                        enabled: !isNew && (resourceId || mapInfo?.id)
+                    })
+                ),
+                {
+                    onSelectTab: setDetailPanelTab,
+                    onShowDetails: setShowDetails
+                }
+            )(({ enabled, size, onSelectTab, onShowDetails }) => {
+                return enabled
+                    ? <Button
+                        size={size}
+                        onClick={() => {
+                            onShowDetails(true);
+                            onSelectTab('share');
+                        }}
+                    >
+                        <Message msgId="share.title"/>
+                    </Button>
+                    : null;
+            }),
+            priority: 1,
+            doNotHide: true
+        }],
         ResourcesGrid: {
             priority: 2,
             target: 'card-buttons',

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

@@ -61,7 +61,7 @@ const DetailsLinkedResources = ({ fields }) => {
     ];
 
     return (
-        <FlexBox column gap="xs" className="gn-details-linked-resources _padding-tb-md">
+        <FlexBox column gap="xs" className="gn-details-relations _padding-tb-md">
             {linkedResources.map(({resources, type})=> <DetailLinkedResource resources={resources} type={type}/>)}
         </FlexBox>
     );

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

@@ -7,7 +7,7 @@ import FlexBox from '@mapstore/framework/components/layout/FlexBox';
 import Text from '@mapstore/framework/components/layout/Text';
 import SelectInfiniteScroll from '@mapstore/framework/plugins/ResourcesCatalog/components/SelectInfiniteScroll';
 import { getGroups } from '@js/api/geonode/v2';
-import { canManageResourceSettings, RESOURCE_MANAGEMENT_PROPERTIES } from '@js/utils/ResourceUtils';
+import { canManageResourcePublishing, canManageResourceOptions, RESOURCE_PUBLISHING_PROPERTIES, RESOURCE_OPTIONS_PROPERTIES } from '@js/utils/ResourceUtils';
 
 const MessageTooltip = tooltip(forwardRef(({children, msgId, ...props}, ref) => {
     return (
@@ -46,13 +46,35 @@ function DetailsSettings({ resource, onChange }) {
                     />
                 </FormGroup>
             </FlexBox.Fill>
-            {canManageResourceSettings(resource) && (
+            {canManageResourcePublishing(resource) && (
                 <FlexBox column gap="xs">
                     <Text strong>
-                        <Message msgId={"gnviewer.resourceManagement"} />
+                        <Message msgId={"gnviewer.publishing"} />
                     </Text>
-                    {Object.keys(RESOURCE_MANAGEMENT_PROPERTIES).map((key) => {
-                        const { labelId, disabled, tooltipId } = RESOURCE_MANAGEMENT_PROPERTIES[key];
+                    {Object.keys(RESOURCE_PUBLISHING_PROPERTIES).map((key) => {
+                        const { labelId, disabled, tooltipId } = RESOURCE_PUBLISHING_PROPERTIES[key];
+                        return (
+                            <Text key={key} fontSize="sm" className="_row _padding-b-xs">
+                                <Checkbox
+                                    style={{ margin: 0 }}
+                                    disabled={disabled(resource?.perms || [])}
+                                    checked={!!resource?.[key]}
+                                    onChange={(event) => onChange({ [key]: !!event.target.checked })}
+                                >
+                                    <MessageTooltip msgId={labelId} tooltipId={tooltipId}/>
+                                </Checkbox>
+                            </Text>
+                        );
+                    })}
+                </FlexBox>
+            )}
+            {canManageResourceOptions(resource) && (
+                <FlexBox column gap="xs">
+                    <Text strong>
+                        <Message msgId={"gnviewer.options"} />
+                    </Text>
+                    {Object.keys(RESOURCE_OPTIONS_PROPERTIES).map((key) => {
+                        const { labelId, disabled, tooltipId } = RESOURCE_OPTIONS_PROPERTIES[key];
                         return (
                             <Text key={key} fontSize="sm" className="_row _padding-b-xs">
                                 <Checkbox

…s/Share/components/Permissions/index.jsx …ourceDetails/components/DetailsShare.jsxgeonode_mapstore_client/client/js/plugins/Share/components/Permissions/index.jsx renamed to geonode_mapstore_client/client/js/plugins/ResourceDetails/components/DetailsShare.jsx geonode_mapstore_client/client/js/plugins/Share/components/Permissions/index.jsx renamed to geonode_mapstore_client/client/js/plugins/ResourceDetails/components/DetailsShare.jsx

@@ -89,7 +89,6 @@ const entriesTabs = [
     }
 ];
 
-
 const Permissions = ({
     resourceType,
     permissionsLoading,
@@ -116,7 +115,7 @@ const Permissions = ({
         });
     }, [availableResourceTypes]);
     return (
-        <FlexBox className="gn-permissions-container" column gap="xs">
+        <FlexBox className="gn-permissions-container _padding-tb-md" column gap="xs">
             <Text strong>
                 <Message msgId={"gnviewer.permissions"} />
             </Text>

…are/components/Permissions/GeoLimits.jsx …ResourceDetails/components/GeoLimits.jsxgeonode_mapstore_client/client/js/plugins/Share/components/Permissions/GeoLimits.jsx renamed to geonode_mapstore_client/client/js/plugins/ResourceDetails/components/GeoLimits.jsx geonode_mapstore_client/client/js/plugins/Share/components/Permissions/GeoLimits.jsx renamed to geonode_mapstore_client/client/js/plugins/ResourceDetails/components/GeoLimits.jsx

@@ -12,14 +12,16 @@ import DetailsAssets from '../components/DetailsAssets';
 import DetailsData from '../components/DetailsData';
 import DetailsLinkedResources from '../components/DetailsLinkedResources';
 import DetailsSettings from '../components/DetailsSettings';
+import DetailsShare from '../components/DetailsShare';
 import { setResourceExtent, updateResourceProperties } from '@js/actions/gnresource';
 import { show } from '@mapstore/framework/actions/notifications';
 
 const tabComponents = {
     'locations': connect(() => ({}), { onSetExtent: setResourceExtent })(DetailsLocations),
-    'linked-resources': DetailsLinkedResources,
+    'relations': DetailsLinkedResources,
     'assets': connect(() => ({}), { onNotify: show, onChange: updateResourceProperties })(DetailsAssets),
     'data': connect(() => ({}), { onChange: updateResourceProperties })(DetailsData),
+    'share': DetailsShare,
     'settings': connect(() => ({}), { onChange: updateResourceProperties })(DetailsSettings)
 };