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

package/src/components/manage/Blocks/Listing/ListingBody.jsx

@@ -1,5 +1,6 @@
 import React, { createRef } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
+import cx from 'classnames';
 import { Pagination, Dimmer, Loader } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
 import config from '@plone/volto/registry';
@@ -44,70 +45,85 @@ const ListingBody = withQuerystringResults((props) => {
     ? variation.noResultsComponent
     : config.blocks?.blocksConfig['listing'].noResultsComponent;
 
-  return listingItems?.length > 0 ? (
-    <div ref={listingRef}>
-      <ListingBodyTemplate
-        items={listingItems}
-        isEditMode={isEditMode}
-        {...data}
-        {...variation}
-      />
-      {totalPages > 1 && (
-        <div className="pagination-wrapper">
-          <Pagination
-            activePage={currentPage}
-            totalPages={totalPages}
-            onPageChange={(e, { activePage }) => {
-              !isEditMode &&
-                listingRef.current.scrollIntoView({ behavior: 'smooth' });
-              onPaginationChange(e, { activePage });
-            }}
-            firstItem={null}
-            lastItem={null}
-            prevItem={{
-              content: <Icon name={paginationLeftSVG} size="18px" />,
-              icon: true,
-              'aria-disabled': !prevBatch,
-              className: !prevBatch ? 'disabled' : null,
-            }}
-            nextItem={{
-              content: <Icon name={paginationRightSVG} size="18px" />,
-              icon: true,
-              'aria-disabled': !nextBatch,
-              className: !nextBatch ? 'disabled' : null,
-            }}
+  const HeadlineTag = data.headlineTag || 'h2';
+
+  return (
+    <>
+      {data.headline && (
+        <HeadlineTag
+          className={cx('headline', {
+            emptyListing: !listingItems?.length > 0,
+          })}
+        >
+          {data.headline}
+        </HeadlineTag>
+      )}
+      {listingItems?.length > 0 ? (
+        <div ref={listingRef}>
+          <ListingBodyTemplate
+            items={listingItems}
+            isEditMode={isEditMode}
+            {...data}
+            {...variation}
           />
+          {totalPages > 1 && (
+            <div className="pagination-wrapper">
+              <Pagination
+                activePage={currentPage}
+                totalPages={totalPages}
+                onPageChange={(e, { activePage }) => {
+                  !isEditMode &&
+                    listingRef.current.scrollIntoView({ behavior: 'smooth' });
+                  onPaginationChange(e, { activePage });
+                }}
+                firstItem={null}
+                lastItem={null}
+                prevItem={{
+                  content: <Icon name={paginationLeftSVG} size="18px" />,
+                  icon: true,
+                  'aria-disabled': !prevBatch,
+                  className: !prevBatch ? 'disabled' : null,
+                }}
+                nextItem={{
+                  content: <Icon name={paginationRightSVG} size="18px" />,
+                  icon: true,
+                  'aria-disabled': !nextBatch,
+                  className: !nextBatch ? 'disabled' : null,
+                }}
+              />
+            </div>
+          )}
+        </div>
+      ) : isEditMode ? (
+        <div className="listing message" ref={listingRef}>
+          {isFolderContentsListing && (
+            <FormattedMessage
+              id="No items found in this container."
+              defaultMessage="No items found in this container."
+            />
+          )}
+          {hasLoaded && NoResults && (
+            <NoResults isEditMode={isEditMode} {...data} />
+          )}
+          <Dimmer active={!hasLoaded} inverted>
+            <Loader indeterminate size="small">
+              <FormattedMessage id="loading" defaultMessage="Loading" />
+            </Loader>
+          </Dimmer>
+        </div>
+      ) : (
+        <div className="emptyListing">
+          {hasLoaded && NoResults && (
+            <NoResults isEditMode={isEditMode} {...data} />
+          )}
+          <Dimmer active={!hasLoaded} inverted>
+            <Loader indeterminate size="small">
+              <FormattedMessage id="loading" defaultMessage="Loading" />
+            </Loader>
+          </Dimmer>
         </div>
       )}
-    </div>
-  ) : isEditMode ? (
-    <div className="listing message" ref={listingRef}>
-      {isFolderContentsListing && (
-        <FormattedMessage
-          id="No items found in this container."
-          defaultMessage="No items found in this container."
-        />
-      )}
-      {hasLoaded && NoResults && (
-        <NoResults isEditMode={isEditMode} {...data} />
-      )}
-      <Dimmer active={!hasLoaded} inverted>
-        <Loader indeterminate size="small">
-          <FormattedMessage id="loading" defaultMessage="Loading" />
-        </Loader>
-      </Dimmer>
-    </div>
-  ) : (
-    <div>
-      {hasLoaded && NoResults && (
-        <NoResults isEditMode={isEditMode} {...data} />
-      )}
-      <Dimmer active={!hasLoaded} inverted>
-        <Loader indeterminate size="small">
-          <FormattedMessage id="loading" defaultMessage="Loading" />
-        </Loader>
-      </Dimmer>
-    </div>
+    </>
   );
 });
 

package/src/components/manage/Blocks/Listing/View.jsx

@@ -7,15 +7,11 @@ import { ListingBlockBody as ListingBody } from '@plone/volto/components';
 
 const View = (props) => {
   const { data, path, pathname, className } = props;
-  const HeadlineTag = data.headlineTag || 'h2';
 
   return (
     <div
       className={cx('block listing', data.variation || 'default', className)}
     >
-      {data.headline && (
-        <HeadlineTag className="headline">{data.headline}</HeadlineTag>
-      )}
       <ListingBody {...props} path={path ?? pathname} />
     </div>
   );

package/src/components/manage/Blocks/ToC/Edit.jsx

@@ -26,6 +26,7 @@ class Edit extends Component {
             }}
             onChangeBlock={this.props.onChangeBlock}
             formData={this.props.data}
+            block={this.props.block}
           />
         </SidebarPortal>
       </>

package/src/components/manage/Contents/Contents.jsx

@@ -290,6 +290,10 @@ const messages = defineMessages({
     id: 'This Page is referenced by the following items:',
     defaultMessage: 'This Page is referenced by the following items:',
   },
+  deleteItemCountMessage: {
+    id: 'Total items to be deleted:',
+    defaultMessage: 'Total items to be deleted:',
+  },
   deleteItemMessage: {
     id: 'Items to be deleted:',
     defaultMessage: 'Items to be deleted:',
@@ -418,6 +422,8 @@ class Contents extends Component {
     this.paste = this.paste.bind(this);
     this.fetchContents = this.fetchContents.bind(this);
     this.orderTimeout = null;
+    this.deleteItemsToShowThreshold = 10;
+
     this.state = {
       selected: [],
       showDelete: false,
@@ -427,6 +433,7 @@ class Contents extends Component {
       showProperties: false,
       showWorkflow: false,
       itemsToDelete: [],
+      showAllItemsToDelete: true,
       items: this.props.items,
       filter: '',
       currentPage: 0,
@@ -456,7 +463,6 @@ class Contents extends Component {
     this.fetchContents();
     this.setState({ isClient: true });
   }
-
   async componentDidUpdate(_, prevState) {
     if (
       this.state.itemsToDelete !== prevState.itemsToDelete &&
@@ -468,6 +474,8 @@ class Contents extends Component {
             this.getFieldById(item, 'UID'),
           ),
         ),
+        showAllItemsToDelete:
+          this.state.itemsToDelete.length < this.deleteItemsToShowThreshold,
       });
     }
   }
@@ -1188,16 +1196,35 @@ class Contents extends Component {
                       <div className="content">
                         <h3>
                           {this.props.intl.formatMessage(
-                            messages.deleteItemMessage,
-                          )}
+                            messages.deleteItemCountMessage,
+                          ) + ` ${this.state.itemsToDelete.length}`}
                         </h3>
                         <ul className="content">
-                          {map(this.state.itemsToDelete, (item) => (
-                            <li key={item}>
-                              {this.getFieldById(item, 'title')}
-                            </li>
-                          ))}
+                          {map(
+                            this.state.showAllItemsToDelete
+                              ? this.state.itemsToDelete
+                              : this.state.itemsToDelete.slice(
+                                  0,
+                                  this.deleteItemsToShowThreshold,
+                                ),
+                            (item) => (
+                              <li key={item}>
+                                {this.getFieldById(item, 'title')}
+                              </li>
+                            ),
+                          )}
                         </ul>
+                        {!this.state.showAllItemsToDelete && (
+                          <Button
+                            onClick={() =>
+                              this.setState({
+                                showAllItemsToDelete: true,
+                              })
+                            }
+                          >
+                            Show all items
+                          </Button>
+                        )}
                         {this.state.linkIntegrityBreakages.length > 0 ? (
                           <div>
                             <h3>

package/src/components/manage/Controlpanels/Controlpanels.jsx

@@ -270,7 +270,7 @@ class Controlpanels extends Component {
                 {group}
               </Segment>,
               <Segment key={`body-${group}`} attached>
-                <Grid columns={6}>
+                <Grid doubling columns={6}>
                   <Grid.Row>
                     {map(filter(controlpanels, { group }), (controlpanel) => (
                       <Grid.Column key={controlpanel.id}>

package/src/components/manage/DragDropList/DragDropList.jsx

@@ -3,7 +3,7 @@ import { isEmpty } from 'lodash';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { v4 as uuid } from 'uuid';
 
-const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex) => {
+const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex, uid) => {
   // Because of the margin rendering rules, there is no easy
   // way to calculate the offset of the placeholder.
   //
@@ -13,12 +13,16 @@ const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex) => {
   //
   // To get a placeholder that looks good in all cases, we
   // fill up the space between the previous and the next element.
-  const childrenArray = [...draggedDOM.parentNode.children];
+  const queryAttr = 'data-rbd-droppable-id';
+  const domQuery = `[${queryAttr}='${uid}']`;
+  const parentDOM = document.querySelector(domQuery);
+
+  const childrenArray = [...parentDOM.children];
   // Remove the source element
   childrenArray.splice(sourceIndex, 1);
   // Also remove the placeholder that the library always inserts at the end
   childrenArray.splice(-1, 1);
-  const parentRect = draggedDOM.parentNode.getBoundingClientRect();
+  const parentRect = parentDOM.getBoundingClientRect();
   const prevNode = childrenArray[destinationIndex - 1];
   const nextNode = childrenArray[destinationIndex];
   let top, bottom;
@@ -40,9 +44,7 @@ const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex) => {
   return {
     clientY: top,
     clientHeight: bottom - top,
-    clientX: parseFloat(
-      window.getComputedStyle(draggedDOM.parentNode).paddingLeft,
-    ),
+    clientX: parseFloat(window.getComputedStyle(parentDOM).paddingLeft),
     clientWidth: draggedDOM.clientWidth,
   };
 };
@@ -63,17 +65,22 @@ const DragDropList = (props) => {
   // queueing timed action
   const timer = useRef(null);
 
-  const onDragStart = React.useCallback((event) => {
-    clearTimeout(timer.current);
-    const queryAttr = 'data-rbd-draggable-id';
-    const domQuery = `[${queryAttr}='${event.draggableId}']`;
-    const draggedDOM = document.querySelector(domQuery);
-    if (!draggedDOM) {
-      return;
-    }
-    const sourceIndex = event.source.index;
-    setPlaceholderProps(getPlaceholder(draggedDOM, sourceIndex, sourceIndex));
-  }, []);
+  const onDragStart = React.useCallback(
+    (event) => {
+      clearTimeout(timer.current);
+      const queryAttr = 'data-rbd-draggable-id';
+      const domQuery = `[${queryAttr}='${event.draggableId}']`;
+      const draggedDOM = document.querySelector(domQuery);
+      if (!draggedDOM) {
+        return;
+      }
+      const sourceIndex = event.source.index;
+      setPlaceholderProps(
+        getPlaceholder(draggedDOM, sourceIndex, sourceIndex, uid),
+      );
+    },
+    [uid],
+  );
 
   const onDragEnd = React.useCallback(
     (result) => {
@@ -84,30 +91,33 @@ const DragDropList = (props) => {
     [onMoveItem],
   );
 
-  const onDragUpdate = React.useCallback((update) => {
-    clearTimeout(timer.current);
-    setPlaceholderProps({});
-    if (!update.destination) {
-      return;
-    }
-    const draggableId = update.draggableId;
-    const queryAttr = 'data-rbd-draggable-id';
-    const domQuery = `[${queryAttr}='${draggableId}']`;
-    const draggedDOM = document.querySelector(domQuery);
-    if (!draggedDOM) {
-      return;
-    }
-    const sourceIndex = update.source.index;
-    const destinationIndex = update.destination.index;
-    // Wait until the animations have finished, to make it look good.
-    timer.current = setTimeout(
-      () =>
-        setPlaceholderProps(
-          getPlaceholder(draggedDOM, sourceIndex, destinationIndex),
-        ),
-      250,
-    );
-  }, []);
+  const onDragUpdate = React.useCallback(
+    (update) => {
+      clearTimeout(timer.current);
+      setPlaceholderProps({});
+      if (!update.destination) {
+        return;
+      }
+      const draggableId = update.draggableId;
+      const queryAttr = 'data-rbd-draggable-id';
+      const domQuery = `[${queryAttr}='${draggableId}']`;
+      const draggedDOM = document.querySelector(domQuery);
+      if (!draggedDOM) {
+        return;
+      }
+      const sourceIndex = update.source.index;
+      const destinationIndex = update.destination.index;
+      // Wait until the animations have finished, to make it look good.
+      timer.current = setTimeout(
+        () =>
+          setPlaceholderProps(
+            getPlaceholder(draggedDOM, sourceIndex, destinationIndex, uid),
+          ),
+        250,
+      );
+    },
+    [uid],
+  );
 
   const AsDomComponent = as;
   return (
@@ -116,7 +126,18 @@ const DragDropList = (props) => {
       onDragUpdate={onDragUpdate}
       onDragEnd={onDragEnd}
     >
-      <Droppable droppableId={uid}>
+      <Droppable
+        droppableId={uid}
+        renderClone={(provided, snapshot, rubric) => {
+          const index = rubric.source.index;
+          return children({
+            child: childList[index][1],
+            childId: childList[index][0],
+            index,
+            draginfo: provided,
+          });
+        }}
+      >
         {(provided, snapshot) => (
           <AsDomComponent
             ref={provided.innerRef}

package/src/components/manage/Form/BlocksToolbar.jsx

@@ -177,7 +177,11 @@ export class BlocksToolbarComponent extends React.Component {
           ''
         )}
         {selectedBlock && (blocksClipboard?.cut || blocksClipboard?.copy) && (
-          <Plug pluggable="main.toolbar.bottom" id="block-paste-btn">
+          <Plug
+            pluggable="main.toolbar.bottom"
+            id="block-paste-btn"
+            dependencies={[selectedBlock]}
+          >
             <button
               aria-label={intl.formatMessage(messages.pasteBlocks)}
               onClick={this.pasteBlocks}

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

@@ -258,7 +258,11 @@ class Form extends Component {
    * Tab selection is done only by setting activeIndex in state
    */
   onTabChange(e, { activeIndex }) {
-    this.setState({ activeIndex });
+    const defaultFocus = this.props.schema.fieldsets[activeIndex].fields[0];
+    this.setState({
+      activeIndex,
+      ...(defaultFocus ? { inFocus: { [defaultFocus]: true } } : {}),
+    });
   }
 
   /**
@@ -686,7 +690,7 @@ class Form extends Component {
                             id={field}
                             formData={this.state.formData}
                             fieldSet={item.title.toLowerCase()}
-                            focus={index === 0}
+                            focus={this.state.inFocus[field]}
                             value={this.state.formData?.[field]}
                             required={schema.required.indexOf(field) !== -1}
                             onChange={this.onChangeField}

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;
+}