feat: volto 17 refs#269816

.eslintrc.js

@@ -31,7 +31,7 @@ module.exports = {
           ['@package', `${__dirname}/src`],
           ['~', `${__dirname}/src`],
         ],
-        extensions: ['.js', '.jsx', '.json'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
       },
       'babel-plugin-root-import': {
         rootPathSuffix: 'src',

.gitignore

@@ -3,6 +3,7 @@ logs
 *.log
 npm-debug.log*
 .DS_Store
+start_local.sh
 
 coverage
 

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16-slim
+FROM node:18-bullseye-slim
 
 COPY . /app/
 WORKDIR /app/
@@ -18,7 +18,7 @@ RUN runDeps="openssl ca-certificates patch gosu git make tmux locales-all" \
 
 USER node
 
-ARG MAX_OLD_SPACE_SIZE=8192
+ARG MAX_OLD_SPACE_SIZE=16384
 ARG RAZZLE_PREFIX_PATH=/freshwater
 ENV RAZZLE_PREFIX_PATH=$RAZZLE_PREFIX_PATH
 ENV NODE_OPTIONS=--max_old_space_size=$MAX_OLD_SPACE_SIZE

Jenkinsfile

@@ -1,58 +1,57 @@
 pipeline {
   environment {
-    registry = "eeacms/freshwater-frontend"
-    template = "templates/volto-freshwater"
     RANCHER_STACKID = ""
     RANCHER_ENVID = ""
+    GIT_NAME = "freshwater-frontend"
+    registry = "eeacms/freshwater-frontend"
+    template = ""
     dockerImage = ""
     tagName = ""
-    GIT_NAME = "freshwater-frontend"
     SONARQUBE_TAG = "water.europa.eu-freshwater"
   }
 
   agent any
 
-
   stages {
 
   stage('Integration tests') {
      parallel {
-      stage('Cypress') {
-        when {
-          allOf {
-            environment name: 'CHANGE_ID', value: ''
-            not { branch 'master' }
-            not { changelog '.*^Automated release [0-9\\.]+$' }
-            not { buildingTag() }
-          }
-        }
-        steps {
-          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 eeacms/volto-project-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" eeacms/volto-project-ci cypress'''
-              } finally {
-                try {
-                  sh '''rm -rf cypress-reports cypress-results'''
-                  sh '''mkdir -p cypress-reports cypress-results'''
-                  sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/cypress/videos cypress-reports/'''
-                  sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/cypress/reports cypress-results/'''
-                  archiveArtifacts artifacts: 'cypress-reports/videos/*.mp4', fingerprint: true
-                }
-                finally {
-                  catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
-                      junit testResults: 'cypress-results/**/*.xml', allowEmptyResults: 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
-                }
-              }
-            }
-          }
-        }
-      }
+       stage('Cypress') {
+         when {
+           allOf {
+             environment name: 'CHANGE_ID', value: ''
+             not { branch 'master' }
+             not { changelog '.*^Automated release [0-9\\.]+$' }
+             not { buildingTag() }
+           }
+         }
+         steps {
+           node(label: 'docker') {
+             script {
+               try {
+                 sh '''docker pull plone; docker run -d --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
+                 sh '''docker pull eeacms/volto-project-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" eeacms/volto-project-ci cypress'''
+               } finally {
+                 try {
+                   sh '''rm -rf cypress-reports cypress-results'''
+                   sh '''mkdir -p cypress-reports cypress-results'''
+                   sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/cypress/videos cypress-reports/'''
+                   sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/cypress/reports cypress-results/'''
+                   archiveArtifacts artifacts: 'cypress-reports/videos/*.mp4', fingerprint: true
+                 }
+                 finally {
+                   catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                       junit testResults: 'cypress-results/**/*.xml', allowEmptyResults: 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
+                 }
+               }
+             }
+           }
+         }
+       }
 
        stage("Docker test build") {
             when {
@@ -127,7 +126,10 @@ pipeline {
 
     stage('Build & Push ( on tag )') {
       when {
-        buildingTag()
+        anyOf {
+          buildingTag()
+          branch 'volto-17'
+        }
       }
       steps{
         node(label: 'docker-host') {
@@ -166,6 +168,9 @@ pipeline {
 
     stage('Upgrade demo ( on tag )') {
       when {
+        not {
+          environment name: 'RANCHER_STACKID', value: ''
+        }
         buildingTag()
       }
       steps {
@@ -199,6 +204,8 @@ pipeline {
     }
   }
 
+
+
   post {
     always {
       cleanWs(cleanWhenAborted: true, cleanWhenFailure: true, cleanWhenNotBuilt: true, cleanWhenSuccess: true, cleanWhenUnstable: true, deleteDirs: true)

Makefile

@@ -1,93 +1,67 @@
-##############################################################################
-# Run:
-#    make
-#    make start
-#
-# Go to:
-#
-#     http://localhost:3000
-#
-##############################################################################
-# SETUP MAKE
-#
-## Defensive settings for make: https://tech.davis-hansson.com/p/make/
+# Yeoman Volto App development
+
+### Defensive settings for make:
+#     https://tech.davis-hansson.com/p/make/
 SHELL:=bash
 .ONESHELL:
-# for Makefile debugging purposes add -x to the .SHELLFLAGS
-.SHELLFLAGS:=-eu -o pipefail -O inherit_errexit -c
+.SHELLFLAGS:=-xeu -o pipefail -O inherit_errexit -c
 .SILENT:
 .DELETE_ON_ERROR:
 MAKEFLAGS+=--warn-undefined-variables
 MAKEFLAGS+=--no-builtin-rules
 
-# Colors
-# OK=Green, warn=yellow, error=red
-ifeq ($(TERM),)
-# no colors if not in terminal
-	MARK_COLOR=
-	OK_COLOR=
-	WARN_COLOR=
-	ERROR_COLOR=
-	NO_COLOR=
-else
-	MARK_COLOR=`tput setaf 6`
-	OK_COLOR=`tput setaf 2`
-	WARN_COLOR=`tput setaf 3`
-	ERROR_COLOR=`tput setaf 1`
-	NO_COLOR=`tput sgr0`
-endif
+# Project settings
+
+DIR=$(shell basename $$(pwd))
+ADDON ?= "freshwater-frontend"
+
+# Recipe snippets for reuse
+
+# We like colors
+# From: https://coderwall.com/p/izxssa/colored-makefile-for-golang-projects
+RED=`tput setaf 1`
+GREEN=`tput setaf 2`
+RESET=`tput sgr0`
+YELLOW=`tput setaf 3`
 
-##############################################################################
 
 # Top-level targets
 .PHONY: all
-all: develop install
+all: project
 
-.PHONY: develop
-develop: ## Runs missdev in the local project (mrs.developer.json should be present)
-	npx -p mrs-developer missdev --config=jsconfig.json --output=addons --fetch-https
+.PHONY: start-test-backend
+start-test-backend: ## Start Test Plone Backend
+	@echo "$(GREEN)==> Start Test Plone Backend$(RESET)"
+	docker run -i --rm -e ZSERVER_HOST=0.0.0.0 -e ZSERVER_PORT=55001 -p 55001:55001 -e VERSIONS="plone.restapi=8.17.0 plone.rest=2.0.0a1 plone.app.vocabularies=4.3.0" -e APPLY_PROFILES=plone.app.contenttypes:plone-content,plone.restapi:default,plone.volto:default-homepage -e CONFIGURE_PACKAGES=plone.app.contenttypes,plone.restapi,plone.volto,plone.volto.cors -e ADDONS='plone.app.robotframework plone.app.contenttypes plone.restapi plone.volto' plone ./bin/robot-server plone.app.robotframework.testing.PLONE_ROBOT_TESTING
+
+.PHONY: start-backend-docker
+start-backend-docker:		## Starts a Docker-based backend
+	@echo "$(GREEN)==> Start Docker-based Plone Backend$(RESET)"
+	docker run -it --rm --name=plone -p 8080:8080 -e VERSIONS="plone.restapi=8.17.0 plone.rest=2.0.0a1 plone.app.vocabularies=4.3.0" -e SITE=Plone -e ADDONS="plone.volto" -e ZCML="plone.volto.cors" plone
+
+.PHONY: help
+help:		## Show this help.
+	@echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)"
 
 .PHONY: install
-install:	## Frontend: Install project and add-ons
+install: ## Install the frontend
+	@echo "Install frontend"
+	$(MAKE) omelette
+	$(MAKE) preinstall
 	yarn install
 
-.PHONY: start
-start:		## Frontend: Start
-	yarn start
+.PHONY: preinstall
+preinstall: ## Preinstall task, checks if missdev (mrs-developer) is present and runs it
+	if [ -f $$(pwd)/mrs.developer.json ]; then make develop; fi
+
+.PHONY: develop
+develop: ## Runs missdev in the local project (mrs.developer.json should be present)
+	npx -p mrs-developer missdev --config=jsconfig.json --output=addons --fetch-https
 
 .PHONY: omelette
 omelette: ## Creates the omelette folder that contains a link to the installed version of Volto (a softlink pointing to node_modules/@plone/volto)
 	if [ ! -d omelette ]; then ln -sf node_modules/@plone/volto omelette; fi
 
 .PHONY: patches
 patches:
-	/bin/bash patches/patchit.sh > /dev/null 2>&1 ||true
-
-.PHONY: release
-release: ## Show release candidates
-	./scripts/release.py -v
-
-.PHONY: update
-update: ## git pull all src/addons
-	./scripts/update.sh
-
-.PHONY: issues
-issues: ## Check github for open pull-requests
-	./scripts/pull-requests.py WARN
-
-.PHONY: issues-all
-issues-all: ## Check github for open pull-requests
-	./scripts/pull-requests-volto.py WARN
-
-.PHONY: status
-status: ## Check src/addons for changes
-	./scripts/status.sh
-
-.PHONY: pull
-pull: ## Run git pull on all src/addons
-	./scripts/pull.sh
-
-.PHONY: help
-help:		## Show this help.
-	@echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)"
-	head -n 10 Makefile
+	/bin/bash patches/patchit.sh > /dev/null 2>&1 ||true

cypress.config.js

@@ -2,7 +2,7 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   viewportWidth: 1280,
-  defaultCommandTimeout: 10000,
+  defaultCommandTimeout: 8888,
   chromeWebSecurity: false,
   reporter: 'junit',
   video: true,
@@ -18,11 +18,9 @@ module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
       // e2e testing node events setup code
-      require('@cypress/code-coverage/task')(on, config);
-      require('cypress-fail-fast/plugin')(on, config);
+
       return config;
     },
     baseUrl: 'http://localhost:3000',
   },
 });
-

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

@@ -1,32 +1,30 @@
-import { slateBeforeEach, slateAfterEach } from '../support/e2e';
+import { setupBeforeEach, tearDownAfterEach } from '../support/e2e';
 
 describe('Blocks Tests', () => {
-  beforeEach(slateBeforeEach);
-  afterEach(slateAfterEach);
+  beforeEach(setupBeforeEach);
+  afterEach(tearDownAfterEach);
 
   it('Add Block: Empty', () => {
-    cy.clearSlateTitle();
-    cy.getSlateTitle().type('My Add-on Page');
+    // Change page title
+    cy.get('[contenteditable=true]').first().clear();
+
+    cy.get('[contenteditable=true]').first().type('My Add-on Page');
 
     cy.get('.documentFirstHeading').contains('My Add-on Page');
 
-    cy.getSlate().click();
+    cy.get('[contenteditable=true]').first().type('{enter}');
+
+    // Add block
+    cy.get('.ui.basic.icon.button.block-add-button').first().click();
+    cy.get('.blocks-chooser .title').contains('Media').click();
+    cy.get('.content.active.media .button.image').contains('Image').click();
 
+    // Save
     cy.get('#toolbar-save').click();
     cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
 
-    cy.get('#toolbar-personal').click();
-    cy.contains('Site Setup').click();
-
-    cy.contains('Version Overview');
-    cy.contains('Frontend');
-    cy.contains('History');
-    cy.contains('Backend');
-    cy.contains('Plone');
-    cy.contains('plone.restapi');
-    cy.contains('CMF');
-    cy.contains('Zope');
-    cy.contains('Python');
-    cy.contains('PIL');
+    // then the page view should contain our changes
+    cy.contains('My Add-on Page');
+    cy.get('.block.image');
   });
 });