@plone/volto 19.0.0-alpha.0 → 19.0.0-alpha.10

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

@@ -6,7 +6,11 @@ import { MemoryRouter } from 'react-router-dom';
 
 import Register from './Register';
 
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 const mockStore = configureStore();
 

package/src/components/theme/RequestTimeout/RequestTimeout.jsx

@@ -29,7 +29,7 @@ const RequestTimeout = () => (
         <h1 style={{ textAlign: 'center', lineHeight: '40px' }}>
           <FormattedMessage
             id="No connection to the server"
-            defaultMessage="There is no connection to the server, due to a timeout o no network connection."
+            defaultMessage="There is no connection to the server, due to a timeout or no network connection."
           />
           <br />
           <a href={config.settings.apiPath}>{config.settings.apiPath}</a>

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

@@ -8,11 +8,13 @@ import { __test__ as Search } from './Search';
 
 const mockStore = configureStore();
 
-jest.mock('../../manage/Toolbar/Toolbar', () =>
-  jest.fn(() => <div id="Portal" />),
-);
+vi.mock('../../manage/Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('./SearchTags', () => jest.fn(() => <div id="search-tags" />));
+vi.mock('./SearchTags', () => ({
+  default: vi.fn(() => <div id="search-tags" />),
+}));
 
 describe('Search', () => {
   it('renders an empty search component', () => {

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -36,14 +36,14 @@ function Sitemap(props) {
     location: { pathname },
     lang,
     getNavigation,
+    isMultilingual,
   } = props;
 
   useEffect(() => {
-    const { settings } = config;
-    const language = settings.isMultilingual ? `${toBackendLang(lang)}` : null;
+    const language = isMultilingual ? `${toBackendLang(lang)}` : null;
     const path = getSitemapPath(pathname, language);
     getNavigation(path, 4);
-  }, [pathname, lang, getNavigation]);
+  }, [pathname, lang, getNavigation, isMultilingual]);
 
   const renderItems = (items) => {
     return (
@@ -100,6 +100,7 @@ export default compose(
     (state) => ({
       items: state.navigation.items,
       lang: state.intl.locale,
+      isMultilingual: state.site.data.features?.multilingual,
     }),
     { getNavigation },
   ),
@@ -108,10 +109,10 @@ export default compose(
       key: 'navigation',
       promise: ({ location, store: { dispatch, getState } }) => {
         if (!__SERVER__) return;
-        const { settings } = config;
+        const state = getState();
         const path = getSitemapPath(
           location.pathname,
-          settings.isMultilingual
+          state.site.data.features?.multilingual
             ? toBackendLang(getState().intl.locale)
             : null,
         );

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

@@ -58,7 +58,6 @@ describe('Sitemap', () => {
 
 describe('Sitemap in a multilingual site', () => {
   beforeEach(() => {
-    config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es'];
   });
   it('renders a sitemap component', () => {

package/src/components/theme/TsTest/TsTest.test.tsx

@@ -1,6 +1,5 @@
 import renderer from 'react-test-renderer';
 import TsTest from './TsTest';
-import { expect } from '@jest/globals';
 
 describe('Ts test component', () => {
   test('Renders', () => {

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

@@ -5,11 +5,18 @@ import { When } from './EventDatesInfo';
 import configureStore from 'redux-mock-store';
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
 const store = mockStore({
   intl: {

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

@@ -14,11 +14,18 @@ const store = mockStore({
   },
 });
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
 const { settings } = config;
 

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

@@ -7,6 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { FormattedMessage } from 'react-intl';
 import config from '@plone/volto/registry';
 
 /**
@@ -30,7 +31,14 @@ const FileView = ({ content }) => {
       )}
       {content.file?.download && (
         <a href={flattenToAppURL(content.file.download)}>
-          {content.file.filename}
+          {content.file.filename ? (
+            content.file.filename
+          ) : (
+            <FormattedMessage
+              id="Download file"
+              defaultMessage="Download file"
+            />
+          )}
         </a>
       )}
     </Container>

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

@@ -29,12 +29,14 @@ describe('ListingView', () => {
                   description: 'My item description',
                   url: '/item',
                   '@type': 'Document',
+                  '@id': 'item1',
                 },
                 {
                   title: 'Second item',
                   description: 'My second item description',
                   url: '/item2',
                   '@type': 'Document',
+                  '@id': 'item2',
                 },
               ],
             }}

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

@@ -7,6 +7,16 @@ import { MemoryRouter } from 'react-router-dom';
 import SummaryView from './SummaryView';
 
 const mockStore = configureStore();
+vi.mock('@plone/volto/components/manage/UniversalLink/UniversalLink', () => ({
+  default: vi.fn(({ item, ...props }) => {
+    // Ensure @id is always present
+    const safeItem = {
+      ...item,
+      '@id': item['@id'] || item.url || '/default-link',
+    };
+    return <div data-testid="universal-link">{safeItem.title}</div>;
+  }),
+}));
 
 describe('TabularView', () => {
   it('renders a summary view component', () => {

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

@@ -28,6 +28,7 @@ describe('TabularView', () => {
                   title: 'My item',
                   description: 'My item description',
                   url: '/item',
+                  '@id': '/item',
                 },
               ],
             }}

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

@@ -246,7 +246,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/View/View.test.jsx

@@ -26,18 +26,25 @@ global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
 
 const mockStore = configureStore();
 
-jest.mock('../../manage/Toolbar/Toolbar', () =>
-  jest.fn(() => <div id="Portal" />),
-);
+vi.mock('../../manage/Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('../Comments/Comments', () => jest.fn(() => <div id="Comments" />));
-jest.mock('../Tags/Tags', () => jest.fn(() => <div id="Tags" />));
-jest.mock('../SlotRenderer/SlotRenderer', () =>
-  jest.fn(() => <div id="SlotRenderer" />),
-);
-jest.mock('../ContentMetadataTags/ContentMetadataTags', () =>
-  jest.fn(() => <div id="ContentMetadataTags" />),
-);
+vi.mock('../Comments/Comments', () => ({
+  default: vi.fn(() => <div id="Comments" />),
+}));
+
+vi.mock('../Tags/Tags', () => ({
+  default: vi.fn(() => <div id="Tags" />),
+}));
+
+vi.mock('../SlotRenderer/SlotRenderer', () => ({
+  default: vi.fn(() => <div id="SlotRenderer" />),
+}));
+
+vi.mock('../ContentMetadataTags/ContentMetadataTags', () => ({
+  default: vi.fn(() => <div id="ContentMetadataTags" />),
+}));
 
 const actions = {
   document_actions: [],
@@ -151,8 +158,10 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <View location={{ pathname: '/test' }} />
-        <div id="toolbar"></div>
+        <>
+          <View location={{ pathname: '/test' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 
@@ -172,8 +181,10 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <View location={{ pathname: '/test' }} />
-        <div id="toolbar"></div>
+        <>
+          <View location={{ pathname: '/test' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 
@@ -193,8 +204,10 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <View location={{ pathname: '/test' }} />
-        <div id="toolbar"></div>
+        <>
+          <View location={{ pathname: '/test' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 
@@ -214,8 +227,10 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <View location={{ pathname: '/test' }} />
-        <div id="toolbar"></div>
+        <>
+          <View location={{ pathname: '/test' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 
@@ -243,16 +258,20 @@ describe('View', () => {
     });
     const { rerender } = render(
       <Provider store={store}>
-        <View location={{ pathname: '/a' }} />
-        <div id="toolbar"></div>
+        <>
+          <View location={{ pathname: '/test' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
     expect(instanceCount).toBe(1);
     store.getState().content.data['@id'] = '/b';
     rerender(
       <Provider store={store}>
-        <View location={{ pathname: '/b' }} />
-        <div id="toolbar"></div>
+        <>
+          <View location={{ pathname: '/test' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
     expect(instanceCount).toBe(2);

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/config/ControlPanels.js

@@ -77,6 +77,7 @@ export const unwantedControlPanelsFields = {
     'exposeDCMetaTags',
     'enable_sitemap',
     'webstats_js',
+    'webstats_head_js',
   ],
   editing: ['available_editors', 'default_editor', 'ext_editor'],
   imaging: [

package/src/config/index.js

@@ -25,13 +25,11 @@ import { installDefaultBlocks } from './Blocks';
 import { getSiteAsyncPropExtender } from '@plone/volto/helpers/Site';
 import { registerValidators } from './validation';
 
+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);
@@ -44,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__
@@ -63,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.
@@ -97,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,
@@ -111,9 +115,7 @@ let config = {
     openExternalLinkInNewTab: false,
     notSupportedBrowsers: ['ie'],
     defaultPageSize: 25,
-    isMultilingual: false,
-    supportedLanguages: ['en'],
-    defaultLanguage: process.env.SITE_DEFAULT_LANGUAGE || 'en',
+    supportedLanguages: Object.keys(languages),
     navDepth: 1,
     expressMiddleware: serverConfig.expressMiddleware, // BBB
     defaultBlockType: 'slate',
@@ -141,7 +143,7 @@ let config = {
     serverConfig,
     storeExtenders: [],
     showTags: true,
-    showRelatedItems: false,
+    showRelatedItems: true,
     controlpanels: [],
     controlPanelsIcons,
     filterControlPanels,
@@ -198,7 +200,8 @@ config.settings.apiExpanders = [
   ...config.settings.apiExpanders,
   {
     match: '',
-    GET_CONTENT: ['breadcrumbs', 'actions', 'types', 'navroot'],
+    GET_CONTENT: ['breadcrumbs', 'actions', 'types', 'navroot', 'translations'],
+    // Note: translations is removed in the API middleware if the site is not multilingual.
   },
   {
     match: '',
@@ -232,16 +235,6 @@ Object.entries(slots).forEach(([slotName, components]) => {
   });
 });
 
-// Make sure that process.env.SITE_DEFAULT_LANGUAGE is set in availableLanguages
-if (
-  process.env.SITE_DEFAULT_LANGUAGE &&
-  !config.settings.supportedLanguages.includes(
-    process.env.SITE_DEFAULT_LANGUAGE,
-  )
-) {
-  config.settings.supportedLanguages.push(process.env.SITE_DEFAULT_LANGUAGE);
-}
-
 registerValidators(ConfigRegistry);
 installDefaultComponents(ConfigRegistry);
 installDefaultWidgets(ConfigRegistry);

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/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,24 @@ 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 target =
         config.settings.proxyRewriteTarget ||
         `/VirtualHostBase/${apiPathURL.protocol.slice(0, -1)}/${
           apiPathURL.hostname
-        }:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`;
+        }:${apiPathURL.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/helpers/Api/APIResourceWithAuth.js

@@ -6,6 +6,7 @@
 import superagent from 'superagent';
 import config from '@plone/volto/registry';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
+import { stripSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 
 /**
  * Get a resource image/file with authenticated (if token exist) API headers
@@ -16,9 +17,9 @@ import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
 export const getAPIResourceWithAuth = (req) =>
   new Promise((resolve, reject) => {
     const { settings } = config;
-    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
-
+    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
     let apiPath = '';
+
     if (settings.internalApiPath && __SERVER__) {
       apiPath = settings.internalApiPath;
     } else if (__DEVELOPMENT__ && settings.devProxyToApiPath) {
@@ -26,8 +27,12 @@ export const getAPIResourceWithAuth = (req) =>
     } else {
       apiPath = settings.apiPath;
     }
+
+    //strip subpath if any
+    const contentPath = stripSubpathPrefix(req.path);
+
     const request = superagent
-      .get(`${apiPath}${__DEVELOPMENT__ ? '' : APISUFIX}${req.path}`)
+      .get(`${apiPath}${__DEVELOPMENT__ ? '' : apiSuffix}${contentPath}`)
       .maxResponseSize(settings.maxResponseSize)
       .responseType('blob');
     const authToken = req.universalCookies.get('auth_token');

package/src/helpers/Api/Api.js

@@ -7,7 +7,10 @@ import superagent from 'superagent';
 import Cookies from 'universal-cookie';
 import config from '@plone/volto/registry';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
-import { stripQuerystring } from '@plone/volto/helpers/Url/Url';
+import {
+  stripQuerystring,
+  stripSubpathPrefix,
+} from '@plone/volto/helpers/Url/Url';
 
 const methods = ['get', 'post', 'put', 'patch', 'del'];
 
@@ -19,11 +22,10 @@ const methods = ['get', 'post', 'put', 'patch', 'del'];
  */
 export function formatUrl(path) {
   const { settings } = config;
-  const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+  const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
 
   if (path.startsWith('http://') || path.startsWith('https://')) return path;
 
-  const adjustedPath = path[0] !== '/' ? `/${path}` : path;
   let apiPath = '';
   if (settings.internalApiPath && __SERVER__) {
     apiPath = settings.internalApiPath;
@@ -31,7 +33,8 @@ export function formatUrl(path) {
     apiPath = settings.apiPath;
   }
 
-  return `${apiPath}${APISUFIX}${adjustedPath}`;
+  const contentPath = stripSubpathPrefix(path[0] !== '/' ? `/${path}` : path);
+  return `${apiPath}${apiSuffix}${contentPath}`;
 }
 
 /**

package/src/helpers/Api/Api.plone.rest.test.js

@@ -1,15 +1,17 @@
 import config from '@plone/volto/registry';
 import Api from './Api';
 
-jest.mock('superagent', () => ({
-  get: jest.fn((url) => ({
-    url,
-    query: jest.fn(),
-    set: jest.fn(),
-    type: jest.fn(),
-    send: jest.fn(),
-    end: jest.fn(),
-  })),
+vi.mock('superagent', () => ({
+  default: {
+    get: vi.fn((url) => ({
+      url,
+      query: vi.fn(),
+      set: vi.fn(),
+      type: vi.fn(),
+      send: vi.fn(),
+      end: vi.fn(),
+    })),
+  },
 }));
 
 beforeAll(() => {