@plone/volto 18.0.0-alpha.8 → 18.0.0

package/src/components/theme/SlotRenderer/SlotRenderer.tsx

@@ -0,0 +1,60 @@
+import { useLocation } from 'react-router-dom';
+import config from '@plone/volto/registry';
+import type { Content } from '@plone/types';
+
+/*
+Usage:
+<SlotRenderer name="aboveContent" content={content} route={} />
+*/
+
+const SlotRenderer = ({
+  name,
+  content,
+  navRoot,
+}: {
+  name: string;
+  content: Content;
+  navRoot?: Content;
+}) => {
+  const location = useLocation();
+
+  let slots = config.getSlot(name, {
+    content,
+    location: location as any, // Since we are using an older version of history, we need to cast it to any
+    // This is to cover the use case while adding a new content and we don't have
+    // have the navRoot information in the initial content. This will be
+    // useful for SlotRenderers rendered in the `Add` route.
+    navRoot: content?.['@components']?.navroot?.navroot || navRoot,
+  });
+
+  if (!slots) {
+    return null;
+  }
+
+  return (
+    <>
+      {slots.map(
+        ({
+          component,
+          name,
+        }: {
+          component: React.ComponentType<any>;
+          name: string;
+        }) => {
+          // ^^ Weird compilation issue for Jest tests, that forced to re-declare the type above
+          const SlotComponent = component;
+          return (
+            <SlotComponent
+              key={name}
+              content={content}
+              location={location}
+              navRoot={navRoot}
+            />
+          );
+        },
+      )}
+    </>
+  );
+};
+
+export default SlotRenderer;

package/src/components/theme/Tags/Tags.jsx

@@ -3,19 +3,25 @@
  * @module components/theme/Tags/Tags
  */
 
-import React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { Container } from 'semantic-ui-react';
+import config from '@plone/registry';
 
 /**
- * Tags component class.
+ * Tags component.
  * @function Tags
- * @param {array} tags Array of tags.
- * @returns {string} Markup of the component.
+ * @param {Object} props Component properties.
+ * @param {Object} props.content Content object that may contain subjects.
+ * @param {Array} [props.content.subjects] Optional array of tags (subjects).
+ * @returns {JSX.Element|null} Markup of the component or null if no tags are available.
  */
-const Tags = ({ tags }) =>
-  tags && tags.length > 0 ? (
+const Tags = ({ content }) => {
+  const tags = content?.subjects || [];
+
+  if (!config.settings.showTags || !tags.length) return null;
+
+  return (
     <Container className="tags">
       {tags.map((tag) => (
         <Link className="ui label" to={`/search?Subject=${tag}`} key={tag}>
@@ -23,9 +29,8 @@ const Tags = ({ tags }) =>
         </Link>
       ))}
     </Container>
-  ) : (
-    <span />
   );
+};
 
 /**
  * Property types.
@@ -33,7 +38,9 @@ const Tags = ({ tags }) =>
  * @static
  */
 Tags.propTypes = {
-  tags: PropTypes.arrayOf(PropTypes.string),
+  content: PropTypes.shape({
+    subjects: PropTypes.arrayOf(PropTypes.string),
+  }),
 };
 
 /**
@@ -42,7 +49,9 @@ Tags.propTypes = {
  * @static
  */
 Tags.defaultProps = {
-  tags: null,
+  content: {
+    subjects: [],
+  },
 };
 
 export default Tags;

package/src/components/theme/Tags/Tags.test.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
@@ -9,17 +8,22 @@ import Tags from './Tags';
 const mockStore = configureStore();
 
 describe('Tags', () => {
-  it('renders without tags', () => {
-    const store = mockStore({
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
       intl: {
         locale: 'en',
         messages: {},
       },
     });
+  });
+
+  it('renders without tags', () => {
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <Tags />
+          <Tags content={{ subjects: [] }} />
         </MemoryRouter>
       </Provider>,
     );
@@ -28,16 +32,10 @@ describe('Tags', () => {
   });
 
   it('renders with tags', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <Tags tags={['Tag 1', 'Tag 2']} />
+          <Tags content={{ subjects: ['Tag 1', 'Tag 2'] }} />
         </MemoryRouter>
       </Provider>,
     );

package/src/components/theme/Title/Title.stories.js

@@ -0,0 +1,22 @@
+import TitleComponent from './Title';
+
+const Title = (args) => <TitleComponent {...args} />;
+
+export default {
+  title: 'Title',
+
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+  },
+};
+
+export const Title_ = {
+  render: Title.bind({}),
+  name: 'Title',
+
+  args: {
+    title: 'Welcome to Plone',
+  },
+};

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

@@ -1,9 +1,4 @@
-/**
- * Album view component.
- * @module components/theme/View/AlbumView
- */
-
-import React from 'react';
+import { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   Container as SemanticContainer,
@@ -18,178 +13,138 @@ import openSVG from '@plone/volto/icons/open.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import backSVG from '@plone/volto/icons/back.svg';
 
-/**
- * Album view component class.
- * @function AlbumView
- * @param {Object} content Content object.
- * @returns {string} Markup of the component.
- */
-class AlbumView extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      openIndex: undefined,
-    };
-
-    this.closeModal = this.closeModal.bind(this);
-    this.nextImage = this.nextImage.bind(this);
-    this.prevImage = this.prevImage.bind(this);
-  }
-
-  closeModal() {
-    this.setState({
-      openIndex: -1,
-    });
-  }
-
-  nextImage() {
-    const openIndex =
-      (this.state.openIndex + 1) % this.props.content.items.length;
-    this.setState({
-      openIndex,
-    });
-  }
-
-  prevImage() {
-    const openIndex =
-      (this.state.openIndex - 1) % this.props.content.items.length;
-    this.setState({
-      openIndex,
-    });
-  }
+const AlbumView = ({ content }) => {
+  const [openIndex, setOpenIndex] = useState(undefined);
 
-  render() {
-    const { content } = this.props;
-    const Container =
-      config.getComponent({ name: 'Container' }).component || SemanticContainer;
-    const PreviewImage = config.getComponent({
-      name: 'PreviewImage',
-    }).component;
+  const closeModal = () => {
+    setOpenIndex(-1);
+  };
 
-    return (
-      <Container className="view-wrapper">
-        <article id="content">
-          <header>
-            <h1 className="documentFirstHeading">{content.title}</h1>
-            {content.description && (
-              <p className="documentDescription">{content.description}</p>
-            )}
-          </header>
-          <section id="content-core">
-            <Grid doubling stackable columns={4}>
-              {content.items &&
-                content.items.map((item, index) => (
-                  <React.Fragment key={item.url}>
-                    {item.image_field && (
-                      <Modal
-                        className="gallery"
-                        onClose={this.closeModal}
-                        open={this.state.openIndex === index}
-                        trigger={
-                          <Grid.Column>
-                            <Segment className="imageborder">
+  const nextImage = () => {
+    let OpenIndex = (openIndex + 1) % content.items.length;
+    setOpenIndex(OpenIndex);
+  };
+  const prevImage = () => {
+    const OpenIndex = (openIndex - 1) % content.items.length;
+    setOpenIndex(OpenIndex);
+  };
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  const PreviewImage = config.getComponent({ name: 'PreviewImage' }).component;
+  return (
+    <Container className="view-wrapper">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
+        <section id="content-core">
+          <Grid doubling stackable columns={4}>
+            {content.items &&
+              content.items.map((item, index) => (
+                <Fragment key={item.url}>
+                  {item.image_field && (
+                    <Modal
+                      className="gallery"
+                      onClose={closeModal}
+                      open={openIndex === index}
+                      trigger={
+                        <Grid.Column>
+                          <Segment className="imageborder">
+                            <PreviewImage
+                              item={item}
+                              alt={item.image_caption || item.title}
+                              onClick={() => {
+                                setOpenIndex(index);
+                              }}
+                              className="ui middle aligned image"
+                              responsive={true}
+                              loading="lazy"
+                              title={item.title}
+                            />
+                          </Segment>
+                        </Grid.Column>
+                      }
+                      closeIcon
+                    >
+                      <Modal.Header>
+                        <Grid>
+                          <Grid.Row>
+                            <GridColumn width={10}>{item.title}</GridColumn>
+                            <GridColumn width={2} textAlign="right">
+                              <UniversalLink
+                                href={item.url}
+                                title={item['@type']}
+                                onClick={closeModal}
+                              >
+                                <Icon size="30px" fitted name={openSVG} />
+                              </UniversalLink>
+                            </GridColumn>
+                          </Grid.Row>
+                        </Grid>
+                      </Modal.Header>
+                      <Grid centered verticalAlign="middle">
+                        <Grid.Row>
+                          <Grid.Column width={2} textAlign="center">
+                            <Button
+                              className="gallery noborder"
+                              onClick={prevImage}
+                              style={{ margin: 0 }}
+                            >
+                              <Icon
+                                name={backSVG}
+                                className="circled"
+                                size="30px"
+                                style={{ margin: 0 }}
+                              />
+                            </Button>
+                          </Grid.Column>
+                          <Grid.Column width={8}>
+                            <Modal.Content image>
                               <PreviewImage
                                 item={item}
-                                alt={item.image_caption || item.title}
+                                alt={item.image_caption}
                                 onClick={() => {
-                                  this.setState({
-                                    openIndex: index,
-                                  });
+                                  setOpenIndex(index);
                                 }}
-                                className="ui middle aligned image"
+                                className="ui image"
                                 responsive={true}
-                                loading="lazy"
-                                title={item.title}
                               />
-                            </Segment>
+
+                              <Modal.Description>
+                                <p>{item.description}</p>
+                              </Modal.Description>
+                            </Modal.Content>
                           </Grid.Column>
-                        }
-                        closeIcon
-                      >
-                        <Modal.Header>
-                          <Grid>
-                            <Grid.Row>
-                              <GridColumn width={10}>{item.title}</GridColumn>
-                              <GridColumn width={2} textAlign="right">
-                                <UniversalLink
-                                  href={item.url}
-                                  title={item['@type']}
-                                  onClick={this.closeModal}
-                                >
-                                  <Icon size="30px" fitted name={openSVG} />
-                                </UniversalLink>
-                              </GridColumn>
-                            </Grid.Row>
-                          </Grid>
-                        </Modal.Header>
-                        <Grid centered verticalAlign="middle">
-                          <Grid.Row>
-                            <Grid.Column width={2} textAlign="center">
-                              <Button
-                                className="gallery noborder"
-                                onClick={this.nextImage}
+                          <Grid.Column width={2} textAlign="center">
+                            <Button
+                              onClick={nextImage}
+                              className="gallery noborder"
+                              style={{ margin: 0 }}
+                            >
+                              <Icon
+                                name={aheadSVG}
+                                className="circled"
+                                size="30px"
                                 style={{ margin: 0 }}
-                              >
-                                <Icon
-                                  name={backSVG}
-                                  className="circled"
-                                  size="30px"
-                                  style={{ margin: 0 }}
-                                />
-                              </Button>
-                            </Grid.Column>
-                            <Grid.Column width={8}>
-                              <Modal.Content image>
-                                <PreviewImage
-                                  item={item}
-                                  alt={item.image_caption}
-                                  onClick={() => {
-                                    this.setState({
-                                      openIndex: index,
-                                    });
-                                  }}
-                                  className="ui image"
-                                  responsive={true}
-                                />
-                                <Modal.Description>
-                                  <p>{item.description}</p>
-                                </Modal.Description>
-                              </Modal.Content>
-                            </Grid.Column>
-                            <Grid.Column width={2} textAlign="center">
-                              <Button
-                                onClick={this.nextImage}
-                                className="gallery noborder"
-                                style={{ margin: 0 }}
-                              >
-                                <Icon
-                                  name={aheadSVG}
-                                  className="circled"
-                                  size="30px"
-                                  style={{ margin: 0 }}
-                                />
-                              </Button>
-                            </Grid.Column>
-                          </Grid.Row>
-                        </Grid>
-                      </Modal>
-                    )}
-                  </React.Fragment>
-                ))}
-            </Grid>
-          </section>
-        </article>
-      </Container>
-    );
-  }
-}
+                              />
+                            </Button>
+                          </Grid.Column>
+                        </Grid.Row>
+                      </Grid>
+                    </Modal>
+                  )}
+                </Fragment>
+              ))}
+          </Grid>
+        </section>
+      </article>
+    </Container>
+  );
+};
 
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
 AlbumView.propTypes = {
   /**
    * Content of the object

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

@@ -5,7 +5,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl } from 'react-intl';
 
 import {
   Container as SemanticContainer,
@@ -16,7 +15,7 @@ import {
 import config from '@plone/volto/registry';
 import { getSchema } from '@plone/volto/actions';
 import { getWidget } from '@plone/volto/helpers/Widget/utils';
-import RenderBlocks from './RenderBlocks';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 
 import { hasBlocksData, getBaseUrl } from '@plone/volto/helpers';
 import { useDispatch, useSelector } from 'react-redux';
@@ -137,4 +136,4 @@ DefaultView.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(DefaultView);
+export default DefaultView;

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

@@ -4,6 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
+import { Redirect } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import config from '@plone/volto/registry';
 
@@ -19,6 +20,9 @@ const LinkView = ({ token, content }) => {
       }
     }
   }, [content, history, token]);
+  if (__SERVER__ && !token && content.remoteUrl) {
+    return <Redirect to={content.remoteUrl} />;
+  }
   const { title, description, remoteUrl } = content;
   const { openExternalLinkInNewTab } = config.settings;
   const Container =

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

@@ -7,6 +7,8 @@ import LinkView from './LinkView';
 
 const mockStore = configureStore();
 
+global.__SERVER__ = false; // eslint-disable-line no-underscore-dangle
+
 const store = mockStore({
   userSession: {
     token: null,

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

@@ -8,14 +8,13 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Redirect } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { injectIntl } from 'react-intl';
 import qs from 'query-string';
 
 import {
   ContentMetadataTags,
   Comments,
-  Tags,
   Toolbar,
 } from '@plone/volto/components';
 import { listActions, getContent } from '@plone/volto/actions';
@@ -28,6 +27,7 @@ import {
 } from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
+import SlotRenderer from '../SlotRenderer/SlotRenderer';
 
 /**
  * View container class.
@@ -205,8 +205,10 @@ class View extends Component {
    */
   render() {
     const { views } = config;
-    if (this.props.error && this.props.error.code === 301) {
-      const redirect = flattenToAppURL(this.props.error.url).split('?')[0];
+    if ([301, 302].includes(this.props.error?.code)) {
+      const redirect = flattenToAppURL(this.props.error.url)
+        .split('?')[0]
+        .replace('/++api++', '');
       return <Redirect to={`${redirect}${this.props.location.search}`} />;
     } else if (this.props.error && !this.props.connectionRefused) {
       let FoundView;
@@ -234,7 +236,7 @@ class View extends Component {
       this.getViewByLayout() || this.getViewByType() || this.getViewDefault();
 
     return (
-      <div id="view">
+      <div id="view" tabIndex="-1">
         <ContentMetadataTags content={this.props.content} />
         {/* Body class if displayName in component is set */}
         <BodyClass
@@ -244,6 +246,7 @@ class View extends Component {
               : null
           }
         />
+        <SlotRenderer name="aboveContent" content={this.props.content} />
         <RenderedView
           key={this.props.content['@id']}
           content={this.props.content}
@@ -251,26 +254,15 @@ class View extends Component {
           token={this.props.token}
           history={this.props.history}
         />
-        {config.settings.showTags &&
-          this.props.content.subjects &&
-          this.props.content.subjects.length > 0 && (
-            <Tags tags={this.props.content.subjects} />
-          )}
-        {/* Add opt-in social sharing if required, disabled by default */}
-        {/* In the future this might be parameterized from the app config */}
-        {/* <SocialSharing
-          url={typeof window === 'undefined' ? '' : window.location.href}
-          title={this.props.content.title}
-          description={this.props.content.description || ''}
-        /> */}
+        <SlotRenderer name="belowContent" content={this.props.content} />
         {this.props.content.allow_discussion && (
           <Comments pathname={this.props.pathname} />
         )}
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
-            <Toolbar pathname={this.props.pathname} inner={<span />} />
-          </Portal>
-        )}
+        {this.state.isClient &&
+          createPortal(
+            <Toolbar pathname={this.props.pathname} inner={<span />} />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }