@plone/volto 18.0.0-alpha.8 → 18.0.0

package/src/components/theme/App/App.jsx

@@ -51,6 +51,7 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import MultilingualRedirector from '@plone/volto/components/theme/MultilingualRedirector/MultilingualRedirector';
 import WorkingCopyToastsFactory from '@plone/volto/components/manage/WorkingCopyToastsFactory/WorkingCopyToastsFactory';
 import LockingToastsFactory from '@plone/volto/components/manage/LockingToastsFactory/LockingToastsFactory';
+import RouteAnnouncer from '@plone/volto/components/theme/RouteAnnouncer/RouteAnnouncer';
 
 /**
  * @export
@@ -151,6 +152,11 @@ export class App extends Component {
             [trim(join(split(this.props.pathname, '/'), ' section-'))]:
               this.props.pathname !== '/',
             siteroot: this.props.pathname === '/',
+            [`is-adding-contenttype-${decodeURIComponent(
+              this.props.location?.search?.replace('?type=', ''),
+            )
+              .replace(' ', '')
+              .toLowerCase()}`]: this.props.location?.search,
             'is-authenticated': !!this.props.token,
             'is-anonymous': !this.props.token,
             'cms-ui': isCmsUI,
@@ -186,6 +192,7 @@ export class App extends Component {
             </main>
           </Segment>
         </MultilingualRedirector>
+        <RouteAnnouncer />
         <Footer />
         <LockingToastsFactory
           content={this.props.content}
@@ -242,6 +249,7 @@ export const fetchContent = async ({ store, location }) => {
         id,
         data,
         blocksConfig,
+        content,
       });
       if (!p?.length) {
         throw new Error(

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

@@ -1,9 +1,9 @@
+import config from '@plone/volto/registry';
 import React from 'react';
-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 renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
 
 import { __test__ as App } from './App';
 
@@ -64,5 +64,6 @@ describe('App', () => {
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
+    component.unmount();
   });
 });

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

@@ -8,6 +8,8 @@ const AppExtras = (props) => {
   const { pathname } = props;
   const active = appExtras
     .map((reg) => {
+      const ignored = matchPath(pathname, reg.ignore);
+      if (ignored) return null;
       const match = matchPath(pathname, reg.match);
       return match ? { reg, match } : null;
     })

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: {

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

@@ -42,6 +42,7 @@ const Footer = ({ intl }) => {
       textAlign="center"
       id="footer"
       aria-label="Footer"
+      tabIndex="-1"
     >
       <Container>
         <Segment basic inverted color="grey" className="discreet">

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

@@ -18,13 +18,25 @@ const FormattedDate = ({
   const language = useSelector((state) => locale || state.intl.locale);
   const toDate = (d) => (typeof d === 'string' ? new Date(d) : d);
   const args = { date, long, includeTime, format, locale: language };
+  const new_date = new Date(toDate(date));
+  // Dat check taken from https://stackoverflow.com/questions/1353684/detecting-an-invalid-date-date-instance-in-javascript#1353711
+  if (Object.prototype.toString.call(new_date) === '[object Date]') {
+    // it is a date
+    if (isNaN(new_date)) {
+      // date object is not valid
+      return <span>bad date</span>;
+    }
+  } else {
+    // not a date object
+    return <span>not a date</span>;
+  }
 
   return (
     <time
       className={className}
       dateTime={date}
       title={new Intl.DateTimeFormat(language, long_date_format)
-        .format(new Date(toDate(date)))
+        .format(new_date)
         .replace('\u202F', ' ')}
     >
       {children

package/src/components/theme/Icon/Icon.jsx

@@ -12,10 +12,10 @@ const defaultSize = '36px';
  * @function Field
  * @param {Object} props Component properties.
  * @param {string} props.name Name source object.
- * @param {string} props.size Size of the Icon (in px).
- * @param {string} props.color Color of the Icon.
- * @param {string} props.className className to add to the component.
- * @param {string} props.title Title (a11y).
+ * @param {string} [props.size] Size of the Icon (in px).
+ * @param {string} [props.color] Color of the Icon.
+ * @param {string} [props.className] className to add to the component.
+ * @param {string} [props.title] Title (a11y).
  * @returns {string} Markup of the component.
  *
  * Use:

package/src/components/theme/Icon/Icon.stories.jsx

@@ -43,6 +43,7 @@ const iconElements = Object.keys(icons).map((iconName) => {
   const icon = icons[iconName];
   return (
     <center
+      key={icons[iconName]}
       style={{
         float: 'left',
         width: '150px',

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

@@ -12,10 +12,15 @@ import {
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
 
-import { Helmet } from '@plone/volto/helpers';
+import { Helmet, usePrevious } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import { Icon } from '@plone/volto/components';
-import { login, resetLoginRequest } from '@plone/volto/actions';
+import {
+  login,
+  logout,
+  resetLoginRequest,
+  purgeMessages,
+} from '@plone/volto/actions';
 import { toast } from 'react-toastify';
 import { Toast } from '@plone/volto/components';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -75,11 +80,24 @@ const Login = (props) => {
   const loading = useSelector((state) => state.userSession.login.loading);
   const returnUrl =
     qs.parse(props.location?.search ?? location.search).return_url ||
-    location.pathname.replace(/\/login\/?$/, '').replace(/\/logout\/?$/, '') ||
+    location.pathname.replace(/\/[^/]*\/?$/, '') ||
     '/';
+  const previousToken = usePrevious(token);
 
   useEffect(() => {
-    if (token && !(props.isLogout || location?.state?.isLogout)) {
+    if (location?.state?.isLogout) {
+      // Execute a true Logout action
+      // 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
+      // See also Unauthorized.jsx
+      dispatch(logout());
+      dispatch(purgeMessages());
+      // Reset the location state
+      history.push(`${location.pathname}${location.search}`);
+    } else if (token && token !== previousToken) {
+      // We just did a true login action
       history.push(returnUrl || '/');
       if (toast.isActive('loggedOut')) {
         toast.dismiss('loggedOut');
@@ -116,8 +134,10 @@ const Login = (props) => {
     intl,
     history,
     returnUrl,
-    props.isLogout,
+    location.search,
+    location.pathname,
     location?.state?.isLogout,
+    previousToken,
   ]);
 
   const onLogin = (event) => {

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

@@ -3,7 +3,7 @@ import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
-import { Login, Toast } from '@plone/volto/components';
+import { Toast } from '@plone/volto/components';
 import { logout, purgeMessages } from '@plone/volto/actions';
 import { toast } from 'react-toastify';
 
@@ -55,7 +55,7 @@ const Logout = ({ location }) => {
     }
   }, [history, returnUrl, intl, token]);
 
-  return <Login location={{ query: location.query }} isLogout={true} />;
+  return '';
 };
 
 export default Logout;

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/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));
         }