@plone/volto 18.0.0-alpha.3 → 18.0.0-alpha.30

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

@@ -46,6 +46,13 @@ beforeAll(() => {
         <div className="something">{JSON.stringify(props.match)}</div>
       )),
     },
+    {
+      match: '/frontpage',
+      ignore: '/frontpage/images',
+      component: jest.fn((props) => (
+        <div className="frontpage-content">{JSON.stringify(props.match)}</div>
+      )),
+    },
   ];
 });
 
@@ -85,4 +92,17 @@ describe('AppExtras', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+  it('ignore property works', () => {
+    const componentView = renderer.create(
+      <AppExtras pathname="/frontpage"></AppExtras>,
+    );
+    const componentEdit = renderer.create(
+      <AppExtras pathname="/frontpage/images"></AppExtras>,
+    );
+
+    const jsonView = componentView.toJSON();
+    expect(jsonView).toMatchSnapshot();
+    const jsonEdit = componentEdit.toJSON();
+    expect(jsonEdit).toMatchSnapshot();
+  });
 });

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

@@ -0,0 +1,24 @@
+import Avatar from './Avatar';
+
+const UserAvatar = (args) => <Avatar {...args} />;
+
+export default {
+  title: 'Avatar',
+
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+  },
+};
+
+export const Avatar3 = {
+  render: UserAvatar.bind({}),
+  name: 'Avatar',
+
+  args: {
+    title: 'Plone',
+    color: '#007eb6',
+    size: 60,
+  },
+};

package/src/components/theme/Comments/CommentEditModal.jsx

@@ -5,7 +5,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { usePrevious } from '@plone/volto/helpers';
 import { updateComment } from '@plone/volto/actions';
-import { ModalForm } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   editComment: {
@@ -60,6 +60,7 @@ const CommentEditModal = (props) => {
             text: {
               title: intl.formatMessage(messages.comment),
               type: 'string',
+              widget: 'textarea',
               description: '',
             },
           },

package/src/components/theme/Comments/CommentEditModal.test.jsx

@@ -7,9 +7,7 @@ import CommentEditModal from './CommentEditModal';
 
 const mockStore = configureStore();
 
-jest.mock('../../manage/Form/ModalForm', () =>
-  jest.fn(() => <div id="modalform" />),
-);
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('CommentEditModal', () => {
   it('renders a comment edit modal component', () => {

package/src/components/theme/Comments/Comments.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { compose } from 'redux';
 import { Button, Comment, Container, Icon } from 'semantic-ui-react';
@@ -13,7 +13,9 @@ import {
   listComments,
   listMoreComments,
 } from '@plone/volto/actions';
-import { Avatar, CommentEditModal, Form } from '@plone/volto/components';
+import { Avatar } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
+import { CommentEditModal } from '@plone/volto/components/theme/Comments';
 import {
   flattenToAppURL,
   getBaseUrl,
@@ -213,7 +215,7 @@ const Comments = (props) => {
   // recursively makes comments with their replies nested
   // each iteration will show replies to the specific comment using allCommentsWithCildren
   const commentElement = (comment) => (
-    <Comment key={comment.comment_id}>
+    <Comment key={comment.comment_id} id={comment.comment_id}>
       <Avatar
         src={flattenToAppURL(comment.author_image)}
         title={comment.author_name || 'Anonymous'}
@@ -345,7 +347,7 @@ const Comments = (props) => {
         </div>
       )}
       {/* all comments  */}
-      <Comment.Group threaded>
+      <Comment.Group threaded id={'discussion'}>
         {allPrimaryComments.map((item) => commentElement(item))}
       </Comment.Group>
 
@@ -356,19 +358,18 @@ const Comments = (props) => {
         </Button>
       )}
 
-      {replyTo && (
-        <Portal
-          node={document && document.getElementById(`reply-place-${replyTo}`)}
-        >
+      {replyTo &&
+        document &&
+        createPortal(
           <Form
             onSubmit={onSubmit}
             onCancel={onEditCancel}
             submitLabel={intl.formatMessage(messages.comment)}
             resetAfterSubmit
             schema={makeFormSchema(intl)}
-          />
-        </Portal>
-      )}
+          />,
+          document.getElementById(`reply-place-${replyTo}`),
+        )}
     </Container>
   );
 };

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

@@ -15,6 +15,8 @@ jest.mock('moment', () =>
 );
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
+jest.mock('@plone/volto/components/manage/Form');
+
 beforeAll(
   async () =>
     await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
@@ -57,6 +59,13 @@ describe('Comments', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/Comments/__mocks__/index.tsx

@@ -0,0 +1 @@
+export const CommentEditModal = () => <div id="modal" />;

package/src/components/theme/Comments/index.tsx

@@ -0,0 +1,5 @@
+import loadable from '@loadable/component';
+
+export const CommentEditModal = loadable(
+  () => import('@plone/volto/components/theme/Comments/CommentEditModal'),
+);

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
 import { render } from '@testing-library/react';
 import Component from './Component';
 import config from '@plone/volto/registry';

package/src/components/theme/ContactForm/ContactForm.jsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Container, Message, Icon } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory, useLocation } from 'react-router-dom';
@@ -7,7 +7,8 @@ import { toast } from 'react-toastify';
 
 import { emailNotification } from '@plone/volto/actions';
 import { useDispatch, useSelector } from 'react-redux';
-import { Form, Toolbar, Toast } from '@plone/volto/components';
+import { Toolbar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { getBaseUrl, Helmet, usePrevious } from '@plone/volto/helpers';
 import { useClient } from '@plone/volto/hooks';
 
@@ -149,8 +150,8 @@ const ContactFormComponent = () => {
             required: ['from', 'message'],
           }}
         />
-        {isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {isClient &&
+          createPortal(
             <Toolbar
               pathname={pathname}
               hideDefaultViewButtons
@@ -164,9 +165,9 @@ const ContactFormComponent = () => {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     </div>
   );

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

@@ -1,13 +1,15 @@
 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';
 import ContactForm from './ContactForm';
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../../manage/Toolbar/Toolbar', () =>
+  jest.fn(() => <div id="Portal" />),
+);
+
+jest.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 describe('Contact form', () => {
@@ -25,15 +27,16 @@ describe('Contact form', () => {
       userSession: {},
       content: {},
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <ContactForm />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a contact form with error message', () => {
@@ -52,14 +55,15 @@ describe('Contact form', () => {
       userSession: {},
       content: {},
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <ContactForm />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -3,7 +3,6 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import Footer from './Footer';
 
 const mockStore = configureStore();

package/src/components/theme/Image/Image.jsx

@@ -45,8 +45,10 @@ export default function Image({
     if (!image) return null;
 
     const isSvg = image['content-type'] === 'image/svg+xml';
+    // In case `base_path` is present (`preview_image_link`) use it as base path
+    const basePath = image.base_path || item['@id'];
 
-    attrs.src = `${flattenToAppURL(item['@id'])}/${image.download}`;
+    attrs.src = `${flattenToAppURL(basePath)}/${image.download}`;
     attrs.width = image.width;
     attrs.height = image.height;
     attrs.className = cx(className, { responsive });
@@ -61,7 +63,7 @@ export default function Image({
       attrs.srcSet = sortedScales
         .map(
           (scale) =>
-            `${flattenToAppURL(item['@id'])}/${scale.download} ${scale.width}w`,
+            `${flattenToAppURL(basePath)}/${scale.download} ${scale.width}w`,
         )
         .join(', ');
     }

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

@@ -113,6 +113,38 @@ test('renders an image component from a catalog brain', () => {
   expect(json).toMatchSnapshot();
 });
 
+test('renders an image component from a catalog brain using `preview_image_link`', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        '@id': 'http://localhost:3000/blog/blog-post',
+        image_field: 'preview_image_link',
+        image_scales: {
+          preview_image_link: [
+            {
+              base_path: '/image.png',
+              download: '@@images/image.png',
+              width: 400,
+              height: 400,
+              scales: {
+                preview: {
+                  download: '@@images/image-400.png',
+                  width: 400,
+                  height: 400,
+                },
+              },
+            },
+          ],
+        },
+      }}
+      imageField="preview_image_link"
+      alt="alt text"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
 test('renders an image component from a string src', () => {
   const component = renderer.create(
     <Image

package/src/components/theme/Login/Login.jsx

@@ -77,8 +77,9 @@ const Login = (props) => {
     qs.parse(props.location?.search ?? location.search).return_url ||
     location.pathname.replace(/\/login\/?$/, '').replace(/\/logout\/?$/, '') ||
     '/';
+
   useEffect(() => {
-    if (token && !props.isLogout) {
+    if (token && !(props.isLogout || location?.state?.isLogout)) {
       history.push(returnUrl || '/');
       if (toast.isActive('loggedOut')) {
         toast.dismiss('loggedOut');
@@ -108,7 +109,16 @@ const Login = (props) => {
         dispatch(resetLoginRequest());
       }
     };
-  }, [dispatch, token, error, intl, history, returnUrl, props.isLogout]);
+  }, [
+    dispatch,
+    token,
+    error,
+    intl,
+    history,
+    returnUrl,
+    props.isLogout,
+    location?.state?.isLogout,
+  ]);
 
   const onLogin = (event) => {
     dispatch(

package/src/components/theme/Logo/Logo.Multilingual.test.jsx

@@ -30,7 +30,7 @@ describe('Multilingual Logo', () => {
         },
       },
       site: {
-        data: {},
+        data: { 'plone.site_title': 'Plone Site' },
       },
     });
     const component = renderer.create(
@@ -95,6 +95,7 @@ describe('Multilingual Logo', () => {
         data: {
           'plone.site_logo':
             'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+          'plone.site_title': 'Plone Site',
         },
       },
     });
@@ -128,6 +129,7 @@ describe('Multilingual Logo', () => {
         data: {
           'plone.site_logo':
             'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+          'plone.site_title': 'Plone Site',
         },
       },
     });

package/src/components/theme/Logo/Logo.jsx

@@ -2,12 +2,12 @@
  * Logo component.
  * @module components/theme/Logo/Logo
  */
+import { defineMessages, useIntl } from 'react-intl';
 import { useEffect } from 'react';
 import { Image } from 'semantic-ui-react';
-import { ConditionalLink } from '@plone/volto/components';
 import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
 import { useSelector, useDispatch } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { getNavroot } from '@plone/volto/actions';
 import {
   flattenToAppURL,
@@ -26,6 +26,18 @@ const Logo = () => {
   const site = useSelector((state) => state.site.data);
   const navroot = useSelector((state) => state.navroot.data);
   const dispatch = useDispatch();
+  const intl = useIntl();
+
+  const messages = defineMessages({
+    home: {
+      id: 'Home',
+      defaultMessage: 'Home',
+    },
+    logoOf: {
+      id: 'Logo of',
+      defaultMessage: 'Logo of',
+    },
+  });
 
   useEffect(() => {
     if (pathname && !hasApiExpander('navroot', getBaseUrl(pathname))) {
@@ -34,26 +46,20 @@ const Logo = () => {
   }, [dispatch, pathname]);
 
   const navRootPath = flattenToAppURL(navroot?.navroot?.['@id']) || '/';
-  const currentURLIsNavRoot = pathname !== navRootPath;
 
   return (
-    <ConditionalLink
-      href={navRootPath}
-      title={navroot?.navroot?.title}
-      // In case that the content returns 404, there is no information about the portal
-      // then render the link anyways to get out of the Unauthorized page
-      condition={!navroot || currentURLIsNavRoot}
-    >
+    <Link to={navRootPath} aria-label={intl.formatMessage(messages.home)}>
       <Image
         src={
           site['plone.site_logo']
             ? flattenToAppURL(site['plone.site_logo'])
             : LogoImage
         }
-        alt={navroot?.navroot?.title}
-        title={navroot?.navroot?.title}
+        alt={
+          intl.formatMessage(messages.logoOf) + ' ' + site['plone.site_title']
+        }
       />
-    </ConditionalLink>
+    </Link>
   );
 };
 

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

@@ -31,7 +31,7 @@ describe('Logo', () => {
         },
       },
       site: {
-        data: {},
+        data: { 'plone.site_title': 'Plone Site' },
       },
     });
     const component = renderer.create(
@@ -63,6 +63,7 @@ describe('Logo', () => {
         data: {
           'plone.site_logo':
             'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+          'plone.site_title': 'Plone Site',
         },
       },
     });
@@ -101,6 +102,7 @@ describe('Logo', () => {
         data: {
           'plone.site_logo':
             'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+          'plone.site_title': 'Plone Site',
         },
       },
     });
@@ -134,6 +136,7 @@ describe('Logo', () => {
         data: {
           'plone.site_logo':
             'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+          'plone.site_title': 'Plone Site',
         },
       },
     });

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

@@ -1,8 +1,9 @@
 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-redux';
 import { IntlProvider } from 'react-intl';
+import { MemoryRouter } from 'react-router-dom';
 
 import Logout from './Logout';
 
@@ -21,14 +22,16 @@ describe('Logout', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <IntlProvider locale="en">
-          <Logout location={{ pathname: '' }} />
+          <MemoryRouter>
+            <Logout location={{ pathname: '' }} />
+          </MemoryRouter>
         </IntlProvider>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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>
+      {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';