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

package/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx

@@ -12,7 +12,9 @@ import {
   updateUser,
   updateGroup,
   getUserSchema,
+  getUser,
 } from '@plone/volto/actions';
+import jwtDecode from 'jwt-decode';
 import {
   Icon,
   ModalForm,
@@ -23,7 +25,12 @@ import {
   Error,
 } from '@plone/volto/components';
 import { Link } from 'react-router-dom';
-import { Helmet, messages } from '@plone/volto/helpers';
+import {
+  Helmet,
+  messages,
+  isManager,
+  canAssignGroup,
+} from '@plone/volto/helpers';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import addUserSvg from '@plone/volto/icons/add-user.svg';
 import saveSVG from '@plone/volto/icons/save.svg';
@@ -32,7 +39,7 @@ import { find, map, pull, difference } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
 import { bindActionCreators, compose } from 'redux';
@@ -77,6 +84,19 @@ class UsersControlpanel extends Component {
         roles: PropTypes.arrayOf(PropTypes.string),
       }),
     ).isRequired,
+    user: PropTypes.shape({
+      '@id': PropTypes.string,
+      id: PropTypes.string,
+      description: PropTypes.string,
+      email: PropTypes.string,
+      fullname: PropTypes.string,
+      groups: PropTypes.object,
+      location: PropTypes.string,
+      portrait: PropTypes.string,
+      home_page: PropTypes.string,
+      roles: PropTypes.arrayOf(PropTypes.string),
+      username: PropTypes.string,
+    }).isRequired,
   };
 
   /**
@@ -124,6 +144,7 @@ class UsersControlpanel extends Component {
       });
     }
     await this.props.getUserSchema();
+    await this.props.getUser(this.props.userId);
   };
 
   // Because username field needs to be disabled if email login is enabled!
@@ -338,8 +359,8 @@ class UsersControlpanel extends Component {
           entry.id === name && !entry.roles.includes(value)
             ? [...entry.roles, value]
             : entry.id !== name
-            ? entry.roles
-            : pull(entry.roles, value),
+              ? entry.roles
+              : pull(entry.roles, value),
       })),
     });
   }
@@ -406,6 +427,20 @@ class UsersControlpanel extends Component {
     }
   }
 
+  /**
+   * Filters the roles a user can assign when adding a user.
+   * @method canAssignAdd
+   * @returns {arry}
+   */
+  canAssignAdd(isManager) {
+    if (isManager) return this.props.roles;
+    return this.props.user?.roles
+      ? this.props.roles.filter((role) =>
+          this.props.user.roles.includes(role.id),
+        )
+      : [];
+  }
+
   /**
    * Render method.
    * @method render
@@ -426,7 +461,9 @@ class UsersControlpanel extends Component {
     // of the userschema is changed and it is used like that through
     // the lifecycle of the application
     let adduserschema = {};
+    let isUserManager = false;
     if (this.props?.userschema?.loaded) {
+      isUserManager = isManager(this.props.user);
       adduserschema = JSON.parse(
         JSON.stringify(this.props?.userschema?.userschema),
       );
@@ -454,13 +491,18 @@ class UsersControlpanel extends Component {
       adduserschema.properties['roles'] = {
         title: this.props.intl.formatMessage(messages.addUserFormRolesTitle),
         type: 'array',
-        choices: this.props.roles.map((role) => [role.id, role.title]),
+        choices: this.canAssignAdd(isUserManager).map((role) => [
+          role.id,
+          role.title,
+        ]),
         noValueOption: false,
       };
       adduserschema.properties['groups'] = {
         title: this.props.intl.formatMessage(messages.addUserGroupNameTitle),
         type: 'array',
-        choices: this.props.groups.map((group) => [group.id, group.id]),
+        choices: this.props.groups
+          .filter((group) => canAssignGroup(isUserManager, group))
+          .map((group) => [group.id, group.id]),
         noValueOption: false,
       };
       if (
@@ -598,6 +640,7 @@ class UsersControlpanel extends Component {
                         inheritedRole={this.props.inheritedRole}
                         userschema={this.props.userschema}
                         listUsers={this.props.listUsers}
+                        isUserManager={isUserManager}
                       />
                     ))}
                 </Table.Body>
@@ -619,8 +662,8 @@ class UsersControlpanel extends Component {
             </div>
           </Form>
         </Segment.Group>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -672,9 +715,9 @@ class UsersControlpanel extends Component {
                   </Button>
                 </>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }
@@ -686,6 +729,10 @@ export default compose(
     (state, props) => ({
       roles: state.roles.roles,
       users: state.users.users,
+      user: state.users.user,
+      userId: state.userSession.token
+        ? jwtDecode(state.userSession.token).sub
+        : '',
       groups: state.groups.groups,
       many_users: state.controlpanels?.controlpanel?.data?.many_users,
       many_groups: state.controlpanels?.controlpanel?.data?.many_groups,
@@ -710,6 +757,7 @@ export default compose(
           updateUser,
           updateGroup,
           getUserSchema,
+          getUser,
         },
         dispatch,
       ),

package/src/components/manage/Controlpanels/Users/UsersControlpanel.test.jsx

@@ -1,21 +1,28 @@
 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 jwt from 'jsonwebtoken';
 
 import UsersControlpanel from './UsersControlpanel';
 
 const mockStore = configureStore();
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+
 describe('UsersControlpanel', () => {
   it('renders a user control component', () => {
     const store = mockStore({
+      userSession: {
+        token: jwt.sign({ sub: 'john' }, 'secret'),
+      },
       roles: { roles: [] },
       users: {
         users: [],
         create: { loading: false },
+        user: {
+          roles: ['Manager'],
+          '@id': 'admin',
+        },
       },
       groups: {
         groups: [],
@@ -29,12 +36,13 @@ describe('UsersControlpanel', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <UsersControlpanel location={{ pathname: '/blog' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Delete/Delete.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Button, Container, List, Segment } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
@@ -110,15 +110,15 @@ const Delete = () => {
             </Segment>
           </Segment.Group>
         </Container>
-        {isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {isClient &&
+          createPortal(
             <Toolbar
               pathname={pathname}
               hideDefaultViewButtons
               inner={<span />}
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }

package/src/components/manage/Delete/Delete.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 { MemoryRouter } from 'react-router-dom';
@@ -8,9 +8,7 @@ import Delete from './Delete';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('Delete', () => {
   it('renders an empty delete component', () => {
@@ -27,15 +25,16 @@ describe('Delete', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Delete location={{ pathname: '/blog', search: {} }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a delete component', () => {
@@ -54,14 +53,15 @@ describe('Delete', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Delete location={{ pathname: '/blog', search: {} }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Diff/Diff.jsx

@@ -11,7 +11,7 @@ import { compose } from 'redux';
 import { filter, isEqual, map } from 'lodash';
 import { Container, Button, Dropdown, Grid, Table } from 'semantic-ui-react';
 import { Link, withRouter } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import qs from 'query-string';
 
@@ -333,8 +333,8 @@ class Diff extends Component {
               view={this.props.view}
             />
           )}
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -351,9 +351,9 @@ class Diff extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

package/src/components/manage/Diff/Diff.test.jsx

@@ -8,9 +8,7 @@ import Diff from './Diff';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
@@ -75,6 +73,7 @@ describe('Diff', () => {
       <Provider store={store}>
         <MemoryRouter initialEntries={['/blog?one=0&two=1']}>
           <Diff />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );

package/src/components/manage/Display/Display.jsx

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

package/src/components/manage/Edit/Edit.jsx

@@ -11,7 +11,7 @@ import { compose } from 'redux';
 import { asyncConnect, hasApiExpander } from '@plone/volto/helpers';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Button, Grid, Menu } from 'semantic-ui-react';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import qs from 'query-string';
 import { find } from 'lodash';
 import { toast } from 'react-toastify';
@@ -34,6 +34,7 @@ import {
   unlockContent,
   getSchema,
   listActions,
+  setFormData,
 } from '@plone/volto/actions';
 import {
   flattenToAppURL,
@@ -41,6 +42,7 @@ import {
   hasBlocksData,
 } from '@plone/volto/helpers';
 import { preloadLazyLibs } from '@plone/volto/helpers/Loadable';
+import { tryParseJSON } from '@plone/volto/helpers';
 
 import saveSVG from '@plone/volto/icons/save.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -64,6 +66,10 @@ const messages = defineMessages({
     id: 'Error',
     defaultMessage: 'Error',
   },
+  someErrors: {
+    id: 'There are some errors.',
+    defaultMessage: 'There are some errors.',
+  },
 });
 
 /**
@@ -182,6 +188,7 @@ class Edit extends Component {
       });
     }
     if (this.props.updateRequest.loading && nextProps.updateRequest.loaded) {
+      this.props.setFormData({});
       this.props.history.push(
         this.props.returnUrl || getBaseUrl(this.props.pathname),
       );
@@ -198,13 +205,30 @@ class Edit extends Component {
         new DOMParser().parseFromString(message, 'text/html')?.all[0]
           ?.textContent || message;
 
+      const errorsList = tryParseJSON(error);
+      let erroMessage;
+      if (Array.isArray(errorsList)) {
+        const invariantErrors = errorsList
+          .filter((errorItem) => !('field' in errorItem))
+          .map((errorItem) => errorItem['message']);
+        if (invariantErrors.length > 0) {
+          // Plone invariant validation message.
+          erroMessage = invariantErrors.join(' - ');
+        } else {
+          // Error in specific field.
+          erroMessage = this.props.intl.formatMessage(messages.someErrors);
+        }
+      } else {
+        erroMessage = error;
+      }
+
       this.setState({ error: error });
 
       toast.error(
         <Toast
           error
           title={this.props.intl.formatMessage(messages.error)}
-          content={`${nextProps.updateRequest.error.status} ${error}`}
+          content={erroMessage}
         />,
       );
     }
@@ -257,6 +281,7 @@ class Edit extends Component {
    * @returns {undefined}
    */
   onCancel() {
+    this.props.setFormData({});
     this.props.history.push(
       this.props.returnUrl || getBaseUrl(this.props.pathname),
     );
@@ -286,6 +311,7 @@ class Edit extends Component {
       <Form
         isEditForm
         ref={this.form}
+        navRoot={this.props.content?.['@components']?.navroot?.navroot || {}}
         schema={this.props.schema}
         type={this.props.content?.['@type']}
         formData={this.props.content}
@@ -306,6 +332,11 @@ class Edit extends Component {
         onSelectForm={() => {
           this.setState({ formSelected: 'editForm' });
         }}
+        global
+        // Properties to pass to the BlocksForm to match the View ones
+        history={this.props.history}
+        location={this.props.location}
+        token={this.props.token}
       />
     );
 
@@ -373,11 +404,10 @@ class Edit extends Component {
               </>
             )}
 
-            {editPermission && this.state.visual && this.state.isClient && (
-              <Portal node={document.getElementById('sidebar')}>
-                <Sidebar />
-              </Portal>
-            )}
+            {editPermission &&
+              this.state.visual &&
+              this.state.isClient &&
+              createPortal(<Sidebar />, document.getElementById('sidebar'))}
           </>
         )}
         {!editPermission && (
@@ -395,8 +425,8 @@ class Edit extends Component {
             )}
           </>
         )}
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -444,9 +474,9 @@ class Edit extends Component {
                   )}
                 </>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }
@@ -522,6 +552,7 @@ export default compose(
       getSchema,
       lockContent,
       unlockContent,
+      setFormData,
     },
   ),
   preloadLazyLibs('cms'),

package/src/components/manage/Edit/Edit.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 jwt from 'jsonwebtoken';
@@ -8,9 +8,9 @@ import { __test__ as Edit } from './Edit';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+jest.mock('../Sidebar/Sidebar', () => jest.fn(() => <div id="Sidebar" />));
+
 jest.mock('../Form/Form', () => jest.fn(() => <div className="Form" />));
 
 describe('Edit', () => {
@@ -50,13 +50,15 @@ describe('Edit', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
+        <div id="toolbar"></div>
         <Edit location={{ pathname: '/blog', search: {} }} />
+        <div id="sidebar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders an edit component', () => {
@@ -97,12 +99,14 @@ describe('Edit', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
+        <div id="toolbar"></div>
         <Edit location={{ pathname: '/blog', search: {} }} />
+        <div id="sidebar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import BlockDataForm from './BlockDataForm';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';