@plone/volto 18.0.0-alpha.3 → 18.0.0-alpha.30

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

@@ -3,18 +3,15 @@
  * @module components/manage/Controlpanels/Controlpanels
  */
 
-import { Helmet, asyncConnect } from '@plone/volto/helpers';
+import { Helmet } from '@plone/volto/helpers';
 import { concat, filter, last, map, sortBy, uniqBy } from 'lodash';
-import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { Portal } from 'react-portal';
-import { connect } from 'react-redux';
+import { createPortal } from 'react-dom';
+import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { compose } from 'redux';
 import { Container, Grid, Header, Message, Segment } from 'semantic-ui-react';
 
-import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
 import { Error, Icon, Toolbar, VersionOverview } from '@plone/volto/components';
 
 import config from '@plone/volto/registry';
@@ -99,15 +96,19 @@ const messages = defineMessages({
 /**
  * Controlpanels container class.
  */
-function Controlpanels({
-  controlpanels,
-  controlpanelsRequest,
-  systemInformation,
-  pathname,
-}) {
+export default function Controlpanels({ location }) {
   const intl = useIntl();
   const [isClient, setIsClient] = useState(false);
 
+  const { pathname } = location;
+  const controlpanels = useSelector(
+    (state) => state.controlpanels.controlpanels,
+  );
+  const controlpanelsRequest = useSelector((state) => state.controlpanels.list);
+  const systemInformation = useSelector(
+    (state) => state.controlpanels.systeminformation,
+  );
+
   useEffect(() => {
     setIsClient(true);
   }, []);
@@ -260,8 +261,8 @@ function Controlpanels({
           </Segment>
         </Segment.Group>
       </Container>
-      {isClient && (
-        <Portal node={document.getElementById('toolbar')}>
+      {isClient &&
+        createPortal(
           <Toolbar
             pathname={pathname}
             hideDefaultViewButtons
@@ -275,47 +276,9 @@ function Controlpanels({
                 />
               </Link>
             }
-          />
-        </Portal>
-      )}
+          />,
+          document.getElementById('toolbar'),
+        )}
     </div>
   );
 }
-
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-Controlpanels.propTypes = {
-  controlpanels: PropTypes.arrayOf(
-    PropTypes.shape({
-      '@id': PropTypes.string,
-      group: PropTypes.string,
-      title: PropTypes.string,
-    }),
-  ).isRequired,
-  pathname: PropTypes.string.isRequired,
-};
-
-export default compose(
-  connect((state, props) => ({
-    controlpanels: state.controlpanels.controlpanels,
-    controlpanelsRequest: state.controlpanels.list,
-    pathname: props.location.pathname,
-    systemInformation: state.controlpanels.systeminformation,
-  })),
-
-  asyncConnect([
-    {
-      key: 'controlpanels',
-      promise: async ({ location, store: { dispatch } }) =>
-        await dispatch(listControlpanels()),
-    },
-    {
-      key: 'systemInformation',
-      promise: async ({ location, store: { dispatch } }) =>
-        await dispatch(getSystemInformation()),
-    },
-  ]),
-)(Controlpanels);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 
 import config from '@plone/volto/registry';
@@ -9,39 +9,39 @@ import Controlpanels from './Controlpanels';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
-jest.mock('./VersionOverview', () =>
-  jest.fn(() => <div className="VersionOverview" />),
-);
+jest.mock('@plone/volto/components/manage/Controlpanels', () => ({
+  VersionOverview: jest.fn(() => <div className="VersionOverview" />),
+}));
 
 describe('Controlpanels', () => {
   it('renders a controlpanels component', () => {
     const store = mockStore({
-      controlpanels: [
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
-          group: 'General',
-          title: 'Date and Time',
-        },
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/lang',
-          group: 'General',
-          title: 'Language',
-        },
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/editing',
-          group: 'Content',
-          title: 'Editing',
-        },
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/security',
-          group: 'Security',
-          title: 'test',
-        },
-      ],
+      controlpanels: {
+        controlpanels: [
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
+            group: 'General',
+            title: 'Date and Time',
+          },
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/lang',
+            group: 'General',
+            title: 'Language',
+          },
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/editing',
+            group: 'Content',
+            title: 'Editing',
+          },
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/security',
+            group: 'Security',
+            title: 'test',
+          },
+        ],
+      },
       reduxAsyncConnect: {
         // Mocked in redux async connect as it isn't fetch client-side.
         controlpanels: [
@@ -73,26 +73,29 @@ describe('Controlpanels', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Controlpanels location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders an additional control panel', () => {
     const store = mockStore({
-      controlpanels: [
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/security',
-          group: 'Security',
-          title: 'test',
-        },
-      ],
+      controlpanels: {
+        controlpanels: [
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/security',
+            group: 'Security',
+            title: 'test',
+          },
+        ],
+      },
       reduxAsyncConnect: {
         // Mocked in redux async connect as it isn't fetch client-side.
         controlpanels: [
@@ -127,14 +130,15 @@ describe('Controlpanels', () => {
         component: FooComponent,
       },
     ];
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Controlpanels location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Container, Divider, Message, Segment, Table } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
@@ -216,8 +216,8 @@ class DatabaseInformation extends Component {
           </Segment>
         </Segment.Group>
 
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -234,9 +234,9 @@ class DatabaseInformation extends Component {
                   </Link>
                 </>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     ) : null;
   }

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

@@ -10,18 +10,25 @@ import {
   listRoles,
   updateGroup,
   authenticatedRole,
+  getUser,
 } from '@plone/volto/actions';
+import jwtDecode from 'jwt-decode';
 import {
   Icon,
-  ModalForm,
   Toast,
   Toolbar,
-  RenderGroups,
   Pagination,
   Error,
 } from '@plone/volto/components';
+import RenderGroups from '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 import { Link } from 'react-router-dom';
-import { Helmet, messages } from '@plone/volto/helpers';
+import {
+  Helmet,
+  messages,
+  isManager,
+  canAssignRole,
+} 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';
@@ -30,7 +37,7 @@ import { find, map, pull } 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';
@@ -75,6 +82,19 @@ class GroupsControlpanel extends Component {
         groupname: 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,
   };
 
   /**
@@ -118,6 +138,7 @@ class GroupsControlpanel extends Component {
         groupEntries: this.props.groups,
       });
     }
+    await this.props.getUser(this.props.userId);
   };
   /**
    * Component did mount
@@ -258,16 +279,16 @@ class GroupsControlpanel 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),
       })),
       authenticatedRole:
         name === 'AuthenticatedUsers' &&
         !prevState.authenticatedRole.includes(value)
           ? [...prevState.authenticatedRole, value]
           : name !== 'AuthenticatedUsers'
-          ? prevState.authenticatedRole
-          : pull(prevState.authenticatedRole, value),
+            ? prevState.authenticatedRole
+            : pull(prevState.authenticatedRole, value),
     }));
   }
   /**
@@ -375,6 +396,8 @@ class GroupsControlpanel extends Component {
       ? this.state.groupToDelete.id
       : '';
 
+    const isUserManager = isManager(this.props.user);
+
     return (
       <Container className="users-control-panel">
         <Helmet title={this.props.intl.formatMessage(messages.groups)} />
@@ -460,10 +483,9 @@ class GroupsControlpanel extends Component {
                       messages.addGroupsFormRolesTitle,
                     ),
                     type: 'array',
-                    choices: this.props.roles.map((role) => [
-                      role.id,
-                      role.title,
-                    ]),
+                    choices: this.props.roles
+                      .filter((role) => canAssignRole(isUserManager, role))
+                      .map((role) => [role.id, role.title]),
                     noValueOption: false,
                     description: '',
                   },
@@ -553,6 +575,7 @@ class GroupsControlpanel extends Component {
                           group={group}
                           updateGroups={this.updateGroupRole}
                           inheritedRole={this.state.authenticatedRole}
+                          isUserManager={isUserManager}
                         />
                       ))}
                   </Table.Body>
@@ -575,8 +598,8 @@ class GroupsControlpanel extends Component {
             </div>
           </Form>
         </Segment.Group>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -628,9 +651,9 @@ class GroupsControlpanel extends Component {
                   </Button>
                 </>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }
@@ -640,6 +663,10 @@ export default compose(
   injectIntl,
   connect(
     (state, props) => ({
+      user: state.users.user,
+      userId: state.userSession.token
+        ? jwtDecode(state.userSession.token).sub
+        : '',
       roles: state.roles.roles,
       groups: state.groups.groups,
       description: state.description,
@@ -661,6 +688,7 @@ export default compose(
           createGroup,
           updateGroup,
           authenticatedRole,
+          getUser,
         },
         dispatch,
       ),

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

@@ -9,6 +9,7 @@ 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.
@@ -38,6 +39,7 @@ class RenderGroups extends Component {
     ).isRequired,
     inheritedRole: PropTypes.array,
     onDelete: PropTypes.func.isRequired,
+    isUserManager: PropTypes.bool.isRequired,
   };
 
   /**
@@ -69,6 +71,12 @@ class RenderGroups extends Component {
   isAuthGroup = (roleId) => {
     return this.props.inheritedRole.includes(roleId);
   };
+
+  canDeleteGroup() {
+    if (this.props.isUserManager) return true;
+    return !this.props.group.roles.includes('Manager');
+  }
+
   /**
    * Render method.
    * @method render
@@ -98,22 +106,25 @@ class RenderGroups extends Component {
                 }
                 onChange={this.onChange}
                 value={`${this.props.group.id}&role=${role.id}`}
+                disabled={!canAssignRole(this.props.isUserManager, role)}
               />
             )}
           </Table.Cell>
         ))}
         <Table.Cell textAlign="right">
-          <Dropdown icon="ellipsis horizontal">
-            <Dropdown.Menu className="left">
-              <Dropdown.Item
-                onClick={this.props.onDelete}
-                value={this.props.group['@id']}
-              >
-                <Icon name={trashSVG} size="15px" />
-                <FormattedMessage id="Delete" defaultMessage="Delete" />
-              </Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
+          {this.canDeleteGroup() && (
+            <Dropdown icon="ellipsis horizontal">
+              <Dropdown.Menu className="left">
+                <Dropdown.Item
+                  onClick={this.props.onDelete}
+                  value={this.props.group['@id']}
+                >
+                  <Icon name={trashSVG} size="15px" />
+                  <FormattedMessage id="Delete" defaultMessage="Delete" />
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          )}
         </Table.Cell>
       </Table.Row>
     );

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