@plone/volto 17.0.0-alpha.9 → 17.0.1

package/src/helpers/Blocks/Blocks.js

@@ -290,9 +290,8 @@ export function changeBlock(formData, id, value) {
  */
 export function nextBlockId(formData, currentBlock) {
   const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
-  const currentIndex = formData[blocksLayoutFieldname].items.indexOf(
-    currentBlock,
-  );
+  const currentIndex =
+    formData[blocksLayoutFieldname].items.indexOf(currentBlock);
 
   if (currentIndex === formData[blocksLayoutFieldname].items.length - 1) {
     // We are already at the bottom block don't do anything
@@ -312,9 +311,8 @@ export function nextBlockId(formData, currentBlock) {
  */
 export function previousBlockId(formData, currentBlock) {
   const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
-  const currentIndex = formData[blocksLayoutFieldname].items.indexOf(
-    currentBlock,
-  );
+  const currentIndex =
+    formData[blocksLayoutFieldname].items.indexOf(currentBlock);
 
   if (currentIndex === 0) {
     // We are already at the top block don't do anything
@@ -343,6 +341,32 @@ export function emptyBlocksForm() {
   };
 }
 
+/**
+ * Generate empty blocks blocks/blocks_layout pair given the type
+ * (could be empty, if not type given) and the number of blocks
+ * @function blocksFormGenerator
+ * @param {number} number How many blocks to generate of the type (could be "empty", if no type provided)
+ * @param {number} type The type of the blocks
+ * @return {Object} blocks/blocks_layout pair filled with the generated blocks
+ */
+export function blocksFormGenerator(number, type) {
+  const idMap = [...Array(number).keys()].map(() => uuid());
+  const start = {
+    blocks: {},
+    blocks_layout: { items: idMap },
+  };
+
+  return {
+    ...start,
+    blocks: Object.fromEntries(
+      start.blocks_layout.items.map((item) => [
+        item,
+        { '@type': type || 'empty' },
+      ]),
+    ),
+  };
+}
+
 /**
  * Recursively discover blocks in data and call the provided callback
  * @function visitBlocks
@@ -524,3 +548,25 @@ export const getPreviousNextBlock = ({ content, block }) => {
 
   return [previousBlock, nextBlock];
 };
+
+/**
+ * Given a `block` object and a list of block types, return a list of block ids matching the types
+ *
+ * @function findBlocks
+ * @param {Object} types A list with the list of types to be matched
+ * @return {Array} An array of block ids
+ */
+export function findBlocks(blocks, types, result = []) {
+  const containerBlockTypes = config.settings.containerBlockTypes;
+
+  Object.keys(blocks).forEach((blockId) => {
+    const block = blocks[blockId];
+    if (types.includes(block['@type'])) {
+      result.push(blockId);
+    } else if (containerBlockTypes.includes(block['@type']) || block.blocks) {
+      findBlocks(block.blocks, types, result);
+    }
+  });
+
+  return result;
+}

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

@@ -19,6 +19,8 @@ import {
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
   getPreviousNextBlock,
+  blocksFormGenerator,
+  findBlocks,
 } from './Blocks';
 
 import config from '@plone/volto/registry';
@@ -586,26 +588,26 @@ describe('Blocks', () => {
       const d = {
         data: {
           blocks: {
-            '1': {
+            1: {
               blocks: {
-                '2': {},
-                '3': {
+                2: {},
+                3: {
                   data: {
                     blocks: {
-                      '11': {},
-                      '12': {},
-                      '13': {},
+                      11: {},
+                      12: {},
+                      13: {},
                     },
                     blocks_layout: {
                       items: ['11', '12', '13'],
                     },
                   },
                 },
-                '7': {
+                7: {
                   blocks: {
-                    '8': {},
-                    '9': {},
-                    '10': {},
+                    8: {},
+                    9: {},
+                    10: {},
                   },
                   blocks_layout: {
                     items: ['8', '9', '10'],
@@ -616,10 +618,10 @@ describe('Blocks', () => {
                 items: ['2', '3', '7'],
               },
             },
-            '4': {
+            4: {
               blocks: {
-                '5': {},
-                '6': {},
+                5: {},
+                6: {},
               },
               blocks_layout: {
                 items: ['5', '6'],
@@ -1275,4 +1277,81 @@ describe('Blocks', () => {
       ]);
     });
   });
+
+  describe('blocksFormGenerator', () => {
+    it('Returns an empty blocks/blocks_layout pair', () => {
+      expect(blocksFormGenerator(0, '')).toEqual({
+        blocks: {},
+        blocks_layout: { items: [] },
+      });
+    });
+    it('Returns a filled blocks/blocks_layout pair with type block', () => {
+      const result = blocksFormGenerator(2, 'teaser');
+      expect(Object.keys(result.blocks).length).toEqual(2);
+      expect(result.blocks_layout.items.length).toEqual(2);
+      expect(result.blocks[result.blocks_layout.items[0]]['@type']).toEqual(
+        'teaser',
+      );
+      expect(result.blocks[result.blocks_layout.items[1]]['@type']).toEqual(
+        'teaser',
+      );
+    });
+  });
+});
+
+describe('findBlocks', () => {
+  it('Get all blocks in the first level (main block container)', () => {
+    const blocks = {
+      1: { title: 'title', '@type': 'title' },
+      2: { title: 'an image', '@type': 'image' },
+      3: { title: 'description', '@type': 'description' },
+      4: { title: 'a text', '@type': 'slate' },
+    };
+    const types = ['description'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3']);
+  });
+
+  it('Get all blocks in the first level (main block container) given a list', () => {
+    const blocks = {
+      1: { title: 'title', '@type': 'title' },
+      2: { title: 'an image', '@type': 'image' },
+      3: { title: 'description', '@type': 'description' },
+      4: { title: 'a text', '@type': 'slate' },
+    };
+    const types = ['description', 'slate'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3', '4']);
+  });
+
+  it('Get all blocks in the first level (main block container) given a list', () => {
+    const blocks = {
+      1: { title: 'title', '@type': 'title' },
+      2: { title: 'an image', '@type': 'image' },
+      3: { title: 'description', '@type': 'description' },
+      4: { title: 'a text', '@type': 'slate' },
+      5: { title: 'a text', '@type': 'slate' },
+    };
+    const types = ['description', 'slate'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3', '4', '5']);
+  });
+
+  it('Get all blocks, including containers, given a list', () => {
+    const blocks = {
+      1: { title: 'title', '@type': 'title' },
+      2: { title: 'an image', '@type': 'image' },
+      3: { title: 'description', '@type': 'description' },
+      4: { title: 'a text', '@type': 'slate' },
+      5: {
+        title: 'a container',
+        '@type': 'gridBlock',
+        blocks: {
+          6: { title: 'title', '@type': 'title' },
+          7: { title: 'an image', '@type': 'image' },
+          8: { title: 'description', '@type': 'description' },
+          9: { title: 'a text', '@type': 'slate' },
+        },
+      },
+    };
+    const types = ['description', 'slate'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3', '4', '8', '9']);
+  });
 });

package/src/helpers/Extensions/index.js

@@ -1,5 +1,6 @@
 export * from './withBlockSchemaEnhancer';
-export withBlockExtensions, {
+export {
+  default as withBlockExtensions,
   resolveExtension,
   resolveBlockExtensions,
 } from './withBlockExtensions';

package/src/helpers/Extensions/withBlockSchemaEnhancer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defineMessages } from 'react-intl';
 import { useIntl } from 'react-intl';
+import { find, isEmpty } from 'lodash';
 import config from '@plone/volto/registry';
 import { cloneDeepSchema } from '@plone/volto/helpers/Utils/Utils';
 
@@ -109,61 +110,59 @@ export const addExtensionFieldToSchema = ({
  *  }
  * ```
  */
-export const withBlockSchemaEnhancer = (
-  FormComponent,
-  extensionName = 'vendor',
-  insertFieldToOrder = _addField,
-) => ({ ...props }) => {
-  const { formData, schema: originalSchema } = props;
-  const intl = useIntl();
+export const withBlockSchemaEnhancer =
+  (FormComponent, extensionName = 'vendor', insertFieldToOrder = _addField) =>
+  ({ ...props }) => {
+    const { formData, schema: originalSchema } = props;
+    const intl = useIntl();
 
-  const blocksConfig = getBlocksConfig(props);
+    const blocksConfig = getBlocksConfig(props);
 
-  const blockType = formData['@type'];
-  const extensionConfig =
-    blocksConfig?.[blockType]?.extensions?.[extensionName];
-
-  if (!extensionConfig)
-    return <FormComponent {...props} schema={originalSchema} />;
-
-  const activeItemName = formData?.[extensionName];
-  let activeItem = extensionConfig.items?.find(
-    (item) => item.id === activeItemName,
-  );
-  if (!activeItem)
-    activeItem = extensionConfig.items?.find((item) => item.isDefault);
-
-  const schemaEnhancer =
-    // For the main "variation" of blocks, allow simply passing a
-    // schemaEnhancer in the block configuration
-    activeItem?.['schemaEnhancer'] ||
-    (extensionName === 'variation' &&
-      blocksConfig?.[blockType]?.schemaEnhancer);
-
-  let schema = schemaEnhancer
-    ? schemaEnhancer({
-        schema: cloneDeepSchema(originalSchema),
-        formData,
-        intl,
-      })
-    : cloneDeepSchema(originalSchema);
+    const blockType = formData['@type'];
+    const extensionConfig =
+      blocksConfig?.[blockType]?.extensions?.[extensionName];
 
-  const { title = messages.variation, description } = extensionConfig;
+    if (!extensionConfig)
+      return <FormComponent {...props} schema={originalSchema} />;
 
-  if (extensionConfig.items?.length > 1) {
-    addExtensionFieldToSchema({
-      schema,
-      name: extensionName,
-      items: extensionConfig.items || [],
-      intl,
-      title,
-      description,
-      insertFieldToOrder,
-    });
-  }
+    const activeItemName = formData?.[extensionName];
+    let activeItem = extensionConfig.items?.find(
+      (item) => item.id === activeItemName,
+    );
+    if (!activeItem)
+      activeItem = extensionConfig.items?.find((item) => item.isDefault);
+
+    const schemaEnhancer =
+      // For the main "variation" of blocks, allow simply passing a
+      // schemaEnhancer in the block configuration
+      activeItem?.['schemaEnhancer'] ||
+      (extensionName === 'variation' &&
+        blocksConfig?.[blockType]?.schemaEnhancer);
+
+    let schema = schemaEnhancer
+      ? schemaEnhancer({
+          schema: cloneDeepSchema(originalSchema),
+          formData,
+          intl,
+        })
+      : cloneDeepSchema(originalSchema);
+
+    const { title = messages.variation, description } = extensionConfig;
+
+    if (extensionConfig.items?.length > 1) {
+      addExtensionFieldToSchema({
+        schema,
+        name: extensionName,
+        items: extensionConfig.items || [],
+        intl,
+        title,
+        description,
+        insertFieldToOrder,
+      });
+    }
 
-  return <FormComponent {...props} schema={schema} />;
-};
+    return <FormComponent {...props} schema={schema} />;
+  };
 
 /**
  * Apply block variation schema enhancers to the provided schema, using block
@@ -291,20 +290,23 @@ export const EMPTY_STYLES_SCHEMA = {
 };
 
 /**
- * Creates the `styles` field and fieldset in a schema
+ * Adds the `styles` field and 'styling' fieldset in a given schema
  */
 export const addStyling = ({ schema, formData, intl }) => {
-  schema.fieldsets.push({
-    id: 'styling',
-    title: intl.formatMessage(messages.styling),
-    fields: ['styles'],
-  });
+  if (isEmpty(find(schema.fieldsets, { id: 'styling' }))) {
+    schema.fieldsets.push({
+      id: 'styling',
+      title: intl.formatMessage(messages.styling),
+      fields: ['styles'],
+    });
+
+    schema.properties.styles = {
+      widget: 'object',
+      title: intl.formatMessage(messages.styling),
+      schema: cloneDeepSchema(EMPTY_STYLES_SCHEMA),
+    };
+  }
 
-  schema.properties.styles = {
-    widget: 'object',
-    title: intl.formatMessage(messages.styling),
-    schema: EMPTY_STYLES_SCHEMA,
-  };
   return schema;
 };
 

package/src/helpers/Extensions/withBlockSchemaEnhancer.test.js

@@ -2,6 +2,7 @@ import {
   addExtensionFieldToSchema,
   applySchemaEnhancer,
   composeSchema,
+  addStyling,
 } from './withBlockSchemaEnhancer';
 
 import config from '@plone/volto/registry';
@@ -246,3 +247,147 @@ describe('composeSchema', () => {
     expect(res).toStrictEqual([6, 9]);
   });
 });
+
+describe('addStyling', () => {
+  it('returns an enhanced schema with the styling wrapper object on it', () => {
+    const intl = { formatMessage: () => 'Styling' };
+
+    const schema = {
+      fieldsets: [
+        {
+          id: 'default',
+          title: 'Default',
+          fields: [],
+        },
+      ],
+      properties: {},
+      required: [],
+    };
+
+    const result = addStyling({ schema, intl });
+
+    expect(result).toStrictEqual({
+      fieldsets: [
+        { id: 'default', title: 'Default', fields: [] },
+        { id: 'styling', title: 'Styling', fields: ['styles'] },
+      ],
+      properties: {
+        styles: {
+          widget: 'object',
+          title: 'Styling',
+          schema: {
+            fieldsets: [
+              {
+                fields: [],
+                id: 'default',
+                title: 'Default',
+              },
+            ],
+            properties: {},
+            required: [],
+          },
+        },
+      },
+      required: [],
+    });
+  });
+
+  it('multiple schema enhancers', () => {
+    const intl = { formatMessage: () => 'Styling' };
+
+    const schema1 = {
+      fieldsets: [
+        {
+          id: 'default',
+          title: 'Default',
+          fields: [],
+        },
+      ],
+      properties: {},
+      required: [],
+    };
+
+    const schema2 = {
+      fieldsets: [
+        {
+          id: 'default',
+          title: 'Default',
+          fields: [],
+        },
+      ],
+      properties: {},
+      required: [],
+    };
+
+    const result = addStyling({ schema: schema1, intl });
+
+    // We add some fields to the styling schema
+    result.properties.styles.schema.properties.align = {
+      widget: 'align',
+      title: 'align',
+      actions: ['left', 'right', 'center'],
+      default: 'left',
+    };
+
+    result.properties.styles.schema.fieldsets[0].fields = ['align'];
+
+    const result2 = addStyling({ schema: schema2, intl });
+
+    expect(result).toStrictEqual({
+      fieldsets: [
+        { id: 'default', title: 'Default', fields: [] },
+        { id: 'styling', title: 'Styling', fields: ['styles'] },
+      ],
+      properties: {
+        styles: {
+          widget: 'object',
+          title: 'Styling',
+          schema: {
+            fieldsets: [
+              {
+                fields: ['align'],
+                id: 'default',
+                title: 'Default',
+              },
+            ],
+            properties: {
+              align: {
+                widget: 'align',
+                title: 'align',
+                actions: ['left', 'right', 'center'],
+                default: 'left',
+              },
+            },
+            required: [],
+          },
+        },
+      },
+      required: [],
+    });
+
+    expect(result2).toStrictEqual({
+      fieldsets: [
+        { id: 'default', title: 'Default', fields: [] },
+        { id: 'styling', title: 'Styling', fields: ['styles'] },
+      ],
+      properties: {
+        styles: {
+          widget: 'object',
+          title: 'Styling',
+          schema: {
+            fieldsets: [
+              {
+                fields: [],
+                id: 'default',
+                title: 'Default',
+              },
+            ],
+            properties: {},
+            required: [],
+          },
+        },
+      },
+      required: [],
+    });
+  });
+});

package/src/helpers/FormValidation/FormValidation.js

@@ -1,5 +1,8 @@
 import { map, uniq, keys, intersection, isEmpty } from 'lodash';
 import { messages } from '../MessageLabels/MessageLabels';
+import config from '@plone/volto/registry';
+import { toast } from 'react-toastify';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
 
 /**
  * Will return the intl message if invalid
@@ -44,7 +47,8 @@ const widgetValidation = {
     isValidEmail: (emailValue, emailObj, intlFunc) => {
       // Email Regex taken from from WHATWG living standard:
       // https://html.spec.whatwg.org/multipage/input.html#e-mail-state-(type=email)
-      const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+      const emailRegex =
+        /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
       const isValid = emailRegex.test(emailValue);
       return !isValid ? intlFunc(messages.isValidEmail) : null;
     },
@@ -67,11 +71,11 @@ const widgetValidation = {
     isValidURL: (urlValue, urlObj, intlFunc) => {
       var urlRegex = new RegExp(
         '^(https?:\\/\\/)?' + // validate protocol
-        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // validate domain name
-        '((\\d{1,3}\\.){3}\\d{1,3}))|' + // validate OR ip (v4) address
-        '(localhost)' + // validate OR localhost address
-        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // validate port and path
-        '(\\?[;&a-z\\d%_.~+=-]*)?' + // validate query string
+          '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // validate domain name
+          '((\\d{1,3}\\.){3}\\d{1,3}))|' + // validate OR ip (v4) address
+          '(localhost)' + // validate OR localhost address
+          '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // validate port and path
+          '(\\?[;&a-z\\d%_.~+=-]*)?' + // validate query string
           '(\\#[-a-z\\d_]*)?$', // validate fragment locator
         'i',
       );
@@ -203,7 +207,7 @@ const validateRequiredFields = (
     const type = schema.properties[requiredField]?.type;
     const widget = schema.properties[requiredField]?.widget;
 
-    let isEmpty = !formData[requiredField];
+    let isEmpty = !formData[requiredField] && formData[requiredField] !== 0;
     if (!isEmpty) {
       if (type === 'array') {
         isEmpty = formData[requiredField]
@@ -369,3 +373,29 @@ class FormValidation {
 }
 
 export default FormValidation;
+
+/**
+ * Check if a file upload is within the maximum size limit.
+ * @param {File} file
+ * @param {Function} intlFunc
+ * @returns {Boolean}
+ */
+export const validateFileUploadSize = (file, intlFunc) => {
+  const isValid =
+    !config.settings.maxFileUploadSize ||
+    file.size <= config.settings.maxFileUploadSize;
+  if (!isValid) {
+    toast.error(
+      <Toast
+        error
+        title={intlFunc(messages.error)}
+        content={intlFunc(messages.fileTooLarge, {
+          limit: `${Math.floor(
+            config.settings.maxFileUploadSize / 1024 / 1024,
+          )}MB`,
+        })}
+      />,
+    );
+  }
+  return isValid;
+};

package/src/helpers/FormValidation/FormValidation.test.js

@@ -66,6 +66,38 @@ describe('FormValidation', () => {
       });
     });
 
+    it('do not treat 0 as missing required value', () => {
+      let newSchema = {
+        ...schema,
+        properties: {
+          ...schema.properties,
+          age: {
+            title: 'age',
+            type: 'integer',
+            widget: 'number',
+            description: '',
+          },
+        },
+        required: ['age'],
+      };
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema: newSchema,
+          formData: { username: 'test username', age: null },
+          formatMessage,
+        }),
+      ).toEqual({
+        age: [messages.required.defaultMessage],
+      });
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema: newSchema,
+          formData: { username: 'test username', age: 0 },
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+
     it('validates incorrect email', () => {
       expect(
         FormValidation.validateFieldsPerFieldset({

package/src/helpers/Html/Html.jsx

@@ -87,14 +87,8 @@ class Html extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const {
-      extractor,
-      markup,
-      store,
-      criticalCss,
-      apiPath,
-      publicURL,
-    } = this.props;
+    const { extractor, markup, store, criticalCss, apiPath, publicURL } =
+      this.props;
     const head = Helmet.rewind();
     const bodyClass = join(BodyClass.rewind(), ' ');
     const htmlAttributes = head.htmlAttributes.toComponent();