@eeacms/volto-tableau 8.1.5 → 9.0.1

package/.eslintrc.js

@@ -16,16 +16,16 @@ if (configFile) {
     voltoPath = `./${jsConfig.baseUrl}/${pathsConfig['@plone/volto'][0]}`;
 }
 
-const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
-const reg = new AddonConfigurationRegistry(projectRootPath);
+const { AddonRegistry } = require('@plone/registry/addon-registry');
+const { registry } = AddonRegistry.init(projectRootPath);
 
 // Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map((o) => [
+const addonAliases = Object.keys(registry.packages).map((o) => [
   o,
-  reg.packages[o].modulePath,
+  registry.packages[o].modulePath,
 ]);
 
-const addonExtenders = reg.getEslintExtenders().map((m) => require(m));
+const addonExtenders = registry.getEslintExtenders().map((m) => require(m));
 
 const defaultConfig = {
   extends: `${voltoPath}/.eslintrc`,
@@ -34,7 +34,7 @@ const defaultConfig = {
       alias: {
         map: [
           ['@plone/volto', '@plone/volto/src'],
-          ['@plone/volto-slate', '@plone/volto/packages/volto-slate/src'],
+          ['@plone/volto-slate', '@plone/volto-slate/src'],
           ...addonAliases,
           ['@package', `${__dirname}/src`],
           ['@root', `${__dirname}/src`],

package/CHANGELOG.md

@@ -4,6 +4,25 @@ 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).
 
+### [9.0.1](https://github.com/eea/volto-tableau/compare/9.0.0...9.0.1) - 8 April 2026
+
+#### :hammer_and_wrench: Others
+
+- test: Fix make test [Alin V. (Claudiu) - [`34446a7`](https://github.com/eea/volto-tableau/commit/34446a71fa6f5715cf797c4c0ca80bed33181d71)]
+## [9.0.0](https://github.com/eea/volto-tableau/compare/8.1.5...9.0.0) - 25 March 2026
+
+#### :rocket: New Features
+
+- feat: Volto 18 support - refs #287700 [Alin Voinea - [`9b3e664`](https://github.com/eea/volto-tableau/commit/9b3e664c40418e950816242f95f306399dc527c4)]
+
+#### :house: Internal changes
+
+- chore: [JENKINSFILE] add package version in sonarqube [valentinab25 - [`929dd7c`](https://github.com/eea/volto-tableau/commit/929dd7cb27faaecf96f133377acf4efcc8e0ca78)]
+- chore: [JENKINSFILE] use sonarqube branches [EEA Jenkins - [`ce94213`](https://github.com/eea/volto-tableau/commit/ce9421395395abfc6ddab7950f9a2c9ffadbfbbe)]
+
+#### :hammer_and_wrench: Others
+
+- tests: Fix Sonar Qube tags - refs #297339 [Alin Voinea - [`cfbd646`](https://github.com/eea/volto-tableau/commit/cfbd646a9c09cb90f6ffa6a886822e7a4759ba4d)]
 ### [8.1.5](https://github.com/eea/volto-tableau/compare/8.1.4...8.1.5) - 4 August 2025
 
 #### :hammer_and_wrench: Others

package/DEVELOP.md

@@ -26,21 +26,20 @@
 
 ### Or add @eeacms/volto-tableau 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/)
+Before starting make sure your development environment is properly set. See the official Plone documentation for [creating a project with Cookieplone](https://6.docs.plone.org/install/create-project-cookieplone.html) and [installing an add-on in development mode in Volto 18 and 19](https://6.docs.plone.org/volto/development/add-ons/install-an-add-on-dev-18.html).
 
-1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`
+For new Volto 18+ projects, use Cookieplone. It includes `mrs-developer` by default.
 
-        npm install -g yo @plone/generator-volto mrs-developer
+1.  Create a new Volto project with Cookieplone
 
-1.  Create new volto app
-
-        yo @plone/volto my-volto-project --addon @eeacms/volto-tableau --skip-install
-        cd my-volto-project
+        uvx cookieplone project
+        cd project-title
 
 1.  Add the following to `mrs.developer.json`:
 
         {
             "volto-tableau": {
+                "output": "packages",
                 "url": "https://github.com/eea/volto-tableau.git",
                 "package": "@eeacms/volto-tableau",
                 "branch": "develop",
@@ -48,28 +47,31 @@ Before starting make sure your development environment is properly set. See [Vol
             }
         }
 
-1.  Install
+1.  Add `@eeacms/volto-tableau` to the `addons` key in your project `volto.config.js`
+
+1.  Install or refresh the project setup
 
-        make develop
-        yarn
+        make install
 
-1.  Start backend
+1.  Start backend in one terminal
 
-        docker run --pull always -it --rm --name plone -p 8080:8080 -e SITE=Plone plone/plone-backend
+        make backend-start
 
-    ...wait for backend to setup and start - `Ready to handle requests`:
+    ...wait for backend to setup and start, ending with `Ready to handle requests`
 
     ...you can also check http://localhost:8080/Plone
 
-1.  Start frontend
+1.  Start frontend in a second terminal
 
-        yarn start
+        make frontend-start
 
 1.  Go to http://localhost:3000
 
 1.  Happy hacking!
 
-        cd src/addons/volto-tableau/
+        cd packages/volto-tableau
+
+For legacy Volto 17 projects, keep using the yarn-based workflow from the Volto 17 documentation.
 
 ## Cypress
 
@@ -81,7 +83,7 @@ project where you added `volto-tableau` to `mrs.developer.json`
 Go to:
 
   ```BASH
-  cd src/addons/volto-tableau/
+  cd packages/volto-tableau/
   ```
 
 Start:

package/Dockerfile

@@ -1,13 +1,22 @@
 # syntax=docker/dockerfile:1
 ARG VOLTO_VERSION
-FROM eeacms/frontend-builder:${VOLTO_VERSION}
+FROM plone/frontend-builder:${VOLTO_VERSION}
 
 ARG ADDON_NAME
 ARG ADDON_PATH
+ENV HOST="0.0.0.0"
+
+USER root
+RUN apt-get update -q \
+    && apt-get install -qy --no-install-recommends \
+       chromium libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb \
+    && rm -rf /var/lib/apt/lists/*
+USER node
 
 COPY --chown=node:node ./ /app/src/addons/${ADDON_PATH}/
 
 RUN /setupAddon
+RUN yarn add jest-junit
 RUN yarn install
 
 ENTRYPOINT ["yarn"]

package/Jenkinsfile

@@ -1,7 +1,4 @@
 pipeline {
-  tools {
-    jdk 'Java17'
-  }
   agent {
     node { label 'docker-host' }
   }
@@ -9,12 +6,12 @@ pipeline {
   environment {
     GIT_NAME = "volto-tableau"
     NAMESPACE = "@eeacms"
-    SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,water.europa.eu-freshwater,water.europa.eu-marine,industry.eea.europa.eu,demo-www.eea.europa.eu,www.eea.europa.eu-en,insitu.copernicus.eu"
+    SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,water.europa.eu-freshwater,water.europa.eu-marine,industry.eea.europa.eu,demo-www.eea.europa.eu,www.eea.europa.eu-en,www.eea.europa.eu,insitu.copernicus.eu"
     DEPENDENCIES = ""
     BACKEND_PROFILES = "eea.kitkat:testing"
     BACKEND_ADDONS = ""
-    VOLTO = "17"
-    VOLTO16_BREAKING_CHANGES = "yes"
+    CURRENT_VOLTO = "18-yarn"
+    PREVIOUS_VOLTO = "17"
     IMAGE_NAME = BUILD_TAG.toLowerCase()
   }
 
@@ -75,12 +72,13 @@ pipeline {
       }
       parallel {
 
-      stage('Volto 17') {
+      // Declarative stage names must stay string literals.
+      stage('Volto 18-yarn') {
         agent { node { label 'docker-1.13'} }
         stages {
       	  stage('Build test image') {
             steps {
-              sh '''docker build --pull --build-arg="VOLTO_VERSION=$VOLTO" --build-arg="ADDON_NAME=$NAMESPACE/$GIT_NAME"  --build-arg="ADDON_PATH=$GIT_NAME" . -t $IMAGE_NAME-frontend'''
+              sh '''docker build --pull --build-arg="VOLTO_VERSION=$CURRENT_VOLTO" --build-arg="ADDON_NAME=$NAMESPACE/$GIT_NAME"  --build-arg="ADDON_PATH=$GIT_NAME" . -t $IMAGE_NAME-frontend-current'''
             }
           }
 
@@ -91,9 +89,9 @@ pipeline {
             }
             steps {
               script {
-              fix_result = sh(script: '''docker run --name="$IMAGE_NAME-fix" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME  $IMAGE_NAME-frontend ci-fix''', returnStatus: true)
-              sh '''docker cp $IMAGE_NAME-fix:/app/src/addons/$GIT_NAME/src .'''
-              sh '''docker rm -v $IMAGE_NAME-fix'''
+              fix_result = sh(script: '''docker run --name="$IMAGE_NAME-fix-current" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME  $IMAGE_NAME-frontend-current ci-fix''', returnStatus: true)
+              sh '''docker cp $IMAGE_NAME-fix-current:/app/src/addons/$GIT_NAME/src .'''
+              sh '''docker rm -v $IMAGE_NAME-fix-current'''
               FOUND_FIX = sh(script: '''git diff | wc -l''', returnStdout: true).trim()
 
               if (FOUND_FIX != '0') {
@@ -114,21 +112,21 @@ pipeline {
           stage('ES lint') {
             when { environment name: 'SKIP_TESTS', value: '' }
             steps {
-              sh '''docker run --rm --name="$IMAGE_NAME-eslint" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend lint'''
+              sh '''docker run --rm --name="$IMAGE_NAME-eslint-current" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend-current lint'''
             }
           }
 
           stage('Style lint') {
             when { environment name: 'SKIP_TESTS', value: '' }
             steps {
-              sh '''docker run --rm --name="$IMAGE_NAME-stylelint" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME  $IMAGE_NAME-frontend stylelint'''
+              sh '''docker run --rm --name="$IMAGE_NAME-stylelint-current" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME  $IMAGE_NAME-frontend-current stylelint'''
             }
           }
 
           stage('Prettier') {
             when { environment name: 'SKIP_TESTS', value: '' }
             steps {
-              sh '''docker run --rm --name="$IMAGE_NAME-prettier" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME  $IMAGE_NAME-frontend prettier'''
+              sh '''docker run --rm --name="$IMAGE_NAME-prettier-current" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME  $IMAGE_NAME-frontend-current prettier'''
             }
           }
           stage('Unit tests') {
@@ -136,25 +134,25 @@ pipeline {
               steps {
                 script {
                   try {
-                    sh '''docker run --name="$IMAGE_NAME-volto" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend test-ci'''
-                    sh '''rm -rf xunit-reports'''
-                    sh '''mkdir -p xunit-reports'''
-                    sh '''docker cp $IMAGE_NAME-volto:/app/coverage xunit-reports/'''
-                    sh '''docker cp $IMAGE_NAME-volto:/app/junit.xml xunit-reports/'''
+                    sh '''docker run --name="$IMAGE_NAME-volto-current" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend-current test-ci'''
+                    sh '''rm -rf xunit-reports-current'''
+                    sh '''mkdir -p xunit-reports-current'''
+                    sh '''docker cp $IMAGE_NAME-volto-current:/app/coverage xunit-reports-current/'''
+                    sh '''docker cp $IMAGE_NAME-volto-current:/app/junit.xml xunit-reports-current/'''
                     publishHTML(target : [
                     allowMissing: false,
                     alwaysLinkToLastBuild: true,
                     keepAll: true,
-                    reportDir: 'xunit-reports/coverage/lcov-report',
+                    reportDir: 'xunit-reports-current/coverage/lcov-report',
                     reportFiles: 'index.html',
                     reportName: 'UTCoverage',
                     reportTitles: 'Unit Tests Code Coverage'
                   ])
                 } finally {
                     catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
-                        junit testResults: 'xunit-reports/junit.xml', allowEmptyResults: true
+                        junit testResults: 'xunit-reports-current/junit.xml', allowEmptyResults: true
                     }
-                    sh script: '''docker rm -v $IMAGE_NAME-volto''', returnStatus: true
+                    sh script: '''docker rm -v $IMAGE_NAME-volto-current''', returnStatus: true
                   }
                 }
               }
@@ -165,52 +163,52 @@ pipeline {
               steps {
                 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 '''docker run -d --shm-size=4g --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'''
-                    frontend = sh script:'''docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress make check-ci''', returnStatus: true
+                    sh '''docker run --pull always --rm -d --name="$IMAGE_NAME-plone-current" -e SITE="Plone" -e PROFILES="$BACKEND_PROFILES" -e ADDONS="$BACKEND_ADDONS" eeacms/plone-backend'''
+                    sh '''docker run -d --shm-size=4g --link $IMAGE_NAME-plone-current:plone --name="$IMAGE_NAME-cypress-current" -e "RAZZLE_INTERNAL_API_PATH=http://plone:8080/Plone" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend-current start-ci'''
+                    frontend = sh script:'''docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress-current make check-ci''', returnStatus: true
                     if ( frontend != 0 ) {
-                      sh '''docker logs $IMAGE_NAME-cypress; exit 1'''
+                      sh '''docker logs $IMAGE_NAME-cypress-current; exit 1'''
                     }
 
-                    sh '''timeout -s 9 1800 docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress make cypress-ci'''
+                    sh '''timeout -s 9 1800 docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress-current make cypress-ci'''
                   } finally {
                     try {
                       if ( frontend == 0 ) {
-                      sh '''rm -rf cypress-videos cypress-results cypress-coverage cypress-screenshots'''
-                      sh '''mkdir -p cypress-videos cypress-results cypress-coverage cypress-screenshots'''
-                      videos = sh script: '''docker cp $IMAGE_NAME-cypress:/app/src/addons/$GIT_NAME/cypress/videos cypress-videos/''', returnStatus: true
-                      sh '''docker cp $IMAGE_NAME-cypress:/app/src/addons/$GIT_NAME/cypress/reports cypress-results/'''
-                      screenshots = sh script: '''docker cp $IMAGE_NAME-cypress:/app/src/addons/$GIT_NAME/cypress/screenshots cypress-screenshots''', returnStatus: true
+                      sh '''rm -rf cypress-videos-current cypress-results-current cypress-coverage-current cypress-screenshots-current'''
+                      sh '''mkdir -p cypress-videos-current cypress-results-current cypress-coverage-current cypress-screenshots-current'''
+                      videos = sh script: '''docker cp $IMAGE_NAME-cypress-current:/app/src/addons/$GIT_NAME/cypress/videos cypress-videos-current/''', returnStatus: true
+                      sh '''docker cp $IMAGE_NAME-cypress-current:/app/src/addons/$GIT_NAME/cypress/reports cypress-results-current/'''
+                      screenshots = sh script: '''docker cp $IMAGE_NAME-cypress-current:/app/src/addons/$GIT_NAME/cypress/screenshots cypress-screenshots-current''', returnStatus: true
 
-                      archiveArtifacts artifacts: 'cypress-screenshots/**', fingerprint: true, allowEmptyArchive: true
+                      archiveArtifacts artifacts: 'cypress-screenshots-current/**', fingerprint: true, allowEmptyArchive: true
 
-                      coverage = sh script: '''docker cp $IMAGE_NAME-cypress:/app/src/addons/$GIT_NAME/coverage cypress-coverage''', returnStatus: true
+                      coverage = sh script: '''docker cp $IMAGE_NAME-cypress-current:/app/src/addons/$GIT_NAME/coverage cypress-coverage-current''', returnStatus: true
 
                       if ( coverage == 0 ) {
                         publishHTML(target : [allowMissing: false,
                              alwaysLinkToLastBuild: true,
                              keepAll: true,
-                             reportDir: 'cypress-coverage/coverage/lcov-report',
+                             reportDir: 'cypress-coverage-current/coverage/lcov-report',
                              reportFiles: 'index.html',
                              reportName: 'CypressCoverage',
                              reportTitles: 'Integration Tests Code Coverage'])
                       }
                       if ( videos == 0 ) {
-                        sh '''for file in $(find cypress-results -name *.xml); do if [ $(grep -E 'failures="[1-9].*"' $file | wc -l) -eq 0 ]; then testname=$(grep -E 'file=.*failures="0"' $file | sed 's#.* file=".*\\/\\(.*\\.[jsxt]\\+\\)" time.*#\\1#' );  rm -f cypress-videos/videos/$testname.mp4; fi; done'''
-                        archiveArtifacts artifacts: 'cypress-videos/**/*.mp4', fingerprint: true, allowEmptyArchive: true
+                        sh '''for file in $(find cypress-results-current -name *.xml); do if [ $(grep -E 'failures="[1-9].*"' $file | wc -l) -eq 0 ]; then testname=$(grep -E 'file=.*failures="0"' $file | sed 's#.* file=".*\\/\\(.*\\.[jsxt]\\+\\)" time.*#\\1#' );  rm -f cypress-videos-current/videos/$testname.mp4; fi; done'''
+                        archiveArtifacts artifacts: 'cypress-videos-current/**/*.mp4', fingerprint: true, allowEmptyArchive: true
                       }
                       }
                     } finally {
                       catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
-                        junit testResults: 'cypress-results/**/*.xml', allowEmptyResults: true
+                        junit testResults: 'cypress-results-current/**/*.xml', allowEmptyResults: true
                       }
                       catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
-                        sh '''docker logs $IMAGE_NAME-cypress'''
+                        sh '''docker logs $IMAGE_NAME-cypress-current'''
                       }
-                      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
+                      sh script: "docker stop $IMAGE_NAME-cypress-current", returnStatus: true
+                      sh script: "docker stop $IMAGE_NAME-plone-current", returnStatus: true
+                      sh script: "docker rm -v $IMAGE_NAME-plone-current", returnStatus: true
+                      sh script: "docker rm -v $IMAGE_NAME-cypress-current", returnStatus: true
                     }
                   }
                 }
@@ -242,11 +240,17 @@ pipeline {
         script {
           def scannerHome = tool 'SonarQubeScanner'
           def nodeJS = tool 'NodeJS'
+          if (env.CHANGE_ID) {
+            env.sonarParams = " -Dsonar.pullrequest.base=${env.CHANGE_TARGET} -Dsonar.pullrequest.branch=${env.CHANGE_BRANCH} -Dsonar.pullrequest.key=${env.CHANGE_ID} "
+          }
+          else {
+            env.sonarParams = " -Dsonar.branch.name=${env.BRANCH_NAME}"
+          }
           withSonarQubeEnv('Sonarqube') {
-            sh '''sed -i "s#/app/src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info'''
-            sh '''sed -i "s#src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info'''
-            sh "export PATH=${scannerHome}/bin:${nodeJS}/bin:$PATH; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
-            sh '''try=5; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}-${BRANCH_NAME}&tags=${SONARQUBE_TAGS},${BRANCH_NAME}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 15; try=\$(( \$try - 1 )); fi; done'''
+            sh '''sed -i "s#/app/src/addons/${GIT_NAME}/##g" xunit-reports-current/coverage/lcov.info'''
+            sh '''sed -i "s#src/addons/${GIT_NAME}/##g" xunit-reports-current/coverage/lcov.info'''
+            sh "export PATH=${scannerHome}/bin:${nodeJS}/bin:$PATH; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports-current/coverage/lcov.info,./cypress-coverage-current/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME -Dsonar.projectName=$GIT_NAME -Dsonar.projectVersion=\$(jq -r '.version' package.json) ${env.sonarParams}"
+            sh '''try=5; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}&tags=${SONARQUBE_TAGS}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 15; try=\$(( \$try - 1 )); fi; done'''
           }
         }
       }
@@ -256,75 +260,77 @@ pipeline {
         }
       }
 
-      stage('Volto 16') { 
+      stage('Volto 17') { 
         agent { node { label 'integration'} }
-        when { 
-          environment name: 'SKIP_TESTS', value: ''
-          not { environment name: 'VOLTO16_BREAKING_CHANGES', value: 'yes' }
+        when {
+          allOf {
+            environment name: 'SKIP_TESTS', value: ''
+            expression { return !!env.PREVIOUS_VOLTO?.trim() }
+          }
         }
         stages {
       		stage('Build test image') {
             steps {
-              sh '''docker build --pull --build-arg="VOLTO_VERSION=16" --build-arg="ADDON_NAME=$NAMESPACE/$GIT_NAME"  --build-arg="ADDON_PATH=$GIT_NAME" . -t $IMAGE_NAME-frontend16'''
+              sh '''docker build --pull --build-arg="VOLTO_VERSION=$PREVIOUS_VOLTO" --build-arg="ADDON_NAME=$NAMESPACE/$GIT_NAME"  --build-arg="ADDON_PATH=$GIT_NAME" . -t $IMAGE_NAME-frontend-previous'''
             }
           }
 
-             stage('Unit tests Volto 16') {
+             stage('Unit tests') {
               steps {
                 script {
                   try {
-                    sh '''docker run --name="$IMAGE_NAME-volto16" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend16 test-ci'''
-                    sh '''rm -rf xunit-reports16'''
-                    sh '''mkdir -p xunit-reports16'''
-                    sh '''docker cp $IMAGE_NAME-volto16:/app/junit.xml xunit-reports16/'''
+                    sh '''docker run --name="$IMAGE_NAME-volto-previous" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend-previous test-ci'''
+                    sh '''rm -rf xunit-reports-previous'''
+                    sh '''mkdir -p xunit-reports-previous'''
+                    sh '''docker cp $IMAGE_NAME-volto-previous:/app/junit.xml xunit-reports-previous/'''
                 } finally {
                     catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
-                        junit testResults: 'xunit-reports16/junit.xml', allowEmptyResults: true
+                        junit testResults: 'xunit-reports-previous/junit.xml', allowEmptyResults: true
                     }
-                    sh script: '''docker rm -v $IMAGE_NAME-volto16''', returnStatus: true
+                    sh script: '''docker rm -v $IMAGE_NAME-volto-previous''', returnStatus: true
                   }
                 }
               }
             }
 
-           stage('Integration tests Volto 16') {
+           stage('Integration tests') {
               steps {
                 script {
                   try {
-                    sh '''docker run --pull always --rm -d --name="$IMAGE_NAME-plone16" -e SITE="Plone" -e PROFILES="$BACKEND_PROFILES" -e ADDONS="$BACKEND_ADDONS" eeacms/plone-backend'''
-                    sh '''docker run -d --shm-size=4g --link $IMAGE_NAME-plone16:plone --name="$IMAGE_NAME-cypress16" -e "RAZZLE_INTERNAL_API_PATH=http://plone:8080/Plone" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend16 start-ci'''
-                    frontend = sh script:'''docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress16 make check-ci''', returnStatus: true
+                    sh '''docker run --pull always --rm -d --name="$IMAGE_NAME-plone-previous" -e SITE="Plone" -e PROFILES="$BACKEND_PROFILES" -e ADDONS="$BACKEND_ADDONS" eeacms/plone-backend'''
+                    sh '''docker run -d --shm-size=4g --link $IMAGE_NAME-plone-previous:plone --name="$IMAGE_NAME-cypress-previous" -e "RAZZLE_INTERNAL_API_PATH=http://plone:8080/Plone" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend-previous start-ci'''
+                    frontend = sh script:'''docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress-previous make check-ci''', returnStatus: true
                     if ( frontend != 0 ) {
-                      sh '''docker logs $IMAGE_NAME-cypress16; exit 1'''
+                      sh '''docker logs $IMAGE_NAME-cypress-previous; exit 1'''
                     }
-                    sh '''timeout -s 9 1800 docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress16 make cypress-ci'''
+                    sh '''timeout -s 9 1800 docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress-previous make cypress-ci'''
                   } finally {
                     try {
                       if ( frontend == 0 ) {
-                      sh '''rm -rf cypress-videos16 cypress-results16 cypress-coverage16 cypress-screenshots16'''
-                      sh '''mkdir -p cypress-videos16 cypress-results16 cypress-coverage16 cypress-screenshots16'''
-                      videos = sh script: '''docker cp $IMAGE_NAME-cypress16:/app/src/addons/$GIT_NAME/cypress/videos cypress-videos16/''', returnStatus: true
-                      sh '''docker cp $IMAGE_NAME-cypress16:/app/src/addons/$GIT_NAME/cypress/reports cypress-results16/'''
-                      screenshots = sh script: '''docker cp $IMAGE_NAME-cypress16:/app/src/addons/$GIT_NAME/cypress/screenshots cypress-screenshots16''', returnStatus: true
+                      sh '''rm -rf cypress-videos-previous cypress-results-previous cypress-coverage-previous cypress-screenshots-previous'''
+                      sh '''mkdir -p cypress-videos-previous cypress-results-previous cypress-coverage-previous cypress-screenshots-previous'''
+                      videos = sh script: '''docker cp $IMAGE_NAME-cypress-previous:/app/src/addons/$GIT_NAME/cypress/videos cypress-videos-previous/''', returnStatus: true
+                      sh '''docker cp $IMAGE_NAME-cypress-previous:/app/src/addons/$GIT_NAME/cypress/reports cypress-results-previous/'''
+                      screenshots = sh script: '''docker cp $IMAGE_NAME-cypress-previous:/app/src/addons/$GIT_NAME/cypress/screenshots cypress-screenshots-previous''', returnStatus: true
 
-                      archiveArtifacts artifacts: 'cypress-screenshots16/**', fingerprint: true, allowEmptyArchive: true
+                      archiveArtifacts artifacts: 'cypress-screenshots-previous/**', fingerprint: true, allowEmptyArchive: true
 
                       if ( videos == 0 ) {
-                        sh '''for file in $(find cypress-results16 -name *.xml); do if [ $(grep -E 'failures="[1-9].*"' $file | wc -l) -eq 0 ]; then testname=$(grep -E 'file=.*failures="0"' $file | sed 's#.* file=".*\\/\\(.*\\.[jsxt]\\+\\)" time.*#\\1#' );  rm -f cypress-videos16/videos/$testname.mp4; fi; done'''
-                        archiveArtifacts artifacts: 'cypress-videos16/**/*.mp4', fingerprint: true, allowEmptyArchive: true
+                        sh '''for file in $(find cypress-results-previous -name *.xml); do if [ $(grep -E 'failures="[1-9].*"' $file | wc -l) -eq 0 ]; then testname=$(grep -E 'file=.*failures="0"' $file | sed 's#.* file=".*\\/\\(.*\\.[jsxt]\\+\\)" time.*#\\1#' );  rm -f cypress-videos-previous/videos/$testname.mp4; fi; done'''
+                        archiveArtifacts artifacts: 'cypress-videos-previous/**/*.mp4', fingerprint: true, allowEmptyArchive: true
                       }
                       }
                     } finally {
                       catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
-                        junit testResults: 'cypress-results16/**/*.xml', allowEmptyResults: true
+                        junit testResults: 'cypress-results-previous/**/*.xml', allowEmptyResults: true
                       }
                       catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
-                        sh '''docker logs $IMAGE_NAME-cypress16'''
+                        sh '''docker logs $IMAGE_NAME-cypress-previous'''
                       }
-                      sh script: "docker stop $IMAGE_NAME-cypress16", returnStatus: true
-                      sh script: "docker stop $IMAGE_NAME-plone16", returnStatus: true
-                      sh script: "docker rm -v $IMAGE_NAME-plone16", returnStatus: true
-                      sh script: "docker rm -v $IMAGE_NAME-cypress16", returnStatus: true
+                      sh script: "docker stop $IMAGE_NAME-cypress-previous", returnStatus: true
+                      sh script: "docker stop $IMAGE_NAME-plone-previous", returnStatus: true
+                      sh script: "docker rm -v $IMAGE_NAME-plone-previous", returnStatus: true
+                      sh script: "docker rm -v $IMAGE_NAME-cypress-previous", returnStatus: true
                     }
                   }
                 }
@@ -336,8 +342,8 @@ pipeline {
       }
       post {
         always {
-            sh script: "docker rmi $IMAGE_NAME-frontend", returnStatus: true
-            sh script: "docker rmi $IMAGE_NAME-frontend16", returnStatus: true
+            sh script: "docker rmi $IMAGE_NAME-frontend-current", returnStatus: true
+            sh script: "docker rmi $IMAGE_NAME-frontend-previous", returnStatus: true
         }
       }
     }
@@ -363,7 +369,7 @@ pipeline {
         script {
           sh '''echo "Error" > checkresult.txt'''
           catchError(buildResult: 'FAILURE', stageResult: 'FAILURE') {
-            sh '''set -o pipefail; docker run -i --rm --pull always --name="$IMAGE_NAME-gitflow-sn" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" eeacms/gitflow /checkSonarqubemaster.sh | grep -v "Found script" | tee checkresult.txt'''
+            sh '''set -o pipefail; docker run -i --rm --pull always --name="$IMAGE_NAME-gitflow-sn" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" eeacms/gitflow /checkSonarqubemasterV2.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',

package/Makefile

@@ -46,7 +46,7 @@ endif
 DIR=$(shell basename $$(pwd))
 NODE_MODULES?="../../../node_modules"
 PLONE_VERSION?=6
-VOLTO_VERSION?=17
+VOLTO_VERSION?=18-yarn
 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
@@ -90,11 +90,11 @@ cypress-run:	## Run cypress integration tests
 
 .PHONY: test
 test:			## Run jest tests
-	${DOCKER_COMPOSE} run -e CI=1 frontend test
+	${DOCKER_COMPOSE} run --no-deps -e CI=1 frontend test
 
 .PHONY: test-update
 test-update:	## Update jest tests snapshots
-	${DOCKER_COMPOSE} run -e CI=1 frontend test -u
+	${DOCKER_COMPOSE} run --no-deps -e CI=1 frontend test -u
 
 .PHONY: stylelint
 stylelint:		## Stylelint

package/README.md

@@ -3,16 +3,16 @@
 [![Releases](https://img.shields.io/github/v/release/eea/volto-tableau)](https://github.com/eea/volto-tableau/releases)
 
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-tableau%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-tableau/job/master/display/redirect)
-[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau-master&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau-master)
-[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau-master&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau-master)
-[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau-master&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau-master)
-[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau-master&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau-master)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau)
 
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-tableau%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-tableau/job/develop/display/redirect)
-[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau-develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau-develop)
-[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau-develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau-develop)
-[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau-develop)
-[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau-develop)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau&branch=develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau&branch=develop)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau&branch=develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau&branch=develop)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau&branch=develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau&branch=develop)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tableau&branch=develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tableau&branch=develop)
 
 [Volto](https://github.com/plone/volto) add-on
 
@@ -37,6 +37,11 @@ Registers a VisualizationView component for a content type named 'tableau_visual
 
 Go to http://localhost:3000
 
+`make start` now defaults to Volto 18. To run the same setup against Volto 17, use:
+
+      VOLTO_VERSION=17 make
+      VOLTO_VERSION=17 make start
+
 ### Add volto-tableau to your Volto project
 
 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
@@ -50,30 +55,39 @@ Go to http://localhost:3000
 - If you already have a volto project, just update `package.json`:
 
   ```JSON
-  "addons": [
-      "@eeacms/volto-tableau"
-  ],
-
   "dependencies": {
       "@eeacms/volto-tableau": "*"
   }
   ```
 
-- If not, create one:
+   and `volto.config.js`:
+
+   ```JavaScript
+   const addons = ['@eeacms/volto-tableau'];
+   ```
+
+- If not, create one with Cookieplone, as recommended by the official Plone documentation for Volto 18+:
 
   ```
-  npm install -g yo @plone/generator-volto
-  yo @plone/volto my-volto-project --canary --addon @eeacms/volto-tableau
-  cd my-volto-project
+  uvx cookieplone project
+  cd project-title
   ```
 
-1. Install new add-ons and restart Volto:
+1. Install or update dependencies, then start the project:
 
    ```
-   yarn
-   yarn start
+   make install
    ```
 
+   For a Cookieplone project, start the backend and frontend in separate terminals:
+
+   ```
+   make backend-start
+   make frontend-start
+   ```
+
+   For a legacy Volto 17 project, install the package with `yarn` and restart the frontend as usual.
+
 1. Go to http://localhost:3000
 
 1. Happy editing!

package/cypress/e2e/block-basics.cy.js

@@ -5,22 +5,24 @@ describe('Blocks Tests', () => {
   afterEach(slateAfterEach);
 
   it('Add Block: Empty', () => {
+    const titleSelector = '.block.inner.title [contenteditable="true"]';
+
     // Change page title
-    cy.clearSlateTitle();
-    cy.getSlateTitle().type('My Add-on Page');
+    cy.get(titleSelector).clear();
+    cy.get(titleSelector).type('My Add-on Page');
 
     cy.get('.documentFirstHeading').contains('My Add-on Page');
 
-    cy.getSlate().click({ force: true });
+    cy.get(titleSelector).type('{enter}');
 
     // Add block
     cy.get('.ui.basic.icon.button.block-add-button')
       .first()
       .click({ force: true });
-    cy.get('.blocks-chooser .title').contains('Media').click({ force: true });
-    cy.get('.content.active.media .button.image')
-      .contains('Image')
-      .click({ force: true });
+    cy.get(".blocks-chooser .ui.form .field.searchbox input[type='text']").type(
+      'image',
+    );
+    cy.get('.button.image').contains('Image').click({ force: true });
 
     // Save
     cy.get('#toolbar-save').click({ force: true });

package/cypress/e2e/block-tableau.cy.js

@@ -27,15 +27,22 @@ describe('Blocks Tests', () => {
   afterEach(slateAfterEach);
 
   it('Add Tableau block', () => {
-    cy.intercept('GET', `/**/*?expand*`, {
-      statusCode: 200,
-    }).as('content');
+    cy.on('uncaught:exception', (err) => {
+      if (err.message?.includes('Not Found')) {
+        return false;
+      }
+    });
+
+    cy.intercept('GET', `/**/*?expand*`).as('content');
     // when I add a maps block
-    cy.addNewBlock('tableau');
+    cy.addNewBlock('tableau', true);
 
     cy.get(
       `.sidebar-container .field-wrapper-tableau_vis_url #field-tableau_vis_url`,
-    ).type('/path/to/dashboard', { force: true });
+    ).clear({ force: true });
+    cy.get(
+      `.sidebar-container .field-wrapper-tableau_vis_url #field-tableau_vis_url`,
+    ).type('/cypress/my-page', { force: true });
     cy.wait('@content');
     cy.get('#toolbar-save').click({ force: true });
     cy.intercept('GET', `/**/*?expand*`).as('content');

package/cypress/support/commands.js

@@ -387,8 +387,9 @@ Cypress.Commands.add('getSlate', ({ createNewSlate = true } = {}) => {
     },
     () => {
       if (createNewSlate) {
-        cy.get('.block.inner')
-          .last()
+        cy.get(SLATE_TITLE_SELECTOR)
+          .focus()
+          .click({ force: true })
           .type('{moveToEnd}{enter}', { force: true });
       }
       slate = cy.get(SLATE_SELECTOR, { timeout: 10000 }).last();
@@ -548,7 +549,10 @@ Cypress.Commands.add('addNewBlock', (blockName, createNewSlate = false) => {
 Cypress.Commands.add('getSlate', (createNewSlate = false) => {
   let slate;
   if (createNewSlate) {
-    cy.get('.block.inner').last().type('{moveToEnd}{enter}', { force: true });
+    cy.get(SLATE_TITLE_SELECTOR)
+      .focus()
+      .click({ force: true })
+      .type('{moveToEnd}{enter}', { force: true });
   }
   cy.getIfExists(
     SLATE_SELECTOR,

package/docker-compose.yml

@@ -15,7 +15,7 @@ services:
       args:
         ADDON_NAME: "${ADDON_NAME}"
         ADDON_PATH: "${ADDON_PATH}"
-        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+        VOLTO_VERSION: ${VOLTO_VERSION:-18-yarn}
     ports:
     - "3000:3000"
     - "3001:3001"

package/jest-addon.config.js

@@ -1,5 +1,18 @@
 require('dotenv').config({ path: __dirname + '/.env' })
 
+const fs = require('fs')
+const path = require('path')
+
+const voltoSlatePath = fs.existsSync(
+  path.join(__dirname, '../../../node_modules/@plone/volto-slate/src'),
+)
+  ? '<rootDir>/node_modules/@plone/volto-slate/src'
+  : '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src'
+
+const countupPath = fs.existsSync(path.join(__dirname, '../countup/src'))
+  ? '<rootDir>/src/addons/countup/src'
+  : '<rootDir>/node_modules/@eeacms/countup'
+
 module.exports = {
   testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
   collectCoverageFrom: [
@@ -16,11 +29,10 @@ module.exports = {
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
     '@eeacms/search/(.*)$': '<rootDir>/src/addons/volto-searchlib/searchlib/$1',
     '@eeacms/search': '<rootDir>/src/addons/volto-searchlib/searchlib',
+    '@eeacms/countup$': countupPath,
     '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
-    '@plone/volto-slate$':
-      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
-    '@plone/volto-slate/(.*)$':
-      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src/$1',
+    '@plone/volto-slate$': voltoSlatePath,
+    '@plone/volto-slate/(.*)$': `${voltoSlatePath}/$1`,
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tableau",
-  "version": "8.1.5",
+  "version": "9.0.1",
   "description": "@eeacms/volto-tableau: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/Blocks/EmbedTableauVisualization/Edit.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { compose } from 'redux';
 import { injectIntl } from 'react-intl';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
-import { SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import getSchema from './schema';
 
 import View from './View';

package/src/Blocks/EmbedTableauVisualization/Edit.test.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Edit from './Edit';
 import installEmbedTableau from '.';
@@ -22,14 +22,18 @@ describe('Edit', () => {
     with_share: true,
   };
 
-  it('should render the component', () => {
+  it('should render the component', async () => {
+    const sidebar = document.createElement('div');
+    sidebar.id = 'sidebar';
+    document.body.appendChild(sidebar);
+
     const { container } = render(
       <Provider store={global.store}>
         <Edit
           id="my-tableau"
           data={data}
           pathname="/news"
-          selected={false}
+          selected={true}
           block="1234"
           index={1}
           onChangeBlock={() => {}}
@@ -55,60 +59,7 @@ describe('Edit', () => {
       position: 'relative',
     });
     expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();
-    expect(container.querySelector('#sidebar')).toBeInTheDocument();
-    expect(container.querySelector('#sidebar .ui.form')).toBeInTheDocument();
-    expect(
-      container.querySelector('#sidebar .ui.form .header.pulled'),
-    ).toBeInTheDocument();
-    expect(screen.getByText('Embed Dashboard (Tableau)')).toBeInTheDocument();
-    expect(
-      container.querySelector('#blockform-fieldset-default'),
-    ).toBeInTheDocument();
-    expect(
-      container.querySelector(
-        '#blockform-fieldset-default .ui.segment.form.attached',
-      ),
-    ).toBeInTheDocument();
-    expect(
-      container.querySelector(
-        '#mocked-field-tableau_vis_url.mocked-default-widget',
-      ),
-    ).toBeInTheDocument();
-    expect(screen.getByText(/Tableau visualization/)).toBeInTheDocument();
-    expect(
-      screen.getByText(
-        'When using context query parameters please use the corresponding field name from the Tableau service.',
-      ),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(
-        'When using context query parameters please use the corresponding field name from the Tableau service.',
-      ),
-    ).toBeInTheDocument();
-    expect(
-      container.querySelector(
-        '#mocked-field-tableau_height.mocked-default-widget',
-      ),
-    ).toBeInTheDocument();
-    expect(
-      container.querySelector(
-        'a[href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"]',
-      ),
-    ).toBeInTheDocument();
-    expect(
-      container.querySelector('.accordion.ui.fluid.styled.form'),
-    ).toBeInTheDocument();
-    expect(
-      container.querySelector('#blockform-fieldset-toolbar'),
-    ).toBeInTheDocument();
-    expect(
-      container.querySelector('#blockform-fieldset-toolbar .active.title'),
-    ).toBeInTheDocument();
-    expect(screen.getByText('Toolbar')).toBeInTheDocument();
-    expect(screen.getByText(/Show note/)).toBeInTheDocument();
-    expect(screen.getByText(/Show more info/)).toBeInTheDocument();
-    expect(screen.getByText(/Show download button/)).toBeInTheDocument();
-    expect(screen.getByText(/Show share button/)).toBeInTheDocument();
-    expect(screen.getByText(/Show enlarge button/)).toBeInTheDocument();
+    expect(document.querySelector('#sidebar')).toBeInTheDocument();
+    sidebar.remove();
   });
 });

package/src/Blocks/EmbedTableauVisualization/View.jsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react';
 import { withRouter } from 'react-router';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { isFunction } from 'lodash';
+import isFunction from 'lodash/isFunction';
 import { Message } from 'semantic-ui-react';
-import { flattenToAppURL } from '@plone/volto/helpers';
-import { getContent } from '@plone/volto/actions';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { getContent } from '@plone/volto/actions/content/content';
 import PrivacyProtection from '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection';
 import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
 import {

package/src/Blocks/EmbedTableauVisualization/View.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import View from './View';
 

package/src/Blocks/TableauBlock/Edit.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import BlockDataForm from '@plone/volto/components/manage/Form/InlineForm';
 import config from '@plone/volto/registry';
 import getSchema from './schema';

package/src/Blocks/TableauBlock/View.test.jsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 import View from './View';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
 
 jest.mock('@eeacms/volto-tableau/Tableau/Tableau', () =>

package/src/Blocks/index.js

@@ -1,4 +1,4 @@
-import { uniqBy } from 'lodash';
+import uniqBy from 'lodash/uniqBy';
 import installEmbedTableauVisualization from './EmbedTableauVisualization';
 import installTableauBlock from './TableauBlock';
 

package/src/Tableau/Tableau.jsx

@@ -9,26 +9,25 @@ import React, {
 } from 'react';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
-import {
-  isEqual,
-  isUndefined,
-  isNaN,
-  isNumber,
-  forOwn,
-  find,
-  includes,
-  isArray,
-  isString,
-  isInteger,
-  isBoolean,
-  toString,
-  toInteger,
-  toNumber,
-} from 'lodash';
+import isEqual from 'lodash/isEqual';
+import isUndefined from 'lodash/isUndefined';
+import isNaN from 'lodash/isNaN';
+import isNumber from 'lodash/isNumber';
+import forOwn from 'lodash/forOwn';
+import find from 'lodash/find';
+import includes from 'lodash/includes';
+import isArray from 'lodash/isArray';
+import isString from 'lodash/isString';
+import isInteger from 'lodash/isInteger';
+import isBoolean from 'lodash/isBoolean';
+import toString from 'lodash/toString';
+import toInteger from 'lodash/toInteger';
+import toNumber from 'lodash/toNumber';
 import qs from 'qs';
 import cx from 'classnames';
 import { Button } from 'semantic-ui-react';
-import { Toast, Icon } from '@plone/volto/components';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import {
   FigureNote,
   Sources,

package/src/Tableau/Tableau.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-redux';
 import Tableau from './Tableau';
 

package/src/Tableau/helpers.js

@@ -1,4 +1,6 @@
-import { reduce, isUndefined, isString } from 'lodash';
+import reduce from 'lodash/reduce';
+import isUndefined from 'lodash/isUndefined';
+import isString from 'lodash/isString';
 import qs from 'query-string';
 import { pickMetadata } from '@eeacms/volto-embed/helpers';
 

package/src/Views/VisualizationView.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { withRouter } from 'react-router';
 import { Container } from 'semantic-ui-react';
-import { hasBlocksData } from '@plone/volto/helpers';
+import { hasBlocksData } from '@plone/volto/helpers/Blocks/Blocks';
 import config from '@plone/volto/registry';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';

package/src/Views/VisualizationView.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-redux';
 
 import VisualizationView from './VisualizationView';

package/src/Widgets/CreatableSelectWidget.jsx

@@ -7,15 +7,18 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { map } from 'lodash';
+import map from 'lodash/map';
 import { defineMessages, injectIntl } from 'react-intl';
 import {
   getVocabFromHint,
   getVocabFromField,
   getVocabFromItems,
-} from '@plone/volto/helpers';
-import { FormFieldWrapper } from '@plone/volto/components';
-import { getVocabulary, getVocabularyTokenTitle } from '@plone/volto/actions';
+} from '@plone/volto/helpers/Vocabularies/Vocabularies';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import {
+  getVocabulary,
+  getVocabularyTokenTitle,
+} from '@plone/volto/actions/vocabularies/vocabularies';
 import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
 
 import {

package/src/Widgets/VisualizationViewWidget.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-redux';
 
 import VisualizationViewWidget from './VisualizationViewWidget';

package/src/Widgets/VisualizationWidget.jsx

@@ -3,10 +3,11 @@ import { withRouter } from 'react-router';
 import { connect } from 'react-redux';
 import { injectIntl } from 'react-intl';
 import { compose } from 'redux';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 import { Modal, Button, Grid } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
-import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
 import getSchema from './schema';
 import {
@@ -17,7 +18,7 @@ import {
 } from '@eeacms/volto-tableau/Tableau/helpers';
 
 import '@eeacms/volto-tableau/less/tableau.less';
-import { getBaseUrl } from '@plone/volto/helpers';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
 
 function blobToBase64(blob) {
   return new Promise((resolve, reject) => {

package/src/Widgets/VisualizationWidget.test.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import VisualizationWidget from './VisualizationWidget';
 
 describe('VisualizationWidget', () => {
-  it('should render the component', () => {
+  it('should render the component', async () => {
     const data = {
       value: {
         url: 'http://localhost:3000/tableau-ct',
@@ -29,6 +29,11 @@ describe('VisualizationWidget', () => {
         <VisualizationWidget {...data} id={'1234'} title="Title" />
       </Provider>,
     );
-    expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();
+    expect(
+      await screen.findByRole('button', { name: /open tableau editor/i }),
+    ).toBeInTheDocument();
+    await waitFor(() => {
+      expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();
+    });
   });
 });

package/src/Widgets/{schema.js → schema.jsx}

@@ -1,5 +1,7 @@
 import { defineMessages } from 'react-intl';
-import { find, includes, uniq } from 'lodash';
+import find from 'lodash/find';
+import includes from 'lodash/includes';
+import uniq from 'lodash/uniq';
 import { canChangeVizData } from '@eeacms/volto-tableau/Tableau/helpers';
 
 const messages = defineMessages({