@plone/volto 17.0.0-alpha.15 → 17.0.0-alpha.17

package/src/components/manage/TemplateChooser/TemplateChooser.jsx

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Button, Grid, Message } from 'semantic-ui-react';
+
+const TemplateChooser = ({ templates, onSelectTemplate }) => {
+  const intl = useIntl();
+  return (
+    <div className="template-chooser">
+      <Message>
+        <Grid columns={templates(intl).length}>
+          {templates(intl).map((template, index) => (
+            <Grid.Column key={template.id}>
+              <Button
+                className="template-chooser-item"
+                onClick={() => onSelectTemplate(index)}
+              >
+                <img src={template.image} alt="" />
+                <div className="template-chooser-title">
+                  {intl.formatMessage({
+                    id: template.id,
+                    defaultMessage: template.title,
+                  })}
+                </div>
+              </Button>
+            </Grid.Column>
+          ))}
+        </Grid>
+      </Message>
+    </div>
+  );
+};
+
+TemplateChooser.propTypes = {
+  templates: PropTypes.func.isRequired,
+  onSelectTemplate: PropTypes.func.isRequired,
+};
+
+export default TemplateChooser;

package/src/components/manage/TemplateChooser/TemplateChooser.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import TemplateChooser from './TemplateChooser';
+import templateSVG from './template.svg';
+
+const mockStore = configureStore();
+
+test('renders a TemplateChooser component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: { templateid: 'Template default translation' },
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <TemplateChooser
+        templates={() => [
+          {
+            image: templateSVG,
+            id: 'templateid',
+            defaultMessage: 'Template default translation',
+          },
+        ]}
+        onSelectTemplate={() => {}}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/components/manage/TemplateChooser/template.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(9 21)">
+      <rect width="78" height="29"/>
+      <rect width="36" height="8" y="33"/>
+      <rect width="77" height="10" y="45"/>
+    </g>
+  </g>
+</svg>

package/src/components/manage/UniversalLink/UniversalLink.jsx

@@ -12,7 +12,6 @@ import {
   isInternalURL,
   URLUtils,
 } from '@plone/volto/helpers/Url/Url';
-import { matchPath } from 'react-router';
 
 import config from '@plone/volto/registry';
 
@@ -66,11 +65,8 @@ const UniversalLink = ({
     }
   }
 
-  const isBlacklisted =
-    (config.settings.externalRoutes ?? []).find((route) =>
-      matchPath(flattenToAppURL(url), route.match),
-    )?.length > 0;
-  const isExternal = !isInternalURL(url) || isBlacklisted;
+  const isExternal = !isInternalURL(url);
+
   const isDownload = (!isExternal && url.includes('@@download')) || download;
   const isDisplayFile =
     (!isExternal && url.includes('@@display-file')) || false;

package/src/components/manage/UniversalLink/UniversalLink.test.jsx

@@ -157,6 +157,42 @@ describe('UniversalLink', () => {
     );
   });
 
+  it('UniversalLink renders external link where link is blacklisted', () => {
+    const notInEN = /^(?!.*(#|\/en|\/static|\/controlpanel|\/cypress|\/login|\/logout|\/contact-form)).*$/;
+    config.settings.externalRoutes = [
+      {
+        match: {
+          path: notInEN,
+          exact: false,
+          strict: false,
+        },
+        url(payload) {
+          return payload.location.pathname;
+        },
+      },
+    ];
+
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="http://localhost:3000/blacklisted-app"
+            title="External blacklisted app"
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('External blacklisted app').getAttribute('target')).toBe(
+      '_blank',
+    );
+    expect(getByTitle('External blacklisted app').getAttribute('rel')).toBe(
+      'noopener noreferrer',
+    );
+  });
+
   it('check UniversalLink does not break with error in item', () => {
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/Anontools/Anontools.jsx

@@ -3,13 +3,12 @@ import { Link } from 'react-router-dom';
 import { Menu } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { useToken } from '@plone/volto/hooks/userSession/useToken';
-import { useContent } from '@plone/volto/hooks/content/useContent';
 import config from '@plone/volto/registry';
+import { useSelector, shallowEqual } from 'react-redux';
 
 const Anontools = () => {
-  const token = useToken();
-  const { data: content } = useContent();
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const content = useSelector((state) => state.content.data, shallowEqual);
 
   const { settings } = config;
   return (

package/src/components/theme/Component/Component.jsx

@@ -1,7 +1,7 @@
 import registry from '@plone/volto/registry';
 
 /**
- * A component that can autommatically look up its implementation from the
+ * A component that can automatically look up its implementation from the
  * registry based on the provided component `componentName`
  */
 const Component = ({ componentName, dependencies, ...rest }) => {

package/src/components/theme/Header/Header.jsx

@@ -1,6 +1,6 @@
 import { Container, Segment } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
-import { useToken } from '@plone/volto/hooks/userSession/useToken';
+import { useSelector, shallowEqual } from 'react-redux';
 
 import {
   Anontools,
@@ -11,7 +11,7 @@ import {
 } from '@plone/volto/components';
 
 const Header = ({ pathname }) => {
-  const token = useToken();
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
 
   return (
     <Segment basic className="header-wrapper" role="banner">

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

@@ -5,9 +5,14 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Container, GridColumn, Segment } from 'semantic-ui-react';
+import {
+  Container as SemanticContainer,
+  GridColumn,
+  Segment,
+} from 'semantic-ui-react';
 import { Button, Modal, Grid } from 'semantic-ui-react';
 import { Icon, UniversalLink, PreviewImage } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 import openSVG from '@plone/volto/icons/open.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -56,6 +61,9 @@ class AlbumView extends Component {
 
   render() {
     const { content } = this.props;
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return (
       <Container className="view-wrapper">
         <article id="content">

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

@@ -9,6 +9,8 @@ import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
 import { Image, Grid } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import { EventDetails } from '@plone/volto/components';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
 
 const EventTextfieldView = ({ content }) => (
   <React.Fragment>
@@ -41,9 +43,11 @@ const EventTextfieldView = ({ content }) => (
  */
 const EventView = (props) => {
   const { content } = props;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
   return (
-    <div id="page-document" className="ui container view-wrapper event-view">
+    <Container id="page-document" className="view-wrapper event-view">
       <Grid>
         <Grid.Column width={7} className="mobile hidden">
           {hasBlocksData(content) ? (
@@ -83,7 +87,7 @@ const EventView = (props) => {
           )}
         </Grid.Column>
       </Grid>
-    </div>
+    </Container>
   );
 };
 

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

@@ -5,9 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'semantic-ui-react';
-
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * File view component class.
@@ -15,22 +15,27 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const FileView = ({ content }) => (
-  <Container className="view-wrapper">
-    <h1 className="documentFirstHeading">
-      {content.title}
-      {content.subtitle && ` - ${content.subtitle}`}
-    </h1>
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content.file?.download && (
-      <a href={flattenToAppURL(content.file.download)}>
-        {content.file.filename}
-      </a>
-    )}
-  </Container>
-);
+const FileView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.file?.download && (
+        <a href={flattenToAppURL(content.file.download)}>
+          {content.file.filename}
+        </a>
+      )}
+    </Container>
+  );
+};
 
 /**
  * Property types.

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

@@ -5,11 +5,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import prettybytes from 'pretty-bytes';
-
 import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * Image view component class.
@@ -17,37 +17,42 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const ImageView = ({ content }) => (
-  <Container className="view-wrapper">
-    <h1 className="documentFirstHeading">
-      {content.title}
-      {content.subtitle && ` - ${content.subtitle}`}
-    </h1>
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content?.image?.download && (
-      <a href={flattenToAppURL(content.image.download)}>
-        <img
-          alt={content.title}
-          src={flattenToAppURL(content.image.scales.preview.download)}
-        />
-        <figcaption>
-          <FormattedMessage
-            id="Size: {size}"
-            defaultMessage="Size: {size}"
-            values={{ size: prettybytes(content.image.size) }}
-          />
-          &nbsp; &mdash; &nbsp;
-          <FormattedMessage
-            id="Click to download full sized image"
-            defaultMessage="Click to download full sized image"
+const ImageView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content?.image?.download && (
+        <a href={flattenToAppURL(content.image.download)}>
+          <img
+            alt={content.title}
+            src={flattenToAppURL(content.image.scales.preview.download)}
           />
-        </figcaption>
-      </a>
-    )}
-  </Container>
-);
+          <figcaption>
+            <FormattedMessage
+              id="Size: {size}"
+              defaultMessage="Size: {size}"
+              values={{ size: prettybytes(content.image.size) }}
+            />
+            &nbsp; &mdash; &nbsp;
+            <FormattedMessage
+              id="Click to download full sized image"
+              defaultMessage="Click to download full sized image"
+            />
+          </figcaption>
+        </a>
+      )}
+    </Container>
+  );
+};
 
 /**
  * Property types.

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

@@ -6,7 +6,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { FormattedMessage } from 'react-intl';
 import config from '@plone/volto/registry';
@@ -60,6 +60,9 @@ class LinkView extends Component {
   render() {
     const { remoteUrl } = this.props.content;
     const { openExternalLinkInNewTab } = config.settings;
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return (
       <Container id="page-document">
         <h1 className="documentFirstHeading">{this.props.content.title}</h1>

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

@@ -5,8 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Segment, Container } from 'semantic-ui-react';
+import { Segment, Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink, PreviewImage } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 /**
  * List view component class.
@@ -14,32 +15,37 @@ import { UniversalLink, PreviewImage } from '@plone/volto/components';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const ListingView = ({ content }) => (
-  <Container id="page-home">
-    <section id="content-core">
-      {content.items.map((item) => (
-        <Segment key={item.url} className="listing-item">
-          <Container>
-            <h2>
-              <UniversalLink item={item} title={item['@type']}>
-                {item.title}
-              </UniversalLink>
-            </h2>
-            {item.description && <p>{item.description}</p>}
-          </Container>
-          {item.image_field && (
-            <PreviewImage
-              item={item}
-              size="thumb"
-              alt={item.image_caption ? item.image_caption : item.title}
-              className="ui image"
-            />
-          )}
-        </Segment>
-      ))}
-    </section>
-  </Container>
-);
+const ListingView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container id="page-home">
+      <section id="content-core">
+        {content.items.map((item) => (
+          <Segment key={item.url} className="listing-item">
+            <Container>
+              <h2>
+                <UniversalLink item={item} title={item['@type']}>
+                  {item.title}
+                </UniversalLink>
+              </h2>
+              {item.description && <p>{item.description}</p>}
+            </Container>
+            {item.image_field && (
+              <PreviewImage
+                item={item}
+                size="thumb"
+                alt={item.image_caption ? item.image_caption : item.title}
+                className="ui image"
+              />
+            )}
+          </Segment>
+        ))}
+      </section>
+    </Container>
+  );
+};
 
 /**
  * Property types.

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { getBaseUrl, applyBlockDefaults } from '@plone/volto/helpers';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { map } from 'lodash';
+import { MaybeWrap } from '@plone/volto/components';
 import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
@@ -10,6 +11,7 @@ import {
 import StyleWrapper from '@plone/volto/components/manage/Blocks/Block/StyleWrapper';
 import config from '@plone/volto/registry';
 import { ViewDefaultBlock } from '@plone/volto/components';
+import RenderEmptyBlock from './RenderEmptyBlock';
 
 const messages = defineMessages({
   unknownBlock: {
@@ -23,7 +25,8 @@ const messages = defineMessages({
 });
 
 const RenderBlocks = (props) => {
-  const { content, intl, location, metadata } = props;
+  const { content, location, metadata, blockWrapperTag } = props;
+  const intl = useIntl();
   const blocksFieldname = getBlocksFieldname(content);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
   const blocksConfig = props.blocksConfig || config.blocks.blocksConfig;
@@ -43,30 +46,56 @@ const RenderBlocks = (props) => {
           properties: content,
         });
 
-        return Block ? (
-          <StyleWrapper
-            key={block}
-            {...props}
-            id={block}
-            block={block}
-            data={blockData}
-          >
-            <Block
-              id={block}
-              metadata={metadata}
-              properties={content}
-              data={blockData}
-              path={getBaseUrl(location?.pathname || '')}
-              blocksConfig={blocksConfig}
-            />
-          </StyleWrapper>
-        ) : blockData ? (
-          <div key={block}>
-            {intl.formatMessage(messages.unknownBlock, {
-              block: content[blocksFieldname]?.[block]?.['@type'],
-            })}
-          </div>
-        ) : (
+        if (content[blocksFieldname]?.[block]?.['@type'] === 'empty') {
+          return (
+            <MaybeWrap
+              key={block}
+              condition={blockWrapperTag}
+              as={blockWrapperTag}
+            >
+              <RenderEmptyBlock />
+            </MaybeWrap>
+          );
+        }
+
+        if (Block) {
+          return (
+            <MaybeWrap
+              key={block}
+              condition={blockWrapperTag}
+              as={blockWrapperTag}
+            >
+              <StyleWrapper
+                key={block}
+                {...props}
+                id={block}
+                block={block}
+                data={blockData}
+              >
+                <Block
+                  id={block}
+                  metadata={metadata}
+                  properties={content}
+                  data={blockData}
+                  path={getBaseUrl(location?.pathname || '')}
+                  blocksConfig={blocksConfig}
+                />
+              </StyleWrapper>
+            </MaybeWrap>
+          );
+        }
+
+        if (blockData) {
+          return (
+            <div key={block}>
+              {intl.formatMessage(messages.unknownBlock, {
+                block: content[blocksFieldname]?.[block]?.['@type'],
+              })}
+            </div>
+          );
+        }
+
+        return (
           <div key={block}>{intl.formatMessage(messages.invalidBlock)}</div>
         );
       })}
@@ -76,4 +105,4 @@ const RenderBlocks = (props) => {
   );
 };
 
-export default injectIntl(RenderBlocks);
+export default RenderBlocks;

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

@@ -0,0 +1,5 @@
+const RenderEmptyBlock = () => {
+  return null;
+};
+
+export default RenderEmptyBlock;