@plone/volto 19.0.0-alpha.9 → 19.1.0

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

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 
 import View from './View';
 import config from '@plone/volto/registry';
@@ -158,10 +159,12 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -181,10 +184,12 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -204,10 +209,12 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -227,10 +234,12 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -258,20 +267,24 @@ describe('View', () => {
     });
     const { rerender } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
     expect(instanceCount).toBe(1);
     store.getState().content.data['@id'] = '/b';
     rerender(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
     expect(instanceCount).toBe(2);

package/src/components/theme/Widgets/DateWidget.jsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import cx from 'classnames';
-import moment from 'moment';
 import { useSelector } from 'react-redux';
 import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
 
 const DateWidget = ({ value, children, className, format = 'll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(toBackendLang(lang));
+  const locale = toBackendLang(lang);
+  const formatted = formatDate({ date: value, format, locale });
   return value ? (
     <span className={cx(className, 'date', 'widget')}>
-      {children
-        ? children(moment(value).format(format))
-        : moment(value).format(format)}
+      {children ? children(formatted) : formatted}
     </span>
   ) : (
     ''

package/src/components/theme/Widgets/DatetimeWidget.jsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import cx from 'classnames';
-import moment from 'moment';
 import { useSelector } from 'react-redux';
 import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
 
 const DatetimeWidget = ({ value, children, className, format = 'lll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(toBackendLang(lang));
+  const locale = toBackendLang(lang);
+  const formatted = formatDate({ date: value, format, locale });
   return value ? (
     <span className={cx(className, 'datetime', 'widget')}>
-      {children
-        ? children(moment(value).format(format))
-        : moment(value).format(format)}
+      {children ? children(formatted) : formatted}
     </span>
   ) : (
     ''

package/src/components/theme/Widgets/ImageWidget.test.jsx

@@ -1,17 +1,35 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import ImageWidget from './ImageWidget';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+
+const mockStore = configureStore();
 
 describe('ImageWidget', () => {
+  const store = mockStore({
+    intl: { locale: 'en', messages: {} },
+    site: { data: { 'plone.image_scales': { preview: {}, listing: {} } } },
+  });
+
   it('renders an empty image view widget component', () => {
-    const component = renderer.create(<ImageWidget />);
+    const component = renderer.create(
+      <Provider store={store}>
+        <ImageWidget />
+      </Provider>,
+    );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
   it('renders an image view widget component', () => {
     const component = renderer.create(
-      <ImageWidget className="metadata" value={{ download: '/foo-bar.png' }} />,
+      <Provider store={store}>
+        <ImageWidget
+          className="metadata"
+          value={{ download: '/foo-bar.png' }}
+        />
+      </Provider>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
@@ -19,15 +37,17 @@ describe('ImageWidget', () => {
 
   it('renders an image view widget component with children', () => {
     const component = renderer.create(
-      <ImageWidget
-        className="metadata"
-        value={{
-          download: '/foo-bar.png',
-          file_name: 'foo-bar.png',
-        }}
-      >
-        {(child) => <strong>{child}</strong>}
-      </ImageWidget>,
+      <Provider store={store}>
+        <ImageWidget
+          className="metadata"
+          value={{
+            download: '/foo-bar.png',
+            file_name: 'foo-bar.png',
+          }}
+        >
+          {(child) => <strong>{child}</strong>}
+        </ImageWidget>
+      </Provider>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();

package/src/components/theme/Widgets/RichTextWidget.jsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 
 const RichTextWidget = ({ value, className }) =>
   value ? (
-    <p
+    <div
       className={cx(className, 'richtext', 'widget')}
       dangerouslySetInnerHTML={{
         __html: value.data,

package/src/config/Blocks.jsx

@@ -68,6 +68,7 @@ import {
 import getListingBlockAsyncData from '@plone/volto/components/manage/Blocks/Listing/getAsyncData';
 import { getImageBlockSizes } from '@plone/volto/components/manage/Blocks/Image/utils';
 import { getLeadImageBlockSizes } from '@plone/volto/components/manage/Blocks/LeadImage/utils';
+import { getTeaserBlockSizes } from '@plone/volto/components/manage/Blocks/Teaser/utils';
 
 // block sidebar schemas (not the Dexterity Layout block settings schemas)
 import ListingBlockSchema from '@plone/volto/components/manage/Blocks/Listing/schema';
@@ -351,6 +352,7 @@ const blocksConfig = {
     restricted: false,
     mostUsed: true,
     sidebarTab: 1,
+    allowedPeertubeInstances: [],
   },
   toc: {
     id: 'toc',
@@ -506,6 +508,7 @@ const blocksConfig = {
     sidebarTab: 1,
     blockSchema: TeaserSchema,
     dataAdapter: TeaserBlockDataAdapter,
+    getSizes: getTeaserBlockSizes,
     variations: [
       {
         id: 'default',

package/src/config/ControlPanels.js

@@ -19,6 +19,7 @@ import rulesSVG from '@plone/volto/icons/content-existing.svg';
 import undoControlPanelSVG from '@plone/volto/icons/undo-control-panel.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
 import relationsSVG from '@plone/volto/icons/ahead.svg';
+import contentListingSVG from '@plone/volto/icons/content-listing.svg';
 import config from '@plone/volto/registry';
 
 export const controlPanelsIcons = {
@@ -43,6 +44,7 @@ export const controlPanelsIcons = {
   undo: undoControlPanelSVG,
   aliases: linkSVG,
   relations: relationsSVG,
+  'block-types': contentListingSVG,
 };
 
 export const filterControlPanels = (controlpanels = []) => {

package/src/config/Loadables.jsx

@@ -24,9 +24,6 @@ export const loadables = {
   reactVirtualized: loadable.lib(() => import('react-virtualized'), {
     ssr: false,
   }),
-  reactSortableHOC: loadable.lib(() => import('react-sortable-hoc'), {
-    ssr: false,
-  }),
   reactSelectAsyncPaginate: loadable.lib(
     () => import('react-select-async-paginate'),
     { ssr: false },
@@ -46,11 +43,10 @@ export const loadables = {
   diffLib: loadable.lib(() => import('diff')),
   moment: loadable.lib(() => import('moment')),
   reactDates: loadable.lib(() => import('react-dates')),
-  reactDnd: loadable.lib(() => import('react-dnd')),
-  reactDndHtml5Backend: loadable.lib(() => import('react-dnd-html5-backend')),
   reactBeautifulDnd: loadable.lib(() => import('react-beautiful-dnd')),
   rrule: loadable.lib(() => import('rrule')),
   dndKitCore: loadable.lib(() => import('@dnd-kit/core')),
+  dndKitModifiers: loadable.lib(() => import('@dnd-kit/modifiers')),
   dndKitSortable: loadable.lib(() => import('@dnd-kit/sortable')),
   dndKitUtilities: loadable.lib(() => import('@dnd-kit/utilities')),
 };

package/src/config/Widgets.jsx

@@ -35,6 +35,9 @@ import {
   RecurrenceWidget,
   RadioGroupWidget,
   CheckboxGroupWidget,
+  Size,
+  BlockAlignment,
+  BlockWidth,
 } from '@plone/volto/components/manage/Widgets';
 
 import ArrayViewWidget from '@plone/volto/components/theme/Widgets/ArrayWidget';
@@ -102,6 +105,10 @@ export const widgetMapping = {
     hidden: HiddenWidget,
     radio_group: RadioGroupWidget,
     checkbox_group: CheckboxGroupWidget,
+    // SemanticUI Free widgets
+    blockAlignment: BlockAlignment,
+    blockWidth: BlockWidth,
+    size: Size,
   },
   vocabulary: {
     'plone.app.vocabularies.Catalog': ObjectBrowserWidget,

package/src/config/index.js

@@ -117,11 +117,12 @@ let config = {
     defaultPageSize: 25,
     supportedLanguages: Object.keys(languages),
     navDepth: 1,
+    siteMapDepth: 4,
     expressMiddleware: serverConfig.expressMiddleware, // BBB
     defaultBlockType: 'slate',
     verticalFormTabs: false,
     useEmailAsLogin: false,
-    persistentReducers: ['blocksClipboard'],
+    persistentReducers: ['blocksClipboard.cut', 'blocksClipboard.copy'],
     initialReducersBlacklist: [], // reducers in this list won't be hydrated in windows.__data
     asyncPropsExtenders: [getSiteAsyncPropExtender], // per route asyncConnect customizers
     contentIcons: contentIcons,
@@ -179,11 +180,19 @@ let config = {
       includeSiteTitle: false,
       titleAndSiteTitleSeparator: '-',
     },
+    layout: {
+      // used to set `sizes` for images
+      tabletBreakpoint: 768,
+      defaultContainerWidth: 1200,
+    },
   },
   experimental: {
     addBlockButton: {
       enabled: true,
     },
+    saveAsDraft: {
+      enabled: false,
+    },
   },
   widgets: {},
   views: {},

package/src/config/slots.js

@@ -1,7 +1,26 @@
+import loadable from '@loadable/component';
 import RelatedItems from '@plone/volto/components/theme/RelatedItems/RelatedItems';
 import Tags from '@plone/volto/components/theme/Tags/Tags';
+import { isCmsUi } from '@plone/volto/helpers/Url/Url';
+
+const InjectPloneComponentsCSS = loadable(
+  () =>
+    import(
+      '@plone/volto/components/theme/InjectPloneComponentsCSS/InjectPloneComponentsCSS'
+    ),
+  { fallback: null },
+);
+
+const onlyCMSUI = ({ location }) => isCmsUi(location?.pathname);
 
 const slots = {
+  aboveApp: [
+    {
+      name: 'plone-components-css',
+      component: InjectPloneComponentsCSS,
+      predicates: [onlyCMSUI],
+    },
+  ],
   belowContent: [
     {
       name: 'tags',

package/src/config/validation.ts

@@ -16,6 +16,7 @@ import {
   endEventDateRangeValidator,
   patternValidator,
   defaultLanguageControlPanelValidator,
+  sizeValidator,
 } from '@plone/volto/helpers/FormValidation/validators';
 
 const registerValidators = (config: ConfigType) => {
@@ -33,6 +34,13 @@ const registerValidators = (config: ConfigType) => {
     method: maxLengthValidator,
   });
 
+  config.registerUtility({
+    name: 'size',
+    type: 'validator',
+    dependencies: { fieldType: 'object' },
+    method: sizeValidator,
+  });
+
   config.registerUtility({
     name: 'pattern',
     type: 'validator',

package/src/constants/ActionTypes.js

@@ -148,3 +148,4 @@ export const GET_NAVROOT = 'GET_NAVROOT';
 export const SET_FORM_DATA = 'SET_FORM_DATA';
 export const SET_UI_STATE = 'SET_UI_STATE';
 export const UPDATE_UPLOADED_FILES = 'UPDATE_UPLOADED_FILES';
+export const GET_BLOCKTYPES_INDEX = 'GET_BLOCKTYPES_INDEX';

package/src/express-middleware/devproxy.js

@@ -88,11 +88,13 @@ export default function devProxyMiddleware() {
             .map((part) => '/_vh_' + part)
             .join('')
         : '';
+      const port =
+        apiPathURL.port || (apiPathURL.protocol === 'https:' ? 443 : 80);
       const target =
         config.settings.proxyRewriteTarget ||
         `/VirtualHostBase/${apiPathURL.protocol.slice(0, -1)}/${
           apiPathURL.hostname
-        }:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot${vhSubpath}`;
+        }:${port}${instancePath}/++api++/VirtualHostRoot${vhSubpath}`;
 
       return `${target}${path.replace(`${config.settings.subpathPrefix}/++api++`, '')}`;
     },

package/src/express-middleware/files.js

@@ -3,6 +3,7 @@ import { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWith
 
 const HEADERS = [
   'accept-ranges',
+  'cache-status',
   'cache-control',
   'content-disposition',
   'content-range',

package/src/express-middleware/files.test.js

@@ -0,0 +1,59 @@
+import filesMiddleware from './files';
+import { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWithAuth';
+
+vi.mock('@plone/volto/helpers/Api/APIResourceWithAuth', () => ({
+  getAPIResourceWithAuth: vi.fn(),
+}));
+
+describe('files middleware', () => {
+  it('handles requests containing @@download and forwards headers/body', async () => {
+    getAPIResourceWithAuth.mockResolvedValue({
+      headers: {
+        'content-type': 'text/plain',
+        'cache-status': 'Souin; hit; ttl=664',
+      },
+      body: 'OK',
+      get(name) {
+        return this.headers[name];
+      },
+      statusCode: 200,
+    });
+
+    const mw = filesMiddleware();
+    const layer = mw.stack.find(
+      (l) => l.regexp && l.regexp.source.includes('@@download'),
+    );
+    expect(layer).toBeTruthy();
+
+    const req = {
+      path: '/some/@@download',
+      method: 'GET',
+      app: { locals: {} },
+    };
+    const res = {
+      headers: {},
+      set(name, val) {
+        this.headers[name] = val;
+      },
+      status(code) {
+        this.statusCode = code;
+        return this;
+      },
+      send(body) {
+        this.body = body;
+      },
+    };
+
+    // invoke the middleware handler for that layer
+    layer.handle(req, res, (err) => {
+      if (err) throw err;
+    });
+
+    await new Promise(process.nextTick);
+
+    expect(res.body).toBe('OK');
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/plain');
+    expect(res.headers['cache-status']).toBe('Souin; hit; ttl=664');
+  });
+});

package/src/express-middleware/images.js

@@ -4,6 +4,7 @@ import { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWith
 const HEADERS = [
   'content-type',
   'content-disposition',
+  'cache-status',
   'cache-control',
   'x-sendfile',
   'x-accel-redirect',

package/src/express-middleware/images.test.js

@@ -0,0 +1,50 @@
+import imagesMiddleware from './images';
+import { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWithAuth';
+
+vi.mock('@plone/volto/helpers/Api/APIResourceWithAuth', () => ({
+  getAPIResourceWithAuth: vi.fn(),
+}));
+
+describe('images middleware', () => {
+  it('handles requests containing @@images and forwards headers/body', async () => {
+    getAPIResourceWithAuth.mockResolvedValue({
+      headers: {
+        'content-type': 'image/png',
+        'cache-status': 'Souin; hit; ttl=664',
+      },
+      body: 'OK',
+    });
+
+    const mw = imagesMiddleware();
+    const layer = mw.stack.find(
+      (l) => l.regexp && l.regexp.source.includes('@@images'),
+    );
+    expect(layer).toBeTruthy();
+
+    const req = {
+      path: '/some/@@images/image',
+      method: 'GET',
+      app: { locals: {} },
+    };
+    const res = {
+      headers: {},
+      set(name, val) {
+        this.headers[name] = val;
+      },
+      send(body) {
+        this.body = body;
+      },
+    };
+
+    // invoke the middleware handler for that layer
+    layer.handle(req, res, (err) => {
+      if (err) throw err;
+    });
+
+    await new Promise(process.nextTick);
+
+    expect(res.body).toBe('OK');
+    expect(res.headers['content-type']).toBe('image/png');
+    expect(res.headers['cache-status']).toBe('Souin; hit; ttl=664');
+  });
+});

package/src/helpers/Api/Api.js

@@ -102,7 +102,7 @@ class Api {
             request.attach.apply(request, attachment);
           });
 
-          request.end((err, response) => {
+          request.end((err, response = {}) => {
             if (
               checkUrl &&
               request.url &&
@@ -126,7 +126,7 @@ class Api {
             if ([301, 302].includes(err?.status)) {
               return reject({
                 code: err.status,
-                url: err.response.headers.location,
+                url: err.response?.headers?.location,
               });
             }
 

package/src/helpers/AuthToken/AuthToken.js

@@ -5,7 +5,6 @@
 
 import Cookies from 'universal-cookie';
 import jwtDecode from 'jwt-decode';
-
 import { loginRenew } from '@plone/volto/actions/userSession/userSession';
 import { getCookieOptions } from '@plone/volto/helpers/Cookies/cookies';
 import { push } from 'connected-react-router';
@@ -35,7 +34,6 @@ export function persistAuthToken(store, req) {
   } else {
     currentValue = cookies.get('auth_token');
   }
-
   /**
    * handleChange method.
    * @method handleChange
@@ -46,7 +44,6 @@ export function persistAuthToken(store, req) {
     const previousValue = currentValue;
     const state = store.getState();
     currentValue = state.userSession.token;
-
     if (
       module.hot &&
       module.hot.data &&
@@ -55,11 +52,11 @@ export function persistAuthToken(store, req) {
     ) {
       currentValue = previousValue;
     }
-
     if (previousValue !== currentValue || initial) {
       if (!currentValue) {
         if (previousValue) {
           cookies.remove('auth_token', { path: '/' });
+          cookies.remove('__ac', { path: '/' });
         }
       } else {
         if (previousValue !== currentValue) {
@@ -97,11 +94,9 @@ export function persistAuthToken(store, req) {
       }
     }
   }
-
   store.subscribe(handleChange);
   handleChange(true);
 }
-
 if (module?.hot) {
   module.hot.dispose((data) => {
     data.reloaded = true;