Merge pull request #63 from eea/develop

(feat): Adapt Embed EEA MAP block to use serialized data
eea · Nov 23, 2023 · 7f836ed · 7f836ed
2 parents 382b4a5 + 9ffb669
commit 7f836ed
Show file tree

Hide file tree

Showing 17 changed files with 134 additions and 286 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [3.0.0](https://github.com/eea/volto-eea-map/compare/2.0.7...3.0.0) - 23 November 2023
+
+#### :hammer_and_wrench: Others
+
+- update [Miu Razvan - [`005b994`](https://github.com/eea/volto-eea-map/commit/005b9949a93a9101cf5b88054523e05d03deae05)]
+- clean up [Miu Razvan - [`4144747`](https://github.com/eea/volto-eea-map/commit/4144747b84d1fb0e51614c7a963d750c9b67100d)]
+- clean up [Miu Razvan - [`80c37f9`](https://github.com/eea/volto-eea-map/commit/80c37f9cb8b54e79caf5d147e452a5e88168a218)]
+- bump version + remove uneeded code [Miu Razvan - [`adb8733`](https://github.com/eea/volto-eea-map/commit/adb8733fa4ce3d42a9d16cb7ad19518d49949da2)]
+- update [Miu Razvan - [`6723242`](https://github.com/eea/volto-eea-map/commit/6723242a8507a29194cfc9650ae214d2abca74ad)]
+- fix sonorqube [Dobricean Ioan Dorian - [`02b4406`](https://github.com/eea/volto-eea-map/commit/02b44067598c6cedcfc28c3b7667e4cb23addfc5)]
+- fix prettier [Dobricean Ioan Dorian - [`78fc2ba`](https://github.com/eea/volto-eea-map/commit/78fc2baa2f5264ca1bba61b70bc0bdc5b2788e67)]
+- Fix Sonorqube [dobri1408 - [`e04011a`](https://github.com/eea/volto-eea-map/commit/e04011aa811422f865d0bbb1e66af558a4310e77)]
+- adapt embedeeamap to use serialized data [Dobricean Ioan Dorian - [`005965c`](https://github.com/eea/volto-eea-map/commit/005965c6793a9a9977fef52c08ba9a3173eec348)]
 ### [2.0.7](https://github.com/eea/volto-eea-map/compare/2.0.6...2.0.7) - 10 November 2023
 
 #### :rocket: New Features

diff --git a/Jenkinsfile b/Jenkinsfile
@@ -1,4 +1,7 @@
 pipeline {
+  tools {
+    jdk 'Java17'
+  }
   agent {
     node { label 'docker-host' }
   }
@@ -159,7 +162,8 @@ pipeline {
                 script {
                   try {
                     sh '''docker run --pull always --rm -d --name="$IMAGE_NAME-plone" -e SITE="Plone" -e PROFILES="$BACKEND_PROFILES" -e ADDONS="$BACKEND_ADDONS" eeacms/plone-backend'''
-                    sh '''timeout -s 9 3600 docker run --shm-size=2g --cpu-quota=150000 --link $IMAGE_NAME-plone:plone --entrypoint=make --name="$IMAGE_NAME-cypress" --workdir=/app/src/addons/${GIT_NAME} -e "RAZZLE_INTERNAL_API_PATH=http://plone:8080/Plone" $IMAGE_NAME-frontend cypress-ci'''
+                    sh '''docker run -d --shm-size=3g --link $IMAGE_NAME-plone:plone --name="$IMAGE_NAME-cypress" -e "RAZZLE_INTERNAL_API_PATH=http://plone:8080/Plone" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend start-ci'''
+                    sh '''timeout -s 9 1800 docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress make cypress-ci'''
                   } finally {
                     try {
                       sh '''rm -rf cypress-videos cypress-results cypress-coverage cypress-screenshots'''
@@ -189,6 +193,10 @@ pipeline {
                       catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
                         junit testResults: 'cypress-results/**/*.xml', allowEmptyResults: true
                       }
+                      catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                        sh '''docker logs $IMAGE_NAME-cypress'''
+                      }
+                      sh script: "docker stop $IMAGE_NAME-cypress", returnStatus: true
                       sh script: "docker stop $IMAGE_NAME-plone", returnStatus: true
                       sh script: "docker rm -v $IMAGE_NAME-plone", returnStatus: true
                       sh script: "docker rm -v $IMAGE_NAME-cypress", returnStatus: true

diff --git a/Makefile b/Makefile
@@ -151,14 +151,12 @@ test-ci:
 
 .PHONY: start-ci
 start-ci:
+	cp .coverage.babel.config.js /app/babel.config.js
 	cd ../..
-	yarn start &
+	yarn start
 
 .PHONY: cypress-ci
 cypress-ci:
-	cp .coverage.babel.config.js /app/babel.config.js
-	make start-ci
 	$(NODE_MODULES)/.bin/wait-on -t 240000  http://localhost:3000
 	NODE_ENV=development make cypress-run
 
-
diff --git a/README.md b/README.md
@@ -18,26 +18,30 @@
 
 # Configuration
 
-This addon contains the EEA Embed Map Block & EEA Map Block. It's configured to work with the map visualization content type and give more access to ArcGIS maps. See available maps here https://discomap.eea.europa.eu/ 
+This addon contains the EEA Embed Map Block & EEA Map Block. It's configured to work with the map visualization content type and give more access to ArcGIS maps. See available maps here https://discomap.eea.europa.eu/
 
-# Enable data queries auto-import 
+# Enable data queries auto-import
 
-To enable automatic import of queries from the content-type, "Parameters for data connections" should be checked as behavior on the content-type that uses the map. 
+To enable automatic import of queries from the content-type, "Parameters for data connections" should be checked as behavior on the content-type that uses the map.
 
     controlpanel/dexterity-types/{content-type-id}
 
 # Enable Sources
 
-Sources (Data provenance) should be set on the visualization. To enable this, "EEA Core Metadata" should be  checked as behavior on the  visualization content-type. 
+Sources (Data provenance) should be set on the visualization. To enable this, "EEA Core Metadata" should be checked as behavior on the visualization content-type.
 
     controlpanel/dexterity-types/map_visualization
-    
+
 After this, sources can be added from the visualization edit interface. "Data Provenance" tab => "Add source"
 
 [EEA MAP](https://raw.githubusercontent.com/eea/volto-eea-map/master/docs/volto-eea-map.gif)
 
 ## Getting started
 
+### Upgrade
+
+#### 3.0.0 -> requires >= [email protected]
+
 ### Try volto-eea-map with Docker
 
       git clone https://github.com/eea/volto-eea-map.git
@@ -57,25 +61,25 @@ Go to http://localhost:3000
 
 1. Start Volto frontend
 
-* If you already have a volto project, just update `package.json`:
+- If you already have a volto project, just update `package.json`:
 
-   ```JSON
-   "addons": [
-       "@eeacms/volto-eea-map"
-   ],
+  ```JSON
+  "addons": [
+      "@eeacms/volto-eea-map"
+  ],
 
-   "dependencies": {
-       "@eeacms/volto-eea-map": "*"
-   }
-   ```
+  "dependencies": {
+      "@eeacms/volto-eea-map": "*"
+  }
+  ```
 
-* If not, create one:
+- If not, create one:
 
-   ```
-   npm install -g yo @plone/generator-volto
-   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-eea-map
-   cd my-volto-project
-   ```
+  ```
+  npm install -g yo @plone/generator-volto
+  yo @plone/volto my-volto-project --canary --addon @eeacms/volto-eea-map
+  cd my-volto-project
+  ```
 
 1. Install new add-ons and restart Volto:
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "2.0.7",
+  "version": "3.0.0",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -81,4 +81,4 @@
     "cypress:open": "make cypress-open",
     "prepare": "husky install"
   }
-}
+}
diff --git a/src/actionTypes.js b/src/actionTypes.js
diff --git a/src/actions.js b/src/actions.js
diff --git a/src/components/Blocks/EmbedEEAMap/Edit.jsx b/src/components/Blocks/EmbedEEAMap/Edit.jsx
@@ -1,119 +1,84 @@
-import React from 'react';
-import { SidebarPortal } from '@plone/volto/components';
-
+import React, { useEffect, useMemo } from 'react';
+import { Message } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 
+import { SidebarPortal } from '@plone/volto/components';
+import { getContent } from '@plone/volto/actions';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import Webmap from '@eeacms/volto-eea-map/components/Webmap';
 import ExtraViews from '@eeacms/volto-eea-map/components/ExtraViews';
 
-import { expandToBackendURL } from '@plone/volto/helpers';
-
 import { Schema } from './Schema';
 import { applyQueriesToMapLayers } from '@eeacms/volto-eea-map/utils';
 
-import { getVisualization } from '@eeacms/volto-eea-map/actions';
+import { getMapVisualizationData } from './helpers';
 
 const Edit = (props) => {
+  const { id, block, onChangeBlock, selected, data, getContent } = props;
   const {
-    block,
-    onChangeBlock,
-    selected,
-    data_provenance = {},
-    figure_note = [],
-  } = props;
+    data_query_params,
+    enable_queries,
+    show_legend = true,
+    show_note = true,
+    show_sources = true,
+    show_more_info = true,
+    show_share = true,
+    dataprotection = { enabled: true },
+    height = '',
+  } = data;
   const schema = Schema(props);
   const [mapData, setMapData] = React.useState('');
-  const data = React.useMemo(() => props.data, [props.data]);
-  const { height = '' } = data;
 
-  React.useEffect(() => {
-    if (!Object.hasOwn(data, 'show_legend')) {
-      onChangeBlock(block, {
-        ...data,
-        show_legend: true,
-      });
-    }
-    if (!Object.hasOwn(data, 'show_note')) {
-      onChangeBlock(block, {
-        ...data,
-        show_note: true,
-      });
-    }
-    if (!Object.hasOwn(data, 'show_sources')) {
-      onChangeBlock(block, {
-        ...data,
-        show_sources: true,
-      });
-    }
-    if (!Object.hasOwn(data, 'show_more_info')) {
-      onChangeBlock(block, {
-        ...data,
-        show_more_info: true,
-      });
-    }
-    if (!Object.hasOwn(data, 'dataprotection')) {
-      onChangeBlock(block, {
-        ...data,
-        dataprotection: { enabled: true },
-      });
-    }
-    if (!Object.hasOwn(data, 'show_share')) {
-      onChangeBlock(block, {
-        ...data,
-        show_share: true,
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    data.show_legend,
-    data.show_note,
-    data.show_sources,
-    data.show_more_info,
-    data.dataprotection,
-    data.show_share,
+  const vis_url = useMemo(() => flattenToAppURL(data.vis_url), [data.vis_url]);
+
+  const map_visualization_data = useMemo(() => getMapVisualizationData(props), [
+    props,
   ]);
 
-  React.useEffect(() => {
-    if (props.data.vis_url) {
-      props.getVisualization(expandToBackendURL(props.data.vis_url));
+  useEffect(() => {
+    const mapVisId = flattenToAppURL(map_visualization_data['@id'] || '');
+    if (vis_url && vis_url !== mapVisId) {
+      getContent(vis_url, null, id);
     }
-    if (!props.data.vis_url) {
+    if (!vis_url) {
       setMapData('');
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.data.vis_url]);
+  }, [id, getContent, vis_url, map_visualization_data]);
 
   React.useEffect(() => {
     const updatedMapData = applyQueriesToMapLayers(
-      props.map_visualization,
-      props.data.data_query_params,
-      props.data.enable_queries,
+      map_visualization_data,
+      data_query_params,
+      enable_queries,
     );
     setMapData(updatedMapData);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.map_visualization, props.data]);
+  }, [map_visualization_data, data_query_params, enable_queries]);
 
   return (
     <>
-      {mapData && (
+      {!vis_url && (
+        <Message>Please select a visualization from block editor.</Message>
+      )}
+
+      {!!vis_url && mapData && (
         <div>
           <Webmap data={mapData} height={height} isEdit={true} />
           <ExtraViews
             data={{
               ...data,
-              data_provenance,
-              figure_note,
-              map_data: props.map_visualization,
+              show_legend,
+              show_note,
+              show_sources,
+              show_more_info,
+              show_share,
+              dataprotection,
+              map_visualization_data,
             }}
           />
         </div>
       )}
-      {!mapData && (
-        <p>No map view to show. Set visualization in block configuration.</p>
-      )}
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}
@@ -135,27 +100,11 @@ const Edit = (props) => {
 export default compose(
   connect(
     (state, props) => ({
+      mapContent: state.content.subrequests?.[props.id]?.data,
       data_query: state.content.data.data_query,
-      '@id': props.data.vis_url
-        ? state.map_visualizations?.data[
-            expandToBackendURL(props.data.vis_url)
-          ]?.['@id']
-        : props.content?.['@id'],
-      map_visualization: props.data.vis_url
-        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
-            ?.data
-        : '',
-      data_provenance: props.data.vis_url
-        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
-            ?.data_provenance
-        : '',
-      figure_note: props.data.vis_url
-        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
-            ?.figure_note
-        : '',
     }),
     {
-      getVisualization,
+      getContent,
     },
   ),
 )(Edit);