@plone/volto 18.0.0-alpha.2 → 18.0.0-alpha.20

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

@@ -0,0 +1,39 @@
+import { getSimpleDefaultBlocks, getDefaultBlocks } from './defaultBlocks';
+
+describe('Initial Blocks helpers', () => {
+  describe('getSimpleDefaultBlocks', () => {
+    it('Get the simple (legacy) default blocks from the local config', () => {
+      const initialBlocksConfig = {
+        Document: ['leadImage', 'title', 'slate'],
+      };
+      const [blocks, blocks_layout] = getSimpleDefaultBlocks(
+        initialBlocksConfig['Document'],
+      );
+
+      expect(blocks[blocks_layout[0]]['@type']).toBe('leadImage');
+      expect(blocks[blocks_layout[1]]['@type']).toBe('title');
+      expect(blocks[blocks_layout[2]]['@type']).toBe('slate');
+    });
+  });
+
+  describe('getDefaultBlocks', () => {
+    it('Get the default blocks from the local config', () => {
+      const initialBlocksConfig = {
+        Document: [
+          { '@type': 'leadImage', fixed: true, required: true },
+          { '@type': 'title' },
+          { '@type': 'slate' },
+        ],
+      };
+      const [blocks, blocks_layout] = getDefaultBlocks(
+        initialBlocksConfig['Document'],
+      );
+
+      expect(blocks[blocks_layout[0]]['@type']).toBe('leadImage');
+      expect(blocks[blocks_layout[0]].fixed).toBe(true);
+      expect(blocks[blocks_layout[0]].required).toBe(true);
+      expect(blocks[blocks_layout[1]]['@type']).toBe('title');
+      expect(blocks[blocks_layout[2]]['@type']).toBe('slate');
+    });
+  });
+});

package/src/helpers/Blocks/defaultBlocks.ts

@@ -0,0 +1,39 @@
+import { v4 as uuid } from 'uuid';
+
+export function getSimpleDefaultBlocks(initialBlocksConfig: string[]) {
+  let initialBlocksLayout;
+  let initialBlocks;
+  if (initialBlocksConfig) {
+    initialBlocksLayout = initialBlocksConfig.map(() => uuid());
+    initialBlocks = initialBlocksLayout.reduce(
+      (acc, value, index) => ({
+        ...acc,
+        [value]: { '@type': initialBlocksConfig[index] },
+      }),
+      {},
+    );
+  } else {
+    return null;
+  }
+
+  return [initialBlocks, initialBlocksLayout];
+}
+
+export function getDefaultBlocks(initialBlocksConfig: object[]) {
+  let initialBlocksLayout;
+  let initialBlocks;
+  if (initialBlocksConfig) {
+    initialBlocksLayout = initialBlocksConfig.map(() => uuid());
+    initialBlocks = initialBlocksLayout.reduce(
+      (acc, value, index) => ({
+        ...acc,
+        [value]: initialBlocksConfig[index],
+      }),
+      {},
+    );
+  } else {
+    return null;
+  }
+
+  return [initialBlocks, initialBlocksLayout];
+}

package/src/helpers/Extensions/withBlockSchemaEnhancer.js

@@ -47,7 +47,7 @@ export const addExtensionFieldToSchema = ({
   items,
   intl,
   title,
-  description,
+  description = '',
   insertFieldToOrder = _addField,
 }) => {
   const _ = intl.formatMessage;
@@ -64,6 +64,8 @@ export const addExtensionFieldToSchema = ({
 
   schema.properties[name] = {
     title: _(title),
+    // TODO: is description sensible in here? The argument is not used anywhere
+    // description: _(description),
     choices: items?.map(({ id, title }) => [
       id,
       _({ id: title, defaultMessage: title }),
@@ -199,6 +201,8 @@ export const applySchemaEnhancer = ({
   formData,
   intl,
   blocksConfig = config.blocks.blocksConfig,
+  navRoot,
+  contentType,
 }) => {
   let schema, schemaEnhancer;
 
@@ -215,6 +219,8 @@ export const applySchemaEnhancer = ({
         schema: cloneDeepSchema(originalSchema),
         formData,
         intl,
+        navRoot,
+        contentType,
       });
     return schema || originalSchema;
   }
@@ -230,12 +236,15 @@ export const applySchemaEnhancer = ({
         schema: cloneDeepSchema(originalSchema),
         formData,
         intl,
+        navRoot,
+        contentType,
       })
     : cloneDeepSchema(originalSchema);
 
   // Finalize the schema with a schemaEnhancer in the block config;
   schemaEnhancer = blocksConfig?.[blockType]?.schemaEnhancer;
-  if (schemaEnhancer) schema = schemaEnhancer({ schema, formData, intl });
+  if (schemaEnhancer)
+    schema = schemaEnhancer({ schema, formData, intl, navRoot, contentType });
 
   return schema || originalSchema;
 };
@@ -248,7 +257,7 @@ export const applySchemaEnhancer = ({
  * - adds the variation selection input (as a choice widget)
  */
 export const withVariationSchemaEnhancer = (FormComponent) => (props) => {
-  const { formData, schema: originalSchema } = props;
+  const { formData, schema: originalSchema, navRoot, contentType } = props;
   const intl = useIntl();
 
   const blocksConfig = getBlocksConfig(props);
@@ -256,15 +265,10 @@ export const withVariationSchemaEnhancer = (FormComponent) => (props) => {
   const blockType = formData['@type'];
   const variations = blocksConfig[blockType]?.variations || [];
 
-  let schema = applySchemaEnhancer({
-    schema: originalSchema,
-    formData,
-    intl,
-    blocksConfig,
-  });
+  let schema = cloneDeepSchema(originalSchema);
 
   if (variations.length > 1) {
-    addExtensionFieldToSchema({
+    schema = addExtensionFieldToSchema({
       schema,
       name: 'variation',
       items: variations,
@@ -274,6 +278,15 @@ export const withVariationSchemaEnhancer = (FormComponent) => (props) => {
     });
   }
 
+  schema = applySchemaEnhancer({
+    schema,
+    formData,
+    intl,
+    blocksConfig,
+    navRoot,
+    contentType,
+  });
+
   return <FormComponent {...props} schema={schema} />;
 };
 

package/src/helpers/FormValidation/FormValidation.js

@@ -157,7 +157,7 @@ const widgetValidation = {
  * The string that comes my not be a valid JSON
  * @param {string} requestItem
  */
-const tryParseJSON = (requestItem) => {
+export const tryParseJSON = (requestItem) => {
   let resultObj = null;
   try {
     resultObj = JSON.parse(requestItem);

package/src/helpers/Html/Html.jsx

@@ -143,8 +143,8 @@ class Html extends Component {
               rel: !criticalCss
                 ? elem.props.rel
                 : elem.props.as === 'style'
-                ? 'prefetch'
-                : elem.props.rel,
+                  ? 'prefetch'
+                  : elem.props.rel,
             }),
           )}
           {/* Styles in development are loaded with Webpack's style-loader, in production,

package/src/helpers/Slots/index.tsx

@@ -0,0 +1,12 @@
+import type { Content } from '@plone/types';
+import { matchPath } from 'react-router-dom';
+
+export function RouteCondition(path: string, exact?: boolean) {
+  return ({ pathname }: { pathname: string }) =>
+    Boolean(matchPath(pathname, { path, exact }));
+}
+
+export function ContentTypeCondition(contentType: string[]) {
+  return ({ content }: { content: Content }) =>
+    contentType.includes(content?.['@type']);
+}

package/src/helpers/Url/Url.js

@@ -366,19 +366,20 @@ export const URLUtils = {
  * @returns {object} New object with the flattened scale URLs
  */
 export function flattenScales(path, image) {
-  function removeObjectIdFromURL(path, scale) {
-    return scale.replace(`${path}/`, '');
+  function removeObjectIdFromURL(basePath, scale) {
+    return scale.replace(`${basePath}/`, '');
   }
   if (!image) return;
 
+  const basePath = image.base_path || path;
   const imageInfo = {
     ...image,
-    download: flattenToAppURL(removeObjectIdFromURL(path, image.download)),
+    download: flattenToAppURL(removeObjectIdFromURL(basePath, image.download)),
   };
 
   Object.keys(imageInfo.scales).forEach((key) => {
     imageInfo.scales[key].download = flattenToAppURL(
-      removeObjectIdFromURL(path, image.scales[key].download),
+      removeObjectIdFromURL(basePath, image.scales[key].download),
     );
   });
 

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

@@ -351,6 +351,7 @@ describe('Url', () => {
       );
     });
   });
+
   describe('flattenScales', () => {
     it('flattenScales image is not set', () => {
       const id = '/halfdome2022-2.jpg';
@@ -405,6 +406,57 @@ describe('Url', () => {
         width: 1182,
       });
     });
+
+    it('[preview_image_link] flattenScales test from the catalog', () => {
+      const id = '/halfdome2022-2.jpg';
+      const image = {
+        base_path: '/broccoli.jpg',
+        'content-type': 'image/jpeg',
+        download: '@@images/image-1182-cf763ae23c52340d8a17a7afdb26c8cb.jpeg',
+        filename: 'halfdome2022.jpg',
+        height: 665,
+        scales: {
+          great: {
+            download:
+              '@@images/image-1200-539ab119ebadc7d011798980a4a5e8d4.jpeg',
+            height: 665,
+            width: 1182,
+          },
+          huge: {
+            download:
+              '@@images/image-1600-188968febc677890c1b99d5339f9bef1.jpeg',
+            height: 665,
+            width: 1182,
+          },
+        },
+        size: 319364,
+        width: 1182,
+      };
+      expect(flattenScales(id, image)).toStrictEqual({
+        base_path: '/broccoli.jpg',
+        'content-type': 'image/jpeg',
+        download: '@@images/image-1182-cf763ae23c52340d8a17a7afdb26c8cb.jpeg',
+        filename: 'halfdome2022.jpg',
+        height: 665,
+        scales: {
+          great: {
+            download:
+              '@@images/image-1200-539ab119ebadc7d011798980a4a5e8d4.jpeg',
+            height: 665,
+            width: 1182,
+          },
+          huge: {
+            download:
+              '@@images/image-1600-188968febc677890c1b99d5339f9bef1.jpeg',
+            height: 665,
+            width: 1182,
+          },
+        },
+        size: 319364,
+        width: 1182,
+      });
+    });
+
     it('flattenScales test from serialization', () => {
       const id = 'http://localhost:3000/halfdome2022-2.jpg';
       const image = {

package/src/helpers/User/User.js

@@ -12,3 +12,32 @@ import { intersection } from 'lodash';
 export function userHasRoles(user, roles = []) {
   return intersection(user?.roles ?? [], roles).length > 0;
 }
+
+/**
+ * Checks if the user is Manager.
+ * @method isManager
+ * @returns {boolean}
+ */
+export function isManager(user) {
+  return userHasRoles(user, ['Manager']);
+}
+
+/**
+ * Checks if the user can assing group.
+ * @method canAssignGroup
+ * @returns {boolean}
+ */
+export function canAssignGroup(isManager, group) {
+  if (isManager) return true;
+  return !group.roles.includes('Manager');
+}
+
+/**
+ * Checks if the user can assign role.
+ * @method canDeleteGroup
+ * @returns {boolean}
+ */
+export function canAssignRole(isManager, role) {
+  if (isManager) return true;
+  return role.id !== 'Manager';
+}

package/src/helpers/Utils/Date.js

@@ -42,10 +42,10 @@ export function formatDate({
   format = format
     ? format
     : long && !includeTime
-    ? long_date_format
-    : includeTime
-    ? short_date_and_time_format
-    : short_date_format;
+      ? long_date_format
+      : includeTime
+        ? short_date_and_time_format
+        : short_date_format;
 
   const formatter = new Intl.DateTimeFormat(locale, format);
   return formatToParts
@@ -94,6 +94,6 @@ export function formatRelativeDate({
   return isNaN(v)
     ? ''
     : formatToParts
-    ? formatter.formatToParts(v, tag)
-    : formatter.format(v, tag).replace('\u202F', ' '); // use "now" ?
+      ? formatter.formatToParts(v, tag)
+      : formatter.format(v, tag).replace('\u202F', ' '); // use "now" ?
 }

package/src/helpers/Utils/UseDetectClickOutside.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDetectClickOutside } from './useDetectClickOutside';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { BlockChooser } from '@plone/volto/components';
 
@@ -44,10 +44,9 @@ function OpenedChooserWithPortal(props) {
     triggerKeys: ['Escape'],
   });
 
-  return (
-    <Portal node={document.getElementById('body')}>
-      <div ref={blockChooserRef}>{`Hello ${props.id}`}</div>
-    </Portal>
+  return createPortal(
+    <div ref={blockChooserRef}>{`Hello ${props.id}`}</div>,
+    document.getElementById('body'),
   );
 }
 
@@ -124,7 +123,7 @@ function TestComponentWithPortalAndPopper(props) {
         ref={setReferenceElement}
         onClick={() => setOpenMenu(true)}
       >{`Click me ${props.id}`}</button>
-      <Portal node={document.getElementById('body')}>
+      {createPortal(
         <div
           ref={setPopperElement}
           style={styles.popper}
@@ -136,8 +135,9 @@ function TestComponentWithPortalAndPopper(props) {
               setOpenMenu={setOpenMenu}
             />
           )}
-        </div>
-      </Portal>
+        </div>,
+        document.body,
+      )}
     </div>
   );
 }

package/src/helpers/Utils/Utils.js

@@ -136,8 +136,8 @@ export const getColor = (name) => {
   const namedColor = namedColors[name]
     ? namedColors[name]
     : safeColors.length > 0
-    ? safeColors.pop()
-    : `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+      ? safeColors.pop()
+      : `#${Math.floor(Math.random() * 16777215).toString(16)}`;
   if (!namedColors[name]) {
     namedColors[name] = namedColor;
   }

package/src/helpers/index.js

@@ -58,9 +58,14 @@ export {
   blocksFormGenerator,
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
+  buildStyleObjectFromData,
   getPreviousNextBlock,
   findBlocks,
 } from '@plone/volto/helpers/Blocks/Blocks';
+export {
+  getSimpleDefaultBlocks,
+  getDefaultBlocks,
+} from '@plone/volto/helpers/Blocks/defaultBlocks';
 export { default as BodyClass } from '@plone/volto/helpers/BodyClass/BodyClass';
 export { default as ScrollToTop } from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
 export {
@@ -76,6 +81,7 @@ export { default as langmap } from './LanguageMap/LanguageMap';
 export { default as Helmet } from './Helmet/Helmet';
 export { default as FormValidation } from './FormValidation/FormValidation';
 export { validateFileUploadSize } from './FormValidation/FormValidation';
+export { tryParseJSON } from './FormValidation/FormValidation';
 export {
   difference,
   getColor,
@@ -110,7 +116,12 @@ export {
   composeSchema,
 } from './Extensions';
 export { asyncConnect } from './AsyncConnect';
-export { userHasRoles } from './User/User';
+export {
+  userHasRoles,
+  isManager,
+  canAssignGroup,
+  canAssignRole,
+} from './User/User';
 // export { injectLazyLibs } from './Loadable/Loadable';
 export { useDetectClickOutside } from './Utils/useDetectClickOutside';
 export { useEvent } from './Utils/useEvent';
@@ -124,3 +135,4 @@ export {
   getWorkflowOptions,
 } from './Workflows/Workflows';
 export { getSiteAsyncPropExtender } from './Site';
+export { ContentTypeCondition } from './Slots';

package/src/middleware/api.js

@@ -230,7 +230,7 @@ const apiMiddlewareFactory =
               config.settings.supportedLanguages.includes(lang)
             ) {
               const langFileName = toGettextLang(lang);
-              import('~/../locales/' + langFileName + '.json').then(
+              import('@root/../locales/' + langFileName + '.json').then(
                 (locale) => {
                   dispatch(changeLanguage(lang, locale.default));
                 },

package/src/reducers/form/form.js

@@ -4,7 +4,11 @@
  * @module reducers/form/form
  */
 
-const initialState = {};
+import { SET_FORM_DATA } from '@plone/volto/constants/ActionTypes';
+
+const initialState = {
+  global: {},
+};
 
 /**
  * Form reducer.
@@ -12,6 +16,14 @@ const initialState = {};
  * @param {Object} state Current state.
  * @returns {Object} New state.
  */
-export default function form(state = initialState) {
-  return state;
+export default function form(state = initialState, action = {}) {
+  switch (action.type) {
+    case SET_FORM_DATA:
+      return {
+        ...state,
+        global: action.data,
+      };
+    default:
+      return state;
+  }
 }

package/src/reducers/form/form.test.js

@@ -1,7 +1,19 @@
 import form from './form';
+import { SET_FORM_DATA } from '@plone/volto/constants/ActionTypes';
 
 describe('Form reducer', () => {
   it('should return the initial state', () => {
-    expect(form()).toEqual({});
+    expect(form()).toEqual({ global: {} });
+  });
+
+  it('should handle SET_FORM_DATA', () => {
+    expect(
+      form(undefined, {
+        type: SET_FORM_DATA,
+        data: { foo: 'bar' },
+      }),
+    ).toEqual({
+      global: { foo: 'bar' },
+    });
   });
 });

package/src/reducers/sidebar/sidebar.js

@@ -3,10 +3,19 @@
  * @module reducers/sidebar/sidebar
  */
 
-import { SET_SIDEBAR_TAB } from '@plone/volto/constants/ActionTypes';
+import { union } from 'lodash';
+
+import {
+  SET_METADATA_FIELDSETS,
+  SET_METADATA_FOCUS,
+  RESET_METADATA_FOCUS,
+  SET_SIDEBAR_TAB,
+} from '@plone/volto/constants/ActionTypes';
 
 const initialState = {
   tab: 0,
+  metadataFieldsets: [],
+  metadataFieldFocus: '',
 };
 
 /**
@@ -18,6 +27,22 @@ const initialState = {
  */
 export default function sidebar(state = initialState, action = {}) {
   switch (action.type) {
+    case SET_METADATA_FIELDSETS:
+      return {
+        ...state,
+        metadataFieldsets: action.fieldsets,
+      };
+    case SET_METADATA_FOCUS:
+      return {
+        ...state,
+        metadataFieldsets: union(state.metadataFieldsets, [action.fieldset]),
+        metadataFieldFocus: action.field,
+      };
+    case RESET_METADATA_FOCUS:
+      return {
+        ...state,
+        metadataFieldFocus: '',
+      };
     case SET_SIDEBAR_TAB:
       return {
         ...state,

package/src/reducers/sidebar/sidebar.test.js

@@ -1,13 +1,60 @@
 import sidebar from './sidebar';
-import { SET_SIDEBAR_TAB } from '@plone/volto/constants/ActionTypes';
+import {
+  SET_METADATA_FIELDSETS,
+  SET_METADATA_FOCUS,
+  RESET_METADATA_FOCUS,
+  SET_SIDEBAR_TAB,
+} from '@plone/volto/constants/ActionTypes';
 
 describe('Sidebar reducer', () => {
   it('should return the initial state', () => {
     expect(sidebar()).toEqual({
+      metadataFieldFocus: '',
+      metadataFieldsets: [],
       tab: 0,
     });
   });
 
+  it('should handle SET_METADATA_FIELDSETS', () => {
+    expect(
+      sidebar(undefined, {
+        type: SET_METADATA_FIELDSETS,
+        fieldsets: ['default'],
+      }),
+    ).toEqual({
+      metadataFieldFocus: '',
+      metadataFieldsets: ['default'],
+      tab: 0,
+    });
+  });
+
+  it('should handle SET_METADATA_FOCUS', () => {
+    expect(
+      sidebar(undefined, {
+        type: SET_METADATA_FOCUS,
+        fieldset: 'default',
+        field: 'title',
+      }),
+    ).toEqual({
+      metadataFieldFocus: 'title',
+      metadataFieldsets: ['default'],
+      tab: 0,
+    });
+  });
+
+  it('should handle RESET_METADATA_FOCUS', () => {
+    expect(
+      sidebar(
+        { metadataFieldFocus: 'title' },
+        {
+          type: RESET_METADATA_FOCUS,
+        },
+      ),
+    ).toEqual({
+      metadataFieldFocus: '',
+    });
+  });
+
   it('should handle SET_SIDEBAR_TAB', () => {
     expect(
       sidebar(undefined, {
@@ -15,6 +62,8 @@ describe('Sidebar reducer', () => {
         index: 1,
       }),
     ).toEqual({
+      metadataFieldFocus: '',
+      metadataFieldsets: [],
       tab: 1,
     });
   });

package/src/server.jsx

@@ -239,7 +239,7 @@ server.get('/*', (req, res) => {
         : store.getState().content.data?.language?.token ||
           config.settings.defaultLanguage;
 
-      if (toBackendLang(initialLang) !== contentLang) {
+      if (toBackendLang(initialLang) !== contentLang && url !== '/') {
         const newLang = toReactIntlLang(
           new locale.Locales(contentLang).best(supported).toString(),
         );

package/src/start-client.jsx

@@ -1,7 +1,7 @@
 import '@plone/volto/config'; // This is the bootstrap for the global config - client side
 import '@root/theme';
 import React from 'react';
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { IntlProvider } from 'react-intl-redux';
 import { ConnectedRouter } from 'connected-react-router';
@@ -58,7 +58,8 @@ export default function client() {
   }
 
   loadableReady(() => {
-    hydrate(
+    hydrateRoot(
+      document.getElementById('main'),
       <CookiesProvider>
         <Provider store={store}>
           <IntlProvider onError={reactIntlErrorHandler}>
@@ -70,7 +71,6 @@ export default function client() {
           </IntlProvider>
         </Provider>
       </CookiesProvider>,
-      document.getElementById('main'),
     );
   });
 }