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

package/src/components/manage/Widgets/IdWidget.stories.jsx

@@ -2,11 +2,24 @@ import React from 'react';
 import IdWidget from './IdWidget';
 import WidgetStory from './story';
 
-export const Text = WidgetStory.bind({
-  props: { id: 'text', title: 'Text' },
+export const Default = WidgetStory.bind({
   widget: IdWidget,
 });
 
+Default.args = {
+  id: 'text',
+  title: 'Text',
+};
+
+export const Errored = WidgetStory.bind({
+  widget: IdWidget,
+});
+Errored.args = {
+  id: 'field-errored',
+  title: 'Errored field title',
+  value: '@@name',
+};
+
 export default {
   title: 'Edit Widgets/Id',
   component: IdWidget,

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

@@ -6,9 +6,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import { compact, isArray, isEmpty, remove } from 'lodash';
+import { compact, includes, isArray, isEmpty, remove } from 'lodash';
 import { connect } from 'react-redux';
-import { Label, Popup, Button } from 'semantic-ui-react';
+import { Image, Label, Popup, Button } from 'semantic-ui-react';
 import {
   flattenToAppURL,
   isInternalURL,
@@ -21,6 +21,7 @@ import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrow
 import { defineMessages, injectIntl } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import config from '@plone/volto/registry';
 
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -122,7 +123,16 @@ export class ObjectBrowserWidgetComponent extends Component {
         }
         trigger={
           <Label>
-            <div className="item-title">{item.title}</div>
+            <div className="item-title">
+              {includes(config.settings.imageObjects, item['@type']) ? (
+                <Image
+                  size="small"
+                  src={`${item['@id']}/@@images/image/thumb`}
+                />
+              ) : (
+                item.title
+              )}
+            </div>
             <div>
               {this.props.mode === 'multiple' && (
                 <Icon

package/src/components/manage/Widgets/ObjectBrowserWidget.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import ObjectBrowserWidget from './ObjectBrowserWidget';
@@ -14,7 +14,7 @@ test('renders a objectBrowser widget component', () => {
       messages: {},
     },
   });
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <MemoryRouter>
         <ObjectBrowserWidget
@@ -26,6 +26,6 @@ test('renders a objectBrowser widget component', () => {
       </MemoryRouter>
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

package/src/components/manage/Widgets/ObjectListWidget.test.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Provider } from 'react-intl-redux';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
-import '@testing-library/jest-dom/extend-expect';
 import ObjectListWidget from './ObjectListWidget';
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');

package/src/components/manage/Widgets/ObjectWidget.test.jsx

@@ -3,7 +3,6 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import ObjectWidget from './ObjectWidget';
 
 const mockStore = configureStore();

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

@@ -445,8 +445,8 @@ class RecurrenceWidget extends Component {
       field === 'dtstart'
         ? value
         : rruleSet.dtstart()
-        ? rruleSet.dtstart()
-        : this.moment().utc().toDate();
+          ? rruleSet.dtstart()
+          : this.moment().utc().toDate();
     var exdates =
       field === 'exdates' ? value : Object.assign([], rruleSet.exdates());
 
@@ -746,7 +746,7 @@ class RecurrenceWidget extends Component {
         id={`${fieldSet || 'field'}-${id}`}
       >
         <Grid>
-          <Grid.Row stretched>
+          <Grid.Row stretched verticalAlign="middle">
             <Grid.Column width="4">
               <div className="wrapper">
                 <label htmlFor={`field-${id}`}>{title}</label>

package/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.test.jsx

@@ -14,7 +14,7 @@ beforeAll(
 
 const mockStore = configureStore();
 
-test('renders a recurrence widget component', async () => {
+test('renders a recurrence widget component with aligned columns', async () => {
   const store = mockStore({
     intl: {
       locale: 'en',

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

@@ -244,8 +244,8 @@ class ReferenceWidget extends Component {
                   )
                 : []
               : value
-              ? flattenToAppURL(value['@id'])
-              : ''
+                ? flattenToAppURL(value['@id'])
+                : ''
           }
           onChange={(event, data) => {
             return onChange(

package/src/components/manage/Widgets/SchemaWidget.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -21,7 +21,7 @@ test('renders a schema widget component', () => {
     },
   });
 
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <SchemaWidget
         id="my-field"
@@ -31,6 +31,6 @@ test('renders a schema widget component', () => {
       />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

package/src/components/manage/Widgets/SchemaWidgetFieldset.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import SchemaWidgetFieldsetComponent from './SchemaWidgetFieldset';
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
@@ -10,7 +10,7 @@ beforeAll(
 );
 
 test('renders a contents item component', () => {
-  const component = renderer.create(
+  const { container } = render(
     <DragDropContext onDragEnd={(x) => x}>
       <Droppable droppableId="tabs-schema-edit" direction="horizontal">
         {(provided, snapshot) => (
@@ -28,7 +28,7 @@ test('renders a contents item component', () => {
               onShowEditFieldset={(x) => x}
               onShowDeleteFieldset={(x) => x}
               onClick={(x) => x}
-              getItemStyle={(x) => x}
+              getItemStyle={(x) => ({})}
               isDraggable={false}
               isDisabled={false}
             />
@@ -38,6 +38,6 @@ test('renders a contents item component', () => {
       </Droppable>
     </DragDropContext>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

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

@@ -277,12 +277,12 @@ export default compose(
       return props.items?.choices
         ? { choices: props.items.choices, lang: state.intl.locale }
         : vocabState
-        ? {
-            choices: vocabState,
-            vocabBaseUrl,
-            lang: state.intl.locale,
-          }
-        : { vocabBaseUrl, lang: state.intl.locale };
+          ? {
+              choices: vocabState,
+              vocabBaseUrl,
+              lang: state.intl.locale,
+            }
+          : { vocabBaseUrl, lang: state.intl.locale };
     },
     { getVocabulary, getVocabularyTokenTitle },
   ),

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

@@ -150,10 +150,10 @@ export const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isDisabled
-      ? '#b5b5b5'
-      : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#b5b5b5'
+        : state.isFocused
+          ? '#4a4a4a'
+          : 'inherit',
     ':active': {
       backgroundColor: null,
     },

package/src/components/manage/Widgets/SelectUtils.js

@@ -28,8 +28,8 @@ export function convertValueToVocabQuery(value) {
           isObject(v)
             ? v.value ?? v.token
             : isString(v) || isBoolean(v)
-            ? v
-            : null,
+              ? v
+              : null,
         )
         .filter((f) => f !== null),
     };

package/src/components/manage/Widgets/UrlWidget.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -15,7 +15,7 @@ test('renders an url widget component', () => {
     },
   });
 
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <UrlWidget
         id="test-url"
@@ -27,6 +27,6 @@ test('renders an url widget component', () => {
       />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

package/src/components/manage/Widgets/VocabularyTermsWidget.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -55,7 +55,7 @@ test('renders a dictionary widget component', () => {
       },
     ],
   };
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <VocabularyTermsWidget
         id="test-dict"
@@ -68,6 +68,6 @@ test('renders a dictionary widget component', () => {
       />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

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

@@ -1,350 +1,2 @@
-/**
- * WysiwygWidget container.
- * @module components/manage/WysiwygWidget/WysiwygWidget
- */
-
-import React, { Component } from 'react';
-import ReactDOMServer from 'react-dom/server';
-import PropTypes from 'prop-types';
-import { connect, Provider } from 'react-redux';
-import { compose } from 'redux';
-import redraft from 'redraft';
-import { Form, Label, TextArea } from 'semantic-ui-react';
-import { map } from 'lodash';
-import { defineMessages, injectIntl } from 'react-intl';
-import configureStore from 'redux-mock-store';
-import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
-
-import { FormFieldWrapper } from '@plone/volto/components';
-
-import loadable from '@loadable/component';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-
-const Editor = loadable(() => import('draft-js-plugins-editor'));
-
-const messages = defineMessages({
-  default: {
-    id: 'Default',
-    defaultMessage: 'Default',
-  },
-  idTitle: {
-    id: 'Short Name',
-    defaultMessage: 'Short Name',
-  },
-  idDescription: {
-    id: 'Used for programmatic access to the fieldset.',
-    defaultMessage: 'Used for programmatic access to the fieldset.',
-  },
-  title: {
-    id: 'Title',
-    defaultMessage: 'Title',
-  },
-  description: {
-    id: 'Description',
-    defaultMessage: 'Description',
-  },
-  required: {
-    id: 'Required',
-    defaultMessage: 'Required',
-  },
-  delete: {
-    id: 'Delete',
-    defaultMessage: 'Delete',
-  },
-});
-
-/**
- * WysiwygWidget HTML richtext editing widget
- *
- * To use it, in schema properties, declare a field like:
- *
- * ```jsx
- * {
- *  title: "Rich text",
- *  widget: 'richtext',
- * }
- * ```
- *
- */
-class WysiwygWidgetComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    /**
-     * Id of the field
-     */
-    id: PropTypes.string.isRequired,
-    /**
-     * Title of the field
-     */
-    title: PropTypes.string.isRequired,
-    /**
-     * Description of the field
-     */
-    description: PropTypes.string,
-    /**
-     * True if field is required
-     */
-    required: PropTypes.bool,
-    /**
-     * Value of the field
-     */
-    value: PropTypes.shape({
-      /**
-       * Content type of the value
-       */
-      'content-type': PropTypes.string,
-      /**
-       * Data of the value
-       */
-      data: PropTypes.string,
-      /**
-       * Encoding of the value
-       */
-      encoding: PropTypes.string,
-    }),
-    /**
-     * Placeholder for the editor
-     */
-    placeholder: PropTypes.string,
-    /**
-     * List of error messages
-     */
-    error: PropTypes.arrayOf(PropTypes.string),
-    /**
-     * On change handler
-     */
-    onChange: PropTypes.func,
-    /**
-     * On delete handler
-     */
-    onDelete: PropTypes.func,
-    /**
-     * On edit handler
-     */
-    onEdit: PropTypes.func,
-    /**
-     * Wrapped form component
-     */
-    wrapped: PropTypes.bool,
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    value: {
-      'content-type': 'text/html',
-      data: '',
-      encoding: 'utf8',
-    },
-    error: [],
-    onEdit: null,
-    onDelete: null,
-    onChange: null,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygWidget
-   */
-  constructor(props) {
-    super(props);
-
-    const { stateFromHTML } = props.draftJsImportHtml;
-    const { EditorState } = props.draftJs;
-    const createInlineToolbarPlugin = props.draftJsInlineToolbarPlugin.default;
-
-    this.draftConfig = config.settings.richtextEditorSettings(props);
-
-    if (!__SERVER__) {
-      let editorState;
-      if (props.value && props.value.data) {
-        const contentState = stateFromHTML(props.value.data, {
-          customBlockFn: this.draftConfig.FromHTMLCustomBlockFn,
-        });
-        editorState = EditorState.createWithContent(contentState);
-      } else {
-        editorState = EditorState.createEmpty();
-      }
-
-      const inlineToolbarPlugin = createInlineToolbarPlugin({
-        structure: this.draftConfig.richTextEditorInlineToolbarButtons,
-      });
-
-      this.state = { editorState, inlineToolbarPlugin };
-    }
-
-    this.schema = {
-      fieldsets: [
-        {
-          id: 'default',
-          title: props.intl.formatMessage(messages.default),
-          fields: ['title', 'id', 'description', 'required'],
-        },
-      ],
-      properties: {
-        id: {
-          type: 'string',
-          title: props.intl.formatMessage(messages.idTitle),
-          description: props.intl.formatMessage(messages.idDescription),
-        },
-        title: {
-          type: 'string',
-          title: props.intl.formatMessage(messages.title),
-        },
-        description: {
-          type: 'string',
-          widget: 'textarea',
-          title: props.intl.formatMessage(messages.description),
-        },
-        required: {
-          type: 'boolean',
-          title: props.intl.formatMessage(messages.required),
-        },
-      },
-      required: ['id', 'title'],
-    };
-
-    this.onChange = this.onChange.bind(this);
-  }
-
-  /**
-   * Change handler
-   * @method onChange
-   * @param {object} editorState Editor state.
-   * @returns {undefined}
-   */
-  onChange(editorState) {
-    const { convertToRaw } = this.props.draftJs;
-    this.setState({ editorState });
-    const mockStore = configureStore();
-
-    this.props.onChange(this.props.id, {
-      'content-type': this.props.value
-        ? this.props.value['content-type']
-        : 'text/html',
-      encoding: this.props.value ? this.props.value.encoding : 'utf8',
-      data: ReactDOMServer.renderToStaticMarkup(
-        <Provider
-          store={mockStore({
-            userSession: {
-              token: this.props.token,
-            },
-          })}
-        >
-          <MemoryRouter>
-            {redraft(
-              convertToRaw(editorState.getCurrentContent()),
-              config.settings.richtextViewSettings.ToHTMLRenderers,
-              config.settings.richtextViewSettings.ToHTMLOptions,
-            )}
-          </MemoryRouter>
-        </Provider>,
-      ),
-    });
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { id, title, description, required, value, error, fieldSet } =
-      this.props;
-
-    if (__SERVER__) {
-      return (
-        <Form.Field
-          inline
-          required={required}
-          error={error.length > 0}
-          className={description ? 'help' : ''}
-          id={`${fieldSet || 'field'}-${id}`}
-        >
-          <div className="wrapper">
-            <label htmlFor={`field-${id}`}>{title}</label>
-            <TextArea id={id} name={id} value={value ? value.data : ''} />
-            {description && <p className="help">{description}</p>}
-            {map(error, (message) => (
-              <Label key={message} basic color="red" pointing>
-                {message}
-              </Label>
-            ))}
-          </div>
-        </Form.Field>
-      );
-    }
-    const { InlineToolbar } = this.state.inlineToolbarPlugin;
-
-    return (
-      <FormFieldWrapper {...this.props} className="wysiwyg">
-        <div style={{ boxSizing: 'initial' }}>
-          {this.props.onChange ? (
-            <>
-              <Editor
-                id={`field-${id}`}
-                readOnly={this.props.isDisabled}
-                onChange={this.onChange}
-                editorState={this.state.editorState}
-                plugins={[
-                  this.state.inlineToolbarPlugin,
-                  ...this.draftConfig.richTextEditorPlugins,
-                ]}
-                placeholder={this.props.placeholder}
-                blockRenderMap={this.draftConfig.extendedBlockRenderMap}
-                blockStyleFn={this.draftConfig.blockStyleFn}
-                customStyleMap={this.draftConfig.customStyleMap}
-              />
-              {this.props.onChange && <InlineToolbar />}
-            </>
-          ) : (
-            <div className="DraftEditor-root" />
-          )}
-        </div>
-      </FormFieldWrapper>
-    );
-  }
-}
-
-export const WysiwygWidget = compose(
-  injectIntl,
-  injectLazyLibs([
-    'draftJs',
-    'draftJsBlockBreakoutPlugin',
-    'draftJsCreateBlockStyleButton',
-    'draftJsCreateInlineStyleButton',
-    'draftJsFilters',
-    'draftJsImportHtml',
-    'draftJsInlineToolbarPlugin',
-    'draftJsLibIsSoftNewlineEvent',
-    'immutableLib',
-  ]),
-  connect(
-    (state, props) => ({
-      token: state.userSession.token,
-    }),
-    {},
-  ),
-)(WysiwygWidgetComponent);
-
-const Preloader = (props) => {
-  const [loaded, setLoaded] = React.useState(false);
-  React.useEffect(() => {
-    Editor.load().then(() => setLoaded(true));
-  }, []);
-  return loaded ? <WysiwygWidget {...props} /> : null;
-};
-
-export default Preloader;
+import HtmlSlateWidget from '@plone/volto-slate/widgets/HtmlSlateWidget';
+export default HtmlSlateWidget;

package/src/components/manage/Workflow/Workflow.jsx

@@ -145,8 +145,8 @@ const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },

package/src/components/theme/App/App.jsx

@@ -242,6 +242,7 @@ export const fetchContent = async ({ store, location }) => {
         id,
         data,
         blocksConfig,
+        content,
       });
       if (!p?.length) {
         throw new Error(