@plone/volto 19.0.0-alpha.8 → 19.0.0

package/src/helpers/Utils/Date.test.js

@@ -79,6 +79,243 @@ describe('formatDate helper', () => {
       }),
     ).toBe('J 03, 2022');
   });
+
+  describe('moment-style format tokens', () => {
+    it('formats with "ll" token (short date)', () => {
+      expect(formatDate({ date, format: 'll' })).toBe('Jan 3, 2022');
+    });
+
+    it('formats with "lll" token (short date + time)', () => {
+      expect(formatDate({ date, format: 'lll' })).toBe('Jan 3, 2022, 7:26 PM');
+    });
+
+    it('formats with "LLLL" token (full date + time)', () => {
+      expect(formatDate({ date, format: 'LLLL' })).toBe(
+        'Monday, January 3, 2022 at 7:26 PM',
+      );
+    });
+
+    it('formats with "L" token (numeric short date)', () => {
+      expect(formatDate({ date, format: 'L' })).toBe('01/03/2022');
+    });
+
+    it('formats with "LT" token (time only)', () => {
+      expect(formatDate({ date, format: 'LT' })).toBe('7:26 PM');
+    });
+
+    it('moment token works with other locales', () => {
+      expect(formatDate({ date, format: 'll', locale: 'de' })).toBe(
+        '3. Jan. 2022',
+      );
+    });
+
+    it('unknown string format falls back to short_date_format', () => {
+      expect(formatDate({ date, format: 'unknown' })).toBe('1/3/2022');
+    });
+  });
+
+  describe('Italian locale (it)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'it' })).toBe('03/01/2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'it', includeTime: true })).toBe(
+        '03/01/22, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'it', long: true })).toBe(
+        'lunedì 3 gennaio 2022 alle ore 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'it' })).toBe(
+        '3 gen 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'it' })).toBe(
+        '3 gen 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'it' })).toBe(
+        'lunedì 3 gennaio 2022 alle ore 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'it' })).toBe(
+        '03/01/2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'it' })).toBe('19:26');
+    });
+  });
+
+  describe('German locale (de)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'de' })).toBe('3.1.2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'de', includeTime: true })).toBe(
+        '03.01.22, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'de', long: true })).toBe(
+        'Montag, 3. Januar 2022 um 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'de' })).toBe(
+        '3. Jan. 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'de' })).toBe(
+        '3. Jan. 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'de' })).toBe(
+        'Montag, 3. Januar 2022 um 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'de' })).toBe(
+        '03.01.2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'de' })).toBe('19:26');
+    });
+  });
+
+  describe('Brazilian Portuguese locale (pt-BR)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'pt-BR' })).toBe('03/01/2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'pt-BR', includeTime: true })).toBe(
+        '03/01/2022, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'pt-BR', long: true })).toBe(
+        'segunda-feira, 3 de janeiro de 2022 às 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'pt-BR' })).toBe(
+        '3 de jan. de 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'pt-BR' })).toBe(
+        '3 de jan. de 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'pt-BR' })).toBe(
+        'segunda-feira, 3 de janeiro de 2022 às 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'pt-BR' })).toBe(
+        '03/01/2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'pt-BR' })).toBe('19:26');
+    });
+  });
+
+  describe('Romanian locale (ro)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'ro' })).toBe('03.01.2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'ro', includeTime: true })).toBe(
+        '03.01.2022, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'ro', long: true })).toBe(
+        'luni, 3 ianuarie 2022 la 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'ro' })).toBe(
+        '3 ian. 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'ro' })).toBe(
+        '3 ian. 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'ro' })).toBe(
+        'luni, 3 ianuarie 2022 la 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'ro' })).toBe(
+        '03.01.2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'ro' })).toBe('19:26');
+    });
+  });
+
+  // moment vs Intl comparison
+  // This section documents known differences between the former moment.js output
+  // and our Intl-based formatDate implementation. Reference values are hardcoded
+  // from moment@2.29.4 to avoid a runtime dependency on the library we are removing.
+  //
+  // Tokens that match moment exactly: ll, L, LT (most locales), LLLL (pt-BR only)
+  //
+  // Known differences from moment@2.29.4:
+  //   - lll (all locales): Intl inserts a comma between date and time;
+  //     moment did not (e.g. "Jan 3, 2022, 7:26 PM" vs "Jan 3, 2022 7:26 PM")
+  //   - LLLL (en, it, de, ro): Intl inserts a locale-specific preposition before
+  //     the time; moment did not
+  //       en: "...at 7:26 PM"  vs "...7:26 PM"
+  //       it: "...alle ore 19:26" vs "...19:26"
+  //       de: "...um 19:26"      vs "...19:26"
+  //       ro: "...la 19:26"      vs "...19:26"
+  //   - ll/lll (pt-BR): Intl adds a period after abbreviated month ("jan.");
+  //     moment did not ("jan")
 });
 
 describe('formatRelativeDate helper', () => {

package/src/helpers/Utils/Utils.jsx

@@ -37,6 +37,23 @@ export const safeWrapper = (func) => (config) => {
   return res;
 };
 
+/**
+ * Extract a readable error message from several possible error shapes
+ * @param {object} error
+ * @returns {string} message
+ */
+export const getErrorMessage = (error) => {
+  const respBody = error?.response?.body;
+  if (respBody?.error?.message) return respBody.error.message;
+  if (respBody?.message) return respBody.message;
+  if (error?.message) return error.message;
+  try {
+    return JSON.stringify(error);
+  } catch (e) {
+    return String(error);
+  }
+};
+
 /**
  * A helper to pipe a configuration object through configuration loaders
  *

package/src/helpers/Utils/Utils.test.jsx

@@ -3,6 +3,7 @@ import config from '@plone/volto/registry';
 import {
   applyConfig,
   difference,
+  getErrorMessage,
   getColor,
   getInitials,
   hasApiExpander,
@@ -246,6 +247,44 @@ describe('Utils tests', () => {
     });
   });
 
+  describe('getErrorMessage', () => {
+    it('returns nested backend error message', () => {
+      const error = {
+        response: {
+          body: {
+            error: {
+              message: 'Backend nested message',
+            },
+          },
+        },
+      };
+
+      expect(getErrorMessage(error)).toEqual('Backend nested message');
+    });
+
+    it('returns body message when present', () => {
+      const error = {
+        response: {
+          body: {
+            message: 'Backend body message',
+          },
+        },
+      };
+
+      expect(getErrorMessage(error)).toEqual('Backend body message');
+    });
+
+    it('returns generic error.message fallback', () => {
+      expect(getErrorMessage(new Error('Generic message'))).toEqual(
+        'Generic message',
+      );
+    });
+
+    it('returns stringified object as final fallback', () => {
+      expect(getErrorMessage({ foo: 'bar' })).toEqual('{"foo":"bar"}');
+    });
+  });
+
   describe('safeWrapper', () => {
     it('calls the function with config', () => {
       expect(

package/src/helpers/Utils/withSaveAsDraft.jsx

@@ -9,6 +9,7 @@ import checkSVG from '@plone/volto/icons/check.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import { useIntl, defineMessages } from 'react-intl';
 import { useLocation } from 'react-router-dom';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   autoSaveFound: {
@@ -227,15 +228,38 @@ export default function withSaveAsDraft(options) {
       WrappedComponent,
     )})`;
 
-    if (forwardRef) {
-      return hoistNonReactStatics(
-        React.forwardRef((props, ref) => (
-          <WithSaveAsDraft {...props} forwardedRef={ref} />
-        )),
-        WrappedComponent,
-      );
-    }
+    const DraftWrappedComponent = forwardRef
+      ? hoistNonReactStatics(
+          React.forwardRef((props, ref) => (
+            <WithSaveAsDraft {...props} forwardedRef={ref} />
+          )),
+          WrappedComponent,
+        )
+      : hoistNonReactStatics(WithSaveAsDraft, WrappedComponent);
+
+    const WithExperimentalSaveAsDraft = forwardRef
+      ? hoistNonReactStatics(
+          React.forwardRef((props, ref) => {
+            const ComponentToRender = config.experimental?.saveAsDraft?.enabled
+              ? DraftWrappedComponent
+              : WrappedComponent;
+
+            return <ComponentToRender {...props} ref={ref} />;
+          }),
+          WrappedComponent,
+        )
+      : hoistNonReactStatics((props) => {
+          const ComponentToRender = config.experimental?.saveAsDraft?.enabled
+            ? DraftWrappedComponent
+            : WrappedComponent;
+
+          return <ComponentToRender {...props} />;
+        }, WrappedComponent);
+
+    WithExperimentalSaveAsDraft.displayName = `WithExperimentalSaveAsDraft(${getDisplayName(
+      WrappedComponent,
+    )})`;
 
-    return hoistNonReactStatics(WithSaveAsDraft, WrappedComponent);
+    return WithExperimentalSaveAsDraft;
   };
 }

package/src/helpers/index.js

@@ -112,6 +112,7 @@ export {
   normalizeString,
 } from '@plone/volto/helpers/Utils/Utils';
 export { messages } from './MessageLabels/MessageLabels';
+export { formatMessageWithFallback } from './I18n/I18n';
 export {
   withBlockSchemaEnhancer,
   withVariationSchemaEnhancer,

package/src/hooks/user/useUser.js

@@ -12,7 +12,7 @@ const useUser = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!user?.id && users?.get.loading === false) {
+    if (userId && !user?.id && users?.get.loading === false) {
       dispatch(getUser(userId));
     }
   }, [dispatch, userId, user, users?.get.loading]);

package/src/internalChecks.test.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import packageJson from '../package.json';
+
+describe('internal checks', () => {
+  it('keeps prettier listed as a runtime dependency', () => {
+    const dependencies = packageJson.dependencies ?? {};
+
+    expect(dependencies).toHaveProperty('prettier');
+    expect(typeof dependencies.prettier).toBe('string');
+  });
+});

package/src/middleware/api.js

@@ -287,9 +287,13 @@ const apiMiddlewareFactory =
               const langFileName = toGettextLang(lang);
               import(
                 /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-              ).then((locale) => {
-                dispatch(changeLanguage(lang, locale.default));
-              });
+              )
+                .then((locale) => {
+                  dispatch(changeLanguage(lang, locale.default));
+                })
+                .catch(() => {
+                  dispatch(changeLanguage(lang, {}));
+                });
             }
           }
 
@@ -341,8 +345,13 @@ const apiMiddlewareFactory =
         (error) => {
           // Make sure an error during hydration
           // (for example when serving an archived page)
-          // doesn't hide the SSR content.
-          if (isHydrating && !hasExistingError) {
+          // doesn't hide the SSR content. Only suppress GET_CONTENT failures;
+          // user-initiated actions (LOGIN, etc.) must always dispatch _FAIL so
+          // loaders stop and errors surface.
+          const shouldIgnoreHydrationError =
+            isHydrating && !hasExistingError && type === GET_CONTENT;
+
+          if (shouldIgnoreHydrationError) {
             isHydrating = false;
             return;
           }

package/src/reducers/blockTypes/blockTypes.js

@@ -0,0 +1,38 @@
+import { GET_BLOCKTYPES_INDEX } from '@plone/volto/constants/ActionTypes';
+
+const initialState = {
+  error: null,
+  items: {},
+  loaded: false,
+  loading: false,
+};
+
+export default function blockTypes(state = initialState, action = {}) {
+  switch (action.type) {
+    case `${GET_BLOCKTYPES_INDEX}_PENDING`:
+      return {
+        ...state,
+        error: null,
+        loaded: false,
+        loading: true,
+      };
+    case `${GET_BLOCKTYPES_INDEX}_SUCCESS`:
+      return {
+        ...state,
+        error: null,
+        items: action.result,
+        loaded: true,
+        loading: false,
+      };
+    case `${GET_BLOCKTYPES_INDEX}_FAIL`:
+      return {
+        ...state,
+        error: action.error,
+        items: {},
+        loaded: false,
+        loading: false,
+      };
+    default:
+      return state;
+  }
+}

package/src/reducers/content/content.js

@@ -3,11 +3,10 @@
  * @module reducers/content/content
  */
 
-import map from 'lodash/map';
-import mapKeys from 'lodash/mapKeys';
 import omit from 'lodash/omit';
 
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { flattenStaticBehaviors } from '@plone/volto/helpers/Content/Content';
 
 import {
   CREATE_CONTENT,
@@ -131,14 +130,7 @@ export default function content(state = initialState, action = {}) {
             },
           };
     case `${CREATE_CONTENT}_SUCCESS`:
-      if (result['@static_behaviors']) {
-        map(result['@static_behaviors'], (behavior) => {
-          result = {
-            ...omit(result, behavior),
-            ...mapKeys(result[behavior], (value, key) => `${behavior}.${key}`),
-          };
-        });
-      }
+      result = flattenStaticBehaviors(result);
       const data = action.subrequest
         ? Array.isArray(result)
           ? result.map((item) => ({
@@ -188,14 +180,7 @@ export default function content(state = initialState, action = {}) {
             },
           };
     case `${GET_CONTENT}_SUCCESS`:
-      if (result['@static_behaviors']) {
-        map(result['@static_behaviors'], (behavior) => {
-          result = {
-            ...omit(result, behavior),
-            ...mapKeys(result[behavior], (value, key) => `${behavior}.${key}`),
-          };
-        });
-      }
+      result = flattenStaticBehaviors(result);
 
       const transforms = config.getUtilities({
         type: 'transform',

package/src/reducers/diff/diff.js

@@ -4,6 +4,7 @@
  */
 
 import { GET_DIFF } from '@plone/volto/constants/ActionTypes';
+import { flattenStaticBehaviors } from '@plone/volto/helpers/Content/Content';
 
 const initialState = {
   error: null,
@@ -29,10 +30,13 @@ export default function diff(state = initialState, action = {}) {
         loading: true,
       };
     case `${GET_DIFF}_SUCCESS`:
+      const first_result = flattenStaticBehaviors(action.result[0]);
+      const second_result = flattenStaticBehaviors(action.result[1]);
+
       return {
         ...state,
         error: null,
-        data: action.result,
+        data: [first_result, second_result],
         loaded: true,
         loading: false,
       };

package/src/reducers/diff/diff.test.js

@@ -1,5 +1,5 @@
-import diff from './diff';
 import { GET_DIFF } from '@plone/volto/constants/ActionTypes';
+import diff from './diff';
 
 describe('Diff reducer', () => {
   it('should return the initial state', () => {
@@ -24,15 +24,71 @@ describe('Diff reducer', () => {
     });
   });
 
-  it('should handle GET_DIFF_SUCCESS', () => {
+  it('should handle GET_DIFF_SUCCESS with array result with static behaviors', () => {
+    expect(
+      diff(undefined, {
+        type: `${GET_DIFF}_SUCCESS`,
+        result: [
+          {
+            '@static_behaviors': [
+              'guillotina.behaviors.dublincore.IDublinCore',
+            ],
+            'guillotina.behaviors.dublincore.IDublinCore': {
+              title: 'test page',
+            },
+          },
+          {
+            '@static_behaviors': [
+              'guillotina.behaviors.dublincore.IDublinCore',
+            ],
+            'guillotina.behaviors.dublincore.IDublinCore': {
+              title: 'test second page',
+            },
+          },
+        ],
+      }),
+    ).toEqual({
+      error: null,
+      data: [
+        {
+          '@static_behaviors': ['guillotina.behaviors.dublincore.IDublinCore'],
+
+          'guillotina.behaviors.dublincore.IDublinCore.title': 'test page',
+        },
+        {
+          '@static_behaviors': ['guillotina.behaviors.dublincore.IDublinCore'],
+          'guillotina.behaviors.dublincore.IDublinCore.title':
+            'test second page',
+        },
+      ],
+      loaded: true,
+      loading: false,
+    });
+  });
+
+  it('should handle GET_DIFF_SUCCESS with array result without static behaviors', () => {
+    const data = [
+      {
+        title: 'test page',
+        'guillotina.behaviors.dublincore.IDublinCore': {
+          title: 'test page',
+        },
+      },
+      {
+        title: 'test second page',
+        'guillotina.behaviors.dublincore.IDublinCore': {
+          title: 'test second page',
+        },
+      },
+    ];
     expect(
       diff(undefined, {
         type: `${GET_DIFF}_SUCCESS`,
-        result: 'result',
+        result: data,
       }),
     ).toEqual({
       error: null,
-      data: 'result',
+      data: data,
       loaded: true,
       loading: false,
     });

package/src/reducers/index.js

@@ -53,6 +53,7 @@ import upgrade from './upgrade/upgrade';
 import userschema from './userschema/userschema';
 import site from './site/site';
 import navroot from './navroot/navroot';
+import blockTypes from './blockTypes/blockTypes';
 
 /**
  * Root reducer.
@@ -111,6 +112,7 @@ const reducers = {
   userschema,
   site,
   navroot,
+  blockTypes,
 };
 
 export default reducers;

package/src/reducers/querystring/querystring.js

@@ -30,10 +30,17 @@ export default function querystring(state = initialState, action = {}) {
         loading: true,
       };
     case `${GET_QUERYSTRING}_SUCCESS`:
+      let indexes = action.result.indexes;
+      if (indexes?.path?.operations) {
+        //remove path operation, to remove unhandled 'Navigation path' option from QueryWidget
+        indexes.path.operations = indexes.path.operations.filter(
+          (o) => o !== 'plone.app.querystring.operation.string.path',
+        );
+      }
       return {
         ...state,
         error: null,
-        indexes: action.result.indexes,
+        indexes: indexes,
         sortable_indexes: action.result.sortable_indexes,
         loaded: true,
         loading: false,

package/src/reducers/users/users.js

@@ -117,7 +117,7 @@ export default function users(state = initialState, action = {}) {
     case `${LIST_USERS}_SUCCESS`:
       return {
         ...state,
-        users: action.result,
+        users: action.result.items ? action.result.items : action.result,
         [getRequestKey(action.type)]: {
           loading: false,
           loaded: true,