@plone/volto 19.0.0-alpha.9 → 19.1.0

package/src/components/manage/Widgets/index.tsx

@@ -265,3 +265,24 @@ export const FormFieldWrapper = loadable(
       /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/FormFieldWrapper'
     ),
 );
+
+export const Size = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/Size'
+    ),
+);
+
+export const BlockAlignment = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/BlockAlignment'
+    ),
+);
+
+export const BlockWidth = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/BlockWidth'
+    ),
+);

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

@@ -7,17 +7,8 @@ import Workflow from './Workflow';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Widgets', async () => {
-  return await import(
-    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
-  );
-});
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/components/manage/Widgets');
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.jsx

@@ -6,6 +6,7 @@ const AlternateHrefLangs = (props) => {
   return (
     <Helmet>
       {content['@components']?.translations?.items &&
+        content.language?.token &&
         [
           ...content['@components']?.translations?.items,
           { '@id': content['@id'], language: content.language.token },

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

@@ -35,6 +35,36 @@ describe('AlternateHrefLangs', () => {
     expect(helmetLinks.length).toBe(0);
   });
 
+  it('multilingual site, content without language field, renders nothing', () => {
+    config.settings.publicURL = 'https://plone.org';
+    config.settings.supportedLanguages = ['en', 'es'];
+
+    const content = {
+      '@id': 'http://localhost:8080/Plone/en/newsroom/news',
+      '@components': {
+        translations: {
+          items: [{ '@id': 'http://localhost:8080/Plone/es', language: 'es' }],
+        },
+      },
+    };
+
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    renderer.create(
+      <Provider store={store}>
+        <AlternateHrefLangs content={content} />
+      </Provider>,
+    );
+
+    const helmetLinks = Helmet.peek().linkTags;
+    expect(helmetLinks.length).toBe(0);
+  });
+
   it('multilingual site, with some translations', () => {
     config.settings.publicURL = 'https://plone.org';
     config.settings.supportedLanguages = ['en', 'es', 'eu'];

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

@@ -45,6 +45,7 @@ import MultilingualRedirector from '@plone/volto/components/theme/MultilingualRe
 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';
+import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
 
 /**
  * @export
@@ -159,6 +160,7 @@ export class App extends Component {
             'public-ui': !isCmsUI,
           })}
         />
+        <SlotRenderer name="aboveApp" content={this.props.content} />
         <SkipLinks />
         <Header pathname={path} />
         <Breadcrumbs pathname={path} />
@@ -174,7 +176,9 @@ export class App extends Component {
             <main ref={this.mainRef}>
               <OutdatedBrowser />
               {this.props.connectionRefused ? (
-                <ConnectionRefusedView />
+                <ConnectionRefusedView
+                  staticContext={this.props.staticContext}
+                />
               ) : this.state.hasError ? (
                 <Error
                   message={this.state.error.message}

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

@@ -4,6 +4,7 @@ import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
+import { CookiesProvider } from 'react-cookie';
 
 import { __test__ as App } from './App';
 
@@ -55,16 +56,18 @@ describe('App', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter initialEntries={['/blog/edit']}>
-          <App
-            location={{ pathname: '/blog/edit' }}
-            route={{
-              routes: '',
-            }}
-          >
-            <div />
-          </App>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter initialEntries={['/blog/edit']}>
+            <App
+              location={{ pathname: '/blog/edit' }}
+              route={{
+                routes: '',
+              }}
+            >
+              <div />
+            </App>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
     const json = component.toJSON();

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

@@ -7,11 +7,7 @@ import CommentEditModal from './CommentEditModal';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 describe('CommentEditModal', () => {
   it('renders a comment edit modal component', () => {

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

@@ -19,17 +19,8 @@ vi.mock('moment', () => ({
   })),
 }));
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/components/manage/Form');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/theme/ConnectionRefused/ConnectionRefused.jsx

@@ -1,5 +1,5 @@
 /**
- * Home container.
+ * Connection refused error page.
  * @module components/theme/ConnectionRefused/ConnectionRefused
  */
 
@@ -7,6 +7,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Container } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
+import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
 
 const ConnectionRefused = () => (
   <Container
@@ -71,4 +72,4 @@ const ConnectionRefused = () => (
   </Container>
 );
 
-export default ConnectionRefused;
+export default withServerErrorCode(503)(ConnectionRefused);

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

@@ -3,17 +3,14 @@ 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 { CookiesProvider } from 'react-cookie';
 import ContactForm from './ContactForm';
 
 vi.mock('../../manage/Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 describe('Contact form', () => {
@@ -33,10 +30,12 @@ describe('Contact form', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <ContactForm />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <ContactForm />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -61,10 +60,12 @@ describe('Contact form', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <ContactForm />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <ContactForm />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { useSelector } from 'react-redux';
 import {
   flattenToAppURL,
   flattenScales,
@@ -26,6 +27,9 @@ export default function Image({
   className = '',
   ...imageProps
 }) {
+  const site = useSelector((state) => state.site?.data);
+  const siteImageScales = site?.['plone.image_scales'] || {};
+
   if (!item && !src) return null;
 
   // TypeScript hints for editor autocomplete :)
@@ -61,11 +65,16 @@ export default function Image({
     if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
       const sortedScales = Object.values({
         ...image.scales,
-        original: {
-          download: `${image.download}`,
-          width: image.width,
-          height: image.height,
-        },
+        ...(Object.keys(siteImageScales).length >
+        Object.keys(image.scales).length
+          ? {
+              original: {
+                download: `${image.download}`,
+                width: image.width,
+                height: image.height,
+              },
+            }
+          : {}),
       }).sort((a, b) => {
         if (a.width > b.width) return 1;
         else if (a.width < b.width) return -1;