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

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

@@ -47,7 +47,33 @@ describe('UsersControlpanelUser', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <RenderUsers user={testUser} roles={testRoles} onDelete={() => {}} />
+        <RenderUsers
+          user={testUser}
+          roles={testRoles}
+          onDelete={() => {}}
+          isUserManager={true}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a UsersControlpanelUser component with options disabled if not allowed', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <RenderUsers
+          user={testUser}
+          roles={testRoles}
+          onDelete={() => {}}
+          isUserManager={false}
+        />
       </Provider>,
     );
     const json = component.toJSON();

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

@@ -2,9 +2,9 @@
  * User Control Panel [user group membership management]
  * TODO Enrich with features of user control panel. Then replace user control panel.
  */
-import React, { useEffect } from 'react';
-import { find, toNumber } from 'lodash';
-import { Portal } from 'react-portal';
+import React, { useEffect, useState } from 'react';
+import { find } from 'lodash';
+import { createPortal } from 'react-dom';
 import { useHistory } from 'react-router';
 import { Link, useLocation } from 'react-router-dom';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -38,13 +38,19 @@ const UserGroupMembershipPanel = () => {
     (state) => state.controlpanels.systeminformation,
   );
   const can_use_group_membership_panel = systeminformation
-    ? toNumber(systeminformation?.plone_restapi_version.slice(0, 4)) >= 8.24
+    ? parseFloat(systeminformation?.plone_restapi_version.slice(0, 4)) >= 8.24
     : false;
   const actions = useSelector((state) => state.actions?.actions ?? {});
   const ploneSetupAction = find(actions.user, {
     id: 'plone_setup',
   });
 
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   useEffect(() => {
     dispatch(listActions('/'));
   }, [dispatch]);
@@ -57,7 +63,7 @@ const UserGroupMembershipPanel = () => {
     dispatch(getSystemInformation());
   }, [dispatch]);
 
-  if (__CLIENT__ && !ploneSetupAction) {
+  if (isClient && !ploneSetupAction) {
     return <Unauthorized />;
   }
 
@@ -108,8 +114,8 @@ const UserGroupMembershipPanel = () => {
         </Segment.Group>
       </div>
 
-      {__CLIENT__ && (
-        <Portal node={document.getElementById('toolbar')}>
+      {isClient &&
+        createPortal(
           <Toolbar
             pathname={pathname}
             hideDefaultViewButtons
@@ -139,9 +145,9 @@ const UserGroupMembershipPanel = () => {
                 </Link>
               </>
             }
-          />
-        </Portal>
-      )}
+          />,
+          document.getElementById('toolbar'),
+        )}
     </>
   );
 };

package/src/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel.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';
@@ -7,9 +7,8 @@ import { MemoryRouter } from 'react-router-dom';
 import UserGroupMembershipControlPanel from './UserGroupMembershipControlPanel';
 
 const mockStore = configureStore();
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+
 describe('UserGroupMembershipControlPanel', () => {
   it('renders a user group membership control component', () => {
     const store = mockStore({
@@ -49,14 +48,15 @@ describe('UserGroupMembershipControlPanel', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <UserGroupMembershipControlPanel />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { cloneDeep, uniqBy } from 'lodash';
 import { useIntl } from 'react-intl';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
 import { Button, Checkbox } from 'semantic-ui-react';
-import { messages } from '@plone/volto/helpers';
-import { listGroups } from '@plone/volto/actions';
+import { messages, isManager, canAssignGroup } from '@plone/volto/helpers';
+import { listGroups, getUser } from '@plone/volto/actions';
 import { Icon, Toast } from '@plone/volto/components';
 import { updateGroup, listUsers } from '@plone/volto/actions';
 
@@ -25,6 +26,16 @@ const ListingTemplate = ({
   const pageSize = 25;
   const [userLimit, setUserLimit] = useState(pageSize);
 
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const user = useSelector((state) => state.users.user);
+  const userId = token ? jwtDecode(token).sub : '';
+
+  useEffect(() => {
+    dispatch(getUser(userId));
+  }, [dispatch, userId]);
+
+  const isUserManager = isManager(user);
+
   // y axis
   let items = useSelector((state) => state.users.users);
   let show_users =
@@ -51,12 +62,17 @@ const ListingTemplate = ({
 
   // x axis
   let groups = useSelector((state) => state.groups.groups);
+
+  const getRoles = (group_id) => {
+    return groups.find((group) => group.id === group_id)?.roles || [];
+  };
+
   let show_matrix_options =
     !many_groups ||
     (many_groups && query_group.length > 1) ||
     groups_filter.length > 0 ||
     add_joined_groups;
-  let matrix_options; // list of Objects (value, label)
+  let matrix_options; // list of Objects (value, label, roles)
   if (show_matrix_options) {
     matrix_options =
       !many_groups || (many_groups && query_group.length > 1)
@@ -90,6 +106,10 @@ const ListingTemplate = ({
       }
       return 0;
     });
+    matrix_options = matrix_options.map((matrix_option) => ({
+      ...matrix_option,
+      roles: getRoles(matrix_option.value),
+    }));
   } else {
     matrix_options = [];
   }
@@ -126,7 +146,7 @@ const ListingTemplate = ({
         },
       }),
     )
-      .then((resp) => {
+      .then(() => {
         singleClick &&
           dispatch(
             listUsers({
@@ -209,13 +229,14 @@ const ListingTemplate = ({
                     <Checkbox
                       className="toggle-target"
                       defaultChecked={false}
-                      onChange={(event, { checked }) =>
+                      onChange={(_event, { checked }) =>
                         onSelectAllHandler(
                           matrix_option.value,
                           items.map((el) => el.id),
                           checked,
                         )
                       }
+                      disabled={!canAssignGroup(isUserManager, matrix_option)}
                     />
                   </div>
                 ))}
@@ -251,13 +272,14 @@ const ListingTemplate = ({
                         checked={item.groups?.items
                           ?.map((el) => el.id)
                           .includes(matrix_option.value)}
-                        onChange={(event, { checked }) => {
+                        onChange={(_event, { checked }) => {
                           onSelectOptionHandler(
                             { y: matrix_option.value, x: item.id },
                             checked,
                             true,
                           );
                         }}
+                        disabled={!canAssignGroup(isUserManager, matrix_option)}
                       />
                     ))}
                   </div>

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

@@ -7,7 +7,7 @@ import { isEqual } from 'lodash';
 
 import { messages } from '@plone/volto/helpers';
 import { listGroups } from '@plone/volto/actions'; // getRegistry
-import UserGroupMembershipListing from './UserGroupMembershipListing';
+import UserGroupMembershipListing from '@plone/volto/components/manage/Controlpanels/Users/UserGroupMembershipListing';
 
 const UserGroupMembershipMatrix = ({ many_users, many_groups }) => {
   const intl = useIntl();

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

@@ -12,18 +12,25 @@ import {
   updateUser,
   updateGroup,
   getUserSchema,
+  getUser,
 } from '@plone/volto/actions';
+import jwtDecode from 'jwt-decode';
 import {
   Icon,
-  ModalForm,
   Toast,
   Toolbar,
-  RenderUsers,
   Pagination,
   Error,
 } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
+import RenderUsers from '@plone/volto/components/manage/Controlpanels/Users/RenderUsers';
 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/Controlpanels/index.tsx

@@ -0,0 +1,181 @@
+import loadable from '@loadable/component';
+import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
+import { asyncConnect } from '@plone/volto/helpers';
+
+// CONTROLPANELS
+
+const LoadableControlpanels = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Controlpanels" */ '@plone/volto/components/manage/Controlpanels/Controlpanels'
+    ),
+);
+
+export const Controlpanels = asyncConnect([
+  {
+    key: 'controlpanels',
+    promise: async ({ store: { dispatch } }: any) =>
+      await dispatch(listControlpanels()),
+  },
+  {
+    key: 'systemInformation',
+    promise: async ({ store: { dispatch } }: any) =>
+      await dispatch(getSystemInformation()),
+  },
+])(LoadableControlpanels);
+
+export const Controlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Controlpanels" */ '@plone/volto/components/manage/Controlpanels/Controlpanel'
+    ),
+);
+
+// RULES CONTROLPANELS
+
+export const RulesControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/Rules'
+    ),
+);
+
+export const AddRuleControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/AddRule'
+    ),
+);
+
+export const EditRuleControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/EditRule'
+    ),
+);
+
+export const ConfigureRuleControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/ConfigureRule'
+    ),
+);
+
+// USERS CONTROLPANELS
+
+export const UsersControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "UsersControlpanel" */ '@plone/volto/components/manage/Controlpanels/Users/UsersControlpanel'
+    ),
+);
+
+export const RenderUsers = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "UsersControlpanel" */ '@plone/volto/components/manage/Controlpanels/Users/RenderUsers'
+    ),
+);
+
+export const UserGroupMembershipControlPanel = loadable(
+  () =>
+    import(
+      '@plone/volto/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel'
+    ),
+);
+
+export const GroupsControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "GroupsControlpanel" */ '@plone/volto/components/manage/Controlpanels/Groups/GroupsControlpanel'
+    ),
+);
+
+export const RenderGroups = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "GroupsControlpanel" */ '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups'
+    ),
+);
+
+// RELATIONS CONTROLPANEL
+
+export const RelationsControlpanel = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/Relations/Relations'),
+);
+
+// ALIASES CONTROLPANEL
+
+export const AliasesControlpanel = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/Aliases'),
+);
+
+// UNDO CONTROLPANEL
+
+export const UndoControlpanel = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/UndoControlpanel'),
+);
+
+// ADDONS CONTROLPANEL
+
+export const AddonsControlpanel = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/AddonsControlpanel'),
+);
+
+// CONTENT TYPES CONTROLPANEL
+
+export const ContentType = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentType'
+    ),
+);
+
+export const ContentTypeLayout = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypeLayout'
+    ),
+);
+
+export const ContentTypeSchema = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypeSchema'
+    ),
+);
+
+export const ContentTypes = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypes'
+    ),
+);
+
+// VERSION OVERVIEW
+
+export const VersionOverview = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/VersionOverview'),
+);
+
+// PLONE UPGRADES CONTROLPANELS
+
+export const UpgradeControlPanel = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/UpgradeControlPanel'),
+);
+
+// MODERATE COMMENTS CONTROLPANEL
+
+export const ModerateComments = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/ModerateComments'),
+);
+
+// DATABASE INFORMATION CONTROLPANELS
+
+export const DatabaseInformation = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/DatabaseInformation'),
+);

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