@eeacms/volto-tableau 7.2.0 → 8.0.0

package/.env

@@ -0,0 +1 @@
+JEST_USE_SETUP=ON

package/.eslintrc.js

@@ -0,0 +1,65 @@
+const fs = require('fs');
+const path = require('path');
+const projectRootPath = fs.realpathSync(__dirname + '/../../../');
+
+let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
+let configFile;
+if (fs.existsSync(`${projectRootPath}/tsconfig.json`))
+  configFile = `${projectRootPath}/tsconfig.json`;
+else if (fs.existsSync(`${projectRootPath}/jsconfig.json`))
+  configFile = `${projectRootPath}/jsconfig.json`;
+
+if (configFile) {
+  const jsConfig = require(configFile).compilerOptions;
+  const pathsConfig = jsConfig.paths;
+  if (pathsConfig['@plone/volto'])
+    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig['@plone/volto'][0]}`;
+}
+
+const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
+const reg = new AddonConfigurationRegistry(projectRootPath);
+
+// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
+const addonAliases = Object.keys(reg.packages).map((o) => [
+  o,
+  reg.packages[o].modulePath,
+]);
+
+const addonExtenders = reg.getEslintExtenders().map((m) => require(m));
+
+const defaultConfig = {
+  extends: `${voltoPath}/.eslintrc`,
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@plone/volto', '@plone/volto/src'],
+          ['@plone/volto-slate', '@plone/volto/packages/volto-slate/src'],
+          ...addonAliases,
+          ['@package', `${__dirname}/src`],
+          ['@root', `${__dirname}/src`],
+          ['~', `${__dirname}/src`],
+        ],
+        extensions: ['.js', '.jsx', '.json'],
+      },
+      'babel-plugin-root-import': {
+        rootPathSuffix: 'src',
+      },
+    },
+  },
+  rules: {
+    'react/jsx-no-target-blank': [
+      'error',
+      {
+        allowReferrer: true,
+      },
+    ],
+  }
+};
+
+const config = addonExtenders.reduce(
+  (acc, extender) => extender.modify(acc),
+  defaultConfig,
+);
+
+module.exports = config;

package/CHANGELOG.md

@@ -4,11 +4,28 @@ 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).
 
-### [7.2.0](https://github.com/eea/volto-tableau/compare/7.1.0...7.2.0) - 17 January 2024
+### [8.0.0](https://github.com/eea/volto-tableau/compare/7.2.1...8.0.0) - 22 April 2024
 
 #### :rocket: New Features
 
-- feat: show embed error + always show sources [Razvan - [`c1df7a2`](https://github.com/eea/volto-tableau/commit/c1df7a221c427705e29bcd45d621666973e12edb)]
+- feat: Release 8.0.0 - Volto 17 support [alin - [`c471a7a`](https://github.com/eea/volto-tableau/commit/c471a7abcfcc8f39c3d16823c097c041598acc76)]
+- feat: Volto 17 support - refs #264527 [EEA Jenkins - [`f0ffca3`](https://github.com/eea/volto-tableau/commit/f0ffca315f668a57214d742429d116abe9b3ea23)]
+
+#### :house: Internal changes
+
+- chore: package.json [Alin Voinea - [`2feda54`](https://github.com/eea/volto-tableau/commit/2feda54b9f653b90d0995412f6e8d8db9041fcc9)]
+
+#### :hammer_and_wrench: Others
+
+- test: use latest volto 16 in Jenkinsfile [valentinab25 - [`eba82ac`](https://github.com/eea/volto-tableau/commit/eba82acca9cacb0e17670d989ae2ec13b103899a)]
+### [7.2.1](https://github.com/eea/volto-tableau/compare/7.2.0...7.2.1) - 31 January 2024
+
+#### :hammer_and_wrench: Others
+
+- fix tests [Razvan - [`e370ea4`](https://github.com/eea/volto-tableau/commit/e370ea49343f52b1a07dbe402ce48c9ef53b6a7b)]
+- fix eslint [Razvan - [`82f9311`](https://github.com/eea/volto-tableau/commit/82f9311fadd7c269321c23d4a3e029c2d5a133c6)]
+- test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`6a19c5c`](https://github.com/eea/volto-tableau/commit/6a19c5ceaf229d944f3f15ee32a833ae37619d74)]
+### [7.2.0](https://github.com/eea/volto-tableau/compare/7.1.0...7.2.0) - 17 January 2024
 
 #### :bug: Bug Fixes
 

package/Jenkinsfile

@@ -13,7 +13,8 @@ pipeline {
     DEPENDENCIES = ""
     BACKEND_PROFILES = "eea.kitkat:testing"
     BACKEND_ADDONS = ""
-    VOLTO = "16.24.0"
+    VOLTO = "17"
+    VOLTO16_BREAKING_CHANGES = "no"
     IMAGE_NAME = BUILD_TAG.toLowerCase()
   }
 
@@ -44,6 +45,7 @@ pipeline {
       }
       steps {
         script {
+            checkout scm
             withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN')]) {
               check_result = sh script: '''docker run --pull always -i --rm --name="$IMAGE_NAME-gitflow-check" -e GIT_TOKEN="$GITHUB_TOKEN" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_ORG="$GIT_ORG" -e GIT_NAME="$GIT_NAME" eeacms/gitflow /check_if_testing_needed.sh''', returnStatus: true
 
@@ -61,7 +63,6 @@ pipeline {
           allOf {
             not { environment name: 'CHANGE_ID', value: '' }
             environment name: 'CHANGE_TARGET', value: 'develop'
-            environment name: 'SKIP_TESTS', value: ''
           }
           allOf {
             environment name: 'CHANGE_ID', value: ''
@@ -69,25 +70,27 @@ pipeline {
               not { changelog '.*^Automated release [0-9\\.]+$' }
               branch 'master'
             }
-            environment name: 'SKIP_TESTS', value: ''
           }
         }
       }
-      stages {
-        stage('Build test image') {
-          steps {
-            checkout scm
-            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'''
+      parallel {
+
+      stage('Volto 17') {
+        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'''
+            }
           }
-        }
-        
-        stage('Fix code') {
-          when {
+
+          stage('Fix code') {
+            when {
               environment name: 'CHANGE_ID', value: ''
               not { branch 'master' }
-          }
-          steps {
-            script {
+            }
+            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'''
@@ -105,31 +108,31 @@ pipeline {
                 sh '''exit 1'''
               }
             }
+            }
           }
-        }
 
-        stage('ES lint') {
-          steps {
-            sh '''docker run --rm --name="$IMAGE_NAME-eslint" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend lint'''
+          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'''
+            }
           }
-        }
 
-        stage('Style lint') {
-          steps {
-            sh '''docker run --rm --name="$IMAGE_NAME-stylelint" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME  $IMAGE_NAME-frontend stylelint'''
+          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'''
+            }
           }
-        }
 
-        stage('Prettier') {
-          steps {
-            sh '''docker run --rm --name="$IMAGE_NAME-prettier" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME  $IMAGE_NAME-frontend prettier'''
+          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'''
+            }
           }
-        }
-
-        stage('Coverage Tests') {
-          parallel {
-            
-            stage('Unit tests') {
+          stage('Unit tests') {
+              when { environment name: 'SKIP_TESTS', value: '' }
               steps {
                 script {
                   try {
@@ -155,17 +158,24 @@ pipeline {
                   }
                 }
               }
-            }
+          }
             
-            stage('Integration tests') {
+          stage('Integration tests') {
+              when { environment name: 'SKIP_TESTS', value: '' }
               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=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 '''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
+                    if ( frontend != 0 ) {
+                      sh '''docker logs $IMAGE_NAME-cypress; exit 1'''
+                    }
+
                     sh '''timeout -s 9 1800 docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress 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
@@ -189,6 +199,7 @@ pipeline {
                         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
                       }
+                      }
                     } finally {
                       catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
                         junit testResults: 'cypress-results/**/*.xml', allowEmptyResults: true
@@ -204,16 +215,7 @@ pipeline {
                   }
                 }
               }
-            }
           }
-        }
-      }
-      post {
-        always {
-            sh script: "docker rmi $IMAGE_NAME-frontend", returnStatus: true
-        }
-      }
-    }
 
     stage('Report to SonarQube') {
       when {
@@ -221,9 +223,11 @@ pipeline {
           allOf {
             not { environment name: 'CHANGE_ID', value: '' }
             environment name: 'CHANGE_TARGET', value: 'develop'
+            environment name: 'SKIP_TESTS', value: ''
           }
           allOf {
             environment name: 'CHANGE_ID', value: ''
+            environment name: 'SKIP_TESTS', value: ''
             anyOf {
               allOf {
                 branch 'develop'
@@ -248,33 +252,126 @@ pipeline {
       }
     }
 
-    // stage('SonarQube compare to master') {
-    //   when {
-    //     anyOf {
-    //       allOf {
-    //         not { environment name: 'CHANGE_ID', value: '' }
-    //         environment name: 'CHANGE_TARGET', value: 'develop'
-    //       }
-    //       allOf {
-    //         environment name: 'CHANGE_ID', value: ''
-    //         branch 'develop'
-    //         not { changelog '.*^Automated release [0-9\\.]+$' }
-    //       }
-    //     }
-    //   }
-    //   steps {
-    //     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'''
-    //       }
 
-    //       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('Volto 16') { 
+        agent { node { label 'integration'} }
+        when { 
+          environment name: 'SKIP_TESTS', value: ''
+          not { environment name: 'VOLTO16_BREAKING_CHANGES', value: 'yes' }
+        }
+        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'''
+            }
+          }
+
+             stage('Unit tests Volto 16') {
+              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/'''
+                } finally {
+                    catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                        junit testResults: 'xunit-reports16/junit.xml', allowEmptyResults: true
+                    }
+                    sh script: '''docker rm -v $IMAGE_NAME-volto16''', returnStatus: true
+                  }
+                }
+              }
+            }
+
+           stage('Integration tests Volto 16') {
+              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
+                    if ( frontend != 0 ) {
+                      sh '''docker logs $IMAGE_NAME-cypress16; exit 1'''
+                    }
+                    sh '''timeout -s 9 1800 docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress16 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
+
+                      archiveArtifacts artifacts: 'cypress-screenshots16/**', 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
+                      }
+                      }
+                    } finally {
+                      catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                        junit testResults: 'cypress-results16/**/*.xml', allowEmptyResults: true
+                      }
+                      catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                        sh '''docker logs $IMAGE_NAME-cypress16'''
+                      }
+                      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
+                    }
+                  }
+                }
+              }
+            }
+
+        }
+      }
+      }
+      post {
+        always {
+            sh script: "docker rmi $IMAGE_NAME-frontend", returnStatus: true
+            sh script: "docker rmi $IMAGE_NAME-frontend16", returnStatus: true
+        }
+      }
+    }
+
+
+    stage('SonarQube compare to master') {
+      when {
+        anyOf {
+          allOf {
+            not { environment name: 'CHANGE_ID', value: '' }
+            environment name: 'CHANGE_TARGET', value: 'develop'
+            environment name: 'SKIP_TESTS', value: '' 
+          }
+          allOf {
+            environment name: 'SKIP_TESTS', value: '' 
+            environment name: 'CHANGE_ID', value: ''
+            branch 'develop'
+            not { changelog '.*^Automated release [0-9\\.]+$' }
+          }
+        }
+      }
+      steps {
+        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'''
+          }
+
+          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 {
@@ -316,3 +413,4 @@ pipeline {
     }
   }
 }
+

package/Makefile

@@ -46,7 +46,7 @@ endif
 DIR=$(shell basename $$(pwd))
 NODE_MODULES?="../../../node_modules"
 PLONE_VERSION?=6
-VOLTO_VERSION?=16
+VOLTO_VERSION?=17
 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
@@ -86,7 +86,7 @@ cypress-open:		## Open cypress integration tests
 
 .PHONY: cypress-run
 cypress-run:	## Run cypress integration tests
-	CYPRESS_API_PATH="${RAZZLE_DEV_PROXY_API_PATH}" NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run --browser chromium
+	CYPRESS_API_PATH="${RAZZLE_DEV_PROXY_API_PATH}" NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run
 
 .PHONY: test
 test:			## Run jest tests
@@ -98,7 +98,7 @@ test-update:	## Update jest tests snapshots
 
 .PHONY: stylelint
 stylelint:		## Stylelint
-	$(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'
+	$(NODE_MODULES)/.bin/stylelint --allow-empty-input 'src/**/*.{css,less}'
 
 .PHONY: stylelint-overrides
 stylelint-overrides:
@@ -106,7 +106,7 @@ stylelint-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 --allow-empty-input 'src/**/*.{css,less}' --fix
 	$(NODE_MODULES)/.bin/stylelint --custom-syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides' --fix
 
 .PHONY: prettier
@@ -119,11 +119,11 @@ prettier-fix:	## Fix prettier
 
 .PHONY: lint
 lint:			## ES Lint
-	$(NODE_MODULES)/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'
+	$(NODE_MODULES)/.bin/eslint --max-warnings=0 'src/**/*.{js,jsx}'
 
 .PHONY: lint-fix
 lint-fix:		## Fix ES Lint
-	$(NODE_MODULES)/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'
+	$(NODE_MODULES)/.bin/eslint --fix 'src/**/*.{js,jsx}'
 
 .PHONY: i18n
 i18n:			## i18n
@@ -155,8 +155,11 @@ start-ci:
 	cd ../..
 	yarn start
 
+.PHONY: check-ci
+check-ci:
+	$(NODE_MODULES)/.bin/wait-on -t 240000  http://localhost:3000
+
 .PHONY: cypress-ci
 cypress-ci:
 	$(NODE_MODULES)/.bin/wait-on -t 240000  http://localhost:3000
-	NODE_ENV=development make cypress-run
-
+	CYPRESS_API_PATH="${RAZZLE_DEV_PROXY_API_PATH}" NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run --browser chromium

package/cypress/support/e2e.js

@@ -35,10 +35,6 @@ export const slateBeforeEach = (contentType = 'Document') => {
     path: 'cypress',
   });
   cy.visit('/cypress/my-page');
-  // cy.waitForResourceToLoad('@navigation');
-  // cy.waitForResourceToLoad('@breadcrumbs');
-  // cy.waitForResourceToLoad('@actions');
-  // cy.waitForResourceToLoad('@types');
   cy.waitForResourceToLoad('my-page');
   cy.navigate('/cypress/my-page/edit');
 };

package/jest-addon.config.js

@@ -1,3 +1,5 @@
+require('dotenv').config({ path: __dirname + '/.env' })
+
 module.exports = {
   testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
   collectCoverageFrom: [
@@ -12,7 +14,11 @@ module.exports = {
     '@package/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@root/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@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/(.*?)/(.*)$': '<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',
     '~/(.*)$': '<rootDir>/src/$1',
@@ -24,6 +30,7 @@ module.exports = {
   ],
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
+    '^.+\\.ts(x)?$': 'babel-jest',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',
@@ -36,7 +43,9 @@ module.exports = {
       statements: 5,
     },
   },
-  setupFilesAfterEnv: [
-    '<rootDir>/node_modules/@eeacms/volto-tableau/jest.setup.js',
-  ],
-};
+  ...(process.env.JEST_USE_SETUP === 'ON' && {
+    setupFilesAfterEnv: [
+      '<rootDir>/node_modules/@eeacms/volto-tableau/jest.setup.js',
+    ],
+  }),
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tableau",
-  "version": "7.2.0",
+  "version": "8.0.0",
   "description": "@eeacms/volto-tableau: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -30,6 +30,7 @@
     "@cypress/code-coverage": "^3.9.5",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "dotenv": "^16.3.2",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "md5": "^2.3.0"

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
+import '@testing-library/jest-dom/extend-expect';
 
 import Edit from './Edit';
 import installEmbedTableau from '.';
@@ -22,7 +23,7 @@ describe('Edit', () => {
   };
 
   it('should render the component', () => {
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={global.store}>
         <Edit
           id="my-tableau"
@@ -42,7 +43,72 @@ describe('Edit', () => {
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container.querySelector('.embed-tableau')).toBeInTheDocument();
+    expect(
+      container.querySelector('.privacy-protection-wrapper'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.privacy-protection-wrapper')).toHaveStyle({
+      height: 'auto',
+      minHeight: '200px',
+      overflow: 'hidden',
+      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();
   });
 });

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
+import '@testing-library/jest-dom/extend-expect';
+
 import View from './View';
 
 describe('View', () => {
@@ -17,12 +19,22 @@ describe('View', () => {
   };
 
   it('should render the component', () => {
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={global.store}>
         <View data={data} useVisibilitySensor={false} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container.querySelector('.embed-tableau')).toBeInTheDocument();
+    expect(
+      container.querySelector('.privacy-protection-wrapper'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.privacy-protection-wrapper')).toHaveStyle({
+      height: 'auto',
+      minHeight: '200px',
+      overflow: 'hidden',
+      position: 'relative',
+    });
+    expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();
   });
 });

package/src/Blocks/EmbedTableauVisualization/index.js

@@ -3,7 +3,7 @@ import EmbedTableauVisualizatonView from './View';
 
 import sliderSVG from '@plone/volto/icons/slider.svg';
 
-export default (config) => {
+const config = (config) => {
   config.blocks.blocksConfig.embed_tableau_visualization = {
     id: 'embed_tableau_visualization',
     title: 'Embed Dashboard (Tableau)',
@@ -28,3 +28,5 @@ export default (config) => {
 
   return config;
 };
+
+export default config;

package/src/Blocks/EmbedTableauVisualization/schema.js

@@ -69,7 +69,7 @@ const staticParameters = {
   required: [],
 };
 
-export default (props) => {
+const schema = (props) => {
   return {
     title: 'Embed Dashboard (Tableau)',
     fieldsets: [
@@ -155,7 +155,7 @@ export default (props) => {
       tableau_height: {
         title: (
           <a
-            rel="noreferrer"
+            rel="noopener noreferrer"
             target="_blank"
             href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
           >
@@ -181,3 +181,5 @@ export default (props) => {
     required: ['tableau_vis_url'],
   };
 };
+
+export default schema;

package/src/Blocks/TableauBlock/Edit.jsx

@@ -13,9 +13,10 @@ const Edit = (props) => {
     error: null,
   });
 
-  const schema = React.useMemo(() => getSchema(config, viz.current, vizState), [
-    vizState,
-  ]);
+  const schema = React.useMemo(
+    () => getSchema(config, viz.current, vizState),
+    [vizState],
+  );
 
   return (
     <>

package/src/Blocks/TableauBlock/index.js

@@ -3,7 +3,7 @@ import TableauView from './View';
 
 import sliderSVG from '@plone/volto/icons/slider.svg';
 
-export default (config) => {
+const config = (config) => {
   config.blocks.blocksConfig.tableau_block = {
     id: 'tableau_block',
     title: 'Tableau',
@@ -28,3 +28,5 @@ export default (config) => {
 
   return config;
 };
+
+export default config;

package/src/Blocks/TableauBlock/schema.js

@@ -84,7 +84,7 @@ const sourceSchema = {
   required: [],
 };
 
-export default (config, viz, vizState) => {
+const schema = (config, viz, vizState) => {
   const isDisabled = !canChangeVizData(viz, vizState);
 
   return {
@@ -227,3 +227,5 @@ export default (config, viz, vizState) => {
     required: ['url'],
   };
 };
+
+export default schema;

package/src/Blocks/index.js

@@ -2,7 +2,7 @@ import { uniqBy } from 'lodash';
 import installEmbedTableauVisualization from './EmbedTableauVisualization';
 import installTableauBlock from './TableauBlock';
 
-export default (config) => {
+const config = (config) => {
   config.blocks.groupBlocksOrder = uniqBy(
     [
       ...config.blocks.groupBlocksOrder,
@@ -16,3 +16,5 @@ export default (config) => {
     config,
   );
 };
+
+export default config;

package/src/Tableau/helpers.js

@@ -28,8 +28,8 @@ export function getQuery({
 export function getTableauVisualization({
   isBlock,
   data,
-  tableauContent,
-  content,
+  tableauContent = {},
+  content = {},
 }) {
   const mergedContent =
     (isBlock
@@ -37,12 +37,12 @@ export function getTableauVisualization({
       : {
           ...content,
           tableau_visualization: {
-            ...(content?.tableau_visualization || {}),
+            ...(content.tableau_visualization || {}),
             ...pickMetadata(content),
           },
         }) || {};
   const tableau_visualization =
-    mergedContent?.tableau_visualization || data?.tableau_visualization || {};
+    mergedContent.tableau_visualization || data?.tableau_visualization || {};
   return {
     ...tableau_visualization,
     ...(isBlock ? pickMetadata(mergedContent) : {}),

package/src/Widgets/VisualizationWidget.jsx

@@ -19,6 +19,7 @@ import '@eeacms/volto-tableau/less/tableau.less';
 
 const VisualizationWidget = (props) => {
   const { location, content } = props;
+  const ogValue = props.value || {};
   const viz = React.useRef();
   const [schema, setSchema] = React.useState(null);
   const [vizState, setVizState] = React.useState({
@@ -27,7 +28,7 @@ const VisualizationWidget = (props) => {
     error: null,
   });
   const [open, setOpen] = React.useState(false);
-  const [value, setValue] = React.useState(props.value);
+  const [value, setValue] = React.useState(ogValue);
 
   const [tableauVisualization, setTableauVisualization] = useState(() =>
     getTableauVisualization({
@@ -57,13 +58,13 @@ const VisualizationWidget = (props) => {
   };
 
   const handleClose = () => {
-    setValue(props.value);
+    setValue(ogValue);
     setOpen(false);
   };
 
   React.useEffect(() => {
-    if (!open && !isEqual(props.value, value)) {
-      setValue(props.value);
+    if (!open && !isEqual(props.value || {}, value)) {
+      setValue(props.value || {});
     }
   }, [props.value, value, open]);
 

package/src/Widgets/schema.js

@@ -168,7 +168,7 @@ const breakpointUrlSchema = (config) => {
   };
 };
 
-export default async ({ config, viz, vizState, data }) => {
+const schema = async ({ config, viz, vizState, data }) => {
   const isDisabled = !canChangeVizData(viz, vizState);
 
   return {
@@ -428,3 +428,5 @@ export default async ({ config, viz, vizState, data }) => {
     required: ['url'],
   };
 };
+
+export default schema;

package/src/less/tableau.less

@@ -43,8 +43,8 @@
     iframe {
       padding: @tableauIframePadding;
       border: @tableauIframeBorder;
-      margin: @tableauIframeMargin;
       border-radius: @tableauIframeBorderRadius;
+      margin: @tableauIframeMargin;
       transform-origin: top left;
     }
   }
@@ -56,6 +56,7 @@
     height: auto;
     align-items: center;
     justify-content: center;
+    border-radius: 5px;
     margin: 0 auto 1rem auto;
     animation: spin 1s linear infinite;
     background-image: linear-gradient(
@@ -68,7 +69,6 @@
       @grey-2 75%
     );
     background-size: 100px 100px;
-    border-radius: 5px;
 
     span {
       margin: 6px auto;

package/.project.eslintrc.js

@@ -1,47 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const projectRootPath = fs.existsSync('./project')
-  ? fs.realpathSync('./project')
-  : fs.realpathSync('./../../../');
-const packageJson = require(path.join(projectRootPath, 'package.json'));
-const jsConfig = require(path.join(projectRootPath, 'jsconfig.json'))
-  .compilerOptions;
-
-const pathsConfig = jsConfig.paths;
-
-let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
-
-Object.keys(pathsConfig).forEach((pkg) => {
-  if (pkg === '@plone/volto') {
-    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
-  }
-});
-const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
-const reg = new AddonConfigurationRegistry(projectRootPath);
-
-// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map((o) => [
-  o,
-  reg.packages[o].modulePath,
-]);
-
-module.exports = {
-  extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
-  settings: {
-    'import/resolver': {
-      alias: {
-        map: [
-          ['@plone/volto', '@plone/volto/src'],
-          ...addonAliases,
-          ['@package', `${__dirname}/src`],
-          ['~', `${__dirname}/src`],
-        ],
-        extensions: ['.js', '.jsx', '.json'],
-      },
-      'babel-plugin-root-import': {
-        rootPathSuffix: 'src',
-      },
-    },
-  },
-};

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

@@ -1,336 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Edit should render the component 1`] = `
-Array [
-  <div
-    className="embed-tableau"
-  >
-    <div
-      className="privacy-protection-wrapper"
-      style={
-        Object {
-          "height": "auto",
-          "minHeight": "200px",
-          "overflow": "hidden",
-          "position": "relative",
-        }
-      }
-    >
-      <div
-        className="tableau-wrapper"
-      >
-        <div
-          className="tableau tableau-2.8.0"
-          style={
-            Object {
-              "height": "700px",
-            }
-          }
-        />
-      </div>
-    </div>
-  </div>,
-  <div
-    id="sidebar"
-  >
-    <div
-      className="ui form"
-    >
-      <header
-        className="header pulled"
-      >
-        <h2>
-          Embed Dashboard (Tableau)
-        </h2>
-      </header>
-      <div
-        id="blockform-fieldset-default"
-      >
-        <div
-          className="ui segment form attached"
-        >
-          <div
-            className="mocked-default-widget"
-            id="mocked-field-tableau_vis_url"
-          >
-            Tableau visualization
-             - 
-            <div>
-              <p>
-                When using context query parameters please use the corresponding field name from the Tableau service.
-              </p>
-              <p>
-                NOTE: The embeded tableau dashboard must have the parameters defined in the
-                 
-                <span
-                  style={
-                    Object {
-                      "color": "rgb(15, 130, 204)",
-                    }
-                  }
-                >
-                  'Dynamic parameters'
-                </span>
-                 
-                list so that the context query parameters can take effect.
-              </p>
-            </div>
-          </div>
-          <div
-            className="mocked-default-widget"
-            id="mocked-field-tableau_height"
-          >
-            <a
-              href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
-              rel="noreferrer"
-              target="_blank"
-            >
-              CSS height
-            </a>
-             - 
-            Tableau height
-          </div>
-        </div>
-      </div>
-      <div
-        className="accordion ui fluid styled form"
-      >
-        <div
-          id="blockform-fieldset-toolbar"
-        >
-          <div
-            className="active title"
-            onClick={[Function]}
-          >
-            Toolbar
-            <svg
-              className="icon"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": undefined,
-                }
-              }
-              onClick={null}
-              style={
-                Object {
-                  "fill": "currentColor",
-                  "height": "20px",
-                  "width": "auto",
-                }
-              }
-              viewBox=""
-              xmlns=""
-            />
-          </div>
-          <div
-            className="content active"
-          >
-            <div
-              aria-hidden={false}
-              className="rah-static rah-static--height-auto"
-              style={
-                Object {
-                  "height": "auto",
-                  "overflow": "visible",
-                }
-              }
-            >
-              <div
-                style={
-                  Object {
-                    "WebkitTransition": "opacity 500ms ease 0ms",
-                    "transition": "opacity 500ms ease 0ms",
-                  }
-                }
-              >
-                <div
-                  className="ui segment attached"
-                >
-                  <div
-                    className="mocked-boolean-widget"
-                    id="mocked-field-with_notes"
-                  >
-                    Show note
-                     - 
-                    No description
-                  </div>
-                  <div
-                    className="mocked-boolean-widget"
-                    id="mocked-field-with_more_info"
-                  >
-                    Show more info
-                     - 
-                    No description
-                  </div>
-                  <div
-                    className="mocked-boolean-widget"
-                    id="mocked-field-with_download"
-                  >
-                    Show download button
-                     - 
-                    No description
-                  </div>
-                  <div
-                    className="mocked-boolean-widget"
-                    id="mocked-field-with_share"
-                  >
-                    Show share button
-                     - 
-                    No description
-                  </div>
-                  <div
-                    className="mocked-boolean-widget"
-                    id="mocked-field-with_enlarge"
-                  >
-                    Show enlarge button
-                     - 
-                    No description
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="accordion ui fluid styled form"
-      >
-        <div
-          id="blockform-fieldset-options"
-        >
-          <div
-            className="title"
-            onClick={[Function]}
-          >
-            Parameters
-            <svg
-              className="icon"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": undefined,
-                }
-              }
-              onClick={null}
-              style={
-                Object {
-                  "fill": "currentColor",
-                  "height": "20px",
-                  "width": "auto",
-                }
-              }
-              viewBox=""
-              xmlns=""
-            />
-          </div>
-          <div
-            className="content"
-          >
-            <div
-              aria-hidden={true}
-              className="rah-static rah-static--height-zero"
-              style={
-                Object {
-                  "height": 0,
-                  "overflow": "hidden",
-                }
-              }
-            >
-              <div
-                style={
-                  Object {
-                    "WebkitTransition": "opacity 500ms ease 0ms",
-                    "opacity": 0,
-                    "transition": "opacity 500ms ease 0ms",
-                  }
-                }
-              >
-                <div
-                  className="ui segment attached"
-                >
-                  <div
-                    className="mocked-default-widget"
-                    id="mocked-field-staticParameters"
-                  >
-                    Static parameters
-                     - 
-                    Set a list of static parameters.
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="accordion ui fluid styled form"
-      >
-        <div
-          id="blockform-fieldset-privacy"
-        >
-          <div
-            className="title"
-            onClick={[Function]}
-          >
-            Privacy
-            <svg
-              className="icon"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": undefined,
-                }
-              }
-              onClick={null}
-              style={
-                Object {
-                  "fill": "currentColor",
-                  "height": "20px",
-                  "width": "auto",
-                }
-              }
-              viewBox=""
-              xmlns=""
-            />
-          </div>
-          <div
-            className="content"
-          >
-            <div
-              aria-hidden={true}
-              className="rah-static rah-static--height-zero"
-              style={
-                Object {
-                  "height": 0,
-                  "overflow": "hidden",
-                }
-              }
-            >
-              <div
-                style={
-                  Object {
-                    "WebkitTransition": "opacity 500ms ease 0ms",
-                    "opacity": 0,
-                    "transition": "opacity 500ms ease 0ms",
-                  }
-                }
-              >
-                <div
-                  className="ui segment attached"
-                >
-                  <div
-                    className="mocked-default-widget"
-                    id="mocked-field-dataprotection"
-                  >
-                    No title
-                     - 
-                    No description
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-]
-`;

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

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`View should render the component 1`] = `
-<div
-  className="embed-tableau"
->
-  <div
-    className="privacy-protection-wrapper"
-    style={
-      Object {
-        "height": "auto",
-        "minHeight": "200px",
-        "overflow": "hidden",
-        "position": "relative",
-      }
-    }
-  >
-    <div
-      className="tableau-wrapper"
-    >
-      <div
-        className="tableau tableau-2.8.0"
-        style={
-          Object {
-            "height": "700px",
-          }
-        }
-      />
-    </div>
-  </div>
-</div>
-`;