Review documentation (#2274)

allyoucanmap · web-flow · commit eaa85ecc9cec · 2025-12-04T12:55:39.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/geonode_mapstore_client/client/js/plugins/CreateDataset/containers/CreateDataset.jsx b/geonode_mapstore_client/client/js/plugins/CreateDataset/containers/CreateDataset.jsx
@@ -43,6 +43,7 @@ import { getEndpointUrl, EXECUTION_REQUEST } from '@js/api/geonode/v2/constants'
  * @param {Object} props - The component props
  * @param {Function} props.onError - The function to handle errors
  * @param {number} props.refreshTime - The time in milliseconds to refresh the execution status
+ * @ignore
  */
 const CreateDataset = ({
     onError = () => {},
diff --git a/geonode_mapstore_client/client/js/plugins/CreateDataset/index.jsx b/geonode_mapstore_client/client/js/plugins/CreateDataset/index.jsx
@@ -11,11 +11,14 @@ import React, { Suspense, lazy } from 'react';
 import { createPlugin } from "@mapstore/framework/utils/PluginsUtils";
 const CreateDataset = lazy(() => import('./containers/CreateDataset'));
 
+/**
+* @module CreateDataset
+*/
+
 /**
  * Create new datasets with custom attributes and restrictions.
  * Also supports manual attribute creation or loading from JSON schema files.
  * @name CreateDataset
- * @memberof plugins
  * @example
  * // Sample JSON schema that can be loaded:
  * {
diff --git a/geonode_mapstore_client/client/js/plugins/CreateDataset/utils/CreateDatasetUtils.js b/geonode_mapstore_client/client/js/plugins/CreateDataset/utils/CreateDatasetUtils.js
@@ -41,6 +41,7 @@ export const DEFAULT_ATTRIBUTE = {
  * Parse a number string to a number
  * @param {string} value - The value to parse
  * @returns {number} The parsed number
+ * @ignore
  */
 export const parseNumber = (value) => {
     if (value === '') {
@@ -54,13 +55,15 @@ export const parseNumber = (value) => {
  * @param {Object} data - The data to get the attribute control id from
  * @param {string} suffix - The suffix to add to the attribute control id
  * @returns {string} The attribute control id
+ * @ignore
  */
 export const getAttributeControlId = (data, suffix) =>
     `attribute-${data?.id ?? ''}-${suffix}`;
 
 /**
  * The JSON schema for the dataset
  * @type {Object}
+ * @ignore
  */
 export const validateSchema = {
     "type": "object",
@@ -260,6 +263,7 @@ export const validateSchema = {
  * Validate attribute data including range values and unique names
  * @param {Object} data - The data to validate
  * @returns {Array} The array of errors
+ * @ignore
  */
 export const validateAttributes = (data = {}) => {
     const errors = [];
@@ -308,6 +312,7 @@ export const validateAttributes = (data = {}) => {
  * @param {string} path - The path to the error
  * @param {Array} allErrors - The array of errors
  * @returns {string} The error message
+ * @ignore
  */
 export const getErrorByPath = (path, allErrors) => {
     const error = allErrors?.find(err => err.instancePath === path);
@@ -339,6 +344,7 @@ const JSON_SCHEMA_TYPE_TO_ATTRIBUTE_TYPE = {
  * Parse JSON Schema and convert it to dataset attributes
  * @param {Object} schema - The JSON Schema object
  * @returns {Object} - Parsed result with dataset data and any errors
+ * @ignore
  */
 export const parseJSONSchema = (schema) => {
     const errors = [];
diff --git a/geonode_mapstore_client/client/js/plugins/Favorites/containers/Favorites.jsx b/geonode_mapstore_client/client/js/plugins/Favorites/containers/Favorites.jsx
@@ -22,6 +22,7 @@ import { castArray } from 'lodash';
  * @prop {function} onSearch trigger a refresh request after changing the favorite association
  * @prop {number} delayTime delay time to complete the request
  * @prop {string} renderType define the component type (eg. menuItem)
+ * @ignore
  */
 function Favorites({
     user,
diff --git a/geonode_mapstore_client/client/js/plugins/Favorites/index.js b/geonode_mapstore_client/client/js/plugins/Favorites/index.js
@@ -25,10 +25,12 @@ const ConnectedFavorites = connect(
 )(Favorites);
 
 /**
- * renders a button inside the resource card to add/remove a resource to user favorites
+* @module Favorites
+*/
+
+/**
+ * Renders a button inside the resource card to add/remove a resource to user favorites
  * @name Favorites
- * @class
- * @memberof plugins
  */
 export default createPlugin('Favorites', {
     component: () => null,
diff --git a/geonode_mapstore_client/client/js/plugins/ResourceDetails/ResourceDetails.jsx b/geonode_mapstore_client/client/js/plugins/ResourceDetails/ResourceDetails.jsx
@@ -49,7 +49,7 @@ import DetailsPanel from '@js/plugins/ResourceDetails/containers/DetailsPanel';
  * @prop {array} tabs array of tab object representing the structure of the displayed info properties
  * @example
  * {
- *  "name": "DetailViewer",
+ *  "name": "ResourceDetails",
  *  "cfg": {
  *      "tabs": [
  *          {
diff --git a/geonode_mapstore_client/client/package.json b/geonode_mapstore_client/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "geonode-mapstore-client",
-  "version": "4.0.0",
+  "version": "master",
   "description": "MapStore 2 bundles specific to geonode framework",
   "eslintConfig": {
     "extends": [
diff --git a/tutorials/02-theme-variables.md b/tutorials/02-theme-variables.md
@@ -3,7 +3,7 @@ The GeoNode theme allows to override colors with [css variables](https://develop
 
 Here the steps to overrides the variables:
 
-- add a style tag in the template. it is possible to use the `geonode-mapstore-client/snippets/custom_theme.html` template included in all the pages.
+- add a style tag in the template. it is possible to use the **geonode-mapstore-client/snippets/custom_theme.html** template included in all the pages.
 
 ```html
 <style>
@@ -16,7 +16,7 @@ Here the steps to overrides the variables:
 <style>
     /* msgapi is the selector wrapper of the page */
     .msgapi .gn-theme {
-        --gn-primary: #74cfe2;
+        --ms-primary: #74cfe2;
     }
 </style>
 ```
diff --git a/tutorials/03-override-local-config.md b/tutorials/03-override-local-config.md
@@ -49,17 +49,70 @@ Note: not all configuration can be applied to the geonode-mapstore-client becaus
 <script>
     window.__GEONODE_CONFIG__.overrideLocalConfig = function(localConfig) {
         // an example on how you can apply configuration to existing plugins
-        // example: How to change configuration of visible properties in all DetailViewer panels including the one in the catalog (ResourcesGrid)
-
+        // example: How to change configuration of visible properties in all ResourceDetails
+        // in this example the configuration is using expression to provide value,
+        // learn more about MapStore dynamic configuration at:
+        // https://docs.mapstore.geosolutionsgroup.com/en/latest/developer-guide/plugins-documentation/#dynamic-configuration
         Object.keys(localConfig.plugins).forEach((pageName) => {
             localConfig.plugins[pageName].forEach((plugin) => {
-                if (['DetailViewer', 'ResourcesGrid'].includes(plugin.name) && plugin.cfg && (plugin.cfg.tabs || plugin.cfg.detailsTabs)) {
-                    (plugin.cfg.tabs || plugin.cfg.detailsTabs).forEach((tab) => {
-                        if (Array.isArray(tab.items)) {
-                            // eg. remove the language row
-                            tab.items = tab.items.filter((item) => !['gnviewer.language'].includes(item.labelId));
-                        }
-                    });
+                if (['ResourceDetails'].includes(plugin.name)) {
+                    plugin.cfg = {
+                        ...plugin.cfg,
+                        "tabs": [
+                            {
+                                "type": "tab",
+                                "id": "info",
+                                "labelId": "gnviewer.info",
+                                "items": [
+                                    {
+                                        "type": "text",
+                                        "labelId": "gnviewer.title",
+                                        "value": "{context.get(state('gnResourceData'), 'title')}"
+                                    }
+                                ]
+                            },
+                            {
+                                "type": "locations",
+                                "id": "locations",
+                                "labelId": "gnviewer.locations",
+                                "items": "{({extent: context.get(state('gnResourceData'), 'extent')})}"
+                            },
+                            {
+                                "type": "relations",
+                                "id": "related",
+                                "labelId": "gnviewer.linkedResources.label",
+                                "items": "{context.get(state('gnResourceData'), 'linkedResources')}"
+                            },
+                            {
+                                "type": "assets",
+                                "id": "assets",
+                                "labelId": "gnviewer.assets",
+                                "items": "{context.get(state('gnResourceData'), 'assets')}",
+                                "disableIf": "{!context.resourceHasPermission(state('gnResourceData'), 'change_resourcebase')}"
+                            },
+                            {
+                                "type": "data",
+                                "id": "data",
+                                "labelId": "gnviewer.data",
+                                "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.settings",
+                                "disableIf": "{!context.canManageResourceSettings(state('gnResourceData'))}",
+                                "items": [true]
+                            }
+                        ]
+                    }
                 }
             });
         });
diff --git a/tutorials/04-development.md b/tutorials/04-development.md
@@ -1,71 +1,4 @@
 
-### Develop with a local GeoNode instance
-
-This setup allows to develop both the django and the GeoNode MapStore javascript applications including templates.
-
-In order to develop with GeoNode MapStore Client we need a running local instance of GeoNode. You could follow this [documentation](https://docs.geonode.org/en/master/install/advanced/core/index.html#ubuntu-20-04lts) to setup a local instance of GeoNode (Ubuntu/WSL only)
-
-Following steps are based on the assumption that there is a running local instance of GeoNode at the url http://localhost:8000/ inside the virtual environment called `geonode`:
-
-- clone the repository in your workspace:
-
-```
-git clone --recursive https://github.com/GeoNode/geonode-mapstore-client.git
-```
-
-- navigate to the cloned directory
-
-```
-cd geonode-mapstore-client/
-```
-
-- activate the virtual environment of your local geonode instance
-
-```
-workon geonode
-```
-
-- install all this django application in edit mode to replace the default used by geonode
-
-```
-pip install -e .
-```
-
-- navigate to the client directory
-
-```
-cd geonode_mapstore_client/client/
-```
-
-- create an .env file in the client directory
-
-```
-touch .env
-```
-
-- add following variables to the .env file
-
-```
-DEV_SERVER_PROTOCOL=http
-DEV_SERVER_HOSTNAME=localhost
-DEV_TARGET_GEONODE_HOST=localhost:8000
-```
-
-- install all package dependencies with the command
-
-```
-npm install
-```
-
-- Start the development application locally
-
-```
-npm start
-```
-
-Now open the url `http://localhost:8081/` to work on the client.
-
-
 ### Develop with a remote GeoNode instance
 
 This setup allows to develop only the GeoNode MapStore  javascript applications.
diff --git a/tutorials/07-custom-resources-page.md b/tutorials/07-custom-resources-page.md
@@ -19,38 +19,50 @@ geonode-project-name/
 - add the following block extension in the `geostory_resources_page.html` template
 
 ```html
-{% extends "page.html" %}
+{% extends "geonode-mapstore-client/resource_page_catalog.html" %} 
+{% load i18n %}
+{% block content %}
+    {% comment %}
+        The i18n template tag allows to import functionality needed to support translations.
+        It is also possible to access information about the current language in use with:
 
-{% block container %}
-    <div class="gn-container">
-        <div id="custom-resources-grid"></div>
+            {% get_current_language as LANG %}
+
+        then the LANG variable can be used inside the template, e.g.:
+
+            <div>{{ LANG }}</div>
+
+    {% endcomment %}
+    <div class="gn-resource-page-catalog-section">
+        <div class="gn-resource-page-catalog-content">
+            <h4>{% trans "My GeoStories" %}</h4>
+        </div>
     </div>
-    <script>
-        window.addEventListener('mapstore:ready', function(event) {
-            const msAPI = event.detail;
-            msAPI.setPluginsConfig([
-                {
-                    name: 'ResourcesGrid',
-                    cfg: {
-                        targetSelector: '#custom-resources-grid',
-                        containerSelector: '.gn-container',
-                        menuItems: [],
-                        filtersFormItems: [],
-                        defaultQuery: {
-                            f: 'geostory'
-                        },
-                        pagination: true
-                    }
-                },
-                { name: 'SaveAs', cfg: { closeOnSave: true } },
-                { name: 'DeleteResource' },
-                { name: 'DownloadResource' },
-                { name: 'Notifications' }
-            ]);
-        });
-    </script>
-{% endblock %}
+    <div id="my-geostory" class="ms-plugin ResourcesGrid"></div>
+{% endblock content %}
 
+{% block ms_plugins %}
+    msPluginsBlocks = [
+        {
+            "name": "ResourcesGrid",
+            "cfg": {
+                "id": "catalog",
+                "title": "GeoStory",
+                "defaultQuery": {
+                    "f": "geostory"
+                },
+                "targetSelector": "#my-geostory",
+                "menuItems": []
+            }
+        },
+        {
+            "name": "ResourcesFiltersForm",
+            "cfg": {
+                "fields": getPageFilterForm()
+            }
+        }
+    ];
+{% endblock ms_plugins %}
 ```
 
 - add the new page inside urls.py inside urlpatterns list
diff --git a/tutorials/theme.html b/tutorials/theme.html

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "geonode-mapstore-client",`
`3`		`- "version": "4.0.0",`
	`3`	`+ "version": "master",`
`4`	`4`	`"description": "MapStore 2 bundles specific to geonode framework",`
`5`	`5`	`"eslintConfig": {`
`6`	`6`	`"extends": [`