@eeacms/volto-eea-website-theme 0.7.7 → 1.1.0

package/.coverage.babel.config.js

@@ -2,7 +2,7 @@ const defaultBabel = require('@plone/volto/babel');
 
 function applyDefault(api) {
   const voltoBabel = defaultBabel(api);
-  voltoBabel.plugins.push('@babel/plugin-transform-modules-commonjs', 'transform-class-properties', 'istanbul');
+  voltoBabel.plugins.push('istanbul');
   return voltoBabel;
 }
 

package/.i18n.babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@plone/volto/babel');

package/CHANGELOG.md

@@ -4,6 +4,24 @@ 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).
 
+### [1.1.0](https://github.com/eea/volto-eea-website-theme/compare/1.0.0...1.1.0) - 28 October 2022
+
+#### :nail_care: Enhancements
+
+- refactor(customizations): Upgrade to volto 16.alpha.45 [Alin Voinea - [`930b77f`](https://github.com/eea/volto-eea-website-theme/commit/930b77fa6113d423a82704883a349bc1f919bb85)]
+
+## [1.0.0](https://github.com/eea/volto-eea-website-theme/compare/0.7.7...1.0.0) - 28 October 2022
+
+#### :nail_care: Enhancements
+
+- refactor(volto-slate): Upgrade to @plone/volto-slate - refs #153447 [Alin Voinea - [`025ef41`](https://github.com/eea/volto-eea-website-theme/commit/025ef419feff51ab9c8d838bbdb8863ed2e6ed9c)]
+- change(theme): added human-readable labels for homepage views [David Ichim - [`bd320c3`](https://github.com/eea/volto-eea-website-theme/commit/bd320c3f04a330ea3e6831edc6dcaf55f05fa25f)]
+
+#### :hammer_and_wrench: Others
+
+- test(cypress): Upgrade to Cypress 10 / Razzle 4 [Alin Voinea - [`a0b0b85`](https://github.com/eea/volto-eea-website-theme/commit/a0b0b85cb18a3041b23fd4abc76f2839b4109ae8)]
+- Cleanup [Alin Voinea - [`c42299e`](https://github.com/eea/volto-eea-website-theme/commit/c42299ec830d0704d4103651efc41ecc99f647e3)]
+- Update dependencies [Alin Voinea - [`6c2bddd`](https://github.com/eea/volto-eea-website-theme/commit/6c2bdddd5bb122b67bf29edaed58191a3cf3bfa3)]
 ### [0.7.7](https://github.com/eea/volto-eea-website-theme/compare/0.7.6...0.7.7) - 19 October 2022
 
 #### :hammer_and_wrench: Others
@@ -33,7 +51,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`33b56ac`](https://github.com/eea/volto-eea-website-theme/commit/33b56acb13fbaf0c5b79e8fc6e13c4b699c79c90)]
 ### [0.7.3](https://github.com/eea/volto-eea-website-theme/compare/0.7.2...0.7.3) - 22 September 2022
 
 #### :hammer_and_wrench: Others
@@ -301,7 +318,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Header refactor, add custom logo #5 [ichim-david - [`4950235`](https://github.com/eea/volto-eea-website-theme/commit/49502358105437cfeac3b144e6d301cb59aa2346)]
 - Update footer.config with new publication card component [ichim-david - [`2e38e9a`](https://github.com/eea/volto-eea-website-theme/commit/2e38e9a417f835009d60c80d4eb4b30229f55e45)]
 - feature(breadcrumbs): implement eea-design-system breadcrumb as Volto component #32 #7 [ichim-david - [`181af41`](https://github.com/eea/volto-eea-website-theme/commit/181af4125ce2b9ddac56dab4723cb11c26633221)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`da8ceb6`](https://github.com/eea/volto-eea-website-theme/commit/da8ceb68ea68bfbc9504e48ccd4d68277f11ab9a)]
 - use breadcrumbs from eea-design-system [nileshgulia1 - [`db2f9e9`](https://github.com/eea/volto-eea-website-theme/commit/db2f9e9a4327420a3cce9a9903cd88549b129eab)]
 - Update theme.config [ichim-david - [`8eca4f4`](https://github.com/eea/volto-eea-website-theme/commit/8eca4f40397a4aeca6d39029c92db78968d37064)]
 - Added keyContent component to theme.config [ichim-david - [`d86f202`](https://github.com/eea/volto-eea-website-theme/commit/d86f202d0274d839487a88b51cae9a0e899beb23)]
@@ -343,5 +359,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- yarn bootstrap [Alin Voinea - [`6995e9e`](https://github.com/eea/volto-eea-website-theme/commit/6995e9e091f21fdbbdffa8a44fc0e2c626f6d46a)]
 - Initial commit [Alin Voinea - [`6a9c03a`](https://github.com/eea/volto-eea-website-theme/commit/6a9c03a7cebe71ca87e82cf58c42904063e9d8d3)]

package/README.md

@@ -15,36 +15,14 @@
 [![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-website-theme-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-website-theme-develop)
 
 
-[Volto](https://github.com/plone/volto) add-on
+EEA Website [Volto](https://github.com/plone/volto) Theme
 
-## Features
+## Demo
 
-Demo GIF
+- https://demo-www.eea.europa.eu
 
 ## Getting started
 
-### Try volto-eea-website-theme with Docker
-
-1. Get the latest Docker images
-
-   ```
-   docker pull plone
-   docker pull plone/volto
-   ```
-
-1. Start Plone backend
-   ```
-   docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone
-   ```
-
-1. Start Volto frontend
-
-   ```
-   docker run -it --rm -p 3000:3000 --link plone -e ADDONS="@eeacms/volto-eea-website-theme" plone/volto
-   ```
-
-1. Go to http://localhost:3000
-
 ### Add volto-eea-website-theme to your Volto project
 
 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone

package/babel.config.js

@@ -1,6 +1,6 @@
 module.exports = function (api) {
   api.cache(true);
-  const presets = ['razzle/babel'];
+  const presets = ['razzle'];
   const plugins = [
     [
       'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work

package/cypress.config.js

@@ -0,0 +1,26 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  viewportWidth: 1280,
+  defaultCommandTimeout: 8888,
+  chromeWebSecurity: false,
+  reporter: 'junit',
+  video: true,
+  retries: {
+    runMode: 8,
+    openMode: 0,
+  },
+  reporterOptions: {
+    mochaFile: 'cypress/reports/cypress-[hash].xml',
+    jenkinsMode: true,
+    toConsole: true,
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      // e2e testing node events setup code
+      require('@cypress/code-coverage/task')(on, config);
+      return config;
+    },
+    baseUrl: 'http://localhost:3000',
+  },
+});

package/jest-addon.config.js

@@ -9,18 +9,18 @@ module.exports = {
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@package/(.*)$': '<rootDir>/src/$1',
+    '@root/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
-    'volto-slate/(.*)$': '<rootDir>/src/addons/volto-slate/src/$1',
+    '@plone/volto-slate':
+      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
-    '^.+\\.css$': 'jest-css-modules',
-    '^.+\\.less$': 'jest-css-modules',
-    '^.+\\.scss$': 'jest-css-modules',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "0.7.7",
+  "version": "1.1.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -8,6 +8,7 @@
   "homepage": "https://github.com/eea/volto-eea-website-theme",
   "keywords": [
     "volto-addon",
+    "volto-theme",
     "volto",
     "plone",
     "react"
@@ -20,31 +21,33 @@
     "url": "git@github.com:eea/volto-eea-website-theme.git"
   },
   "dependencies": {
-    "@plone/scripts": "*",
     "@eeacms/volto-eea-design-system": "*",
     "slate": "^0.71.0",
     "slate-react": "^0.71.0"
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.9.5",
+    "@plone/scripts": "*",
+    "@cypress/code-coverage": "^3.10.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "md5": "^2.3.0"
   },
   "scripts": {
     "release": "release-it",
+    "release-major-beta": "release-it major --preRelease=beta",
+    "release-beta": "release-it --preRelease=beta",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
     "test": "make test",
     "test:fix": "make test-update",
     "pre-commit": "yarn stylelint:fix && yarn prettier:fix && yarn lint:fix",
-    "stylelint": "if [ -d ./project ]; then ./project/node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'; else ../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'; fi",
-    "stylelint:overrides": "if [ -d ./project ]; then ./project/node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'; else ../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'; fi",
-    "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
-    "prettier": "if [ -d ./project ]; then ./project/node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'; else ../../../node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'; fi",
-    "prettier:fix": "if [ -d ./project ]; then ./project/node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'; else ../../../node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'; fi",
-    "lint": "if [ -d ./project ]; then ./project/node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'; else ../../../node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'; fi",
-    "lint:fix": "if [ -d ./project ]; then ./project/node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'; else ../../../node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'; fi",
-    "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
-    "cypress:run": "if [ -d ./project ]; then NODE_ENV=development ./project/node_modules/cypress/bin/cypress run; else NODE_ENV=development ../../../node_modules/cypress/bin/cypress run; fi",
-    "cypress:open": "if [ -d ./project ]; then NODE_ENV=development ./project/node_modules/cypress/bin/cypress open; else NODE_ENV=development ../../../node_modules/cypress/bin/cypress open; fi"
+    "stylelint": "make stylelint",
+    "stylelint:overrides": "make stylelint-overrides",
+    "stylelint:fix": "make stylelint-fix",
+    "prettier": "make prettier",
+    "prettier:fix": "make prettier-fix",
+    "lint": "make lint",
+    "lint:fix": "make lint-fix",
+    "i18n": "make i18n",
+    "cypress:run": "make cypress-run",
+    "cypress:open": "make cypress-open"
   }
 }

package/src/customizations/volto/components/manage/Form/Form.jsx

@@ -74,6 +74,7 @@ class Form extends Component {
     onCancel: PropTypes.func,
     submitLabel: PropTypes.string,
     resetAfterSubmit: PropTypes.bool,
+    resetOnCancel: PropTypes.bool,
     isEditForm: PropTypes.bool,
     isAdminForm: PropTypes.bool,
     title: PropTypes.string,
@@ -105,6 +106,7 @@ class Form extends Component {
     onCancel: null,
     submitLabel: null,
     resetAfterSubmit: false,
+    resetOnCancel: false,
     isEditForm: false,
     isAdminForm: false,
     title: null,
@@ -399,7 +401,7 @@ class Form extends Component {
     if (event) {
       event.preventDefault();
     }
-    if (this.props.resetAfterSubmit) {
+    if (this.props.resetOnCancel || this.props.resetAfterSubmit) {
       this.setState({
         formData: this.props.formData,
       });
@@ -418,11 +420,13 @@ class Form extends Component {
       event.preventDefault();
     }
 
-    const errors = FormValidation.validateFieldsPerFieldset({
-      schema: this.props.schema,
-      formData: this.state.formData,
-      formatMessage: this.props.intl.formatMessage,
-    });
+    const errors = this.props.schema
+      ? FormValidation.validateFieldsPerFieldset({
+          schema: this.props.schema,
+          formData: this.state.formData,
+          formatMessage: this.props.intl.formatMessage,
+        })
+      : {};
 
     if (keys(errors).length > 0) {
       const activeIndex = FormValidation.showFirstTabWithErrors({
@@ -653,6 +657,11 @@ class Form extends Component {
                             {this.props.title}
                           </Segment>
                         ),
+                        item.description && (
+                          <Message attached="bottom">
+                            {item.description}
+                          </Message>
+                        ),
                         ...map(item.fields, (field, index) => (
                           <Field
                             {...schema.properties[field]}

package/src/customizations/volto/components/manage/Form/ModalForm.jsx

@@ -94,6 +94,7 @@ class ModalForm extends Component {
     loadingMessage: null,
     submitError: null,
     className: null,
+    dimmer: null,
   };
 
   /**
@@ -224,7 +225,11 @@ class ModalForm extends Component {
 
     const state_errors = keys(this.state.errors).length > 0;
     return (
-      <Modal open={this.props.open} className={this.props.className}>
+      <Modal
+        dimmer={this.props.dimmer}
+        open={this.props.open}
+        className={this.props.className}
+      >
         <Header>{this.props.title}</Header>
         <Dimmer active={this.props.loading}>
           <Loader>

package/src/customizations/volto/components/manage/Sharing/Sharing.jsx

@@ -4,6 +4,7 @@
  */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Plug, Pluggable } from '@plone/volto/components/manage/Pluggable';
 import { Helmet } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
@@ -291,146 +292,162 @@ class SharingComponent extends Component {
       <Container id="page-sharing">
         <Helmet title={this.props.intl.formatMessage(messages.sharing)} />
         <Segment.Group raised>
-          <Segment className="primary">
-            <FormattedMessage
-              id="Sharing for {title}"
-              defaultMessage="Sharing for {title}"
-              values={{ title: <q>{this.props.title}</q> }}
-            />
-          </Segment>
-          <Segment secondary>
-            <FormattedMessage
-              id="You can control who can view and edit your item using the list below."
-              defaultMessage="You can control who can view and edit your item using the list below."
-            />
-          </Segment>
-          <Segment>
-            <Form onSubmit={this.onSearch}>
-              <Form.Field>
-                <Input
-                  name="SearchableText"
-                  action={{ icon: 'search' }}
-                  placeholder={this.props.intl.formatMessage(
-                    messages.searchForUserOrGroup,
-                  )}
-                  onChange={this.onChangeSearch}
-                />
-              </Form.Field>
-            </Form>
-          </Segment>
-          <Form onSubmit={this.onSubmit}>
-            <Table celled padded striped attached>
-              <Table.Header>
-                <Table.Row>
-                  <Table.HeaderCell>
-                    <FormattedMessage id="Name" defaultMessage="Name" />
-                  </Table.HeaderCell>
-                  {this.props.available_roles?.map((role) => (
-                    <Table.HeaderCell key={role.id}>
-                      {role.title}
+          <Pluggable name="sharing-component" />
+          <Plug pluggable="sharing-component" id="sharing-component-title">
+            <Segment className="primary">
+              <FormattedMessage
+                id="Sharing for {title}"
+                defaultMessage="Sharing for {title}"
+                values={{ title: <q>{this.props.title}</q> }}
+              />
+            </Segment>
+          </Plug>
+          <Plug
+            pluggable="sharing-component"
+            id="sharing-component-description"
+          >
+            <Segment secondary>
+              <FormattedMessage
+                id="You can control who can view and edit your item using the list below."
+                defaultMessage="You can control who can view and edit your item using the list below."
+              />
+            </Segment>
+          </Plug>
+          <Plug pluggable="sharing-component" id="sharing-component-search">
+            <Segment>
+              <Form onSubmit={this.onSearch}>
+                <Form.Field>
+                  <Input
+                    name="SearchableText"
+                    action={{ icon: 'search' }}
+                    placeholder={this.props.intl.formatMessage(
+                      messages.searchForUserOrGroup,
+                    )}
+                    onChange={this.onChangeSearch}
+                  />
+                </Form.Field>
+              </Form>
+            </Segment>
+          </Plug>
+          <Plug
+            pluggable="sharing-component"
+            id="sharing-component-form"
+            dependencies={[this.state.entries, this.props.available_roles]}
+          >
+            <Form onSubmit={this.onSubmit}>
+              <Table celled padded striped attached>
+                <Table.Header>
+                  <Table.Row>
+                    <Table.HeaderCell>
+                      <FormattedMessage id="Name" defaultMessage="Name" />
                     </Table.HeaderCell>
-                  ))}
-                </Table.Row>
-              </Table.Header>
-              <Table.Body>
-                {this.state.entries?.map((entry) => (
-                  <Table.Row key={entry.id}>
-                    <Table.Cell>
-                      <IconOld
-                        name={entry.type === 'user' ? 'user' : 'users'}
-                        title={
-                          entry.type === 'user'
-                            ? this.props.intl.formatMessage(messages.user)
-                            : this.props.intl.formatMessage(messages.group)
-                        }
-                      />{' '}
-                      {entry.title}
-                      {entry.login && ` (${entry.login})`}
-                    </Table.Cell>
                     {this.props.available_roles?.map((role) => (
-                      <Table.Cell key={role.id}>
-                        {entry.roles[role.id] === 'global' && (
-                          <IconOld
-                            name="check circle outline"
-                            title={this.props.intl.formatMessage(
-                              messages.globalRole,
-                            )}
-                            color="blue"
-                          />
-                        )}
-                        {entry.roles[role.id] === 'acquired' && (
-                          <IconOld
-                            name="check circle outline"
-                            color="green"
-                            title={this.props.intl.formatMessage(
-                              messages.inheritedValue,
-                            )}
-                          />
-                        )}
-                        {typeof entry.roles[role.id] === 'boolean' && (
-                          <Checkbox
-                            onChange={this.onChange}
-                            value={`${entry.id}:${role.id}`}
-                            checked={entry.roles[role.id]}
-                            disabled={entry.login === this.props.login}
-                          />
-                        )}
-                      </Table.Cell>
+                      <Table.HeaderCell key={role.id}>
+                        {role.title}
+                      </Table.HeaderCell>
                     ))}
                   </Table.Row>
-                ))}
-              </Table.Body>
-            </Table>
-            <Segment attached>
-              <Form.Field>
-                <Checkbox
-                  checked={this.state.inherit}
-                  onChange={this.onToggleInherit}
-                  label={this.props.intl.formatMessage(messages.inherit)}
-                />
-              </Form.Field>
-              <p className="help">
-                <FormattedMessage
-                  id="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
-                  defaultMessage="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
-                  values={{
-                    inherited: (
-                      <IconOld name="check circle outline" color="green" />
-                    ),
-                    global: (
-                      <IconOld name="check circle outline" color="blue" />
-                    ),
-                  }}
-                />
-              </p>
-            </Segment>
-            <Segment className="actions" attached clearing>
-              <Button
-                basic
-                icon
-                primary
-                floated="right"
-                type="submit"
-                aria-label={this.props.intl.formatMessage(messages.save)}
-                title={this.props.intl.formatMessage(messages.save)}
-                loading={this.props.updateRequest.loading}
-                onClick={this.onSubmit}
-              >
-                <Icon className="circled" name={aheadSVG} size="30px" />
-              </Button>
-              <Button
-                basic
-                icon
-                secondary
-                aria-label={this.props.intl.formatMessage(messages.cancel)}
-                title={this.props.intl.formatMessage(messages.cancel)}
-                floated="right"
-                onClick={this.onCancel}
-              >
-                <Icon className="circled" name={clearSVG} size="30px" />
-              </Button>
-            </Segment>
-          </Form>
+                </Table.Header>
+                <Table.Body>
+                  {this.state.entries?.map((entry) => (
+                    <Table.Row key={entry.id}>
+                      <Table.Cell>
+                        <IconOld
+                          name={entry.type === 'user' ? 'user' : 'users'}
+                          title={
+                            entry.type === 'user'
+                              ? this.props.intl.formatMessage(messages.user)
+                              : this.props.intl.formatMessage(messages.group)
+                          }
+                        />{' '}
+                        {entry.title}
+                        {entry.login && ` (${entry.login})`}
+                      </Table.Cell>
+                      {this.props.available_roles?.map((role) => (
+                        <Table.Cell key={role.id}>
+                          {entry.roles[role.id] === 'global' && (
+                            <IconOld
+                              name="check circle outline"
+                              title={this.props.intl.formatMessage(
+                                messages.globalRole,
+                              )}
+                              color="blue"
+                            />
+                          )}
+                          {entry.roles[role.id] === 'acquired' && (
+                            <IconOld
+                              name="check circle outline"
+                              color="green"
+                              title={this.props.intl.formatMessage(
+                                messages.inheritedValue,
+                              )}
+                            />
+                          )}
+                          {typeof entry.roles[role.id] === 'boolean' && (
+                            <Checkbox
+                              onChange={this.onChange}
+                              value={`${entry.id}:${role.id}`}
+                              checked={entry.roles[role.id]}
+                              disabled={entry.login === this.props.login}
+                            />
+                          )}
+                        </Table.Cell>
+                      ))}
+                    </Table.Row>
+                  ))}
+                </Table.Body>
+              </Table>
+              <Segment attached>
+                <Form.Field>
+                  <Checkbox
+                    checked={this.state.inherit}
+                    onChange={this.onToggleInherit}
+                    label={this.props.intl.formatMessage(messages.inherit)}
+                  />
+                </Form.Field>
+                <p className="help">
+                  <FormattedMessage
+                    id="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
+                    defaultMessage="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
+                    values={{
+                      inherited: (
+                        <IconOld name="check circle outline" color="green" />
+                      ),
+                      global: (
+                        <IconOld name="check circle outline" color="blue" />
+                      ),
+                    }}
+                  />
+                </p>
+              </Segment>
+              <Segment className="actions" attached clearing>
+                <Button
+                  basic
+                  icon
+                  primary
+                  floated="right"
+                  type="submit"
+                  aria-label={this.props.intl.formatMessage(messages.save)}
+                  title={this.props.intl.formatMessage(messages.save)}
+                  loading={this.props.updateRequest.loading}
+                  onClick={this.onSubmit}
+                >
+                  <Icon className="circled" name={aheadSVG} size="30px" />
+                </Button>
+                <Button
+                  basic
+                  icon
+                  secondary
+                  aria-label={this.props.intl.formatMessage(messages.cancel)}
+                  title={this.props.intl.formatMessage(messages.cancel)}
+                  floated="right"
+                  onClick={this.onCancel}
+                >
+                  <Icon className="circled" name={clearSVG} size="30px" />
+                </Button>
+              </Segment>
+            </Form>
+          </Plug>
         </Segment.Group>
         {this.state.isClient && (
           <Portal node={document.getElementById('toolbar')}>

package/src/customizations/volto/components/manage/Widgets/ObjectBrowserWidget.jsx

@@ -65,6 +65,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     description: PropTypes.string,
     mode: PropTypes.string, // link, image, multiple
     return: PropTypes.string, // single, multiple
+    initialPath: PropTypes.string,
     required: PropTypes.bool,
     error: PropTypes.arrayOf(PropTypes.string),
     value: PropTypes.oneOfType([
@@ -74,6 +75,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     onChange: PropTypes.func.isRequired,
     openObjectBrowser: PropTypes.func.isRequired,
     allowExternals: PropTypes.bool,
+    placeholder: PropTypes.string,
   };
 
   /**
@@ -88,6 +90,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     value: [],
     mode: 'multiple',
     return: 'multiple',
+    initialPath: '',
     allowExternals: false,
   };
 
@@ -148,7 +151,10 @@ export class ObjectBrowserWidgetComponent extends Component {
   };
 
   onChange = (item) => {
-    let value = this.props.mode === 'multiple' ? [...this.props.value] : [];
+    let value =
+      this.props.mode === 'multiple' && this.props.value
+        ? [...this.props.value]
+        : [];
     value = value.filter((item) => item != null);
     const maxSize =
       this.props.widgetOptions?.pattern_options?.maximumSelectionSize || -1;
@@ -239,7 +245,7 @@ export class ObjectBrowserWidgetComponent extends Component {
             } else {
               this.props.onChange(this.props.id, [
                 {
-                  '@id': normalizeUrl(link),
+                  '@id': flattenToAppURL(link),
                   title: removeProtocol(link),
                 },
               ]);
@@ -273,15 +279,17 @@ export class ObjectBrowserWidgetComponent extends Component {
     ev.preventDefault();
     this.props.openObjectBrowser({
       mode: this.props.mode,
-      currentPath: this.props.location.pathname,
+      currentPath: this.props.initialPath || this.props.location.pathname,
       propDataName: 'value',
       onSelectItem: (url, item) => {
         this.onChange(item);
       },
-      selectableTypes: this.props.widgetOptions?.pattern_options
-        ?.selectableTypes,
-      maximumSelectionSize: this.props.widgetOptions?.pattern_options
-        ?.maximumSelectionSize,
+      selectableTypes:
+        this.props.widgetOptions?.pattern_options?.selectableTypes ||
+        this.props.selectableTypes,
+      maximumSelectionSize:
+        this.props.widgetOptions?.pattern_options?.maximumSelectionSize ||
+        this.props.maximumSelectionSize,
     });
   };
 
@@ -349,7 +357,8 @@ export class ObjectBrowserWidgetComponent extends Component {
 
             {items.length === 0 && this.props.mode === 'multiple' && (
               <div className="placeholder" ref={this.placeholderRef}>
-                {this.props.intl.formatMessage(messages.placeholder)}
+                {this.props.placeholder ??
+                  this.props.intl.formatMessage(messages.placeholder)}
               </div>
             )}
             {this.props.allowExternals &&
@@ -359,9 +368,10 @@ export class ObjectBrowserWidgetComponent extends Component {
                   onKeyDown={this.onKeyDownManualLink}
                   onChange={this.onManualLinkInput}
                   value={this.state.manualLinkInput}
-                  placeholder={this.props.intl.formatMessage(
-                    messages.placeholder,
-                  )}
+                  placeholder={
+                    this.props.placeholder ??
+                    this.props.intl.formatMessage(messages.placeholder)
+                  }
                 />
               )}
           </div>

package/src/index.js

@@ -25,7 +25,11 @@ const applyConfig = (config) => {
     homepage_view: HomePageView,
     homepage_inverse_view: HomePageInverseView,
   };
-
+  config.views.layoutViewsNamesMapping = {
+    ...(config.views.layoutViewsNamesMapping || {}),
+    homepage_view: 'Homepage view',
+    homepage_inverse_view: 'Homepage white view',
+  };
   // Apply accordion block customization
   if (config.blocks.blocksConfig.accordion) {
     config.blocks.blocksConfig.accordion.semanticIcon = 'ri-arrow-down-s-line';

package/cypress.json

@@ -1,17 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000",
-  "viewportWidth": 1280,
-  "defaultCommandTimeout": 8888,
-  "chromeWebSecurity": false,
-  "reporter": "junit",
-  "video": true,
-  "retries": {
-    "runMode": 8,
-    "openMode": 0
-  },
-  "reporterOptions": {
-    "mochaFile": "cypress/reports/cypress-[hash].xml",
-    "jenkinsMode": true,
-    "toConsole": true
-  }
-}