@plone/volto 18.0.0-alpha.4 → 18.0.0-alpha.41

package/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx

@@ -24,7 +24,9 @@ const MultilingualRedirector = (props) => {
     let mounted = true;
     if (settings.isMultilingual && pathname === '/') {
       const langFileName = toGettextLang(redirectToLanguage);
-      import('@root/../locales/' + langFileName + '.json').then((locale) => {
+      import(
+        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
+      ).then((locale) => {
         if (mounted) {
           dispatch(changeLanguage(redirectToLanguage, locale.default));
         }

package/src/components/theme/Navigation/Navigation.jsx

@@ -48,40 +48,42 @@ const Navigation = (props) => {
     }
     setisMobileMenuOpen(false);
   };
-
   return (
-    <nav className="navigation" id="navigation" aria-label="Site">
-      <div className="hamburger-wrapper mobile tablet only">
-        <button
-          className={cx('hamburger hamburger--spin', {
-            'is-active': isMobileMenuOpen,
-          })}
-          aria-label={
-            isMobileMenuOpen
-              ? intl.formatMessage(messages.closeMobileMenu, {
-                  type: type,
-                })
-              : intl.formatMessage(messages.openMobileMenu, {
-                  type: type,
-                })
-          }
-          title={
-            isMobileMenuOpen
-              ? intl.formatMessage(messages.closeMobileMenu, {
-                  type: type,
-                })
-              : intl.formatMessage(messages.openMobileMenu, {
-                  type: type,
-                })
-          }
-          type="button"
-          onClick={toggleMobileMenu}
-        >
-          <span className="hamburger-box">
-            <span className="hamburger-inner" />
-          </span>
-        </button>
-      </div>
+    <nav className="navigation" id="navigation" aria-label="Site" tabIndex="-1">
+      {items?.length ? (
+        <div className="hamburger-wrapper mobile tablet only">
+          <button
+            className={cx('hamburger hamburger--spin', {
+              'is-active': isMobileMenuOpen,
+            })}
+            aria-label={
+              isMobileMenuOpen
+                ? intl.formatMessage(messages.closeMobileMenu, {
+                    type: type,
+                  })
+                : intl.formatMessage(messages.openMobileMenu, {
+                    type: type,
+                  })
+            }
+            title={
+              isMobileMenuOpen
+                ? intl.formatMessage(messages.closeMobileMenu, {
+                    type: type,
+                  })
+                : intl.formatMessage(messages.openMobileMenu, {
+                    type: type,
+                  })
+            }
+            type="button"
+            onClick={toggleMobileMenu}
+          >
+            <span className="hamburger-box">
+              <span className="hamburger-inner" />
+            </span>
+          </button>
+        </div>
+      ) : null}
+
       <Menu
         stackable
         pointing

package/src/components/theme/PasswordReset/PasswordReset.jsx

@@ -12,7 +12,7 @@ import { Helmet } from '@plone/volto/helpers';
 import { Container } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Form } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { setInitialPassword } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
 

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

@@ -22,6 +22,13 @@ describe('PasswordReset', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/PasswordReset/RequestPasswordReset.jsx

@@ -5,7 +5,7 @@ import { Container } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Helmet, usePrevious } from '@plone/volto/helpers';
-import { Form } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { resetPassword } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
 

package/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx

@@ -6,6 +6,8 @@ import { MemoryRouter } from 'react-router-dom';
 
 import RequestPasswordReset from './RequestPasswordReset';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 describe('RequestPasswordReset', () => {
@@ -22,6 +24,13 @@ describe('RequestPasswordReset', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/PreviewImage/PreviewImage.jsx

@@ -11,12 +11,17 @@ function PreviewImage({ item, alt, image_field, showDefault = true, ...rest }) {
   const Image = config.getComponent({ name: 'Image' }).component;
 
   const image = (
-    <Image item={item} image_field={image_field} alt={alt} {...rest} />
+    <Image
+      item={item}
+      image_field={image_field || item.image_field}
+      alt={alt}
+      {...rest}
+    />
   );
 
   if (!image && !showDefault) return null;
 
-  if (image) {
+  if (image_field || item?.image_field) {
     return image;
   } else {
     return (

package/src/components/theme/Register/Register.jsx

@@ -12,7 +12,8 @@ import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
-import { Form, Toast } from '@plone/volto/components';
+import { Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { createUser } from '@plone/volto/actions';
 
 const messages = defineMessages({
@@ -132,7 +133,7 @@ class Register extends Component {
     this.props.createUser({
       fullname: data.fullname,
       email: data.email,
-      password: data.password,
+      sendPasswordReset: true,
     });
     this.setState({
       error: null,

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

@@ -6,6 +6,8 @@ import { MemoryRouter } from 'react-router-dom';
 
 import Register from './Register';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 describe('Register', () => {
@@ -22,6 +24,13 @@ describe('Register', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/Search/Search.jsx

@@ -10,7 +10,7 @@ import { compose } from 'redux';
 import { UniversalLink } from '@plone/volto/components';
 import { asyncConnect } from '@plone/volto/helpers';
 import { FormattedMessage } from 'react-intl';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Container, Pagination, Button, Header } from 'semantic-ui-react';
 import qs from 'query-string';
 import classNames from 'classnames';
@@ -309,15 +309,15 @@ class Search extends Component {
             </section>
           </article>
         </div>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
               inner={<span />}
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
@@ -8,9 +8,10 @@ import { __test__ as Search } from './Search';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../../manage/Toolbar/Toolbar', () =>
+  jest.fn(() => <div id="Portal" />),
+);
+
 jest.mock('./SearchTags', () => jest.fn(() => <div id="search-tags" />));
 
 describe('Search', () => {
@@ -27,15 +28,16 @@ describe('Search', () => {
     const history = {
       location: { pathname: '/blog', search: '?SearchableText=blog' },
     };
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Search history={history} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a search component', () => {
@@ -59,14 +61,15 @@ describe('Search', () => {
     const history = {
       location: { pathname: '/blog', search: '?SearchableText=blog' },
     };
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Search history={history} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -33,16 +33,16 @@ export function getSitemapPath(pathname = '', lang) {
 function Sitemap(props) {
   const {
     location: { pathname },
-    language,
+    lang,
     getNavigation,
   } = props;
 
   useEffect(() => {
     const { settings } = config;
-    const lang = settings.isMultilingual ? `${toBackendLang(language)}` : null;
-    const path = getSitemapPath(pathname, lang);
+    const language = settings.isMultilingual ? `${toBackendLang(lang)}` : null;
+    const path = getSitemapPath(pathname, language);
     getNavigation(path, 4);
-  }, [pathname, language, getNavigation]);
+  }, [pathname, lang, getNavigation]);
 
   const renderItems = (items) => {
     return (

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

@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import config from '@plone/volto/registry';
 
 import { __test__ as Sitemap, getSitemapPath } from './Sitemap';
 
@@ -55,6 +56,57 @@ describe('Sitemap', () => {
   });
 });
 
+describe('Sitemap in a multilingual site', () => {
+  beforeEach(() => {
+    config.settings.isMultilingual = true;
+    config.settings.supportedLanguages = ['en', 'es'];
+  });
+  it('renders a sitemap component', () => {
+    const store = mockStore({
+      navigation: {
+        url: 'http://localhost:8080/Plone/en/@navigation',
+        items: [
+          {
+            url: 'http://localhost:8080/Plone/en/page-1',
+            description: '',
+            items: [
+              {
+                url: 'http://localhost:8080/Plone/en/page-1/page-1-2',
+                description: '',
+                title: 'Page 1-2',
+              },
+              {
+                url: 'http://localhost:8080/Plone/en/page-1/page-1-3',
+                description: '',
+                title: 'Page 1-3',
+              },
+            ],
+            title: 'Page 1-3',
+          },
+          {
+            url: 'http://localhost:8080/Plone/en/page-2',
+            description: '',
+            title: 'Page 2',
+          },
+        ],
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Sitemap location={{ pathname: '/en/' }} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});
+
 describe('getSitemapPath', () => {
   it('accepts empty path', () => {
     expect(getSitemapPath('', null)).toBe('');

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import SlotRenderer from './SlotRenderer';
+import config from '@plone/volto/registry';
+
+describe('SlotRenderer Component', () => {
+  const RouteConditionTrue = () => () => true;
+  const RouteConditionFalse = () => () => false;
+  const ContentTypeConditionTrue = () => () => true;
+  const ContentTypeConditionFalse = () => () => false;
+
+  test('renders a SlotRenderer component for the aboveContentTitle with two slots in the root', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: (props) => <div className="slot-component-true" />,
+      predicates: [RouteConditionTrue()],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: (props) => <div className="slot-component-false" />,
+      predicates: [RouteConditionFalse(), ContentTypeConditionFalse()],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: (props) => <div className="slot-component-false" />,
+      predicates: [RouteConditionFalse()],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: (props) => (
+        <aside className="slot-component-true-predicates" />
+      ),
+      predicates: [RouteConditionTrue(), ContentTypeConditionTrue()],
+    });
+
+    const { container } = render(
+      <MemoryRouter initialEntries={[{ pathname: '/' }]}>
+        <SlotRenderer name="toolbar" content={{}} />
+      </MemoryRouter>,
+    );
+
+    const divSlot = container.querySelector('div');
+    expect(divSlot).toHaveClass('slot-component-true');
+    const asideSlot = container.querySelector('aside');
+    expect(asideSlot).toHaveClass('slot-component-true-predicates');
+  });
+});

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/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/Unauthorized/Unauthorized.jsx

@@ -1,8 +1,3 @@
-/**
- * @module components/theme/Unauthorized/Unauthorized
- */
-
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
@@ -11,11 +6,6 @@ import { useLocation } from 'react-router-dom';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
 import { getBaseUrl } from '@plone/volto/helpers';
 
-/**
- * unauthorized function.
- * @function Unauthorized
- * @returns {string} Markup of the unauthorized page.
- */
 const Unauthorized = () => {
   const error_message = useSelector((state) => state.apierror?.message);
   let location = useLocation();
@@ -32,7 +22,18 @@ const Unauthorized = () => {
           defaultMessage="You are trying to access a protected resource, please {login} first."
           values={{
             login: (
-              <Link to={`${getBaseUrl(location.pathname)}/login`}>
+              <Link
+                to={{
+                  pathname: `${getBaseUrl(location.pathname)}/login`,
+                  state: {
+                    // This is needed to cover the use case of being logged in in
+                    // another backend (eg. in development), having a token for
+                    // localhost and try to use it, the login route has to know that
+                    // it's the same as it comes from a logout
+                    isLogout: true,
+                  },
+                }}
+              >
                 <FormattedMessage id="log in" defaultMessage="log in" />
               </Link>
             ),

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/View.jsx

@@ -8,7 +8,7 @@ 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';
 
@@ -28,6 +28,7 @@ import {
 } from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
+import SlotRenderer from '../SlotRenderer/SlotRenderer';
 
 /**
  * View container class.
@@ -205,8 +206,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 +237,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 +247,7 @@ class View extends Component {
               : null
           }
         />
+        <SlotRenderer name="aboveContent" content={this.props.content} />
         <RenderedView
           key={this.props.content['@id']}
           content={this.props.content}
@@ -251,6 +255,7 @@ class View extends Component {
           token={this.props.token}
           history={this.props.history}
         />
+        <SlotRenderer name="belowContent" content={this.props.content} />
         {config.settings.showTags &&
           this.props.content.subjects &&
           this.props.content.subjects.length > 0 && (
@@ -266,11 +271,11 @@ class View extends Component {
         {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>
     );
   }