@plone/volto 17.0.0-alpha.0 → 17.0.0-alpha.1

package/.changelog.draft

@@ -1,22 +1,28 @@
-## 17.0.0-alpha.0 (2023-03-04)
+## 17.0.0-alpha.1 (2023-03-09)
 
-### Breaking
+### Feature
 
-- Volto 17 drops support for NodeJS 14, and adds support for NodeJS 18.
-  Please see the [upgrade guide](https://6.docs.plone.org/volto/upgrade-guide/index.html)
-  for more information.
+- - Add directive to cache stable resources in browser or intermediate server for 365 days by default directly in the SSR Express server, static resource that could change after a new deployment for 1 minute. @mamico [#2216](https://github.com/plone/volto/issues/2216)
+- Use popperjs in BlockChooser, move the markup to the bottom of the body tag. @sneridagh [#4141](https://github.com/plone/volto/issues/4141)
+- Improvements to the dev API proxy:
+  - Prefer RAZZLE_INTERNAL_API_PATH over RAZZLE_API_PATH as the target of the proxy.
+    The target of the API proxy is now always logged on startup, even in production mode.
+  - Support proxying to a backend served over https. For this configuration it
+    might be necessary to set RAZZLE_DEV_PROXY_INSECURE=1 if the backend
+    certificate can't be verified.
 
-  Volto 17 now uses Webpack 5. [#4086](https://github.com/plone/volto/issues/4086)
+  [davisagli] [#4434](https://github.com/plone/volto/issues/4434)
 
-### Internal
+### Bugfix
 
-- Add HI-ERN website to "Volto in Production" section in README @steffenri [#4172](https://github.com/plone/volto/issues/4172)
+- fix: newsitem and event views wrapper classNames @nzambello [#4443](https://github.com/plone/volto/issues/4443)
+- Fix weird GHA failure on config option not supported @sneridagh [#4466](https://github.com/plone/volto/issues/4466)
+- Fix history view dropdown for first entry, showing 'Revert to this version option' always @sneridagh [#4471](https://github.com/plone/volto/issues/4471)
+- Fix order of row of long table in edit and view mode @iFlameing [#4473](https://github.com/plone/volto/issues/4473)
+- Improve flaky test in autofocus Cypress tests @sneridagh [#4475](https://github.com/plone/volto/issues/4475)
 
 ### Documentation
 
-- Add a new Volto site to the README @erral [#4158](https://github.com/plone/volto/issues/4158), [#4170](https://github.com/plone/volto/issues/4170)
-- Add new websites Lanku and UEU
-  [erral] [#4310](https://github.com/plone/volto/issues/4310)
-- Fix English and MyST grammar and syntax from PR #4285 @stevepiercy [#4331](https://github.com/plone/volto/issues/4331)
-- Use a universal static path for both documentation and volto repos. @stevepiercy [#4376](https://github.com/plone/volto/issues/4376)
+- Complete teaser docs, add new section in `Blocks`: `Core Blocks developers notes` @sneridagh [#4461](https://github.com/plone/volto/issues/4461)
+- Change from links to inline literals in `CHANGELOG.md` to fix linkcheckbroken. @stevepiercy [#4470](https://github.com/plone/volto/issues/4470)
 

package/CHANGELOG.md

@@ -8,6 +8,35 @@
 
 <!-- towncrier release notes start -->
 
+## 17.0.0-alpha.1 (2023-03-09)
+
+### Feature
+
+- - Add directive to cache stable resources in browser or intermediate server for 365 days by default directly in the SSR Express server, static resource that could change after a new deployment for 1 minute. @mamico [#2216](https://github.com/plone/volto/issues/2216)
+- Use popperjs in BlockChooser, move the markup to the bottom of the body tag. @sneridagh [#4141](https://github.com/plone/volto/issues/4141)
+- Improvements to the dev API proxy:
+  - Prefer RAZZLE_INTERNAL_API_PATH over RAZZLE_API_PATH as the target of the proxy.
+    The target of the API proxy is now always logged on startup, even in production mode.
+  - Support proxying to a backend served over https. For this configuration it
+    might be necessary to set RAZZLE_DEV_PROXY_INSECURE=1 if the backend
+    certificate can't be verified.
+
+  [davisagli] [#4434](https://github.com/plone/volto/issues/4434)
+
+### Bugfix
+
+- fix: newsitem and event views wrapper classNames @nzambello [#4443](https://github.com/plone/volto/issues/4443)
+- Fix weird GHA failure on config option not supported @sneridagh [#4466](https://github.com/plone/volto/issues/4466)
+- Fix history view dropdown for first entry, showing 'Revert to this version option' always @sneridagh [#4471](https://github.com/plone/volto/issues/4471)
+- Fix order of row of long table in edit and view mode @iFlameing [#4473](https://github.com/plone/volto/issues/4473)
+- Improve flaky test in autofocus Cypress tests @sneridagh [#4475](https://github.com/plone/volto/issues/4475)
+
+### Documentation
+
+- Complete teaser docs, add new section in `Blocks`: `Core Blocks developers notes` @sneridagh [#4461](https://github.com/plone/volto/issues/4461)
+- Change from links to inline literals in `CHANGELOG.md` to fix linkcheckbroken. @stevepiercy [#4470](https://github.com/plone/volto/issues/4470)
+
+
 ## 17.0.0-alpha.0 (2023-03-04)
 
 ### Breaking
@@ -31,6 +60,31 @@
 - Use a universal static path for both documentation and volto repos. @stevepiercy [#4376](https://github.com/plone/volto/issues/4376)
 
 
+## 16.15.0 (2023-03-08)
+
+### Feature
+
+- Improvements to the dev API proxy:
+  - Prefer RAZZLE_INTERNAL_API_PATH over RAZZLE_API_PATH as the target of the proxy.
+    The target of the API proxy is now always logged on startup, even in production mode.
+  - Support proxying to a backend served over https. For this configuration it
+    might be necessary to set RAZZLE_DEV_PROXY_INSECURE=1 if the backend
+    certificate can't be verified.
+
+  [davisagli] [#4434](https://github.com/plone/volto/issues/4434)
+
+### Bugfix
+
+- fix: newsitem and event views wrapper classNames @nzambello [#4443](https://github.com/plone/volto/issues/4443)
+- Fix weird GHA failure on config option not supported @sneridagh [#4466](https://github.com/plone/volto/issues/4466)
+- Fix history view dropdown for first entry, showing 'Revert to this version option' always @sneridagh [#4471](https://github.com/plone/volto/issues/4471)
+- Fix order of row of long table in edit and view mode @iFlameing [#4473](https://github.com/plone/volto/issues/4473)
+
+### Documentation
+
+- Complete teaser docs, add new section in `Blocks`: `Core Blocks developers notes` @sneridagh [#4461](https://github.com/plone/volto/issues/4461)
+
+
 ## 16.14.0 (2023-03-03)
 
 ### Feature
@@ -72,11 +126,11 @@
 - Add the intl string 'Uploading image' to the image block @bipoza [#4180](https://github.com/plone/volto/issues/4180)
 - Fix link integrity overlay is too narrowed @iFlameing [#4399](https://github.com/plone/volto/issues/4399)
 - Fix External link Icon shows up in Grid-text block @iRohitSingh [#4400](https://github.com/plone/volto/issues/4400)
-- Fix broken links: babeljs.io/… @ksuess [#4414](https://github.com/plone/volto/issues/4414)
+- Fix broken links: `babeljs.io/…` @ksuess [#4414](https://github.com/plone/volto/issues/4414)
 
 ### Documentation
 
-- Remove inclusion of CHANGELOG.md for volto repo only. Fixes https://github.com/plone/documentation/issues/1431. @stevepiercy [#4404](https://github.com/plone/volto/issues/4404)
+- Remove inclusion of `CHANGELOG.md` for volto repo only. Fixes https://github.com/plone/documentation/issues/1431. @stevepiercy [#4404](https://github.com/plone/volto/issues/4404)
 
 
 ## 16.11.0 (2023-02-13)
@@ -1088,8 +1142,6 @@ See https://6.dev-docs.plone.org/volto/upgrade-guide/index.html for more informa
 
 ## 16.0.0-alpha.34 (2022-09-17)
 
-### Breaking
-
 ### Feature
 
 - Added new components `Aliases` for aliases control in Volto. Alias management in both controlpanel and object view. @andreiggr @avoinea

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "17.0.0-alpha.0",
+  "version": "17.0.0-alpha.1",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "17.0.0-alpha.0",
+  "version": "17.0.0-alpha.1",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/packages/volto-slate/src/blocks/Table/TableBlockView.jsx

@@ -33,13 +33,13 @@ const View = ({ data }) => {
   }, [data.table.rows]);
 
   const rows = useMemo(() => {
-    const items = {};
-    if (!data.table.rows) return {};
+    const items = [];
+    if (!data.table.rows) return [];
     data.table.rows.forEach((row, index) => {
       if (index > 0) {
-        items[row.key] = [];
+        items[index] = [];
         row.cells.forEach((cell, cellIndex) => {
-          items[row.key][cellIndex] = {
+          items[index][cellIndex] = {
             ...cell,
             value:
               cell.value && Node.string({ children: cell.value }).length > 0

package/src/components/manage/BlockChooser/BlockChooserButton.jsx

@@ -4,8 +4,10 @@ import addSVG from '@plone/volto/icons/circle-plus.svg';
 import { blockHasValue } from '@plone/volto/helpers';
 import { Icon, BlockChooser } from '@plone/volto/components';
 import config from '@plone/volto/registry';
-import { Button } from 'semantic-ui-react';
+import { Button, Ref } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
+import { usePopper } from 'react-popper';
+import { Portal } from 'react-portal';
 
 const messages = defineMessages({
   addBlock: {
@@ -76,41 +78,73 @@ const BlockChooserButton = (props) => {
     };
   }, [handleClickOutside]);
 
+  const [referenceElement, setReferenceElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: config.experimental.addBlockButton.enabled
+      ? 'bottom'
+      : 'right-start',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [-10, 5],
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['right-end', 'top-start'],
+        },
+      },
+    ],
+  });
+
   return (
     <>
       {!disableNewBlocks &&
         (config.experimental.addBlockButton.enabled ||
           !blockHasValue(data)) && (
-          <Component
-            {...props}
-            onShowBlockChooser={() => setAddNewBlockOpened(true)}
-          />
+          <Ref innerRef={setReferenceElement}>
+            <Component
+              {...props}
+              onShowBlockChooser={() => setAddNewBlockOpened(true)}
+            />
+          </Ref>
         )}
       {addNewBlockOpened && (
-        <BlockChooser
-          onMutateBlock={
-            onMutateBlock
-              ? (id, value) => {
-                  setAddNewBlockOpened(false);
-                  onMutateBlock(id, value);
-                }
-              : null
-          }
-          onInsertBlock={
-            onInsertBlock
-              ? (id, value) => {
-                  setAddNewBlockOpened(false);
-                  onInsertBlock(id, value);
-                }
-              : null
-          }
-          currentBlock={block}
-          allowedBlocks={allowedBlocks}
-          blocksConfig={blocksConfig}
-          properties={properties}
-          showRestricted={showRestricted}
-          ref={blockChooserRef}
-        />
+        <Portal node={document.getElementById('body')}>
+          <div
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <BlockChooser
+              onMutateBlock={
+                onMutateBlock
+                  ? (id, value) => {
+                      setAddNewBlockOpened(false);
+                      onMutateBlock(id, value);
+                    }
+                  : null
+              }
+              onInsertBlock={
+                onInsertBlock
+                  ? (id, value) => {
+                      setAddNewBlockOpened(false);
+                      onInsertBlock(id, value);
+                    }
+                  : null
+              }
+              currentBlock={block}
+              allowedBlocks={allowedBlocks}
+              blocksConfig={blocksConfig}
+              properties={properties}
+              showRestricted={showRestricted}
+              ref={blockChooserRef}
+            />
+          </div>
+        </Portal>
       )}
     </>
   );

package/src/components/manage/BlockChooser/BlockChooserSearch.jsx

@@ -31,7 +31,6 @@ const BlockChooserSearch = ({ onChange, searchValue }) => {
           autoComplete="off"
           placeholder={intl.formatMessage(messages.search)}
           title={intl.formatMessage(messages.search)}
-          autoFocus
           ref={searchInput}
         />
         {searchValue && (

package/src/components/manage/History/History.jsx

@@ -116,22 +116,37 @@ class History extends Component {
     this.props.revertHistory(getBaseUrl(this.props.pathname), value);
   }
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
+  processHistoryEntries = () => {
+    // Getting the history entries from the props
+    // No clue why the reverse(concat()) is necessary
     const entries = reverse(concat(this.props.entries));
     let title = entries.length > 0 ? entries[0].state_title : '';
     for (let x = 1; x < entries.length; x += 1) {
       entries[x].prev_state_title = title;
       title = entries[x].state_title || title;
     }
+    // We reverse them again
     reverse(entries);
+
+    // We identify the latest 'versioning' entry and mark it
+    const current_version = find(entries, (item) => item.type === 'versioning');
+    if (current_version) {
+      current_version.is_current = true;
+    }
+    return entries;
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
     const historyAction = find(this.props.objectActions, {
       id: 'history',
     });
+    const entries = this.processHistoryEntries();
+
     return !historyAction ? (
       <>
         {this.props.token ? (
@@ -266,18 +281,20 @@ class History extends Component {
                               />
                             </Link>
                           )}
-                          {'version' in entry && (
-                            <Dropdown.Item
-                              value={entry.version}
-                              onClick={this.onRevert}
-                            >
-                              <Icon name="undo" />{' '}
-                              <FormattedMessage
-                                id="Revert to this revision"
-                                defaultMessage="Revert to this revision"
-                              />
-                            </Dropdown.Item>
-                          )}
+                          {'version' in entry &&
+                            entry.may_revert &&
+                            !entry.is_current && (
+                              <Dropdown.Item
+                                value={entry.version}
+                                onClick={this.onRevert}
+                              >
+                                <Icon name="undo" />{' '}
+                                <FormattedMessage
+                                  id="Revert to this revision"
+                                  defaultMessage="Revert to this revision"
+                                />
+                              </Dropdown.Item>
+                            )}
                         </Dropdown.Menu>
                       </Dropdown>
                     )}

package/src/components/theme/View/EventView.jsx

@@ -43,7 +43,7 @@ const EventView = (props) => {
   const { content } = props;
 
   return (
-    <div id="page-document" className="ui container viewwrapper event-view">
+    <div id="page-document" className="ui container view-wrapper event-view">
       <Grid>
         <Grid.Column width={7} className="mobile hidden">
           {hasBlocksData(content) ? (

package/src/components/theme/View/NewsItemView.jsx

@@ -21,7 +21,7 @@ import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
  */
 const NewsItemView = ({ content }) =>
   hasBlocksData(content) ? (
-    <div id="page-document" className="ui container viewwrapper event-view">
+    <div id="page-document" className="ui container view-wrapper newsitem-view">
       <RenderBlocks content={content} />
     </div>
   ) : (

package/src/config/index.js

@@ -89,6 +89,7 @@ let config = {
     // https://6.docs.plone.org/volto/deploying/seamless-mode.html
     devProxyToApiPath:
       process.env.RAZZLE_DEV_PROXY_API_PATH ||
+      process.env.RAZZLE_INTERNAL_API_PATH ||
       process.env.RAZZLE_API_PATH ||
       'http://localhost:8080/Plone', // Set it to '' for disabling the proxy
     // proxyRewriteTarget Set it for set a custom target for the proxy or overide the internal VHM rewrite

package/src/config/server.js

@@ -2,6 +2,7 @@ import imagesMiddleware from '@plone/volto/express-middleware/images';
 import filesMiddleware from '@plone/volto/express-middleware/files';
 import robotstxtMiddleware from '@plone/volto/express-middleware/robotstxt';
 import sitemapMiddleware from '@plone/volto/express-middleware/sitemap';
+import staticsMiddleware from '@plone/volto/express-middleware/static';
 import devProxyMiddleware from '@plone/volto/express-middleware/devproxy';
 
 const settings = {
@@ -11,10 +12,28 @@ const settings = {
     imagesMiddleware(),
     robotstxtMiddleware(),
     sitemapMiddleware(),
+    staticsMiddleware(),
   ],
   criticalCssPath: 'public/critical.css',
   readCriticalCss: null, // so it will be defaultReadCriticalCss
   extractScripts: { errorPages: false },
+  staticFiles: [
+    {
+      id: 'root_static',
+      match: /^\/static\/.*/,
+      headers: {
+        // stable resources never change. 31536000 seconds == 365 days
+        'Cache-Control': 'public, max-age=31536000',
+      },
+    },
+    {
+      id: 'all',
+      match: /.*/,
+      headers: {
+        'Cache-Control': 'public, max-age=60',
+      },
+    },
+  ],
 };
 
 export default settings;

package/src/express-middleware/devproxy.js

@@ -75,12 +75,14 @@ export default function () {
       const { apiPathURL, instancePath } = getEnv();
       const target =
         config.settings.proxyRewriteTarget ||
-        `/VirtualHostBase/http/${apiPathURL.hostname}:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`;
+        `/VirtualHostBase/${apiPathURL.protocol.slice(0, -1)}/${
+          apiPathURL.hostname
+        }:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`;
 
       return `${target}${path.replace('/++api++', '')}`;
     },
     logLevel: process.env.DEBUG_HPM ? 'debug' : 'silent',
-    ...(config.settings?.proxyRewriteTarget?.startsWith('https') && {
+    ...(process.env.RAZZLE_DEV_PROXY_INSECURE && {
       changeOrigin: true,
       secure: false,
     }),

package/src/express-middleware/static.js

@@ -0,0 +1,32 @@
+import express from 'express';
+import path from 'path';
+import config from '@plone/volto/registry';
+
+const staticMiddleware = express.static(
+  process.env.BUILD_DIR
+    ? path.join(process.env.BUILD_DIR, 'public')
+    : process.env.RAZZLE_PUBLIC_DIR,
+  {
+    setHeaders: function (res, path) {
+      const pathLib = require('path');
+      const base = pathLib.resolve(process.env.RAZZLE_PUBLIC_DIR);
+      const relpath = path.substr(base.length);
+      config.settings.serverConfig.staticFiles.some((elem) => {
+        if (relpath.match(elem.match)) {
+          for (const name in elem.headers) {
+            res.setHeader(name, elem.headers[name] || 'undefined');
+          }
+          return true;
+        }
+        return false;
+      });
+    },
+  },
+);
+
+export default function () {
+  const middleware = express.Router();
+  middleware.all('*', staticMiddleware);
+  middleware.id = 'staticResourcesProcessor';
+  return middleware;
+}

package/src/server.jsx

@@ -59,13 +59,6 @@ const supported = new locale.Locales(keys(languages), 'en');
 
 const server = express()
   .disable('x-powered-by')
-  .use(
-    express.static(
-      process.env.BUILD_DIR
-        ? path.join(process.env.BUILD_DIR, 'public')
-        : process.env.RAZZLE_PUBLIC_DIR,
-    ),
-  )
   .head('/*', function (req, res) {
     // Support for HEAD requests. Required by start-test utility in CI.
     res.send('');
@@ -329,6 +322,7 @@ export const defaultReadCriticalCss = () => {
 // Exposed for the console bootstrap info messages
 server.apiPath = config.settings.apiPath;
 server.devProxyToApiPath = config.settings.devProxyToApiPath;
+server.proxyRewriteTarget = config.settings.proxyRewriteTarget;
 server.publicURL = config.settings.publicURL;
 
 export default server;

package/src/start-server.js

@@ -19,9 +19,11 @@ export default () => {
       } else {
         console.log(`API server (API_PATH) is set to: ${app.apiPath}`);
       }
-      if (__DEVELOPMENT__ && app.devProxyToApiPath)
+      if (app.devProxyToApiPath)
         console.log(
-          `Using internal proxy: ${app.publicURL} -> ${app.devProxyToApiPath}`,
+          `Proxying API requests from ${app.publicURL}/++api++ to ${
+            app.devProxyToApiPath
+          }${app.proxyRewriteTarget || ''}`,
         );
       console.log(`🎭 Volto started at ${bind_address}:${port} 🚀`);
 

package/theme/themes/pastanaga/extras/blocks.less

@@ -482,7 +482,6 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
     border: none !important;
     background: white !important;
     border-radius: 50% !important;
-    transform: translateX(-50%);
   }
 
   &:not(.new-add-block) {
@@ -712,20 +711,12 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
 }
 
 .blocks-chooser {
-  position: absolute;
-  z-index: 10;
-  top: 100%;
-  left: 50%;
   width: 310px;
   padding: 4px;
   background-color: rgba(255, 255, 255, 0.975);
   border-radius: 2px;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
 
-  &.new-add-block {
-    transform: translate(-50%, 22px);
-  }
-
   &:not(.new-add-block) {
     top: -12px;
     left: -9px;