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

package/src/helpers/AuthToken/AuthToken.test.js

@@ -1,60 +1,94 @@
 import Cookies from 'universal-cookie';
 import jwt from 'jsonwebtoken';
 import jwtDecode from 'jwt-decode';
-
 import { getAuthToken, persistAuthToken } from './AuthToken';
 
-jest.mock('universal-cookie', () => {
+vi.mock('universal-cookie', () => {
   const mCookie = {
-    get: jest
-      .fn(() => require('jsonwebtoken').sign({ exp: 1 }, 'secret')) // eslint-disable-line global-require
-      .mockImplementationOnce(() => null), // the first call is for anonymous, no auth_token cookie
-    remove: jest.fn(),
-    set: jest.fn(),
+    get: vi
+      .fn(() => jwt.sign({ exp: 1 }, 'secret'))
+      .mockImplementationOnce(() => null),
+    remove: vi.fn(),
+    set: vi.fn(),
+  };
+  return {
+    default: vi.fn(() => mCookie),
   };
-  return jest.fn(() => mCookie);
 });
 
 describe('AuthToken', () => {
+  let cookies;
+  let mockStore;
+
+  beforeEach(() => {
+    cookies = new Cookies();
+    vi.clearAllMocks();
+
+    mockStore = {
+      subscribe: vi.fn(),
+      dispatch: vi.fn(),
+      getState: vi.fn(() => ({
+        userSession: {
+          token: null,
+        },
+        router: {
+          location: {
+            pathname: '/current-path',
+          },
+        },
+      })),
+    };
+  });
+
   describe('anonymousAuthToken', () => {
     it('avoid unnecessary removing auth token', () => {
-      const cookies = new Cookies();
       const store = {
-        subscribe: jest.fn(),
-        getState: jest.fn(() => ({
+        ...mockStore,
+        getState: vi.fn(() => ({
           userSession: {
             token: null,
           },
+          router: {
+            location: {
+              pathname: '/current-path',
+            },
+          },
         })),
       };
+
       persistAuthToken(store);
-      expect(cookies.remove).not.toBeCalledWith('auth_token', { path: '/' });
+      expect(cookies.remove).not.toHaveBeenCalledWith('auth_token', {
+        path: '/',
+      });
     });
   });
 
   describe('getAuthToken', () => {
     it('can get the auth token', () => {
-      const cookies = new Cookies();
       getAuthToken();
-      expect(cookies.get).toBeCalledWith('auth_token');
+      expect(cookies.get).toHaveBeenCalledWith('auth_token');
     });
   });
 
   describe('persistAuthToken', () => {
     it('can set a new auth token', () => {
-      const cookies = new Cookies();
       const store = {
-        subscribe: jest.fn(),
-        getState: jest.fn(() => ({
+        ...mockStore,
+        getState: vi.fn(() => ({
           userSession: {
             token: jwt.sign({ exp: 2 }, 'secret'),
           },
+          router: {
+            location: {
+              pathname: '/current-path',
+            },
+          },
         })),
       };
       const { token } = store.getState().userSession;
 
       persistAuthToken(store);
-      expect(cookies.set).toBeCalledWith('auth_token', token, {
+      expect(cookies.set).toHaveBeenCalledWith('auth_token', token, {
         path: '/',
         expires: new Date(jwtDecode(token).exp * 1000),
         secure: false,
@@ -62,18 +96,22 @@ describe('AuthToken', () => {
     });
 
     it('can remove an auth token', () => {
-      const cookies = new Cookies();
       const store = {
-        subscribe: jest.fn(),
-        getState: jest.fn(() => ({
+        ...mockStore,
+        getState: vi.fn(() => ({
           userSession: {
             token: null,
           },
+          router: {
+            location: {
+              pathname: '/current-path',
+            },
+          },
         })),
       };
 
       persistAuthToken(store);
-      expect(cookies.remove).toBeCalledWith('auth_token', { path: '/' });
+      expect(cookies.remove).toHaveBeenCalledWith('auth_token', { path: '/' });
     });
   });
 });

package/src/helpers/Blocks/Blocks.test.js

@@ -572,7 +572,7 @@ describe('Blocks', () => {
     it('initialValue with intl', () => {
       // Mock intl with formatMessage function
       const intl = {
-        formatMessage: jest.fn(({ id }) => id),
+        formatMessage: vi.fn(({ id }) => id),
       };
 
       const messages = {

package/src/helpers/Content/Content.js

@@ -11,6 +11,7 @@ import keys from 'lodash/keys';
 import endsWith from 'lodash/endsWith';
 import find from 'lodash/find';
 import config from '@plone/volto/registry';
+import omit from 'lodash/omit';
 
 /**
  * Nest content.
@@ -85,3 +86,25 @@ export function getLanguageIndependentFields(schema) {
       properties[field]['multilingual_options']?.['language_independent'],
   );
 }
+
+/**
+ * Flattens static behaviors into the parent object with dot-notation keys.
+ * @function flattenStaticBehaviors
+ * @param {Object} result The result object containing static behaviors.
+ * @returns {Object} Result object with flattened static behaviors.
+ */
+export function flattenStaticBehaviors(result) {
+  if (!result['@static_behaviors']) {
+    return result;
+  }
+
+  let flattened = Object.assign({}, result);
+  map(result['@static_behaviors'], (behavior) => {
+    flattened = {
+      ...omit(flattened, behavior),
+      ...mapKeys(flattened[behavior], (value, key) => `${behavior}.${key}`),
+    };
+  });
+
+  return flattened;
+}

package/src/helpers/Content/Content.test.js

@@ -2,6 +2,7 @@ import {
   nestContent,
   getContentIcon,
   getLanguageIndependentFields,
+  flattenStaticBehaviors,
 } from './Content';
 import contentExistingSVG from '@plone/volto/icons/content-existing.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
@@ -96,4 +97,42 @@ describe('Content', () => {
       expect(getLanguageIndependentFields(schema)).toStrictEqual(['lif']);
     });
   });
+
+  describe('flattenStaticBehaviors', () => {
+    it('returns object unchanged when no @static_behaviors', () => {
+      const input = {
+        title: 'Example',
+        creator: 'admin',
+      };
+      expect(flattenStaticBehaviors(input)).toEqual(input);
+    });
+
+    it('flattens static behaviors into dot-notation keys', () => {
+      const input = {
+        title: 'Example',
+        '@static_behaviors': [
+          'guillotina_cms.interfaces.blocks.IBlocks',
+          'guillotina_cms.interfaces.dublin_core.IDublinCore',
+        ],
+        'guillotina_cms.interfaces.blocks.IBlocks': {
+          blocks: 'blocks',
+          blocks_layout: 'blocks_layout',
+        },
+        'guillotina_cms.interfaces.dublin_core.IDublinCore': {
+          creator: 'creator',
+        },
+      };
+      expect(flattenStaticBehaviors(input)).toEqual({
+        title: 'Example',
+        '@static_behaviors': [
+          'guillotina_cms.interfaces.blocks.IBlocks',
+          'guillotina_cms.interfaces.dublin_core.IDublinCore',
+        ],
+        'guillotina_cms.interfaces.blocks.IBlocks.blocks': 'blocks',
+        'guillotina_cms.interfaces.blocks.IBlocks.blocks_layout':
+          'blocks_layout',
+        'guillotina_cms.interfaces.dublin_core.IDublinCore.creator': 'creator',
+      });
+    });
+  });
 });

package/src/helpers/Content/withClientSideContent.jsx

@@ -0,0 +1,35 @@
+/*
+This is a HOC for use with the volto Edit component.
+It makes sure that we fetch the content from the API on the client side
+when the Edit component is mounted, if there is an internalApiPath
+that is different from the public API path. Otherwise we might end up
+saving backend API paths back to the server.
+
+It's admittedly a bit of a workaround.
+Ideally the volto SSR should produce correct URLs
+so that we don't have to do this on the client side.
+But, that requires refactoring that won't happen quickly...
+*/
+
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import config from '@plone/volto/registry';
+import { getContent } from '@plone/volto/actions/content/content';
+
+export default function withClientSideContent(WrappedComponent) {
+  function WithClientSideContent(props) {
+    const { internalApiPath } = config.settings;
+    const dispatch = useDispatch();
+    const content = useSelector((state) => state.content);
+    const id = content.data?.['@id'];
+    useEffect(() => {
+      if (internalApiPath && id?.startsWith(internalApiPath)) {
+        dispatch(getContent(id.substring(internalApiPath.length)));
+      }
+    }, [internalApiPath, dispatch, id]);
+    return <WrappedComponent {...props} />;
+  }
+
+  return hoistNonReactStatics(WithClientSideContent, WrappedComponent);
+}

package/src/helpers/Extensions/withBlockSchemaEnhancer.jsx

@@ -305,8 +305,11 @@ export const EMPTY_STYLES_SCHEMA = {
 
 /**
  * Adds the `styles` field and 'styling' fieldset in a given schema
+ * @param {object} params Helper params
+ * @param {import('@plone/types').JSONSchema} params.schema Schema to enhance
+ * @param {import('react-intl').IntlShape} params.intl intl helper for translations
  */
-export const addStyling = ({ schema, formData, intl }) => {
+export const addStyling = ({ schema, intl }) => {
   if (isEmpty(find(schema.fieldsets, { id: 'styling' }))) {
     schema.fieldsets.push({
       id: 'styling',

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';
 
@@ -122,21 +123,26 @@ class Html extends Component {
                 ...(publicURL && {
                   publicURL,
                 }),
-                ...(process.env.SITE_DEFAULT_LANGUAGE && {
-                  defaultLanguage: process.env.SITE_DEFAULT_LANGUAGE,
-                }),
               })};`,
             }}
           />
 
-          <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/Html/Html.test.jsx

@@ -3,36 +3,40 @@ import renderer from 'react-test-renderer';
 import config from '@plone/volto/registry';
 import Html from './Html';
 
-jest.mock('../Helmet/Helmet', () => ({
-  rewind: () => ({
-    base: {
-      toComponent: () => '',
-    },
-    title: {
-      toComponent: () => '',
-    },
-    meta: {
-      toComponent: () => '',
-    },
-    link: {
-      toComponent: () => '',
-    },
-    script: {
-      toComponent: () => '',
-    },
-    style: {
-      toComponent: () => '',
-    },
-    htmlAttributes: {
-      toComponent: () => ({
-        lang: 'en',
-      }),
-    },
-  }),
+vi.mock('../Helmet/Helmet', () => ({
+  default: {
+    rewind: () => ({
+      base: {
+        toComponent: () => '',
+      },
+      title: {
+        toComponent: () => '',
+      },
+      meta: {
+        toComponent: () => '',
+      },
+      link: {
+        toComponent: () => '',
+      },
+      script: {
+        toComponent: () => '',
+      },
+      style: {
+        toComponent: () => '',
+      },
+      htmlAttributes: {
+        toComponent: () => ({
+          lang: 'en',
+        }),
+      },
+    }),
+  },
 }));
 
-jest.mock('../BodyClass/BodyClass', () => ({
-  rewind: () => ['class1', 'class2'],
+vi.mock('../BodyClass/BodyClass', () => ({
+  default: {
+    rewind: () => ['class1', 'class2'],
+  },
 }));
 
 config.settings = {};