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

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

@@ -21,9 +21,9 @@ const messages = defineMessages({
     defaultMessage: "This is a reserved name and can't be used",
   },
   invalidCharacters: {
-    id: 'Only lowercase letters (a-z) without accents, numbers (0-9), and the characters "-", "_", and "." are allowed.',
+    id: 'Only 7-bit bytes characters are allowed. Cannot contain uppercase letters, special characters: <, >, &, #, /, ?, or others that are illegal in URLs. Cannot start with: _, aq_, @@, ++. Cannot end with __. Cannot be: request,contributors, ., .., "". Cannot contain new lines.',
     defaultMessage:
-      'Only lowercase letters (a-z) without accents, numbers (0-9), and the characters "-", "_", and "." are allowed.',
+      'Only 7-bit bytes characters are allowed. Cannot contain uppercase letters, special characters: <, >, &, #, /, ?, or others that are illegal in URLs. Cannot start with: _, aq_, @@, ++. Cannot end with __. Cannot be: request,contributors, ., .., "". Cannot contain new lines.',
   },
 });
 
@@ -140,7 +140,12 @@ class IdWidget extends Component {
     }
 
     // Check invalid characters
-    if (!/^[.a-z0-9_-]*$/.test(value)) {
+    if (
+      // eslint-disable-next-line no-control-regex
+      !/^(?!.*\\)(?!\+\+)(?!@@)(?!.*request)(?!.*contributors)(?!aq_)(?!.*__)(?!_)(?!((^|\/)\.\.?($|\/)|^"\s*"$))(?!.*[A-Z])(?:(?![\r\n<>/?&#\x00-\x1F\x7F])['\x00-\x7F\u0080-\uFFFF. _])*$/.test(
+        value,
+      )
+    ) {
       error.push(this.props.intl.formatMessage(messages.invalidCharacters));
     }
 

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();
 });