@eeacms/volto-slate-footnote 6.1.8 → 6.2.1

package/CHANGELOG.md

@@ -4,7 +4,35 @@ 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).
 
-### [6.1.8](https://github.com/eea/volto-slate-footnote/compare/6.1.7...6.1.8) - 19 October 2023
+### [6.2.1](https://github.com/eea/volto-slate-footnote/compare/6.2.0...6.2.1) - 18 January 2024
+
+#### :bug: Bug Fixes
+
+- fix: check if element exists when rendering extensions - refs #263143 [ana-oprea - [`9677db5`](https://github.com/eea/volto-slate-footnote/commit/9677db52435ab710e8a4d54720583eda0db7bd69)]
+
+### [6.2.0](https://github.com/eea/volto-slate-footnote/compare/6.1.8...6.2.0) - 17 January 2024
+
+#### :rocket: New Features
+
+- feat: Allow footnotes work on complex blocks such as statistics, accordion, tabs, where nested data is present - refs #261770 [dobri1408 - [`66363d3`](https://github.com/eea/volto-slate-footnote/commit/66363d3d64cde426c99f0e9f0ecad59816a80552)]
+- feat(popup): is now accessible by keyboard tabbing [David Ichim - [`3649da0`](https://github.com/eea/volto-slate-footnote/commit/3649da0d381ae8a76b77c8a34a6217a72a0c3709)]
+
+#### :bug: Bug Fixes
+
+- fix: footnote error in statistic block - refs #261770 [dobri1408 - [`3cf696c`](https://github.com/eea/volto-slate-footnote/commit/3cf696c44dbb84fc54935acf3d5951ac2c198d88)]
+
+#### :house: Internal changes
+
+- chore: [JENKINS] Refactor automated testing [valentinab25 - [`5a5e1ad`](https://github.com/eea/volto-slate-footnote/commit/5a5e1adf997af84e93a4015dc66b7299abba0874)]
+
+#### :hammer_and_wrench: Others
+
+- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`af6d78f`](https://github.com/eea/volto-slate-footnote/commit/af6d78f60dd040fe61ebb225f4a689ac21ffb55c)]
+- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`7f4c07f`](https://github.com/eea/volto-slate-footnote/commit/7f4c07f1fc2e9893d1f925152a473855a7e0f064)]
+- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`0670217`](https://github.com/eea/volto-slate-footnote/commit/0670217cca01571e8a3bd64ee3d85bb53ce447be)]
+- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`ec08749`](https://github.com/eea/volto-slate-footnote/commit/ec08749f9547d2c133b2174ab8d60cf2bdb1b23a)]
+- test: [JENKINS] Improve cypress time [valentinab25 - [`237e6a3`](https://github.com/eea/volto-slate-footnote/commit/237e6a331e3608aa35d1c93a03c435daf330c2bd)]
+### [6.1.8](https://github.com/eea/volto-slate-footnote/compare/6.1.7...6.1.8) - 22 October 2023
 
 #### :house: Internal changes
 

package/Dockerfile

@@ -1,6 +1,6 @@
 # syntax=docker/dockerfile:1
 ARG VOLTO_VERSION
-FROM plone/frontend-builder:${VOLTO_VERSION}
+FROM eeacms/frontend-builder:${VOLTO_VERSION}
 
 ARG ADDON_NAME
 ARG ADDON_PATH

package/Jenkinsfile

@@ -1,16 +1,23 @@
 pipeline {
-  agent any
+  tools {
+    jdk 'Java17'
+  }
+  agent {
+    node { label 'docker-host' }
+  }
 
   environment {
-        GIT_NAME = "volto-slate-footnote"
-        NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,water.europa.eu-marine,climate-adapt.eea.europa.eu,climate-advisory-board.devel4cph.eea.europa.eu,climate-advisory-board.europa.eu,www.eea.europa.eu-en"
-        DEPENDENCIES = ""
-        VOLTO = "16"
-    }
+    GIT_NAME = "volto-slate-footnote"
+    NAMESPACE = "@eeacms"
+    SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,water.europa.eu-marine,climate-adapt.eea.europa.eu,climate-advisory-board.devel4cph.eea.europa.eu,climate-advisory-board.europa.eu,www.eea.europa.eu-en"
+    DEPENDENCIES = ""
+    BACKEND_PROFILES = "eea.kitkat:testing"
+    BACKEND_ADDONS = ""
+    VOLTO = "16"
+    IMAGE_NAME = BUILD_TAG.toLowerCase()
+  }
 
   stages {
-
     stage('Release') {
       when {
         allOf {
@@ -20,52 +27,41 @@ pipeline {
       }
       steps {
         node(label: 'docker') {
-          withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN'),string(credentialsId: 'eea-jenkins-npm-token', variable: 'NPM_TOKEN')]) {
-            sh '''docker pull eeacms/gitflow'''
-            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-master" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" -e GIT_TOKEN="$GITHUB_TOKEN" -e NPM_TOKEN="$NPM_TOKEN" -e LANGUAGE=javascript eeacms/gitflow'''
+          withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN'), string(credentialsId: 'eea-jenkins-npm-token', variable: 'NPM_TOKEN')]) {
+            sh '''docker run -i --rm --pull always --name="$IMAGE_NAME-gitflow-master" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" -e GIT_TOKEN="$GITHUB_TOKEN" -e NPM_TOKEN="$NPM_TOKEN" -e LANGUAGE=javascript eeacms/gitflow'''
           }
         }
       }
     }
 
-    stage('Code') {
+    stage('Check if testing needed') {
       when {
         allOf {
-          environment name: 'CHANGE_ID', value: ''
-          not { changelog '.*^Automated release [0-9\\.]+$' }
           not { branch 'master' }
+          not { branch 'develop' }
+          environment name: 'CHANGE_ID', value: ''
         }
       }
       steps {
-        parallel(
-
-          "ES lint": {
-            node(label: 'docker') {
-              sh '''docker run -i --rm --name="$BUILD_TAG-eslint" -e NAMESPACE="$NAMESPACE" -e VOLTO=$VOLTO -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e VOLTO=$VOLTO plone/volto-addon-ci eslint'''
-            }
-          },
-
-          "Style lint": {
-            node(label: 'docker') {
-              sh '''docker run -i --rm --name="$BUILD_TAG-stylelint" -e NAMESPACE="$NAMESPACE" -e VOLTO=$VOLTO -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e VOLTO=$VOLTO plone/volto-addon-ci stylelint'''
-            }
-          },
+        script {
+            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
 
-          "Prettier": {
-            node(label: 'docker') {
-              sh '''docker run -i --rm --name="$BUILD_TAG-prettier" -e VOLTO=$VOLTO -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e VOLTO=$VOLTO plone/volto-addon-ci prettier'''
+              if (check_result == 0) {
+                env.SKIP_TESTS = 'yes'
+              }
             }
-          }
-        )
+        }
       }
     }
 
-    stage('Tests') {
+    stage('Testing') {
       when {
         anyOf {
           allOf {
             not { environment name: 'CHANGE_ID', value: '' }
             environment name: 'CHANGE_TARGET', value: 'develop'
+            environment name: 'SKIP_TESTS', value: ''
           }
           allOf {
             environment name: 'CHANGE_ID', value: ''
@@ -73,26 +69,76 @@ pipeline {
               not { changelog '.*^Automated release [0-9\\.]+$' }
               branch 'master'
             }
+            environment name: 'SKIP_TESTS', value: ''
           }
         }
       }
-      steps {
-        parallel(
+      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'''
+          }
+        }
+        
+        stage('Fix code') {
+          when {
+              environment name: 'CHANGE_ID', value: ''
+              not { branch 'master' }
+          }
+          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'''
+              FOUND_FIX = sh(script: '''git diff | wc -l''', returnStdout: true).trim()
 
-          "Volto": {
-            node(label: 'docker') {
-              script {
-                try {
-                  sh '''docker pull plone/volto-addon-ci'''
-                  sh '''docker run -i --name="$BUILD_TAG-volto" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e VOLTO=$VOLTO plone/volto-addon-ci'''
-                  sh '''rm -rf xunit-reports'''
-                  sh '''mkdir -p xunit-reports'''
-                  sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/coverage xunit-reports/'''
-                  sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/junit.xml xunit-reports/'''
-                  sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/unit_tests_log.txt xunit-reports/'''
-                  stash name: "xunit-reports", includes: "xunit-reports/**"
-                  archiveArtifacts artifacts: "xunit-reports/unit_tests_log.txt", fingerprint: true
-                  publishHTML (target : [
+              if (FOUND_FIX != '0') {
+                withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN')]) {
+                  sh '''sed -i "s|url = .*|url = https://eea-jenkins:$GITHUB_TOKEN@github.com/eea/$GIT_NAME.git|" .git/config'''
+                }
+                sh '''git fetch origin $GIT_BRANCH:$GIT_BRANCH'''
+                sh '''git checkout $GIT_BRANCH'''
+                sh '''git add src/'''
+                sh '''git commit -m "style: Automated code fix" '''
+                sh '''git push --set-upstream origin $GIT_BRANCH'''
+                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('Style lint') {
+          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('Coverage Tests') {
+          parallel {
+            
+            stage('Unit tests') {
+              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/'''
+                    publishHTML(target : [
                     allowMissing: false,
                     alwaysLinkToLastBuild: true,
                     keepAll: true,
@@ -105,75 +151,67 @@ pipeline {
                     catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
                         junit testResults: 'xunit-reports/junit.xml', allowEmptyResults: true
                     }
-                   sh script: '''docker rm -v $BUILD_TAG-volto''', returnStatus: true
+                    sh script: '''docker rm -v $IMAGE_NAME-volto''', returnStatus: true
+                  }
                 }
               }
             }
-          }
-        )
-      }
-    }
+            
+            stage('Integration tests') {
+              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 '''timeout -s 9 1800 docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress make cypress-ci'''
+                  } finally {
+                    try {
+                      sh '''rm -rf cypress-videos cypress-results cypress-coverage cypress-screenshots'''
+                      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
 
-    stage('Integration tests') {
-      when {
-        anyOf {
-          allOf {
-            not { environment name: 'CHANGE_ID', value: '' }
-            environment name: 'CHANGE_TARGET', value: 'develop'
-          }
-          allOf {
-            environment name: 'CHANGE_ID', value: ''
-            anyOf {
-              not { changelog '.*^Automated release [0-9\\.]+$' }
-              branch 'master'
-            }
-          }
-        }
-      }
-      steps {
-        parallel(
+                      archiveArtifacts artifacts: 'cypress-screenshots/**', fingerprint: true, allowEmptyArchive: true
 
-          "Cypress": {
-            node(label: 'docker') {
-              script {
-                try {
-                  sh '''docker pull eeacms/plone-backend; docker run --rm -d --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="eea.kitkat:testing" eeacms/plone-backend'''
-                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=development -e VOLTO="$VOLTO" plone/volto-addon-ci cypress'''
-                } finally {
-                  try {
-                    sh '''rm -rf cypress-reports cypress-results cypress-coverage'''
-                    sh '''mkdir -p cypress-reports cypress-results cypress-coverage'''
-                    sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/videos cypress-reports/'''
-                    sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/reports cypress-results/'''
-                    coverage = sh script: '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/coverage cypress-coverage/''', returnStatus: true
-                    if ( coverage == 0 ) {
-                         publishHTML (target : [allowMissing: false,
+                      coverage = sh script: '''docker cp $IMAGE_NAME-cypress:/app/src/addons/$GIT_NAME/coverage cypress-coverage''', returnStatus: true
+
+                      if ( coverage == 0 ) {
+                        publishHTML(target : [allowMissing: false,
                              alwaysLinkToLastBuild: true,
                              keepAll: true,
                              reportDir: 'cypress-coverage/coverage/lcov-report',
                              reportFiles: 'index.html',
                              reportName: 'CypressCoverage',
                              reportTitles: 'Integration Tests Code Coverage'])
-                    }
-                    sh '''touch empty_file; for ok_test in $(grep -E 'file=.*failures="0"' $(grep 'testsuites .*failures="0"' $(find cypress-results -name *.xml) empty_file | awk -F: '{print $1}') empty_file | sed 's/.* file="\\(.*\\)" time.*/\\1/' | sed 's#^cypress/integration/##g' | sed 's#^../../../node_modules/@eeacms/##g'); do rm -f cypress-reports/videos/$ok_test.mp4; rm -f cypress-reports/$ok_test.mp4; done'''
-                    archiveArtifacts artifacts: 'cypress-reports/**/*.mp4', fingerprint: true, allowEmptyArchive: true
-                    stash name: "cypress-coverage", includes: "cypress-coverage/**", allowEmpty: true
-                  }
-                  finally {
-                    catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                      }
+                      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
+                      }
+                    } finally {
+                      catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
                         junit testResults: 'cypress-results/**/*.xml', allowEmptyResults: true
+                      }
+                      catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                        sh '''docker logs $IMAGE_NAME-cypress'''
+                      }
+                      sh script: "docker stop $IMAGE_NAME-cypress", returnStatus: true
+                      sh script: "docker stop $IMAGE_NAME-plone", returnStatus: true
+                      sh script: "docker rm -v $IMAGE_NAME-plone", returnStatus: true
+                      sh script: "docker rm -v $IMAGE_NAME-cypress", returnStatus: true
                     }
-                    sh script: "docker stop $BUILD_TAG-plone", returnStatus: true
-                    sh script: "docker rm -v $BUILD_TAG-plone", returnStatus: true
-                    sh script: "docker rm -v $BUILD_TAG-cypress", returnStatus: true
-
                   }
                 }
               }
             }
           }
-
-        )
+        }
+      }
+      post {
+        always {
+            sh script: "docker rmi $IMAGE_NAME-frontend", returnStatus: true
+        }
       }
     }
 
@@ -197,19 +235,14 @@ pipeline {
         }
       }
       steps {
-        node(label: 'swarm') {
-          script{
-            checkout scm
-            unstash "xunit-reports"
-            unstash "cypress-coverage"
-            def scannerHome = tool 'SonarQubeScanner';
-            def nodeJS = tool 'NodeJS';
-            withSonarQubeEnv('Sonarqube') {
-              sh '''sed -i "s#/opt/frontend/my-volto-project/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=2; 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 60; try=\$(( \$try - 1 )); fi; done'''
-            }
+        script {
+          def scannerHome = tool 'SonarQubeScanner'
+          def nodeJS = tool 'NodeJS'
+          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'''
           }
         }
       }
@@ -230,18 +263,15 @@ pipeline {
         }
       }
       steps {
-        node(label: 'docker') {
-          script {
-            sh '''docker pull eeacms/gitflow'''
-            sh '''echo "Error" > checkresult.txt'''
-            catchError(buildResult: 'FAILURE', stageResult: 'FAILURE') {
-               sh '''set -o pipefail; docker run -i --rm --name="$BUILD_TAG-gitflow-sn" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" eeacms/gitflow /checkSonarqubemaster.sh | grep -v "Found script" | tee checkresult.txt'''
-             }
-
-            publishChecks name: 'SonarQube', title: 'Sonarqube Code Quality Check', summary: "Quality check on the SonarQube metrics from branch develop, comparing it with the ones from master branch. No bugs are allowed",
-                          text: readFile(file: 'checkresult.txt'), conclusion: "${currentBuild.currentResult}",
-                          detailsURL: "${env.BUILD_URL}display/redirect"
+        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"
         }
       }
     }
@@ -254,20 +284,16 @@ pipeline {
         environment name: 'CHANGE_TARGET', value: 'master'
       }
       steps {
-        node(label: 'docker') {
-          script {
-            if ( env.CHANGE_BRANCH != "develop" ) {
-                error "Pipeline aborted due to PR not made from develop branch"
-            }
-           withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN')]) {
-            sh '''docker pull eeacms/gitflow'''
-            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-pr" -e GIT_CHANGE_TARGET="$CHANGE_TARGET" -e GIT_CHANGE_BRANCH="$CHANGE_BRANCH" -e GIT_CHANGE_AUTHOR="$CHANGE_AUTHOR" -e GIT_CHANGE_TITLE="$CHANGE_TITLE" -e GIT_TOKEN="$GITHUB_TOKEN" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e GIT_ORG="$GIT_ORG" -e GIT_NAME="$GIT_NAME" -e LANGUAGE=javascript eeacms/gitflow'''
-           }
+        script {
+          if (env.CHANGE_BRANCH != 'develop') {
+            error 'Pipeline aborted due to PR not made from develop branch'
+          }
+          withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN')]) {
+            sh '''docker run --pull always -i --rm --name="$IMAGE_NAME-gitflow-pr" -e GIT_CHANGE_TARGET="$CHANGE_TARGET" -e GIT_CHANGE_BRANCH="$CHANGE_BRANCH" -e GIT_CHANGE_AUTHOR="$CHANGE_AUTHOR" -e GIT_CHANGE_TITLE="$CHANGE_TITLE" -e GIT_TOKEN="$GITHUB_TOKEN" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e GIT_ORG="$GIT_ORG" -e GIT_NAME="$GIT_NAME" -e LANGUAGE=javascript eeacms/gitflow'''
           }
         }
       }
     }
-
   }
 
   post {

package/Makefile

@@ -50,6 +50,11 @@ VOLTO_VERSION?=16
 ADDON_PATH="${DIR}"
 ADDON_NAME="@eeacms/${ADDON_PATH}"
 DOCKER_COMPOSE=PLONE_VERSION=${PLONE_VERSION} VOLTO_VERSION=${VOLTO_VERSION} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH} docker compose
+RAZZLE_INTERNAL_API_PATH?="http://localhost:8080/Plone"
+RAZZLE_DEV_PROXY_API_PATH?="${RAZZLE_INTERNAL_API_PATH}"
+CYPRESS_API_PATH="${RAZZLE_DEV_PROXY_API_PATH}"
+
+
 
 # Top-level targets
 .PHONY: all
@@ -77,11 +82,11 @@ shell:			## Start a shell in the frontend container
 
 .PHONY: cypress-open
 cypress-open:		## Open cypress integration tests
-	NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress open
+	CYPRESS_API_PATH="${RAZZLE_DEV_PROXY_API_PATH}" NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress open
 
 .PHONY: cypress-run
 cypress-run:	## Run cypress integration tests
-	NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run
+	CYPRESS_API_PATH="${RAZZLE_DEV_PROXY_API_PATH}" NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run --browser chromium
 
 .PHONY: test
 test:			## Run jest tests
@@ -129,3 +134,29 @@ i18n:			## i18n
 help:                   ## Show this help.
 	@echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)"
 	head -n 14 Makefile
+
+.PHONY: ci-fix
+ci-fix:
+	echo "Running lint-fix"
+	make lint-fix
+	echo "Running prettier-fix"
+	make prettier-fix
+	echo "Running stylelint-fix"
+	make stylelint-fix
+
+.PHONY: test-ci
+test-ci:
+	cd /app
+	RAZZLE_JEST_CONFIG=src/addons/${ADDON_PATH}/jest-addon.config.js CI=true yarn test src/addons/${ADDON_PATH}/src --watchAll=false --reporters=default --reporters=jest-junit --collectCoverage --coverageReporters lcov cobertura text
+
+.PHONY: start-ci
+start-ci:
+	cp .coverage.babel.config.js /app/babel.config.js
+	cd ../..
+	yarn start
+
+.PHONY: cypress-ci
+cypress-ci:
+	$(NODE_MODULES)/.bin/wait-on -t 240000  http://localhost:3000
+	NODE_ENV=development make cypress-run
+

package/cypress.config.js

@@ -2,12 +2,12 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   viewportWidth: 1280,
-  defaultCommandTimeout: 5000,
+  defaultCommandTimeout: 8888,
   chromeWebSecurity: false,
   reporter: 'junit',
-  video: true,
+  video: false,
   retries: {
-    runMode: 1,
+    runMode: 2,
     openMode: 0,
   },
   reporterOptions: {

package/package.json

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

package/src/Blocks/Footnote/FootnotesBlockView.jsx

@@ -20,24 +20,70 @@ const alphabet = 'abcdefghijklmnopqrstuvwxyz';
  * received from the Volto form.
  */
 const FootnotesBlockView = (props) => {
-  const { data, properties } = props;
+  const { data, properties, tabData, content } = props;
   const { title, global, placeholder = 'Footnotes' } = data;
+
   const metadata = props.metadata ? props.metadata : properties;
-  const globalMetadata = global ? metadata : properties;
-  const blocks = getAllBlocksAndSlateFields(globalMetadata);
+
+  const localMetadata = content
+    ? content
+    : tabData
+    ? tabData
+    : global
+    ? metadata
+    : properties;
+  const blocks = getAllBlocksAndSlateFields(localMetadata);
   const notesObj = makeFootnoteListOfUniqueItems(blocks);
+  let startList = 1;
+  if (Object.keys(notesObj).length > 0) {
+    const noteId = Object.keys(notesObj)[0];
+    const note = notesObj[noteId];
+    const { zoteroId } = note;
+
+    const notesGlobalResult = makeFootnoteListOfUniqueItems(
+      getAllBlocksAndSlateFields(metadata),
+    );
+
+    const indiceIfZoteroId = note.extra
+      ? [
+          Object.keys(notesGlobalResult).indexOf(zoteroId) + 1, // parent footnote
+          ...note.extra.map(
+            // citations from extra
+            (zoteroObj, _index) =>
+              // all zotero citation are indexed by zoteroId in notesGlobalResult
+
+              Object.keys(notesGlobalResult).indexOf(zoteroObj.zoteroId) + 1,
+          ),
+        ]
+      : // no extra citations (no multiples)
+        Object.keys(notesGlobalResult).indexOf(zoteroId) + 1;
+    const citationIndice = zoteroId // ZOTERO
+      ? indiceIfZoteroId
+      : // FOOTNOTES
+        // parent footnote
+        [note, ...(note.extra || [])].map((footnoteObj, _index) => {
+          return (
+            Object.keys(notesGlobalResult).indexOf(
+              Object.keys(notesGlobalResult).find(
+                (key) =>
+                  notesGlobalResult[key].footnote === footnoteObj.footnote,
+              ),
+            ) + 1
+          );
+        });
+    startList = citationIndice;
+  }
 
   return (
     <div className="footnotes-listing-block">
       <h3 title={placeholder}>{title}</h3>
       {notesObj && (
-        <ol>
+        <ol start={startList}>
           {Object.keys(notesObj).map((noteId) => {
             const note = notesObj[noteId];
             const { uid, footnote, zoteroId, parentUid } = note;
             const { refs } = note;
             const refsList = refs ? Object.keys(refs) : null;
-
             return (
               <li
                 key={`footnote-${zoteroId || uid}`}

package/src/editor/FootnoteEditor.jsx

@@ -41,7 +41,6 @@ const FootnoteEditor = (props) => {
   const metadataBlocks = getAllBlocksAndSlateFields(metadata);
   const storeBlocks = getAllBlocksAndSlateFields(initialFormData);
   const uniqueFootnoteBlocks = [];
-
   const flatAllBlocks = isEmpty(metadata) ? storeBlocks : metadataBlocks;
   /**
    * Will add only the items that are unique by text

package/src/editor/extensions.js

@@ -6,12 +6,11 @@ export const withFootnote = (editor) => {
   const { normalizeNode, isInline } = editor;
 
   editor.isInline = (element) => {
-    return element.type === FOOTNOTE ? true : isInline(element);
+    return element && element.type === FOOTNOTE ? true : isInline(element);
   };
 
   editor.normalizeNode = (entry) => {
     const [node, path] = entry;
-
     if (node.type === FOOTNOTE && !node.data?.uid) {
       Transforms.setNodes(
         editor,

package/src/editor/render.jsx

@@ -24,6 +24,7 @@ export const FootnoteElement = (props) => {
   const { data = {} } = element;
   const { uid, zoteroId } = data;
   const editor = useEditorContext();
+  const ref = React.useRef(null);
 
   const initialFormData = useSelector((state) => state?.content?.data || {});
   const blockProps = editor?.getBlockProps ? editor.getBlockProps() : null;
@@ -36,7 +37,6 @@ export const FootnoteElement = (props) => {
   const notesObjResult = isEmpty(metadata)
     ? makeFootnoteListOfUniqueItems(storeBlocks)
     : makeFootnoteListOfUniqueItems(blocks);
-
   // will cosider zotero citations and footnote
   // notesObjResult contains all zotero/footnote as unique, and contain refs for other zotero/footnote
   const indiceIfZoteroId = data.extra
@@ -58,12 +58,15 @@ export const FootnoteElement = (props) => {
       // parent footnote
       [data, ...(data.extra || [])]
         .map((footnoteObj, _index) => {
+          const indexInNotesObjResult = Object.keys(notesObjResult).indexOf(
+            Object.keys(notesObjResult).find(
+              (key) => notesObjResult[key].footnote === footnoteObj.footnote,
+            ),
+          );
           return `[${
-            Object.keys(notesObjResult).indexOf(
-              Object.keys(notesObjResult).find(
-                (key) => notesObjResult[key].footnote === footnoteObj.footnote,
-              ),
-            ) + 1
+            indexInNotesObjResult === -1
+              ? Object.keys(notesObjResult).length + 1
+              : indexInNotesObjResult + 1
           }]`;
         })
         .join('');
@@ -83,15 +86,20 @@ export const FootnoteElement = (props) => {
   return (
     <>
       {mode === 'view' ? (
-        <span id={`ref-${uid}`} aria-describedby="footnote-label">
+        <span id={`ref-${uid}`} aria-describedby="footnote-label" ref={ref}>
           <Popup
             position="bottom left"
+            pinned={true}
+            mountNode={ref.current}
+            on={['click', 'hover', 'focus']}
             trigger={
               <span
                 id={`cite_ref-${uid}`}
                 {...attributes}
                 className="citation-item"
                 data-footnote-indice={citationIndice}
+                tabIndex={0}
+                role={'presentation'}
               >
                 {children}
               </span>

package/src/editor/utils.js

@@ -10,6 +10,37 @@ import { getAllBlocks } from '@plone/volto-slate/utils';
 export const makeFootnote = (footnote) => {
   return footnote ? footnote.replace('<?xml version="1.0"?>', '') : '';
 };
+/**
+ * retrive all slate children of nested objects
+ * @param {object} path - the keys that we want to extract the slate children from
+ * @param {*} value - the source that we want to extract the slate children from
+ * Exemple of parameters
+ * path:{items:'value'}
+ * @returns string
+ */
+const retriveValuesOfSlateFromNestedPath = (path, value) => {
+  if (Array.isArray(value)) {
+    let allSlateValue = [];
+    value.forEach((element) => {
+      allSlateValue = [
+        ...allSlateValue,
+        ...retriveValuesOfSlateFromNestedPath(path, element),
+      ];
+    });
+    return allSlateValue;
+  }
+  if (typeof path === 'string' && value) {
+    if (value[path]?.length > 0) return [...value[path]];
+    return [];
+  }
+  if (typeof path === 'object' && Object.keys(path).length > 0) {
+    return retriveValuesOfSlateFromNestedPath(
+      path[Object.keys(path)[0]],
+      value[Object.keys(path)[0]],
+    );
+  }
+  return [];
+};
 
 /**
  * Will open accordion if contains footnote reference
@@ -46,6 +77,7 @@ const blockTypesOperations = {
         return [...accumulator, ...propertiesBlocks];
       }, []);
   },
+
   metadata: (block, properties) => {
     const fId = block?.data?.id;
     return block?.data?.widget === 'slate'
@@ -80,6 +112,7 @@ const blockTypesOperations = {
  */
 export const getAllBlocksAndSlateFields = (properties) => {
   const blocks = getAllBlocks(properties, []);
+
   return blocks.reduce((accumulator, currentblock) => {
     return [
       ...accumulator,
@@ -111,45 +144,48 @@ export const makeFootnoteListOfUniqueItems = (blocks) => {
       ] || ['value'];
 
       mapping.forEach((key) => {
-        const value = element[key];
+        const value = retriveValuesOfSlateFromNestedPath(key, element);
+
         if (!value) return;
 
-        value.forEach((item) => {
-          // Node.elements(item) returns an iterable generator of nodes
-          Array.from(Node.elements(item)).forEach(([node]) => {
-            if (footnotes.includes(node.type) && node.data) {
-              // for citations (Zotero items) create refs for same zoteroId
-              if (node.data.zoteroId) {
-                iterateZoteroObj(notesObjResult, node.data);
-                // itereate the extra obj for multiple citations
-                if (node.data.extra) {
-                  node.data.extra.forEach((zoteroObjItem) =>
-                    // send the uid of the parent
-                    // of the word the will have the reference indice
-                    iterateZoteroObj(
-                      notesObjResult,
-                      zoteroObjItem,
-                      node.data.uid,
-                    ),
-                  );
-                }
-                // for footnotes - create refs, on identical text
-              } else {
-                iterateFootnoteObj(notesObjResult, node.data);
-                if (node.data.extra) {
-                  node.data.extra.forEach((footnoteObjItem) =>
-                    // since is called in case of extra, the parent is needed
-                    iterateFootnoteObj(
-                      notesObjResult,
-                      footnoteObjItem,
-                      node.data.uid,
-                    ),
-                  );
+        value
+          .filter((val) => val.children)
+          .forEach((item) => {
+            // Node.elements(item) returns an iterable generator of nodes
+            Array.from(Node.elements(item)).forEach(([node]) => {
+              if (footnotes.includes(node.type) && node.data) {
+                // for citations (Zotero items) create refs for same zoteroId
+                if (node.data.zoteroId) {
+                  iterateZoteroObj(notesObjResult, node.data);
+                  // itereate the extra obj for multiple citations
+                  if (node.data.extra) {
+                    node.data.extra.forEach((zoteroObjItem) =>
+                      // send the uid of the parent
+                      // of the word the will have the reference indice
+                      iterateZoteroObj(
+                        notesObjResult,
+                        zoteroObjItem,
+                        node.data.uid,
+                      ),
+                    );
+                  }
+                  // for footnotes - create refs, on identical text
+                } else {
+                  iterateFootnoteObj(notesObjResult, node.data);
+                  if (node.data.extra) {
+                    node.data.extra.forEach((footnoteObjItem) =>
+                      // since is called in case of extra, the parent is needed
+                      iterateFootnoteObj(
+                        notesObjResult,
+                        footnoteObjItem,
+                        node.data.uid,
+                      ),
+                    );
+                  }
                 }
               }
-            }
+            });
           });
-        });
       });
     });
 
@@ -204,6 +240,7 @@ const iterateFootnoteObj = (notesObjResultTemp, node, parentUid) => {
     return notesObjResultTemp[noteId].footnote === node.footnote;
   });
   // has not yet been added
+
   if (!found) {
     // will use the parentUid instead of own uid for render to be able to reference to the correct element
     //(word containing the footnotes)