@plone/volto 16.0.0-rc.1 → 16.0.0-rc.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## 16.0.0-rc.2 (2022-11-20)
+
+### Bugfix
+
+- Overhaul how block defaults are computed. See https://github.com/plone/volto/pull/3925 for more details @tiberiuichim
+- Cover an additional edge case for defaults @tiberiuichim
+
+### Internal
+
+- Update to Plone 6 RC1 @sneridagh
+
+### Documentation
+
+- Document `Sentry` integration move from Volto core to add-on `@plone-collective/volto-sentry` in configuration, upgrade and deployment. @ksuess
+- Remove `sentryOptions` from settings reference. Clean up `deploying/sentry.md`. @stevepiercy
+- Tidy up `upgrade-guide/index.md`. @stevepiercy
+
 ## 16.0.0-rc.1 (2022-11-18)
 
 ### Feature

package/cypress/support/commands.js

@@ -195,6 +195,30 @@ Cypress.Commands.add('removeContent', ({ path = '' }) => {
   });
 });
 
+// Get content
+Cypress.Commands.add('getContent', ({ path = '' }) => {
+  let api_url, auth;
+  if (Cypress.env('API') === 'guillotina') {
+    api_url = GUILLOTINA_API_URL;
+    auth = {
+      user: 'root',
+      pass: 'root',
+    };
+  } else {
+    api_url = PLONE_API_URL;
+    auth = ploneAuthObj;
+  }
+
+  return cy.request({
+    method: 'get',
+    url: `${api_url}/${path}`,
+    headers: {
+      Accept: 'application/json',
+    },
+    auth: auth,
+  });
+});
+
 // --- Add DX Content-Type ----------------------------------------------------------
 Cypress.Commands.add('addContentType', (name) => {
   let api_url, auth;

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.0.0-rc.1",
+  "version": "16.0.0-rc.2",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -36,6 +36,7 @@
     "postinstall": "make patches",
     "analyze": "BUNDLE_ANALYZE=true razzle build",
     "start": "razzle start",
+    "start:coresandbox": "ADDONS=coresandbox razzle start",
     "build": "razzle build --noninteractive",
     "prepare": "husky install",
     "test": "razzle test --maxWorkers=50%",

package/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx

@@ -279,6 +279,7 @@ export const DefaultTextBlockEditor = (props) => {
                 block={block}
                 schema={schema}
                 title={schema.title}
+                onChangeBlock={onChangeBlock}
                 onChangeField={(id, value) => {
                   onChangeBlock(block, {
                     ...data,

package/packages/volto-slate/src/elementEditor/PluginEditor.jsx

@@ -82,6 +82,7 @@ const PluginEditor = (props) => {
             }
             return onChangeValues(id, value, formData, setFormData);
           }}
+          onChangeFormData={setFormData}
           formData={formData}
           headerActions={
             <>

package/pyvenv.cfg

@@ -0,0 +1,3 @@
+home = /opt/homebrew/opt/python@3.9/bin
+include-system-site-packages = false
+version = 3.9.12

package/src/components/manage/Blocks/Block/BlocksForm.jsx

@@ -1,7 +1,12 @@
 import React from 'react';
+import { useIntl } from 'react-intl';
 import EditBlock from './Edit';
 import { DragDropList } from '@plone/volto/components';
-import { getBlocks } from '@plone/volto/helpers';
+import {
+  getBlocks,
+  getBlocksFieldname,
+  applyBlockDefaults,
+} from '@plone/volto/helpers';
 import {
   addBlock,
   insertBlock,
@@ -42,6 +47,7 @@ const BlocksForm = (props) => {
   const blockList = getBlocks(properties);
 
   const dispatch = useDispatch();
+  const intl = useIntl();
 
   const ClickOutsideListener = () => {
     onSelectBlock(null);
@@ -117,6 +123,16 @@ const BlocksForm = (props) => {
       current,
       config.experimental.addBlockButton.enabled ? 1 : 0,
     );
+
+    const blocksFieldname = getBlocksFieldname(newFormData);
+    const blockData = newFormData[blocksFieldname][newId];
+    newFormData[blocksFieldname][newId] = applyBlockDefaults({
+      data: blockData,
+      intl,
+      metadata,
+      properties,
+    });
+
     onChangeFormData(newFormData);
     return newId;
   };
@@ -124,6 +140,14 @@ const BlocksForm = (props) => {
   const onAddBlock = (type, index) => {
     if (editable) {
       const [id, newFormData] = addBlock(properties, type, index);
+      const blocksFieldname = getBlocksFieldname(newFormData);
+      const blockData = newFormData[blocksFieldname][id];
+      newFormData[blocksFieldname][id] = applyBlockDefaults({
+        data: blockData,
+        intl,
+        metadata,
+        properties,
+      });
       onChangeFormData(newFormData);
       return id;
     }

package/src/components/manage/Form/BlockDataForm.jsx

@@ -1,6 +1,28 @@
+import React from 'react';
 import { InlineForm } from '@plone/volto/components';
 import { withVariationSchemaEnhancer } from '@plone/volto/helpers';
 
-const BlockDataForm = withVariationSchemaEnhancer(InlineForm);
+const EnhancedBlockDataForm = withVariationSchemaEnhancer(InlineForm);
 
-export default BlockDataForm;
+export default function BlockDataForm(props) {
+  const { onChangeBlock, block } = props;
+
+  if (!onChangeBlock) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'BlockDataForm component is used without passing down onChangeBlock as props',
+    );
+  }
+
+  const onChangeFormData = React.useCallback(
+    (data) => onChangeBlock(block, data),
+    [block, onChangeBlock],
+  );
+
+  return (
+    <EnhancedBlockDataForm
+      {...props}
+      onChangeFormData={onChangeBlock ? onChangeFormData : undefined}
+    />
+  );
+}

package/src/components/manage/Form/BlockDataForm.test.jsx

@@ -8,6 +8,24 @@ import { Provider } from 'react-intl-redux';
 
 const mockStore = configureStore();
 
+const withStateManagement = (Component) => ({ ...props }) => {
+  const [formData, onChangeFormData] = React.useState(props.formData || {});
+  const onChangeField = (id, value) => {
+    onChangeFormData({ ...formData, [id]: value });
+  };
+
+  // NOTE: onChangeBlock here is not "really" implemented
+
+  return (
+    <Component
+      {...props}
+      onChangeField={onChangeField}
+      onChangeBlock={(block, data) => onChangeFormData(data)}
+      formData={formData}
+    />
+  );
+};
+
 beforeAll(() => {
   config.widgets = {
     id: {},
@@ -55,6 +73,7 @@ beforeAll(() => {
 
 describe('BlockDataForm', () => {
   it('should does not add variations to schema when unneeded', () => {
+    const WrappedBlockDataForm = withStateManagement(BlockDataForm);
     const store = mockStore({
       intl: {
         locale: 'en',
@@ -71,7 +90,7 @@ describe('BlockDataForm', () => {
     };
     const { container } = render(
       <Provider store={store}>
-        <BlockDataForm
+        <WrappedBlockDataForm
           formData={formData}
           schema={testSchema}
           onChangeField={(id, value) => {}}
@@ -85,6 +104,7 @@ describe('BlockDataForm', () => {
   });
 
   it('should does not add variations when only one variation', () => {
+    const WrappedBlockDataForm = withStateManagement(BlockDataForm);
     const store = mockStore({
       intl: {
         locale: 'en',
@@ -101,7 +121,7 @@ describe('BlockDataForm', () => {
     };
     const { container } = render(
       <Provider store={store}>
-        <BlockDataForm
+        <WrappedBlockDataForm
           formData={formData}
           schema={testSchema}
           onChangeField={(id, value) => {}}
@@ -115,6 +135,7 @@ describe('BlockDataForm', () => {
   });
 
   it('should add variations to schema', () => {
+    const WrappedBlockDataForm = withStateManagement(BlockDataForm);
     const store = mockStore({
       intl: {
         locale: 'en',
@@ -131,7 +152,7 @@ describe('BlockDataForm', () => {
     };
     const { container } = render(
       <Provider store={store}>
-        <BlockDataForm
+        <WrappedBlockDataForm
           formData={formData}
           schema={testSchema}
           onChangeField={(id, value) => {}}

package/src/components/manage/Form/Field.jsx

@@ -232,17 +232,9 @@ const DndConnectedField = injectLazyLibs(['reactDnd'])(UnconnectedField);
 
 const Field = (props) =>
   props.onOrder ? (
-    <DndConnectedField
-      {...props}
-      defaultValue={undefined}
-      value={props.value ?? props.default ?? props.defaultValue}
-    />
+    <DndConnectedField {...props} />
   ) : (
-    <UnconnectedField
-      {...props}
-      defaultValue={undefined}
-      value={props.value ?? props.default ?? props.defaultValue}
-    />
+    <UnconnectedField {...props} />
   );
 
 /**

package/src/components/manage/Form/InlineForm.jsx

@@ -6,6 +6,7 @@ import AnimateHeight from 'react-animate-height';
 import { keys, map, isEqual } from 'lodash';
 
 import { Field, Icon } from '@plone/volto/components';
+import { applySchemaDefaults } from '@plone/volto/helpers';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
@@ -32,6 +33,7 @@ const InlineForm = (props) => {
     error, // Such as {message: "It's not good"}
     errors = {},
     formData,
+    onChangeFormData,
     onChangeField,
     schema,
     title,
@@ -49,26 +51,22 @@ const InlineForm = (props) => {
     // Will set field values from schema, by matching the default values
 
     const objectSchema = typeof schema === 'function' ? schema(props) : schema;
-    const initialData = {
-      ...Object.keys(objectSchema.properties).reduce(
-        (accumulator, currentField) => {
-          return objectSchema.properties[currentField].default
-            ? {
-                ...accumulator,
-                [currentField]: objectSchema.properties[currentField].default,
-              }
-            : accumulator;
-        },
-        {},
-      ),
-      ...formData,
-    };
-
-    Object.keys(initialData).forEach((k) => {
-      if (!isEqual(initialData[k], formData?.[k])) {
-        onChangeField(k, initialData[k]);
-      }
+
+    const initialData = applySchemaDefaults({
+      data: formData,
+      schema: objectSchema,
+      intl,
     });
+
+    if (onChangeFormData) {
+      onChangeFormData(initialData);
+    } else {
+      Object.keys(initialData).forEach((k) => {
+        if (!isEqual(initialData[k], formData?.[k])) {
+          onChangeField(k, initialData[k]);
+        }
+      });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/components/manage/Form/InlineForm.test.jsx

@@ -20,13 +20,18 @@ function NewBaseWidget(name) {
 }
 
 const withStateManagement = (Component) => ({ ...props }) => {
-  const [formData, setFormData] = React.useState(props.formData || {});
+  const [formData, onChangeFormData] = React.useState(props.formData || {});
   const onChangeField = (id, value) => {
-    setFormData({ ...formData, [id]: value });
+    onChangeFormData({ ...formData, [id]: value });
   };
 
   return (
-    <Component {...props} onChangeField={onChangeField} formData={formData} />
+    <Component
+      {...props}
+      onChangeField={onChangeField}
+      onChangeFormData={onChangeFormData}
+      formData={formData}
+    />
   );
 };
 
@@ -114,6 +119,7 @@ describe('Form', () => {
 
     expect(container).toMatchSnapshot();
   });
+
   it('renders a form component with defaults in the schema - Checkboxes', () => {
     const store = mockStore({
       intl: {
@@ -163,7 +169,6 @@ describe('Form', () => {
         />
       </Provider>,
     );
-
     expect(container).toMatchSnapshot();
   });
   it('renders a form component with defaults in the schema - Number field', () => {

package/src/components/manage/Widgets/ObjectListWidget.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Accordion, Button, Segment } from 'semantic-ui-react';
 import { DragDropList, FormFieldWrapper, Icon } from '@plone/volto/components';
+import { applySchemaDefaults } from '@plone/volto/helpers';
 import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
@@ -70,14 +71,14 @@ const ObjectListWidget = (props) => {
     onChange,
     schemaExtender,
   } = props;
-  const [activeColumn, setActiveColumn] = React.useState(value.length - 1);
+  const [activeObject, setActiveObject] = React.useState(value.length - 1);
   const intl = useIntl();
 
-  function handleChangeColumn(e, blockProps) {
+  function handleChangeActiveObject(e, blockProps) {
     const { index } = blockProps;
-    const newIndex = activeColumn === index ? -1 : index;
+    const newIndex = activeObject === index ? -1 : index;
 
-    setActiveColumn(newIndex);
+    setActiveObject(newIndex);
   }
   const objectSchema = typeof schema === 'function' ? schema(props) : schema;
 
@@ -98,18 +99,25 @@ const ObjectListWidget = (props) => {
             }
             onClick={(e) => {
               e.preventDefault();
-              onChange(id, [
-                ...value,
-                {
-                  '@id': uuid(),
-                },
-              ]);
-              setActiveColumn(value.length);
+              const data = {
+                '@id': uuid(),
+              };
+              const objSchema = schemaExtender
+                ? schemaExtender(schema, data, intl)
+                : objectSchema;
+              const dataWithDefaults = applySchemaDefaults({
+                data,
+                schema: objSchema,
+                intl,
+              });
+
+              onChange(id, [...value, dataWithDefaults]);
+              setActiveObject(value.length);
             }}
           >
             <Icon name={addSVG} size="18px" />
             &nbsp;
-            {/* Custom addMessage in schema, else default to english */}
+            {/* Custom addMessage in schema, else default to English */}
             {objectSchema.addMessage ||
               `${intl.formatMessage(messages.add)} ${objectSchema.title}`}
           </Button>
@@ -158,11 +166,11 @@ const ObjectListWidget = (props) => {
             >
               <Accordion key={index} fluid styled>
                 <Accordion.Title
-                  active={activeColumn === index}
+                  active={activeObject === index}
                   index={index}
-                  onClick={handleChangeColumn}
+                  onClick={handleChangeActiveObject}
                   aria-label={`${
-                    activeColumn === index
+                    activeObject === index
                       ? intl.formatMessage(messages.labelCollapseItem)
                       : intl.formatMessage(messages.labelShowItem)
                   } #${index + 1}`}
@@ -195,14 +203,14 @@ const ObjectListWidget = (props) => {
                     >
                       <Icon name={deleteSVG} size="20px" color="#e40166" />
                     </button>
-                    {activeColumn === index ? (
+                    {activeObject === index ? (
                       <Icon name={upSVG} size="20px" />
                     ) : (
                       <Icon name={downSVG} size="20px" />
                     )}
                   </div>
                 </Accordion.Title>
-                <Accordion.Content active={activeColumn === index}>
+                <Accordion.Content active={activeObject === index}>
                   <Segment>
                     <ObjectWidget
                       id={`${id}-${index}`}

package/src/helpers/Blocks/Blocks.js

@@ -3,7 +3,16 @@
  * @module helpers/Blocks
  */
 
-import { omit, without, endsWith, find, isObject, keys, toPairs } from 'lodash';
+import {
+  omit,
+  without,
+  endsWith,
+  find,
+  isObject,
+  keys,
+  toPairs,
+  merge,
+} from 'lodash';
 import move from 'lodash-move';
 import { v4 as uuid } from 'uuid';
 import config from '@plone/volto/registry';
@@ -366,21 +375,55 @@ export function visitBlocks(content, callback) {
   }
 }
 
+let _logged = false;
+
 /**
  * Initializes data with the default values coming from schema
  */
-export function applySchemaDefaults({ data = {}, schema }) {
-  const derivedData = {
-    ...Object.keys(schema.properties).reduce((accumulator, currentField) => {
+export function applySchemaDefaults({ data = {}, schema, intl }) {
+  if (!intl && !_logged) {
+    // Old code that doesn't pass intl doesn't get ObjectWidget defaults
+    // eslint-disable-next-line no-console
+    console.warn(
+      `You should pass intl to any applySchemaDefaults call. By failing to pass
+      the intl object, your ObjectWidget fields will not get default values
+      extracted from their schema.`,
+    );
+    _logged = true;
+  }
+
+  const derivedData = merge(
+    Object.keys(schema.properties).reduce((accumulator, currentField) => {
       return typeof schema.properties[currentField].default !== 'undefined'
         ? {
             ...accumulator,
             [currentField]: schema.properties[currentField].default,
           }
+        : intl &&
+          schema.properties[currentField].schema &&
+          !(schema.properties[currentField].widget === 'object_list') // TODO: this should be renamed as itemSchema
+        ? {
+            ...accumulator,
+            [currentField]: {
+              ...applySchemaDefaults({
+                data: { ...data[currentField], ...accumulator[currentField] },
+                schema:
+                  typeof schema.properties[currentField].schema === 'function'
+                    ? schema.properties[currentField].schema({
+                        data: accumulator[currentField],
+                        formData: accumulator[currentField],
+                        intl,
+                      })
+                    : schema.properties[currentField].schema,
+                intl,
+              }),
+            },
+          }
         : accumulator;
     }, {}),
-    ...data,
-  };
+    data,
+  );
+
   return derivedData;
 }
 
@@ -404,7 +447,7 @@ export function applyBlockDefaults({ data, intl, ...rest }, blocksConfig) {
       : blockSchema;
   schema = applySchemaEnhancer({ schema, formData: data, intl });
 
-  return applySchemaDefaults({ data, schema });
+  return applySchemaDefaults({ data, schema, intl });
 }
 
 export const buildStyleClassNamesFromData = (styles) => {

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

@@ -165,6 +165,151 @@ config.blocks.blocksConfig.enhancedBlockCase2 = {
   }),
 };
 
+const itemSchema = (props) => {
+  return {
+    title: 'Item',
+    addMessage: 'Add',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'href',
+          'title',
+          'description',
+          'preview_image',
+          'extraDefault',
+        ],
+      },
+    ],
+
+    properties: {
+      href: {
+        title: 'Source',
+        widget: 'object_browser',
+        mode: 'link',
+        selectedItemAttrs: [
+          'Title',
+          'Description',
+          'hasPreviewImage',
+          'headtitle',
+        ],
+        allowExternals: true,
+      },
+      title: {
+        title: 'title',
+      },
+      description: {
+        title: 'description',
+      },
+      preview_image: {
+        title: 'Image Override',
+        widget: 'object_browser',
+        mode: 'image',
+        allowExternals: true,
+      },
+      extraDefault: {
+        title: 'Extra',
+        default: 'Extra default',
+      },
+    },
+    required: [],
+  };
+};
+
+config.blocks.blocksConfig.slider = {
+  id: 'slider',
+  title: 'Slider',
+  group: 'Special',
+  restricted: false,
+  mostUsed: false,
+  blockHasOwnFocusManagement: true,
+  blockSchema: (props) => ({
+    title: 'slider',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'slides',
+          'fieldAfterObjectList',
+          'href',
+          'firstWithDefault',
+          'style',
+          'anotherWithDefault',
+          'yetAnotherWithDefault',
+        ],
+      },
+    ],
+    properties: {
+      slides: {
+        widget: 'object_list',
+        schema: itemSchema,
+        default: [
+          {
+            '@id': 'asdasdasd-qweqwe-zxczxc',
+            extraDefault:
+              'Extra default (Manual in parent slider widget default)',
+          },
+        ],
+      },
+      fieldAfterObjectList: {
+        title: 'Field after OL',
+      },
+      href: {
+        widget: 'object_browser',
+        mode: 'link',
+        selectedItemAttrs: [
+          'Title',
+          'Description',
+          'hasPreviewImage',
+          'headtitle',
+        ],
+        allowExternals: true,
+      },
+      firstWithDefault: {
+        title: 'Field with default',
+        default: 'Some default value',
+      },
+      style: {
+        widget: 'object',
+        schema: {
+          title: 'Style',
+          fieldsets: [
+            {
+              id: 'default',
+              fields: ['color', 'theme'],
+              title: 'Default',
+            },
+          ],
+          properties: {
+            color: {
+              title: 'Color',
+              default: 'red',
+            },
+            theme: {
+              title: 'Theme',
+              default: 'primary',
+            },
+          },
+          required: [],
+        },
+      },
+      anotherWithDefault: {
+        title: 'Field with default 2',
+        default: 2,
+        type: 'number',
+      },
+      yetAnotherWithDefault: {
+        title: 'Field with default 3',
+        default: ['one', 'two'],
+        type: 'array',
+      },
+    },
+    required: [],
+  }),
+};
+
 config.settings.defaultBlockType = 'text';
 
 describe('Blocks', () => {
@@ -508,6 +653,95 @@ describe('Blocks', () => {
         description: 'already filled',
       });
     });
+    it('Sets data according to schema default values, top level and styling wrapper object field', () => {
+      const data = {
+        '@type': 'slider',
+      };
+      const schema = config.blocks.blocksConfig.slider.blockSchema({ data });
+
+      // if you don't pass down intl, the ObjectWidget defaults are not applied
+      expect(applySchemaDefaults({ schema, data })).toEqual({
+        '@type': 'slider',
+        anotherWithDefault: 2,
+        slides: [
+          {
+            '@id': 'asdasdasd-qweqwe-zxczxc',
+            extraDefault:
+              'Extra default (Manual in parent slider widget default)',
+          },
+        ],
+        firstWithDefault: 'Some default value',
+        yetAnotherWithDefault: ['one', 'two'],
+      });
+
+      expect(applySchemaDefaults({ schema, data, intl: {} })).toEqual({
+        '@type': 'slider',
+        anotherWithDefault: 2,
+        slides: [
+          {
+            '@id': 'asdasdasd-qweqwe-zxczxc',
+            extraDefault:
+              'Extra default (Manual in parent slider widget default)',
+          },
+        ],
+        firstWithDefault: 'Some default value',
+        style: {
+          color: 'red',
+          theme: 'primary',
+        },
+        yetAnotherWithDefault: ['one', 'two'],
+      });
+    });
+
+    it('Sets data according to schema default values, keeps existing data', () => {
+      const schema = {
+        properties: {
+          style: {
+            widget: 'object',
+            schema: {
+              title: 'Style',
+              fieldsets: [
+                {
+                  id: 'default',
+                  fields: ['color', 'theme'],
+                  title: 'Default',
+                },
+              ],
+              properties: {
+                color: {
+                  title: 'Color',
+                  default: 'red',
+                },
+                theme: {
+                  title: 'Theme',
+                  default: 'primary',
+                },
+              },
+              required: [],
+            },
+          },
+        },
+      };
+
+      expect(
+        applySchemaDefaults({
+          schema,
+          data: {
+            '@type': 'slider',
+            style: {
+              theme: 'secondary',
+            },
+          },
+          intl: {},
+        }),
+      ).toEqual({
+        '@type': 'slider',
+        style: {
+          color: 'red',
+          theme: 'secondary',
+        },
+      });
+    });
   });
 
   describe('applyBlockDefaults', () => {