@plone/volto 18.0.0-alpha.8 → 18.0.0

package/src/components/manage/Controlpanels/Groups/GroupsControlpanel.test.jsx

@@ -1,17 +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 GroupsControlpanel from './GroupsControlpanel';
 
 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'),
+      },
+      users: {
+        users: [],
+        create: { loading: false },
+        user: {
+          roles: ['Manager'],
+          '@id': 'admin',
+        },
+      },
       roles: { roles: [] },
       groups: {
         groups: [],
@@ -25,12 +36,13 @@ describe('UsersControlpanel', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <GroupsControlpanel location={{ pathname: '/blog' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Controlpanels/Groups/RenderGroups.jsx

@@ -1,123 +1,86 @@
-/**
- * Users controlpanel groups.
- * @module components/manage/Controlpanels/UsersControlpanelGroups
- */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import ploneSVG from '@plone/volto/icons/plone.svg';
 import { Icon } from '@plone/volto/components';
+import { canAssignRole } from '@plone/volto/helpers';
 
-/**
- * UsersControlpanelGroups class.
- * @class UsersControlpanelGroups
- * @extends Component
- */
-class RenderGroups extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    //single group
-    group: PropTypes.shape({
-      title: PropTypes.string,
-      description: PropTypes.string,
-      email: PropTypes.string,
-      groupname: PropTypes.string,
-      roles: PropTypes.arrayOf(PropTypes.string),
-    }).isRequired,
-
-    roles: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.string,
-      }),
-    ).isRequired,
-    inheritedRole: PropTypes.array,
-    onDelete: PropTypes.func.isRequired,
+const RenderGroups = (props) => {
+  const onChange = (event, { value }) => {
+    const [group, role] = value.split('.');
+    props.updateGroups(group, role);
   };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Sharing
-   */
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  /**
-   * @param {*} event
-   * @param {*} { value }
-   * @memberof UsersControlpanelUser
-   */
-  onChange(event, { value }) {
-    const [group, role] = value.split('&role=');
-    this.props.updateGroups(group, role);
-  }
-
-  /**
-   *@param {*}
-   *@returns {Boolean}
-   *@memberof RenderGroups
-   */
-  isAuthGroup = (roleId) => {
-    return this.props.inheritedRole.includes(roleId);
+  const isAuthGroup = (roleId) => {
+    return props.inheritedRole.includes(roleId);
   };
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Table.Row key={this.props.group.title}>
-        <Table.Cell>{this.props.group.groupname}</Table.Cell>
-        {this.props.roles.map((role) => (
-          <Table.Cell key={role.id}>
-            {this.props.inheritedRole &&
-            this.props.inheritedRole.includes(role.id) &&
-            this.props.group.roles.includes('Authenticated') ? (
-              <Icon
-                name={ploneSVG}
-                size="20px"
-                color="#007EB1"
-                title={'plone-svg'}
-              />
-            ) : (
-              <Checkbox
-                checked={
-                  this.props.group.id === 'AuthenticatedUsers'
-                    ? this.isAuthGroup(role.id)
-                    : this.props.group.roles.includes(role.id)
-                }
-                onChange={this.onChange}
-                value={`${this.props.group.id}&role=${role.id}`}
-              />
-            )}
-          </Table.Cell>
-        ))}
-        <Table.Cell textAlign="right">
+  const canDeleteGroup = () => {
+    if (props.isUserManager) return true;
+    return !props.group.roles.includes('Manager');
+  };
+  return (
+    <Table.Row key={props.group.title}>
+      <Table.Cell>{props.group.groupname}</Table.Cell>
+      {props.roles.map((role) => (
+        <Table.Cell key={role.id}>
+          {props.inheritedRole &&
+          props.inheritedRole.includes(role.id) &&
+          props.group.roles.includes('Authenticated') ? (
+            <Icon
+              name={ploneSVG}
+              size="20px"
+              color="#007EB1"
+              title={'plone-svg'}
+            />
+          ) : (
+            <Checkbox
+              checked={
+                props.group.id === 'AuthenticatedUsers'
+                  ? isAuthGroup(role.id)
+                  : props.group.roles.includes(role.id)
+              }
+              onChange={onChange}
+              value={`${props.group.id}.${role.id}`}
+              disabled={!canAssignRole(props.isUserManager, role)}
+            />
+          )}
+        </Table.Cell>
+      ))}
+      <Table.Cell textAlign="right">
+        {canDeleteGroup() && (
           <Dropdown icon="ellipsis horizontal">
             <Dropdown.Menu className="left">
               <Dropdown.Item
-                onClick={this.props.onDelete}
-                value={this.props.group['@id']}
+                onClick={props.onDelete}
+                value={props.group['@id']}
               >
                 <Icon name={trashSVG} size="15px" />
                 <FormattedMessage id="Delete" defaultMessage="Delete" />
               </Dropdown.Item>
             </Dropdown.Menu>
           </Dropdown>
-        </Table.Cell>
-      </Table.Row>
-    );
-  }
-}
+        )}
+      </Table.Cell>
+    </Table.Row>
+  );
+};
+
+RenderGroups.propTypes = {
+  //single group
+  group: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    email: PropTypes.string,
+    groupname: PropTypes.string,
+    roles: PropTypes.arrayOf(PropTypes.string),
+  }).isRequired,
 
-export default injectIntl(RenderGroups);
+  roles: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+    }),
+  ).isRequired,
+  inheritedRole: PropTypes.array,
+  onDelete: PropTypes.func.isRequired,
+};
+export default RenderGroups;

package/src/components/manage/Controlpanels/Groups/RenderGroups.test.jsx

@@ -49,6 +49,27 @@ describe('UsersControlpanelGroups', () => {
           group={testGroups}
           roles={testRoles}
           onDelete={() => {}}
+          isUserManager={true}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+  it('renders a UsersControlpanelGroups component with no Manager user', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <RenderGroups
+          group={testGroups}
+          roles={testRoles}
+          onDelete={() => {}}
+          isUserManager={false}
         />
       </Provider>,
     );

package/src/components/manage/Controlpanels/ModerateComments.jsx

@@ -9,17 +9,13 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { getParentUrl, Helmet } from '@plone/volto/helpers';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Container, Button, Table } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import { deleteComment, searchContent } from '@plone/volto/actions';
-import {
-  CommentEditModal,
-  FormattedRelativeDate,
-  Icon,
-  Toolbar,
-} from '@plone/volto/components';
+import { FormattedRelativeDate, Icon, Toolbar } from '@plone/volto/components';
+import { CommentEditModal } from '@plone/volto/components/theme/Comments';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -267,8 +263,8 @@ class ModerateComments extends Component {
             </section>
           </article>
         </Container>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -282,9 +278,9 @@ class ModerateComments extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }

package/src/components/manage/Controlpanels/ModerateComments.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';
 
@@ -7,12 +7,8 @@ import ModerateComments from './ModerateComments';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
-jest.mock('../../theme/Comments/CommentEditModal', () =>
-  jest.fn(() => <div id="modal" />),
-);
+jest.mock('@plone/volto/components/theme/Comments');
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('ModerateComments', () => {
   it('renders a moderate comments component', () => {
@@ -31,12 +27,13 @@ describe('ModerateComments', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <ModerateComments location={{ pathname: '/blog' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Controlpanels/Relations/Relations.jsx

@@ -1,10 +1,10 @@
 /**
  * Relations Control Panel
  */
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { find } from 'lodash';
 import { useSelector } from 'react-redux';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { useHistory } from 'react-router';
 import { Link, useLocation } from 'react-router-dom';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -23,6 +23,12 @@ const RelationsControlPanel = () => {
   const location = useLocation();
   const dispatch = useDispatch();
 
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   const brokenRelations = useSelector(
     (state) => state.relations?.stats?.data?.broken,
   );
@@ -88,8 +94,8 @@ const RelationsControlPanel = () => {
         )}
       </div>
 
-      {__CLIENT__ && (
-        <Portal node={document.getElementById('toolbar')}>
+      {isClient &&
+        createPortal(
           <Toolbar
             pathname={location.pathname}
             hideDefaultViewButtons
@@ -104,9 +110,9 @@ const RelationsControlPanel = () => {
                 <Icon name={backSVG} className="contents circled" size="30px" />
               </Link>
             }
-          />
-        </Portal>
-      )}
+          />,
+          document.getElementById('toolbar'),
+        )}
     </>
   );
 };

package/src/components/manage/Controlpanels/Relations/RelationsListing.jsx

@@ -15,7 +15,7 @@ import {
   searchContent,
 } from '@plone/volto/actions';
 
-const ListingTemplate = ({
+const RelationsListing = ({
   relationtype,
   query_source,
   query_target,
@@ -45,7 +45,7 @@ const ListingTemplate = ({
 
   const staticCatalogVocabularyQuery = useSelector(
     (state) =>
-      state.relations?.relations?.[relationtype]
+      state.relations?.relations?.data?.[relationtype]
         ?.staticCatalogVocabularyQuery || {},
   );
 
@@ -477,4 +477,4 @@ const ListingTemplate = ({
     </>
   );
 };
-export default ListingTemplate;
+export default RelationsListing;

package/src/components/manage/Controlpanels/Relations/RelationsMatrix.jsx

@@ -22,8 +22,8 @@ import {
   queryRelations,
   rebuildRelations,
 } from '@plone/volto/actions';
-import RelationsListing from './RelationsListing';
-import BrokenRelations from './BrokenRelations';
+import RelationsListing from '@plone/volto/components/manage/Controlpanels/Relations/RelationsListing';
+import BrokenRelations from '@plone/volto/components/manage/Controlpanels/Relations/BrokenRelations';
 import helpSVG from '@plone/volto/icons/help.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
@@ -414,7 +414,7 @@ const RelationsMatrix = (props) => {
                           <Popup
                             trigger={
                               <a
-                                href="https://6.docs.plone.org/volto/recipes/widget.html#restricting-potential-targets"
+                                href="https://6.docs.plone.org/volto/development/widget.html#widget-relation-field-label"
                                 target="_blank"
                                 rel="noopener noreferrer"
                               >

package/src/components/manage/Controlpanels/Rules/AddRule.jsx

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { getBaseUrl, getParentUrl, Helmet } from '@plone/volto/helpers';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import {
   Button,
   Checkbox,
@@ -19,9 +19,9 @@ import {
   Segment,
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { Icon, Toolbar, Field } from '@plone/volto/components';
+import { Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Field } from '@plone/volto/components/manage/Form';
 import { toast } from 'react-toastify';
-import { Toast } from '@plone/volto/components';
 
 import { getContentRulesEvents, addNewRule } from '@plone/volto/actions';
 
@@ -331,8 +331,8 @@ class AddRule extends Component {
             </Segment.Group>
           </article>
         </Container>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -346,9 +346,9 @@ class AddRule extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }

package/src/components/manage/Controlpanels/Rules/AddRule.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
@@ -9,9 +9,8 @@ import AddRule from './AddRule';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('@plone/volto/components/manage/Form');
+jest.mock('../../Toolbar/Toolbar', () => jest.fn(() => <div id="Toolbar" />));
 
 describe('AddRule', () => {
   it('renders rules add interface', () => {
@@ -21,12 +20,13 @@ describe('AddRule', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <AddRule location={{ pathname: '/controlpanel/rules/add' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Controlpanels/Rules/ConfigureRule.jsx

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { getBaseUrl, getParentUrl, Helmet } from '@plone/volto/helpers';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import {
   Button,
   Card,
@@ -847,8 +847,8 @@ class ConfigureRule extends Component {
             action="edit"
           />
         )}
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -862,9 +862,9 @@ class ConfigureRule extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }

package/src/components/manage/Controlpanels/Rules/ConfigureRule.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
@@ -9,9 +9,7 @@ import ConfigureRule from './ConfigureRule';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('ConfigureRule', () => {
   it('renders rules configure interface', () => {
@@ -21,14 +19,15 @@ describe('ConfigureRule', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <ConfigureRule
           location={{ pathname: '/controlpanel/rules/:id/configure' }}
         />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Controlpanels/Rules/EditRule.jsx

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { getParentUrl, Helmet, getBaseUrl } from '@plone/volto/helpers';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import {
   Button,
   Checkbox,
@@ -20,14 +20,14 @@ import {
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Icon, Toolbar, Field } from '@plone/volto/components';
+import { Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Field } from '@plone/volto/components/manage/Form';
 import {
   getControlPanelRule,
   editRule,
   getContentRulesEvents,
 } from '@plone/volto/actions';
 import { toast } from 'react-toastify';
-import { Toast } from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -367,8 +367,8 @@ class EditRule extends Component {
             </Segment.Group>
           </article>
         </Container>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -382,9 +382,9 @@ class EditRule extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }