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

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

@@ -90,14 +90,14 @@ test('Provides path to blocks', () => {
   expect(container).toMatchSnapshot();
 });
 
-test('Renders invalid blocks', () => {
+test('Filters out invalid blocks', () => {
   const store = mockStore({
     intl: {
       locale: 'en',
       messages: {},
     },
   });
-  const { queryAllByText } = render(
+  const { queryAllByText, queryByText } = render(
     <Provider store={store}>
       <RenderBlocks
         blocksConfig={{
@@ -113,7 +113,14 @@ test('Renders invalid blocks', () => {
         }}
         content={{
           blocks_layout: {
-            items: ['MISSING-YOU-1', 'a', 'MISSING-YOU-2'],
+            items: [
+              'MISSING-YOU-1',
+              'a',
+              'MISSING-YOU-2',
+              null,
+              undefined,
+              'undefined',
+            ],
           },
           blocks: {
             a: {
@@ -126,7 +133,10 @@ test('Renders invalid blocks', () => {
       />
     </Provider>,
   );
+  // Invalid blocks (missing from blocks object or invalid IDs) are filtered out and not rendered
   expect(
     queryAllByText('Invalid block - Will be removed on saving'),
-  ).toHaveLength(2);
+  ).toHaveLength(0);
+  // Only valid blocks are rendered
+  expect(queryByText('id: a - text: bar - path: /foo')).not.toBeNull();
 });

package/src/components/theme/View/SummaryView.stories.jsx

@@ -0,0 +1,71 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import SummaryViewComponent from './SummaryView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlSummaryViewComponent = injectIntl(SummaryViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlSummaryViewComponent
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  items: [
+    {
+      title: 'My item',
+      description: 'My item description',
+      url: '/item',
+      image: {
+        scales: {
+          thumb: {
+            download: 'file:///preview.jpg',
+          },
+        },
+      },
+      image_caption: 'My image caption',
+      '@type': 'News Item',
+    },
+  ],
+};
+export default {
+  title: 'Public components/View/SummaryView',
+  component: SummaryViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+
+  argTypes: {
+    title: {
+      description: 'Title of the page listed',
+    },
+    description: {
+      description: 'Description of the page',
+    },
+    items: {
+      description: 'Content in the page',
+    },
+  },
+};

package/src/components/theme/View/TabularView.stories.jsx

@@ -0,0 +1,66 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import TabularViewComponent from './TabularView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlTabularViewComponent = injectIntl(TabularViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlTabularViewComponent
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  items: [
+    {
+      title: 'My item 1',
+      description: 'My item description 1',
+      url: '/item1',
+    },
+    {
+      title: 'My item 2',
+      description: 'My item description 2',
+      url: '/item2',
+    },
+  ],
+};
+export default {
+  title: 'Public components/View/TabularView',
+  component: TabularViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: 'Title of the page listed',
+    },
+    description: {
+      description: 'Description of the page',
+    },
+    items: {
+      description: 'Row items of the page',
+    },
+  },
+};

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

@@ -222,6 +222,13 @@ class View extends Component {
       }
       return (
         <div id="view">
+          <BodyClass
+            className={
+              FoundView.displayName
+                ? `view-${this.cleanViewName(FoundView.displayName)}`
+                : null
+            }
+          />
           <FoundView {...this.props} />
         </div>
       );
@@ -246,7 +253,7 @@ class View extends Component {
         />
         <SlotRenderer name="aboveContent" content={this.props.content} />
         <RenderedView
-          key={this.props.content['@id']}
+          key={flattenToAppURL(this.props.content['@id'])}
           content={this.props.content}
           location={this.props.location}
           token={this.props.token}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const niceBytes = (bytes) => {
   bytes = Number(bytes);
@@ -18,7 +19,7 @@ const niceBytes = (bytes) => {
 const ImageWidget = ({ value, className }) =>
   value ? (
     <span className={cx(className, 'image', 'widget')}>
-      <img
+      <Image
         src={
           value.data
             ? `data:${value['content-type']};base64,${value.data}`

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/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 = []) => {
@@ -77,6 +79,7 @@ export const unwantedControlPanelsFields = {
     'exposeDCMetaTags',
     'enable_sitemap',
     'webstats_js',
+    'webstats_head_js',
   ],
   editing: ['available_editors', 'default_editor', 'ext_editor'],
   imaging: [

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

@@ -30,10 +30,6 @@ import languages from '@plone/volto/constants/Languages.cjs';
 const host = process.env.HOST || 'localhost';
 const port = process.env.PORT || '3000';
 
-const apiPath =
-  process.env.RAZZLE_API_PATH ||
-  (__DEVELOPMENT__ ? `http://${host}:${port}` : '');
-
 const getServerURL = (url) => {
   if (!url) return;
   const apiPathURL = parseUrl(url);
@@ -46,12 +42,14 @@ const getServerURL = (url) => {
 // if RAZZLE_PUBLIC_URL is present, use it
 // if in DEV, use the host/port combination by default
 // if in PROD, assume it's RAZZLE_API_PATH server name (no /api or alikes) or fallback
-// to DEV settings if RAZZLE_API_PATH is not present
+// to DEV settings if RAZZLE_API_PATH is not present.
+// Finally, add the subpath, if there is one.
 const publicURL =
-  process.env.RAZZLE_PUBLIC_URL ||
-  (__DEVELOPMENT__
-    ? `http://${host}:${port}`
-    : getServerURL(process.env.RAZZLE_API_PATH) || `http://${host}:${port}`);
+  (process.env.RAZZLE_PUBLIC_URL ||
+    (__DEVELOPMENT__
+      ? `http://${host}:${port}`
+      : getServerURL(process.env.RAZZLE_API_PATH) ||
+        `http://${host}:${port}`)) + (process.env.RAZZLE_SUBPATH_PREFIX || '');
 
 const serverConfig =
   typeof __SERVER__ !== 'undefined' && __SERVER__
@@ -65,7 +63,10 @@ let config = {
     // The URL Volto is going to be served (see sensible defaults above)
     publicURL,
     okRoute: '/ok',
-    apiPath,
+    // Base URL for API requests from the browser.
+    // If not explicitly set, use the publicURL (seamless mode) --
+    // but in that case it will be updated in server.jsx for each request.
+    apiPath: process.env.RAZZLE_API_PATH || publicURL,
     apiExpanders: [
       // Added here for documentation purposes, added at the end because it
       // depends on a value of this object.
@@ -99,6 +100,7 @@ let config = {
     // apiPath: process.env.RAZZLE_API_PATH || 'http://localhost:8081/db/web', // for guillotina
     actions_raising_api_errors: ['GET_CONTENT', 'UPDATE_CONTENT'],
     internalApiPath: process.env.RAZZLE_INTERNAL_API_PATH || undefined,
+    subpathPrefix: process.env.RAZZLE_SUBPATH_PREFIX || '',
     websockets: process.env.RAZZLE_WEBSOCKETS || false,
     // TODO: legacyTraverse to be removed when the use of the legacy traverse is deprecated.
     legacyTraverse: process.env.RAZZLE_LEGACY_TRAVERSE || false,
@@ -119,7 +121,7 @@ let config = {
     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,
@@ -141,7 +143,7 @@ let config = {
     serverConfig,
     storeExtenders: [],
     showTags: true,
-    showRelatedItems: false,
+    showRelatedItems: true,
     controlpanels: [],
     controlPanelsIcons,
     filterControlPanels,
@@ -177,6 +179,11 @@ let config = {
       includeSiteTitle: false,
       titleAndSiteTitleSeparator: '-',
     },
+    layout: {
+      // used to set `sizes` for images
+      tabletBreakpoint: 768,
+      defaultContainerWidth: 1200,
+    },
   },
   experimental: {
     addBlockButton: {

package/src/config/server.js

@@ -1,7 +1,6 @@
 import imagesMiddleware from '@plone/volto/express-middleware/images';
 import filesMiddleware from '@plone/volto/express-middleware/files';
 import robotstxtMiddleware from '@plone/volto/express-middleware/robotstxt';
-import okMiddleware from '@plone/volto/express-middleware/ok';
 import sitemapMiddleware from '@plone/volto/express-middleware/sitemap';
 import staticsMiddleware from '@plone/volto/express-middleware/static';
 import devProxyMiddleware from '@plone/volto/express-middleware/devproxy';
@@ -12,7 +11,6 @@ const settings = {
     filesMiddleware(),
     imagesMiddleware(),
     robotstxtMiddleware(),
-    okMiddleware(),
     sitemapMiddleware(),
     staticsMiddleware(),
   ],

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

@@ -10,8 +10,16 @@ import querystring from 'querystring';
 import { parse as parseUrl } from 'url';
 
 const filter = function (pathname, req) {
-  // This is the proxy to the API in case the accept header is 'application/json'
-  return config.settings.devProxyToApiPath && pathname.startsWith('/++api++');
+  // Check if pathname is defined, there are some corner cases that pathname is null
+  if (pathname) {
+    // This is the proxy to the API in case the accept header is 'application/json'
+    return (
+      config.settings.devProxyToApiPath &&
+      pathname.startsWith(`${config.settings.subpathPrefix}/++api++`)
+    );
+  } else {
+    return false;
+  }
 };
 
 let _env = null;
@@ -73,17 +81,26 @@ export default function devProxyMiddleware() {
     },
     pathRewrite: (path, req) => {
       const { apiPathURL, instancePath } = getEnv();
+      const vhSubpath = config.settings.subpathPrefix
+        ? config.settings.subpathPrefix
+            .split('/')
+            .filter(Boolean)
+            .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`;
+        }:${port}${instancePath}/++api++/VirtualHostRoot${vhSubpath}`;
 
-      return `${target}${path.replace('/++api++', '')}`;
+      return `${target}${path.replace(`${config.settings.subpathPrefix}/++api++`, '')}`;
     },
+    changeOrigin: true,
     logLevel: process.env.DEBUG_HPM ? 'debug' : 'silent',
     ...(process.env.RAZZLE_DEV_PROXY_INSECURE && {
-      changeOrigin: true,
       secure: false,
     }),
   });

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',