@plone/volto 18.0.0-alpha.4 → 18.0.0-alpha.41

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

@@ -0,0 +1,54 @@
+import { cloneDeep } from 'lodash';
+import { cloneBlocks } from './cloneBlocks';
+
+describe('cloneBlocks', () => {
+  it('cloneBlocks - basic', () => {
+    const blocksData = {
+      blocks: {
+        a: { '@type': 'slate', value: 1 },
+        b: { '@type': 'slate', value: 2 },
+      },
+      blocks_layout: { items: ['a', 'b'] },
+    };
+    const result = cloneBlocks(blocksData);
+
+    expect(result.blocks_layout.items[0]).not.toBe('a');
+    expect(result.blocks[result.blocks_layout.items[0]]).toStrictEqual({
+      '@type': 'slate',
+      value: 1,
+    });
+  });
+
+  it('cloneBlocks - nested', () => {
+    const blocksData = {
+      blocks: {
+        a: { '@type': 'slate', value: 1 },
+        b: { '@type': 'slate', value: 2 },
+      },
+      blocks_layout: { items: ['a', 'b'] },
+    };
+    blocksData.blocks.c = cloneDeep(blocksData);
+    blocksData.blocks_layout.items.push('c');
+
+    const result = cloneBlocks(blocksData);
+
+    expect(result.blocks_layout.items[0]).not.toBe('a');
+    expect(result.blocks[result.blocks_layout.items[0]]).toStrictEqual({
+      '@type': 'slate',
+      value: 1,
+    });
+
+    expect(
+      result.blocks[result.blocks_layout.items[2]].blocks_layout.items[0],
+    ).not.toBe('c');
+
+    expect(
+      result.blocks[result.blocks_layout.items[2]].blocks[
+        result.blocks[result.blocks_layout.items[2]].blocks_layout.items[0]
+      ],
+    ).toStrictEqual({
+      '@type': 'slate',
+      value: 1,
+    });
+  });
+});

package/src/helpers/Blocks/cloneBlocks.ts

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import { v4 as uuid } from 'uuid';
+import {
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+  hasBlocksData,
+} from './Blocks';
+import config from '@plone/registry';
+
+export function cloneBlocks(blocksData) {
+  if (hasBlocksData(blocksData)) {
+    const blocksFieldname = getBlocksFieldname(blocksData);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(blocksData);
+
+    const cloneWithIds = Object.keys(blocksData.blocks)
+      .map((key) => {
+        const block = blocksData.blocks[key];
+        const blockConfig = config.blocks.blocksConfig[blocksData['@type']];
+        return blockConfig?.cloneData
+          ? blockConfig.cloneData(block)
+          : [uuid(), cloneBlocks(block)];
+      })
+      .filter((info) => !!info); // some blocks may refuse to be copied
+
+    const newBlockData = {
+      ...blocksData,
+      [blocksFieldname]: {
+        ...Object.assign(
+          {},
+          ...cloneWithIds.map(([id, data]) => ({ [id]: data })),
+        ),
+      },
+      [blocksLayoutFieldname]: {
+        ...blocksData[blocksLayoutFieldname],
+        items: [...cloneWithIds.map(([id]) => id)],
+      },
+    };
+
+    return newBlockData;
+  }
+
+  return blocksData;
+}

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 → withBlockSchemaEnhancer.jsx}

@@ -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 → FormValidation.jsx}

@@ -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,
@@ -187,14 +187,12 @@ class Html extends Component {
             charSet="UTF-8"
           />
           {/* Add the crossorigin while in development */}
-          {this.props.extractScripts !== false
-            ? extractor.getScriptElements().map((elem) =>
-                React.cloneElement(elem, {
-                  crossOrigin:
-                    process.env.NODE_ENV === 'production' ? undefined : 'true',
-                }),
-              )
-            : ''}
+          {extractor.getScriptElements().map((elem) =>
+            React.cloneElement(elem, {
+              crossOrigin:
+                process.env.NODE_ENV === 'production' ? undefined : 'true',
+            }),
+          )}
         </body>
       </html>
     );

package/src/helpers/MessageLabels/MessageLabels.js

@@ -110,6 +110,10 @@ export const messages = defineMessages({
     id: 'Add group',
     defaultMessage: 'Add group',
   },
+  groupDeleted: {
+    id: 'Group deleted',
+    defaultMessage: 'Group deleted',
+  },
   addUserFormUsernameTitle: {
     id: 'Username',
     defaultMessage: 'Username',
@@ -213,6 +217,10 @@ export const messages = defineMessages({
     id: 'User created',
     defaultMessage: 'User created',
   },
+  userDeleted: {
+    id: 'User deleted',
+    defaultMessage: 'User deleted',
+  },
   groupCreated: {
     id: 'Group created',
     defaultMessage: 'Group created',

package/src/helpers/Slots/index.tsx

@@ -0,0 +1,19 @@
+import { matchPath } from 'react-router-dom';
+import type { Content } from '@plone/types';
+import type { Location } from 'history';
+
+export function RouteCondition(path: string, exact?: boolean) {
+  return ({ location }: { location: Location }) =>
+    Boolean(matchPath(location.pathname, { path, exact }));
+}
+
+export function ContentTypeCondition(contentType: string[]) {
+  return ({ content, location }: { content: Content; location: Location }) => {
+    return (
+      contentType.includes(content?.['@type']) ||
+      contentType.some((type) => {
+        return location.search.includes(`type=${encodeURIComponent(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 → Utils.jsx}

@@ -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

@@ -30,6 +30,7 @@ export {
   removeProtocol,
   URLUtils,
   flattenScales,
+  getFieldURL,
 } from '@plone/volto/helpers/Url/Url';
 export { generateRobots } from '@plone/volto/helpers/Robots/Robots';
 export {
@@ -58,9 +59,16 @@ export {
   blocksFormGenerator,
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
+  buildStyleObjectFromData,
   getPreviousNextBlock,
   findBlocks,
+  getBlocksHierarchy,
+  moveBlockEnhanced,
 } 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 +84,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,
@@ -92,6 +101,8 @@ export {
   hasApiExpander,
   replaceItemOfArray,
   cloneDeepSchema,
+  insertInArray,
+  removeFromArray,
   arrayRange,
   reorderArray,
   isInteractiveElement,
@@ -110,7 +121,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 +140,4 @@ export {
   getWorkflowOptions,
 } from './Workflows/Workflows';
 export { getSiteAsyncPropExtender } from './Site';
+export { ContentTypeCondition } from './Slots';

package/src/icons/external-link.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
+  <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
+</svg>