@plone/volto 19.0.0-alpha.8 → 19.0.0

package/src/helpers/FormValidation/validators.ts

@@ -1,5 +1,6 @@
 import { validationMessage } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
+import config from '@plone/volto/registry';
 
 type MinMaxValidator = {
   value: string | number;
@@ -15,6 +16,24 @@ type Validator = {
   formatMessage: Function;
 };
 
+type Choice = {
+  token: string;
+  label: string;
+};
+type ChoiceValidator = {
+  value: string | Choice;
+  field: Record<string, any>;
+  formData: any;
+  formatMessage: Function;
+};
+
+type FileValidator = {
+  value: Record<string, any>;
+  field: Record<string, any>;
+  formData: any;
+  formatMessage: Function;
+};
+
 export const isMaxPropertyValid = ({
   value,
   fieldSpec,
@@ -134,6 +153,15 @@ export const hasUniqueItemsValidator = ({
   return !isValid ? formatMessage(messages.uniqueItems) : null;
 };
 
+const formatDateValue = (isoString: string) => {
+  const date = new Date(isoString);
+  if (isNaN(date.getTime())) return isoString;
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(date);
+};
+
 export const startEventDateRangeValidator = ({
   value,
   field,
@@ -144,7 +172,9 @@ export const startEventDateRangeValidator = ({
     value && formData.end && new Date(value) < new Date(formData.end);
   return !isValid
     ? formatMessage(messages.startEventRange, {
-        endDateValueOrEndFieldName: formData.end || 'end',
+        endDateValueOrEndFieldName: formData.end
+          ? formatDateValue(formData.end)
+          : 'end',
       })
     : null;
 };
@@ -159,7 +189,9 @@ export const endEventDateRangeValidator = ({
     value && formData.start && new Date(value) > new Date(formData.start);
   return !isValid
     ? formatMessage(messages.endEventRange, {
-        startDateValueOrStartFieldName: formData.start || 'start',
+        startDateValueOrStartFieldName: formData.start
+          ? formatDateValue(formData.start)
+          : 'start',
       })
     : null;
 };
@@ -211,12 +243,26 @@ export const defaultLanguageControlPanelValidator = ({
   value,
   formData,
   formatMessage,
-}: Validator) => {
+}: ChoiceValidator) => {
+  const token = typeof value === 'object' ? value.token : value;
   const isValid =
-    value &&
+    token &&
     (formData.available_languages.find(
-      (lang: { token: string }) => lang.token === value,
+      (lang: { token: string }) => lang.token === token,
     ) ||
-      formData.available_languages.includes(value));
+      formData.available_languages.includes(token));
   return !isValid ? formatMessage(messages.defaultLanguage) : null;
 };
+
+export const sizeValidator = ({
+  value,
+  field,
+  formatMessage,
+}: FileValidator) => {
+  const maxSize = field.size
+    ? parseInt(field.size, 10)
+    : config.settings.maxFileUploadSize;
+  return maxSize && value.size > maxSize
+    ? formatMessage(messages.maxSize, { maxSize, size: value.size })
+    : null;
+};

package/src/helpers/Html/Html.jsx

@@ -9,6 +9,7 @@ import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import serialize from 'serialize-javascript';
 import join from 'lodash/join';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
+import { addSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 import { runtimeConfig } from '@plone/volto/runtime_config';
 import config from '@plone/volto/registry';
 
@@ -126,14 +127,22 @@ class Html extends Component {
             }}
           />
 
-          <link rel="icon" href="/favicon.ico" sizes="any" />
-          <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+          <link
+            rel="icon"
+            href={addSubpathPrefix('/favicon.ico')}
+            sizes="any"
+          />
+          <link
+            rel="icon"
+            href={addSubpathPrefix('/icon.svg')}
+            type="image/svg+xml"
+          />
           <link
             rel="apple-touch-icon"
             sizes="180x180"
-            href="/apple-touch-icon.png"
+            href={addSubpathPrefix('/apple-touch-icon.png')}
           />
-          <link rel="manifest" href="/site.webmanifest" />
+          <link rel="manifest" href={addSubpathPrefix('/site.webmanifest')} />
           <meta name="generator" content="Plone 6 - https://plone.org" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="mobile-web-app-capable" content="yes" />

package/src/helpers/I18n/I18n.test.ts

@@ -0,0 +1,44 @@
+import { createIntl, createIntlCache } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+import { formatMessageWithFallback } from './I18n';
+
+const buildIntl = (
+  locale: string,
+  messages: Record<string, string>,
+): IntlShape => createIntl({ locale, messages }, createIntlCache());
+
+describe('formatMessageWithFallback', () => {
+  it('returns the translated string when the locale catalog has an entry', () => {
+    const intl = buildIntl('pt-BR', { Image: 'Imagem' });
+    expect(formatMessageWithFallback(intl, 'Image')).toBe('Imagem');
+  });
+
+  it('falls back to the input message when no translation is registered', () => {
+    const intl = buildIntl('pt-BR', {});
+    expect(formatMessageWithFallback(intl, 'Image')).toBe('Image');
+  });
+
+  it('returns undefined unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, undefined)).toBeUndefined();
+  });
+
+  it('returns null unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, null)).toBeNull();
+  });
+
+  it('returns an empty string unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, '')).toBe('');
+  });
+
+  it('does not call intl.formatMessage when the message is falsy', () => {
+    const intl = buildIntl('en', {});
+    const spy = vi.spyOn(intl, 'formatMessage');
+    formatMessageWithFallback(intl, undefined);
+    formatMessageWithFallback(intl, null);
+    formatMessageWithFallback(intl, '');
+    expect(spy).not.toHaveBeenCalled();
+  });
+});

package/src/helpers/I18n/I18n.ts

@@ -0,0 +1,31 @@
+/**
+ * I18n helpers.
+ * @module helpers/I18n/I18n
+ */
+
+import type { IntlShape } from 'react-intl';
+
+/**
+ * Format a `react-intl` message using a plain string as both the id and the
+ * default fallback. Useful when a UI value (e.g. a block title configured as
+ * a plain string) should be looked up in the locale catalog when available,
+ * and rendered as-is otherwise.
+ *
+ * Returns the input untouched when it is falsy, so the result can be used
+ * directly in `||` fallback chains.
+ *
+ * @param intl react-intl `intl` instance, typically from `useIntl()`.
+ * @param message The string to translate; used as both `id` and
+ *   `defaultMessage`.
+ * @returns Translated text, or `message` unchanged if falsy / no translation.
+ */
+export function formatMessageWithFallback<T extends string | undefined | null>(
+  intl: IntlShape,
+  message: T,
+): T extends string ? string : T {
+  if (!message) return message as T extends string ? string : T;
+  return intl.formatMessage({
+    id: message,
+    defaultMessage: message,
+  }) as T extends string ? string : T;
+}

package/src/helpers/Loadable/__mocks__/Loadable.jsx

@@ -1,19 +1,4 @@
-/* TODO: When the Volto Team removes Jest configuration support from Volto core, update this file with the Vitest version of the mock.
-Then, in the tests, we need to replace:
-
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
-with the following:
-
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
-
-Finally, remove this comment.
-*/
-
+import React from 'react';
 import config from '@plone/volto/registry';
 const loadables = config.settings.loadables;
 
@@ -33,21 +18,21 @@ export const __setLoadables = async () => {
 };
 
 // TODO: filter mockAllLoadables
-export const injectLazyLibs = jest.fn().mockImplementation(function ([
+export const injectLazyLibs = vi.fn().mockImplementation(function ([
   libraries,
 ]) {
-  return jest.fn((WrappedComponent) =>
-    jest.fn((props) => {
+  return vi.fn((WrappedComponent) =>
+    vi.fn((props) => {
       return <WrappedComponent {...props} {...mockAllLoadables} />;
     }),
   );
 });
 
-export const preloadLazyLibs = jest.fn().mockImplementation(function ([
+export const preloadLazyLibs = vi.fn().mockImplementation(function ([
   libraries,
 ]) {
-  return jest.fn((WrappedComponent) =>
-    jest.fn((props) => {
+  return vi.fn((WrappedComponent) =>
+    vi.fn((props) => {
       return <WrappedComponent {...props} />;
     }),
   );

package/src/helpers/MessageLabels/MessageLabels.js

@@ -25,6 +25,11 @@ export const messages = defineMessages({
     id: 'Maximum value is {len}.',
     defaultMessage: 'Maximum value is {len}.',
   },
+  maxSize: {
+    id: 'Maximum file size is {maxSize} bytes, but the uploaded file is {size} bytes.',
+    defaultMessage:
+      'Maximum file size is {maxSize} bytes, but the uploaded file is {size} bytes.',
+  },
   uniqueItems: {
     id: 'Items must be unique.',
     defaultMessage: 'Items must be unique.',

package/src/helpers/Robots/Robots.js

@@ -24,7 +24,7 @@ export const generateRobots = (req) =>
       request.set('Authorization', `Bearer ${authToken}`);
     }
     request.use(addHeadersFactory(req));
-    request.end((error, { text, body }) => {
+    request.end((error, { text, body } = {}) => {
       if (error) {
         resolve(text || error);
       } else {

package/src/helpers/Robots/Robots.test.js

@@ -0,0 +1,34 @@
+import { generateRobots } from './Robots';
+
+const request = {
+  set: vi.fn(() => request),
+  use: vi.fn(() => request),
+  end: vi.fn(),
+};
+
+vi.mock('superagent', () => ({
+  default: {
+    get: vi.fn(() => request),
+  },
+}));
+
+vi.mock('@plone/volto/helpers/Proxy/Proxy', () => ({
+  addHeadersFactory: vi.fn(() => vi.fn()),
+}));
+
+describe('generateRobots', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('resolves the original error when superagent does not provide a response', async () => {
+    const error = new Error('network error');
+    request.end.mockImplementationOnce((callback) => callback(error));
+
+    await expect(
+      generateRobots({
+        universalCookies: { get: vi.fn(() => null) },
+      }),
+    ).resolves.toBe(error);
+  });
+});

package/src/helpers/Sitemap/Sitemap.js

@@ -22,10 +22,10 @@ export const SITEMAP_BATCH_SIZE = 5000;
 export const generateSitemap = (_req, start = 0, size = undefined) =>
   new Promise((resolve) => {
     const { settings } = config;
-    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
     const apiPath = settings.internalApiPath ?? settings.apiPath;
     const request = superagent.get(
-      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_start=${start}&b_size=${
+      `${apiPath}${apiSuffix}/@search?metadata_fields=modified&b_start=${start}&b_size=${
         size !== undefined ? size : 100000000
       }&use_site_search_settings=1`,
     );
@@ -64,10 +64,10 @@ export const generateSitemap = (_req, start = 0, size = undefined) =>
 export const generateSitemapIndex = (_req, gzip = false) =>
   new Promise((resolve) => {
     const { settings } = config;
-    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
     const apiPath = settings.internalApiPath ?? settings.apiPath;
     const request = superagent.get(
-      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_size=0&use_site_search_settings=1`,
+      `${apiPath}${apiSuffix}/@search?metadata_fields=modified&b_size=0&use_site_search_settings=1`,
     );
     request.set('Accept', 'application/json');
     const authToken = _req.universalCookies.get('auth_token');

package/src/helpers/Url/Url.js

@@ -193,7 +193,7 @@ export function addAppURL(url) {
  */
 export function expandToBackendURL(path) {
   const { settings } = config;
-  const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+  const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
   let adjustedPath;
   if (path.startsWith('http://') || path.startsWith('https://')) {
     // flattenToAppURL first if we get a full URL
@@ -210,7 +210,7 @@ export function expandToBackendURL(path) {
     apiPath = settings.apiPath;
   }
 
-  return `${apiPath}${APISUFIX}${adjustedPath}`;
+  return `${apiPath}${apiSuffix}${adjustedPath}`;
 }
 
 /**
@@ -258,6 +258,36 @@ export function isUrl(url) {
   return urlRegex().test(url);
 }
 
+/**
+ * Add subpath path if set in settings
+ * @method addSubpathPrefix
+ * @param {string} src pathname
+ * @returns {string} prefixed subpath pathname
+ */
+export function addSubpathPrefix(src) {
+  let url = src;
+  const { subpathPrefix } = config.settings;
+  if (isInternalURL(src) && subpathPrefix && !src.startsWith(subpathPrefix)) {
+    url = subpathPrefix + src; //add subpathPrefix to src if it's an internal url and not a static resource.
+  }
+  return url;
+}
+
+/**
+ * strip subpath path particulary from api calls
+ * @method stripSubpathPrefix
+ * @param {string} src pathname
+ * @returns {string} pathname
+ */
+export function stripSubpathPrefix(src) {
+  let url = src;
+  const { subpathPrefix } = config.settings;
+  if (subpathPrefix && src.match(new RegExp(`^${subpathPrefix}(/|$)`))) {
+    url = src.slice(subpathPrefix.length);
+  }
+  return url;
+}
+
 /**
  * Get field url
  * @method getFieldURL
@@ -381,6 +411,7 @@ export function flattenScales(path, image) {
   const basePath = image.base_path || path;
   const imageInfo = {
     ...image,
+    scales: image.scales || {},
     download: flattenToAppURL(removeObjectIdFromURL(basePath, image.download)),
   };
 

package/src/helpers/Url/Url.test.js

@@ -19,6 +19,8 @@ import {
   normaliseMail,
   normalizeTelephone,
   flattenScales,
+  addSubpathPrefix,
+  stripSubpathPrefix,
 } from './Url';
 
 beforeEach(() => {
@@ -533,4 +535,64 @@ describe('Url', () => {
       });
     });
   });
+
+  describe('Subpath tests', () => {
+    beforeEach(() => {
+      settings.subpathPrefix = '/site';
+    });
+    describe('addSubpathPrefix', () => {
+      it('adds subpath prefix to internal URLs', () => {
+        expect(addSubpathPrefix('/some-page')).toBe('/site/some-page');
+        expect(addSubpathPrefix('/news/article')).toBe('/site/news/article');
+      });
+
+      it('does not add subpath prefix to URLs that already have it', () => {
+        expect(addSubpathPrefix('/site/some-page')).toBe('/site/some-page');
+      });
+
+      it('does not add subpath prefix to external URLs', () => {
+        expect(addSubpathPrefix('https://example.com/page')).toBe(
+          'https://example.com/page',
+        );
+      });
+
+      it('handles empty subpath prefix', () => {
+        settings.subpathPrefix = '';
+        expect(addSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+
+      it('handles undefined subpath prefix', () => {
+        settings.subpathPrefix = undefined;
+        expect(addSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+    });
+
+    describe('stripSubpathPrefix', () => {
+      beforeEach(() => {
+        settings.subpathPrefix = '/site';
+      });
+      it('removes subpath prefix from URLs that have it', () => {
+        expect(stripSubpathPrefix('/site/some-page')).toBe('/some-page');
+        expect(stripSubpathPrefix('/site/news/article')).toBe('/news/article');
+      });
+
+      it('leaves URLs unchanged if they do not have the prefix', () => {
+        expect(stripSubpathPrefix('/other/some-page')).toBe('/other/some-page');
+      });
+
+      it('handles the case where URL is exactly the subpath prefix', () => {
+        expect(stripSubpathPrefix('/site')).toBe('');
+      });
+
+      it('handles empty subpath prefix', () => {
+        settings.subpathPrefix = '';
+        expect(stripSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+
+      it('handles undefined subpath prefix', () => {
+        settings.subpathPrefix = undefined;
+        expect(stripSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+    });
+  });
 });

package/src/helpers/Utils/Date.js

@@ -5,6 +5,21 @@ const DAY = HOUR * 24;
 const MONTH = DAY * 30;
 const YEAR = DAY * 365; // ? is this safe or should it be more accurate
 
+// moment-style format tokens → Intl.DateTimeFormat options (for backward compat)
+const MOMENT_FORMAT_MAP = {
+  ll: { year: 'numeric', month: 'short', day: 'numeric' },
+  lll: {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  },
+  LLLL: { dateStyle: 'full', timeStyle: 'short' },
+  L: { year: 'numeric', month: '2-digit', day: '2-digit' },
+  LT: { timeStyle: 'short' },
+};
+
 export const short_date_format = {
   // 12/9/2021
   year: 'numeric',
@@ -32,13 +47,23 @@ export const toDate = (d) =>
  */
 export function formatDate({
   date, // Date() or  '2022-01-03T19:26:08.999Z'
-  format, // format object, see https://tc39.es/ecma402/#datetimeformat-objects
+  format, // format object (Intl.DateTimeFormat options) or moment-style token string (e.g. 'll', 'lll', 'LLLL', 'L', 'LT')
   locale = 'en',
   long, // true if format should be in long readable form.
   includeTime, // true if short date format should include time
   formatToParts = false,
 }) {
   date = toDate(date);
+  // Resolve moment-style token strings to Intl format options
+  if (typeof format === 'string') {
+    if (process.env.NODE_ENV !== 'production' && !MOMENT_FORMAT_MAP[format]) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[formatDate] Unknown format token "${format}". Supported tokens: ${Object.keys(MOMENT_FORMAT_MAP).join(', ')}. Falling back to short_date_format.`,
+      );
+    }
+    format = MOMENT_FORMAT_MAP[format] || short_date_format;
+  }
   format = format
     ? format
     : long && !includeTime