@eeacms/volto-arcgis-block 0.1.181 → 0.1.183

package/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).
 
+### [0.1.183](https://github.com/eea/volto-arcgis-block/compare/0.1.182...0.1.183) - 7 August 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-2446 (jenkins) [Urkorue - [`efc5da9`](https://github.com/eea/volto-arcgis-block/commit/efc5da9ae68f664b295ffee899afb1cd51701507)]
+- CLMS-2446 (bug): EEA38+UK remarked in the use cases map [Urkorue - [`c70ac80`](https://github.com/eea/volto-arcgis-block/commit/c70ac805f53d70efb07e68bd86afabe006bc7b0b)]
+- CLMS-2402 (feat): Changed Use cases basemap to other with more information [Urkorue - [`5f7b42f`](https://github.com/eea/volto-arcgis-block/commit/5f7b42fbfb3e8138a139bdf780a5f09e07fc7f4f)]
+### [0.1.182](https://github.com/eea/volto-arcgis-block/compare/0.1.181...0.1.182) - 3 August 2023
+
+#### :house: Documentation changes
+
+- docs: Cleanup Makefile, update DEVELOP documentation, i18n - refs #254894 [valentinab25 - [`94a602e`](https://github.com/eea/volto-arcgis-block/commit/94a602ec618d2a802e55da892cdb76de7986cd62)]
+
 ### [0.1.181](https://github.com/eea/volto-arcgis-block/compare/0.1.180...0.1.181) - 28 July 2023
 
 #### :hammer_and_wrench: Others

package/DEVELOP.md

@@ -2,6 +2,28 @@
 
 ## Develop
 
+1. Make sure you have `docker` and `docker compose` installed and running on your machine:
+
+    ```Bash
+    git clone https://github.com/eea/volto-arcgis-block.git
+    cd volto-arcgis-block
+    git checkout -b bugfix-123456 develop
+    make
+    make start
+    ```
+
+1. Wait for `Volto started at 0.0.0.0:3000` meesage
+
+1. Go to http://localhost:3000
+
+1.  Happy hacking!
+
+    ```Bash
+    cd src/addons/volto-arcgis-block/
+    ```
+
+### Or add @eeacms/volto-arcgis-block to your Volto project
+
 Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/)
 
 1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`
@@ -49,3 +71,37 @@ Before starting make sure your development environment is properly set. See [Vol
 1.  Happy hacking!
 
         cd src/addons/volto-arcgis-block/
+
+## Cypress
+
+To run cypress locally, first make sure you don't have any Volto/Plone running on ports `8080` and `3000`.
+
+You don't have to be in a `clean-volto-project`, you can be in any Volto Frontend
+project where you added `volto-arcgis-block` to `mrs.developer.json`
+
+Go to:
+
+  ```BASH
+  cd src/addons/volto-arcgis-block/
+  ```
+
+Start:
+
+  ```Bash
+  make
+  make start
+  ```
+
+This will build and start with Docker a clean `Plone backend` and `Volto Frontend` with `volto-arcgis-block` block installed.
+
+Open Cypress Interface:
+
+  ```Bash
+  make cypress-open
+  ```
+
+Or run it:
+
+  ```Bash
+  make cypress-run
+  ```

package/Dockerfile

@@ -0,0 +1,14 @@
+# syntax=docker/dockerfile:1
+ARG VOLTO_VERSION
+FROM plone/frontend-builder:${VOLTO_VERSION}
+
+ARG ADDON_NAME
+ARG ADDON_PATH
+
+COPY --chown=node:node ./ /app/src/addons/${ADDON_PATH}/
+
+RUN /setupAddon
+RUN yarn install
+
+ENTRYPOINT ["yarn"]
+CMD ["start"]

package/Jenkinsfile

@@ -199,6 +199,31 @@ pipeline {
       }
     }
 
+    stage('SonarQube compare to master') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          branch 'develop'
+          not { changelog '.*^Automated release [0-9\\.]+$' }
+        }
+      }
+      steps {
+        node(label: 'docker') {
+          script {
+            sh '''docker pull eeacms/gitflow'''
+            sh '''echo "Error" > checkresult.txt'''
+            catchError(buildResult: 'FAILURE', stageResult: 'FAILURE') {
+               sh '''set -o pipefail; docker run -i --rm --name="$BUILD_TAG-gitflow-sn" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" eeacms/gitflow /checkSonarqubemaster.sh | grep -v "Found script" | tee checkresult.txt'''
+             }
+
+            publishChecks name: 'SonarQube', title: 'Sonarqube Code Quality Check', summary: "Quality check on the SonarQube metrics from branch develop, comparing it with the ones from master branch. No bugs are allowed",
+                          text: readFile(file: 'checkresult.txt'), conclusion: "${currentBuild.currentResult}",
+                          detailsURL: "${env.BUILD_URL}display/redirect"
+          }
+        }
+      }
+    }
+
     stage('Pull Request') {
       when {
         not {

package/Makefile

@@ -1,40 +1,126 @@
-SHELL=/bin/bash
+##############################################################################
+# Run:
+#    make
+#    make start
+#
+# Go to:
+#
+#     http://localhost:3000
+#
+# Cypress:
+#
+#    make cypress-open
+#
+##############################################################################
+# SETUP MAKE
+#
+## Defensive settings for make: https://tech.davis-hansson.com/p/make/
+SHELL:=bash
+.ONESHELL:
+# for Makefile debugging purposes add -x to the .SHELLFLAGS
+.SHELLFLAGS:=-eu -o pipefail -O inherit_errexit -c
+.SILENT:
+.DELETE_ON_ERROR:
+MAKEFLAGS+=--warn-undefined-variables
+MAKEFLAGS+=--no-builtin-rules
 
+# Colors
+# OK=Green, warn=yellow, error=red
+ifeq ($(TERM),)
+# no colors if not in terminal
+        MARK_COLOR=
+        OK_COLOR=
+        WARN_COLOR=
+        ERROR_COLOR=
+        NO_COLOR=
+else
+        MARK_COLOR=`tput setaf 6`
+        OK_COLOR=`tput setaf 2`
+        WARN_COLOR=`tput setaf 3`
+        ERROR_COLOR=`tput setaf 1`
+        NO_COLOR=`tput sgr0`
+endif
+
+##############################################################################
+# SETTINGS AND VARIABLE
 DIR=$(shell basename $$(pwd))
-ADDON ?= "@eeacms/volto-arcgis-block"
-
-# We like colors
-# From: https://coderwall.com/p/izxssa/colored-makefile-for-golang-projects
-RED=`tput setaf 1`
-GREEN=`tput setaf 2`
-RESET=`tput sgr0`
-YELLOW=`tput setaf 3`
-
-project:
-	npm install -g yo
-	npm install -g @plone/generator-volto
-	npm install -g mrs-developer
-	yo @plone/volto project --addon ${ADDON} --workspace "src/addons/${DIR}" --no-interactive
-	ln -sf $$(pwd) project/src/addons/
-	cp .project.eslintrc.js .eslintrc.js
-	cd project && yarn
-	@echo "-------------------"
-	@echo "$(GREEN)Volto project is ready!$(RESET)"
-	@echo "$(RED)Now run: cd project && yarn start$(RESET)"
-
-all: project
-
-.PHONY: start-test-backend
-start-test-backend: ## Start Test Plone Backend
-	@echo "$(GREEN)==> Start Test Plone Backend$(RESET)"
-	docker run -i --rm -e ZSERVER_HOST=0.0.0.0 -e ZSERVER_PORT=55001 -p 55001:55001 -e SITE=plone -e APPLY_PROFILES=plone.app.contenttypes:plone-content,plone.restapi:default,kitconcept.volto:default-homepage -e CONFIGURE_PACKAGES=plone.app.contenttypes,plone.restapi,kitconcept.volto,kitconcept.volto.cors -e ADDONS='plone.app.robotframework plone.app.contenttypes plone.restapi kitconcept.volto' plone ./bin/robot-server plone.app.robotframework.testing.PLONE_ROBOT_TESTING
-
-.PHONY: start-backend-docker
-start-backend-docker:		## Starts a Docker-based backend
-	@echo "$(GREEN)==> Start Docker-based Plone Backend$(RESET)"
-	docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e ADDONS="kitconcept.volto" -e ZCML="kitconcept.volto.cors" plone
+NODE_MODULES?="../../../node_modules"
+PLONE_VERSION?=6
+VOLTO_VERSION?=16
+ADDON_PATH="${DIR}"
+ADDON_NAME="@eeacms/${ADDON_PATH}"
+DOCKER_COMPOSE=PLONE_VERSION=${PLONE_VERSION} VOLTO_VERSION=${VOLTO_VERSION} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH} docker compose
+
+# Top-level targets
+.PHONY: all
+all: clean install
+
+.PHONY: clean
+clean:			## Cleanup development environment
+	${DOCKER_COMPOSE} down --volumes --remove-orphans
+
+.PHONY: install
+install:		## Build and install development environment
+	echo "Running:	${DOCKER_COMPOSE} build"
+	${DOCKER_COMPOSE} pull
+	${DOCKER_COMPOSE} build
+
+.PHONY: start
+start:			## Start development environment
+	echo "Running:	${DOCKER_COMPOSE} up"
+	${DOCKER_COMPOSE} up
+
+.PHONY: cypress-open
+cypress-open:		## Open cypress integration tests
+	NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress open
+
+.PHONY: cypress-run
+cypress-run:	## Run cypress integration tests
+	NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run
+
+.PHONY: test
+test:			## Run jest tests
+	${DOCKER_COMPOSE} run -e CI=1 frontend test
+
+.PHONY: test-update
+test-update:	## Update jest tests snapshots
+	${DOCKER_COMPOSE} run -e CI=1 frontend test -u
+
+.PHONY: stylelint
+stylelint:		## Stylelint
+	$(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'
+
+.PHONY: stylelint-overrides
+stylelint-overrides:
+	$(NODE_MODULES)/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'
+
+.PHONY: stylelint-fix
+stylelint-fix:	## Fix stylelint
+	$(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}' --fix
+	$(NODE_MODULES)/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides' --fix
+
+.PHONY: prettier
+prettier:		## Prettier
+	$(NODE_MODULES)/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'
+
+.PHONY: prettier-fix
+prettier-fix:	## Fix prettier
+	$(NODE_MODULES)/.bin/prettier --single-quote  --write 'src/**/*.{js,jsx,json,css,less,md}'
+
+.PHONY: lint
+lint:			## ES Lint
+	$(NODE_MODULES)/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'
+
+.PHONY: lint-fix
+lint-fix:		## Fix ES Lint
+	$(NODE_MODULES)/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'
+
+.PHONY: i18n
+i18n:			## i18n
+	rm -rf build/messages
+	NODE_ENV=development $(NODE_MODULES)/.bin/i18n --addon
 
 .PHONY: help
-help:		## Show this help.
+help:                   ## Show this help.
 	@echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)"
-"
+	head -n 14 Makefile

package/docker-compose.yml

@@ -0,0 +1,28 @@
+version: "3"
+services:
+  backend:
+    image: plone/plone-backend:${PLONE_VERSION:-6}
+    ports:
+      - "8080:8080"
+    environment:
+      SITE: "Plone"
+
+  frontend: 
+    build:
+      context: ./
+      dockerfile: ./Dockerfile
+      args:
+        ADDON_NAME: "${ADDON_NAME}"
+        ADDON_PATH: "${ADDON_PATH}"
+        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+    ports:
+    - "3000:3000"
+    - "3001:3001"
+    depends_on:
+      - backend
+    volumes:
+      - ./:/app/src/addons/${ADDON_PATH}
+    environment:
+      RAZZLE_INTERNAL_API_PATH: "http://backend:8080/Plone"
+      RAZZLE_DEV_PROXY_API_PATH: "http://backend:8080/Plone"
+      HOST: "0.0.0.0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.181",
+  "version": "0.1.183",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -288,7 +288,7 @@ class InfoWidget extends React.Component {
     }
 
     for (let feature in this.features) {
-      let topics = this.features[feature].attributes.Use_case_topics.split(',');
+      let topics = this.features[feature].attributes.Use_case_topics.split(';');
 
       for (let topic in topics) {
         processedData[topics[topic]].push(this.features[feature].attributes);
@@ -391,7 +391,7 @@ class InfoWidget extends React.Component {
     let topicProducts = [];
 
     for (let feature in features) {
-      let topics = features[feature].attributes.Use_case_topics.split(',');
+      let topics = features[feature].attributes.Use_case_topics.split(';');
 
       for (let topic in topics) {
         if (!topicProducts.includes(topics[topic])) {

package/src/components/UseCasesMapViewer/LayerControl.jsx

@@ -29,7 +29,12 @@ class LayerControl {
 
   getGeometry(country, layer) {
     layer.definitionExpression = `(`;
-    if (country === 'EU' || country === 'EU 27+UK' || country === 'EEA+38UK') {
+    if (
+      country === 'EU' ||
+      country === 'EU 27+UK' ||
+      country === 'EEA38' ||
+      country === 'EEA38+UK'
+    ) {
       let states = mapViewer.props.cfg.Codes[country];
       for (let i = 0; i < states.length; i++) {
         layer.definitionExpression += `CNTR_ID = '${states[i]}'`;
@@ -124,6 +129,7 @@ class LayerControl {
     return Math.min(latZoom, lngZoom, this.zoomMax);
     //TODO calculate the corresponding level of zoom automatically
   }
+
   latRad(lat) {
     let sin = Math.sin((lat * Math.PI) / 180);
     let radX2 = Math.log((1 + sin) / (1 - sin)) / 2;

package/src/components/UseCasesMapViewer/NavigationControl.jsx

@@ -21,7 +21,7 @@ class NavigationControl extends React.Component {
     this.layerControl.hideLayer(layerSpatial.id);
     this.layerControl.showLayer(layerRegion.id);
     this.view.center = this.center;
-    this.view.zoom = 0;
+    this.view.zoom = 1;
     layerSpatial.definitionExpression = null;
     mapViewer.setState(() => ({
       useCaseLevel: 1,

package/src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -13,11 +13,11 @@ let Map,
   FeatureLayer,
   Extent,
   Basemap,
-  VectorTileLayer,
   layerControl,
   navigationControl,
   layerSpatial,
-  layerHighlight;
+  layerHighlight,
+  WebTileLayer;
 
 class UseCasesMapViewer extends React.Component {
   constructor(props) {
@@ -74,23 +74,16 @@ class UseCasesMapViewer extends React.Component {
       'esri/layers/FeatureLayer',
       'esri/geometry/Extent',
       'esri/Basemap',
-      'esri/layers/VectorTileLayer',
+      'esri/layers/WebTileLayer',
     ]).then(
-      ([
-        _Map,
-        _MapView,
-        _FeatureLayer,
-        _Extent,
-        _Basemap,
-        _VectorTileLayer,
-      ]) => {
-        [Map, MapView, FeatureLayer, Extent, Basemap, VectorTileLayer] = [
+      ([_Map, _MapView, _FeatureLayer, _Extent, _Basemap, _WebTileLayer]) => {
+        [Map, MapView, FeatureLayer, Extent, Basemap, WebTileLayer] = [
           _Map,
           _MapView,
           _FeatureLayer,
           _Extent,
           _Basemap,
-          _VectorTileLayer,
+          _WebTileLayer,
         ];
       },
     );
@@ -105,27 +98,29 @@ class UseCasesMapViewer extends React.Component {
     loadCss();
     await this.loader();
 
-    const gray_basemap = new VectorTileLayer({
-      portalItem: {
-        id: '291da5eab3a0412593b66d384379f89f',
-      },
-    });
-
-    let basemap = new Basemap({
-      baseLayers: [gray_basemap],
+    this.basemap = new Basemap({
+      title: 'Countries World',
+      thumbnailUrl:
+        'https://gisco-services.ec.europa.eu/maps/wmts/CountriesWorld/EPSG3857/0/0/0.png',
+      baseLayers: [
+        new WebTileLayer({
+          urlTemplate:
+            'https://gisco-services.ec.europa.eu/maps/tiles/CountriesWorld/EPSG3857/{z}/{x}/{y}.png',
+        }),
+      ],
     });
 
     // this.mapdiv.current is the reference to the current DOM element of
     // this.mapdiv after it was mounted by the render() method
     this.map = new Map({
-      basemap: basemap,
+      basemap: this.basemap,
     });
 
     this.view = new MapView({
       container: this.mapdiv.current,
       map: this.map,
       center: this.mapCfg.center,
-      zoom: this.mapCfg.zoom,
+      zoom: 1,
       ui: {
         components: ['attribution'],
       },