@plone/volto 14.0.0-alpha.35 → 14.0.0-alpha.36

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 14.0.0-alpha.36 (2021-11-25)
+
+### Bugfix
+
+- Fix regression in actions vocabularies calls because the change to use contextual schemas @sneridagh
+- Include block schema enhancers (main block schema enhancer + variation schema enhancer) when calculating block default data @tiberiuichim
+
+### Internal
+
+- Fix references to old configuration style in apiExpanders documentation @tiberiuichim
+- Add `applySchemaDefaults`, in addition to `applyBlockDefaults`, to allow reuse in object widgets and other advanced scenarios @tiberiuichim
+
 ## 14.0.0-alpha.35 (2021-11-24)
 
 ### Bugfix

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "14.0.0-alpha.35",
+  "version": "14.0.0-alpha.36",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/src/actions/vocabularies/vocabularies.js

@@ -7,7 +7,6 @@ import {
   GET_VOCABULARY,
   GET_VOCABULARY_TOKEN_TITLE,
 } from '@plone/volto/constants/ActionTypes';
-import config from '@plone/volto/registry';
 
 /**
  * Get vocabulary given a URL (coming from a Schema) or from a vocabulary name.
@@ -18,11 +17,10 @@ import config from '@plone/volto/registry';
  * @returns {Object} Get vocabulary action.
  */
 export function getVocabulary(vocabNameOrURL, query = null, start = 0) {
-  const { settings } = config;
   // In case we have a URL, we have to get the vocabulary name
-  const vocabulary =
-    vocabNameOrURL &&
-    vocabNameOrURL.replace(`${settings.apiPath}/@vocabularies/`, '');
+  const vocabulary = /(?<=\/@vocabularies\/)(.*)/.test(vocabNameOrURL)
+    ? /(?<=\/@vocabularies\/)(.*)/.exec(vocabNameOrURL)[0]
+    : vocabNameOrURL;
   let queryString = `b_start=${start}`;
   if (query) {
     queryString = `${queryString}&title=${query}`;
@@ -47,12 +45,10 @@ export function getVocabulary(vocabNameOrURL, query = null, start = 0) {
  * @returns {Object} Get vocabulary action.
  */
 export function getVocabularyTokenTitle(vocabNameOrURL, token = null) {
-  const { settings } = config;
   // In case we have a URL, we have to get the vocabulary name
-  const vocabulary = vocabNameOrURL.replace(
-    `${settings.apiPath}/@vocabularies/`,
-    '',
-  );
+  const vocabulary = /(?<=\/@vocabularies\/)(.*)/.test(vocabNameOrURL)
+    ? /(?<=\/@vocabularies\/)(.*)/.exec(vocabNameOrURL)[0]
+    : vocabNameOrURL;
 
   return {
     type: GET_VOCABULARY_TOKEN_TITLE,

package/src/actions/vocabularies/vocabularies.test.js

@@ -15,5 +15,31 @@ describe('Vocabularies actions', () => {
         `/@vocabularies/${vocabulary}?b_start=0&title=${query}`,
       );
     });
+    it('should create an action to get a vocabulary if a URL is passed', () => {
+      const vocabulary =
+        'http://localhost:8080/@vocabularies/plone.app.vocabularies.Keywords';
+      const query = 'john';
+      const action = getVocabulary(vocabulary, query);
+
+      expect(action.type).toEqual(GET_VOCABULARY);
+      expect(action.vocabulary).toEqual(vocabulary);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(
+        `/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&title=${query}`,
+      );
+    });
+    it('should create an action to get a vocabulary if a URL with path is passed', () => {
+      const vocabulary =
+        'http://localhost:8080/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
+      const query = 'john';
+      const action = getVocabulary(vocabulary, query);
+
+      expect(action.type).toEqual(GET_VOCABULARY);
+      expect(action.vocabulary).toEqual(vocabulary);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(
+        `/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&title=${query}`,
+      );
+    });
   });
 });

package/src/helpers/Blocks/Blocks.js

@@ -7,6 +7,7 @@ import { omit, without, endsWith, find, keys } from 'lodash';
 import move from 'lodash-move';
 import { v4 as uuid } from 'uuid';
 import config from '@plone/volto/registry';
+import { applySchemaEnhancer } from '@plone/volto/helpers';
 
 /**
  * Get blocks field.
@@ -361,8 +362,27 @@ export function visitBlocks(content, callback) {
   }
 }
 
+/**
+ * Initializes data with the default values coming from schema
+ */
+export function applySchemaDefaults({ data = {}, schema }) {
+  const derivedData = {
+    ...Object.keys(schema.properties).reduce((accumulator, currentField) => {
+      return schema.properties[currentField].default
+        ? {
+            ...accumulator,
+            [currentField]: schema.properties[currentField].default,
+          }
+        : accumulator;
+    }, {}),
+    ...data,
+  };
+  return derivedData;
+}
+
 /**
  * Apply the block's default (as defined in schema) to the block data.
+ *
  * @function applyBlockDefaults
  * @param {Object} params An object with data, intl and anything else
  * @return {Object} Derived data, with the defaults extracted from the schema
@@ -373,22 +393,11 @@ export function applyBlockDefaults({ data, intl, ...rest }, blocksConfig) {
     (blocksConfig || config.blocks.blocksConfig)[block_type] || {};
   if (!blockSchema) return data;
 
-  const schema =
+  let schema =
     typeof blockSchema === 'function'
       ? blockSchema({ data, intl, ...rest })
       : blockSchema;
+  schema = applySchemaEnhancer({ schema, formData: data, intl });
 
-  const derivedData = {
-    ...Object.keys(schema.properties).reduce((accumulator, currentField) => {
-      return schema.properties[currentField].default
-        ? {
-            ...accumulator,
-            [currentField]: schema.properties[currentField].default,
-          }
-        : accumulator;
-    }, {}),
-    ...data,
-  };
-
-  return derivedData;
+  return applySchemaDefaults({ data, schema });
 }

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

@@ -15,6 +15,7 @@ import {
   previousBlockId,
   visitBlocks,
   applyBlockDefaults,
+  applySchemaDefaults,
 } from './Blocks';
 
 import config from '@plone/volto/registry';
@@ -54,6 +55,111 @@ config.blocks.blocksConfig.text = {
   }),
 };
 
+config.blocks.blocksConfig.enhancedBlock = {
+  id: 'enhancedBlock',
+  title: 'Text',
+  group: 'text',
+  restricted: false,
+  mostUsed: false,
+  blockHasOwnFocusManagement: true,
+  blockHasValue: (data) => {
+    const isEmpty =
+      !data.text ||
+      (data.text?.blocks?.length === 1 && data.text.blocks[0].text === '');
+    return !isEmpty;
+  },
+  schemaEnhancer: ({ schema, formData }) => {
+    schema.fieldsets[0].fields.push('extra');
+    schema.properties.extra = { default: 'Extra value' };
+    return schema;
+  },
+  variations: [
+    {
+      id: 'firstVariation',
+      schemaEnhancer: ({ schema, formData }) => {
+        schema.fieldsets[0].fields.push('extraVariationField');
+        schema.properties['extraVariationField'] = {
+          default: 'Extra variation field',
+        };
+        return schema;
+      },
+    },
+  ],
+  blockSchema: ({ data }) => ({
+    fieldsets: [
+      {
+        id: 'default',
+        fields: ['title', 'description', 'nonDefault'],
+        title: 'Default',
+      },
+    ],
+    properties: {
+      title: {
+        default: 'Default title',
+      },
+      description: {
+        default: 'Default description',
+      },
+      nonDefault: {
+        title: 'Non default',
+      },
+    },
+  }),
+};
+
+config.blocks.blocksConfig.enhancedBlockCase2 = {
+  id: 'enhancedBlockCase2',
+  title: 'Text',
+  group: 'text',
+  restricted: false,
+  mostUsed: false,
+  blockHasOwnFocusManagement: true,
+  blockHasValue: (data) => {
+    const isEmpty =
+      !data.text ||
+      (data.text?.blocks?.length === 1 && data.text.blocks[0].text === '');
+    return !isEmpty;
+  },
+  schemaEnhancer: ({ schema, formData }) => {
+    schema.fieldsets[0].fields.push('extra');
+    schema.properties.extra = {
+      default: 'Extra value from block schema enhancer',
+    };
+    return schema;
+  },
+  variations: [
+    {
+      id: 'firstVariation',
+      schemaEnhancer: ({ schema, formData }) => {
+        schema.properties['extra'] = {
+          default: 'Extra variation field',
+        };
+        return schema;
+      },
+    },
+  ],
+  blockSchema: ({ data }) => ({
+    fieldsets: [
+      {
+        id: 'default',
+        fields: ['title', 'description', 'nonDefault'],
+        title: 'Default',
+      },
+    ],
+    properties: {
+      title: {
+        default: 'Default title',
+      },
+      description: {
+        default: 'Default description',
+      },
+      nonDefault: {
+        title: 'Non default',
+      },
+    },
+  }),
+};
+
 config.settings.defaultBlockType = 'text';
 
 describe('Blocks', () => {
@@ -383,6 +489,21 @@ describe('Blocks', () => {
     });
   });
 
+  describe('applySchemaDefaults', () => {
+    it('Sets data according to schema default values', () => {
+      const data = {
+        '@type': 'text',
+        description: 'already filled',
+      };
+      const schema = config.blocks.blocksConfig.text.blockSchema({ data });
+      expect(applySchemaDefaults({ schema, data })).toEqual({
+        '@type': 'text',
+        title: 'Default title',
+        description: 'already filled',
+      });
+    });
+  });
+
   describe('applyBlockDefaults', () => {
     it('Sets data according to schema default values', () => {
       const data = {
@@ -406,5 +527,50 @@ describe('Blocks', () => {
         description: 'already filled',
       });
     });
+
+    it('Supports block schema enhancers', () => {
+      const data = {
+        '@type': 'enhancedBlock',
+        description: 'already filled',
+        // variation: 'firstVariation',
+      };
+      expect(applyBlockDefaults({ data })).toEqual({
+        '@type': 'enhancedBlock',
+        title: 'Default title',
+        description: 'already filled',
+        extra: 'Extra value',
+      });
+    });
+
+    it('Supports block schema enhancers coming from variations', () => {
+      const data = {
+        '@type': 'enhancedBlock',
+        description: 'already filled',
+        variation: 'firstVariation',
+      };
+      expect(applyBlockDefaults({ data })).toEqual({
+        '@type': 'enhancedBlock',
+        title: 'Default title',
+        description: 'already filled',
+        extra: 'Extra value',
+        extraVariationField: 'Extra variation field',
+        variation: 'firstVariation',
+      });
+    });
+
+    it('Block schema enhancers override variations', () => {
+      const data = {
+        '@type': 'enhancedBlockCase2',
+        description: 'already filled',
+        variation: 'firstVariation',
+      };
+      expect(applyBlockDefaults({ data })).toEqual({
+        '@type': 'enhancedBlockCase2',
+        title: 'Default title',
+        description: 'already filled',
+        extra: 'Extra value from block schema enhancer',
+        variation: 'firstVariation',
+      });
+    });
   });
 });

package/src/helpers/Extensions/withBlockSchemaEnhancer.js

@@ -59,6 +59,39 @@ export const addExtensionFieldToSchema = ({
   return schema;
 };
 
+/**
+ * A generic HOC that provides "schema enhancer functionality" for any custom
+ * block extension.
+ *
+ * This enables blocks to have additional "variations", beyond the usual
+ * `variations` field. This function is not directly used by Volto.
+ *
+ * To be used with a block configuration like:
+ *
+ * ```
+ *  {
+ *    id: 'someBlockId',
+ *    extensions: {
+ *      '<someExtensionName>': {
+ *        items: [
+ *          {
+ *            id: 'selectFacet',
+ *            title: 'Select',
+ *            view: SelectFacet,
+ *            isDefault: true,
+ *          },
+ *          {
+ *            id: 'checkboxFacet',
+ *            title: 'Checkbox',
+ *            view: CheckboxFacet,
+ *            isDefault: false,
+ *          },
+ *        ]
+ *      }
+ *     }
+ *  }
+ * ```
+ */
 export const withBlockSchemaEnhancer = (
   FormComponent,
   extensionName = 'vendor',
@@ -111,6 +144,36 @@ export const withBlockSchemaEnhancer = (
   return <FormComponent {...props} schema={schema} />;
 };
 
+/**
+ * Apply block variation schema enhancers to the provided schema, using block
+ * information from the provided block data (as `formData`).
+ *
+ * Blocks can be enhanced with variations declared like:
+ *
+ * ```
+ *  {
+ *    id: 'searchBlock',
+ *    schemaEnhancer: ({schema, formData, intl}) => schema,
+ *    variations: [
+ *      {
+ *        id: 'facetsRightSide',
+ *        title: 'Facets on right side',
+ *        view: RightColumnFacets,
+ *        isDefault: true,
+ *      },
+ *      {
+ *        id: 'facetsLeftSide',
+ *        title: 'Facets on left side',
+ *        view: LeftColumnFacets,
+ *        isDefault: false,
+ *        schemaEnhancer: ({schema, formData, intl}) => schema,
+ *      },
+ *    ],
+ *
+ * ```
+ * Notice that each variation can declare an option schema enhancer, and each
+ * block supports an optional `schemaEnhancer` function.
+ */
 export const applySchemaEnhancer = ({
   schema: originalSchema,
   formData,
@@ -123,11 +186,15 @@ export const applySchemaEnhancer = ({
   const variations = blocks?.blocksConfig[blockType]?.variations || [];
 
   if (variations.length === 0) {
-    // No variations present but anyways
-    // finalize the schema with a schemaEnhancer in the block config is present
+    // No variations present but we finalize the schema with a schemaEnhancer
+    // in the block config (if present)
     schemaEnhancer = blocks.blocksConfig?.[blockType]?.schemaEnhancer;
     if (schemaEnhancer)
-      schema = schemaEnhancer({ schema: originalSchema, formData, intl });
+      schema = schemaEnhancer({
+        schema: cloneDeep(originalSchema),
+        formData,
+        intl,
+      });
     return schema || originalSchema;
   }
 
@@ -148,6 +215,13 @@ export const applySchemaEnhancer = ({
   return schema || originalSchema;
 };
 
+/**
+ * A HOC that enhances the incoming schema prop with block variations support
+ * by:
+ *
+ * - applies the selected variation's schema enhancer
+ * - adds the variation selection input (as a choice widget)
+ */
 export const withVariationSchemaEnhancer = (FormComponent) => (props) => {
   const { formData, schema: originalSchema } = props;
   const intl = useIntl();

package/src/helpers/index.js

@@ -50,6 +50,7 @@ export {
   nextBlockId,
   previousBlockId,
   applyBlockDefaults,
+  applySchemaDefaults,
 } from '@plone/volto/helpers/Blocks/Blocks';
 export BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 export ScrollToTop from '@plone/volto/helpers/ScrollToTop/ScrollToTop';