@plone/volto 18.0.0-alpha.8 → 18.0.0

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

@@ -1,18 +1,13 @@
-/**
- * Users controlpanel container.
- * @module components/manage/Controlpanels/DatabaseInformation
- */
-import React, { Component } from 'react';
-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 { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useLocation } from 'react-router-dom';
+import { createPortal } from 'react-dom';
 import { Container, Divider, Message, Segment, Table } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { getDatabaseInformation } from '@plone/volto/actions';
 import { Helmet } from '@plone/volto/helpers';
+import { useClient } from '@plone/volto/hooks';
 import { Icon, Toolbar } from '@plone/volto/components';
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -27,228 +22,167 @@ const messages = defineMessages({
   },
 });
 
-/**
- * DatabaseInformation class.
- * @class DatabaseInformation
- * @extends Component
- */
-class DatabaseInformation extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getDatabaseInformation: PropTypes.func.isRequired,
-  };
+const DatabaseInformation = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { pathname } = useLocation();
+  const isClient = useClient();
+  const databaseInformation = useSelector(
+    (state) => state.controlpanels.databaseinformation,
+  );
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs DiffComponent
-   */
-  constructor(props) {
-    super(props);
-    this.state = { isClient: false };
-  }
+  useEffect(() => {
+    dispatch(getDatabaseInformation());
+  }, [dispatch]);
 
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.getDatabaseInformation();
-    this.setState({ isClient: true });
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return this.props.databaseInformation ? (
-      <Container id="database-page" className="controlpanel-database">
-        <Helmet
-          title={this.props.intl.formatMessage(messages.databaseInformation)}
-        />
-        <Segment.Group raised>
-          <Segment className="primary">
-            <FormattedMessage
-              id="Database Information"
-              defaultMessage="Database Information"
-            />
-          </Segment>
-          <Segment>
-            <Message>
+  return databaseInformation ? (
+    <Container id="database-page" className="controlpanel-database">
+      <Helmet title={intl.formatMessage(messages.databaseInformation)} />
+      <Segment.Group raised>
+        <Segment className="primary">
+          <FormattedMessage
+            id="Database Information"
+            defaultMessage="Database Information"
+          />
+        </Segment>
+        <Segment>
+          <Message>
+            <Message.Header>
               <FormattedMessage
-                id="The Database Manager allow you to view database status information"
-                defaultMessage="The Database Manager allow you to view database status information"
+                id="Database main"
+                defaultMessage="Database main"
               />
-            </Message>
-          </Segment>
-          <Segment>
-            <Message>
-              <Message.Header>
-                <FormattedMessage
-                  id="Database main"
-                  defaultMessage="Database main"
-                />
-              </Message.Header>
-            </Message>
-            <Table celled padded columns="2">
-              <Table.Body>
-                <Table.Row>
-                  <Table.Cell>
-                    <FormattedMessage
-                      id="Database Location"
-                      defaultMessage="Database Location"
-                    />
-                  </Table.Cell>
-                  <Table.Cell>
-                    {this.props.databaseInformation.db_name}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <FormattedMessage
-                      id="Database Size"
-                      defaultMessage="Database Size"
-                    />
-                  </Table.Cell>
-                  <Table.Cell>
-                    {this.props.databaseInformation.database_size}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <FormattedMessage
-                      id="Total number of objects in the database"
-                      defaultMessage="Total number of objects in the database"
-                    />
-                  </Table.Cell>
-                  <Table.Cell>
-                    {this.props.databaseInformation.db_size}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <FormattedMessage
-                      id="Total number of objects in memory from all caches"
-                      defaultMessage="Total number of objects in memory from all caches"
-                    />
-                  </Table.Cell>
-                  <Table.Cell>
-                    {this.props.databaseInformation.cache_size}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <FormattedMessage
-                      id="Target number of objects in memory per cache"
-                      defaultMessage="Target number of objects in memory per cache"
-                    />
-                  </Table.Cell>
-                  <Table.Cell>
-                    {this.props.databaseInformation.cache_length}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <FormattedMessage
-                      id="Target memory size per cache in bytes"
-                      defaultMessage="Target memory size per cache in bytes"
-                    />
-                  </Table.Cell>
-                  <Table.Cell>
-                    {this.props.databaseInformation.cache_length_bytes}
-                  </Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table>
-          </Segment>
-          <Segment>
-            <Divider />
-
-            <Message>
-              <Message.Header>
-                <FormattedMessage
-                  id="Total number of objects in each cache"
-                  defaultMessage="Total number of objects in each cache"
-                />
-              </Message.Header>
-            </Message>
-            <Table celled padded>
-              <Table.Header>
-                <Table.Row>
-                  <Table.HeaderCell>
-                    <FormattedMessage
-                      id="Cache Name"
-                      defaultMessage="Cache Name"
-                    />
-                  </Table.HeaderCell>
-                  <Table.HeaderCell>
-                    <FormattedMessage
-                      id="Number of active objects"
-                      defaultMessage="Number of active objects"
-                    />
-                  </Table.HeaderCell>
-                  <Table.HeaderCell>
-                    <FormattedMessage
-                      id="Total active and non-active objects"
-                      defaultMessage="Total active and non-active objects"
-                    />
-                  </Table.HeaderCell>
-                </Table.Row>
-              </Table.Header>
-              {this.props.databaseInformation.cache_detail_length.map(
-                (item) => (
-                  <Table.Row>
-                    <Table.Cell>{item.connection}</Table.Cell>
-                    <Table.Cell>{item.ngsize}</Table.Cell>
-                    <Table.Cell>{item.size}</Table.Cell>
-                  </Table.Row>
-                ),
-              )}
-            </Table>
-          </Segment>
-        </Segment.Group>
+            </Message.Header>
+          </Message>
+          <Table celled padded columns="2">
+            <Table.Body>
+              <Table.Row>
+                <Table.Cell>
+                  <FormattedMessage
+                    id="Database Location"
+                    defaultMessage="Database Location"
+                  />
+                </Table.Cell>
+                <Table.Cell>{databaseInformation.db_name}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <FormattedMessage
+                    id="Database Size"
+                    defaultMessage="Database Size"
+                  />
+                </Table.Cell>
+                <Table.Cell>{databaseInformation.database_size}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <FormattedMessage
+                    id="Total number of objects in the database"
+                    defaultMessage="Total number of objects in the database"
+                  />
+                </Table.Cell>
+                <Table.Cell>{databaseInformation.db_size}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <FormattedMessage
+                    id="Total number of objects in memory from all caches"
+                    defaultMessage="Total number of objects in memory from all caches"
+                  />
+                </Table.Cell>
+                <Table.Cell>{databaseInformation.cache_size}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <FormattedMessage
+                    id="Target number of objects in memory per cache"
+                    defaultMessage="Target number of objects in memory per cache"
+                  />
+                </Table.Cell>
+                <Table.Cell>{databaseInformation.cache_length}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <FormattedMessage
+                    id="Target memory size per cache in bytes"
+                    defaultMessage="Target memory size per cache in bytes"
+                  />
+                </Table.Cell>
+                <Table.Cell>
+                  {databaseInformation.cache_length_bytes}
+                </Table.Cell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        </Segment>
+        <Segment>
+          <Divider />
 
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <>
-                  <Link to="/controlpanel" className="item">
-                    <Icon
-                      name={backSVG}
-                      aria-label={this.props.intl.formatMessage(messages.back)}
-                      className="contents circled"
-                      size="30px"
-                      title={this.props.intl.formatMessage(messages.back)}
-                    />
-                  </Link>
-                </>
-              }
-            />
-          </Portal>
+          <Message>
+            <Message.Header>
+              <FormattedMessage
+                id="Total number of objects in each cache"
+                defaultMessage="Total number of objects in each cache"
+              />
+            </Message.Header>
+          </Message>
+          <Table celled padded>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell>
+                  <FormattedMessage
+                    id="Cache Name"
+                    defaultMessage="Cache Name"
+                  />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage
+                    id="Number of active objects"
+                    defaultMessage="Number of active objects"
+                  />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage
+                    id="Total active and non-active objects"
+                    defaultMessage="Total active and non-active objects"
+                  />
+                </Table.HeaderCell>
+              </Table.Row>
+            </Table.Header>
+            {databaseInformation.cache_detail_length.map((item) => (
+              // eslint-disable-next-line react/jsx-key
+              <Table.Row>
+                <Table.Cell>{item.connection}</Table.Cell>
+                <Table.Cell>{item.ngsize}</Table.Cell>
+                <Table.Cell>{item.size}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table>
+        </Segment>
+      </Segment.Group>
+      {isClient &&
+        createPortal(
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <>
+                <Link to="/controlpanel" className="item">
+                  <Icon
+                    name={backSVG}
+                    aria-label={intl.formatMessage(messages.back)}
+                    className="contents circled"
+                    size="30px"
+                    title={intl.formatMessage(messages.back)}
+                  />
+                </Link>
+              </>
+            }
+          />,
+          document.getElementById('toolbar'),
         )}
-      </Container>
-    ) : null;
-  }
-}
+    </Container>
+  ) : null;
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      databaseInformation: state.controlpanels.databaseinformation,
-      pathname: props.location.pathname,
-    }),
-    { getDatabaseInformation },
-  ),
-)(DatabaseInformation);
+export default DatabaseInformation;

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';
@@ -41,8 +48,10 @@ import {
   Button,
   Form,
   Input,
+  Loader,
   Segment,
   Table,
+  Dimmer,
 } from 'semantic-ui-react';
 
 /**
@@ -75,6 +84,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 +140,7 @@ class GroupsControlpanel extends Component {
         groupEntries: this.props.groups,
       });
     }
+    await this.props.getUser(this.props.userId);
   };
   /**
    * Component did mount
@@ -140,6 +163,12 @@ class GroupsControlpanel extends Component {
     ) {
       this.props.listGroups(this.state.search);
     }
+    if (
+      this.props.deleteGroupRequest.loading &&
+      nextProps.deleteGroupRequest.loaded
+    ) {
+      this.onDeleteGroupSuccess();
+    }
     if (
       this.props.createGroupRequest.loading &&
       nextProps.createGroupRequest.loaded
@@ -225,10 +254,6 @@ class GroupsControlpanel extends Component {
   onDeleteOk() {
     if (this.state.groupToDelete) {
       this.props.deleteGroup(this.state.groupToDelete.id);
-      this.setState({
-        showDelete: false,
-        groupToDelete: undefined,
-      });
     }
   }
 
@@ -241,6 +266,7 @@ class GroupsControlpanel extends Component {
     this.setState({
       showDelete: false,
       itemsToDelete: [],
+      groupToDelete: undefined,
     });
   }
 
@@ -258,16 +284,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),
     }));
   }
   /**
@@ -346,6 +372,25 @@ class GroupsControlpanel extends Component {
     );
   }
 
+  /**
+   * Handle Success after deleteGroup()
+   *
+   * @returns {undefined}
+   */
+  onDeleteGroupSuccess() {
+    this.setState({
+      groupToDelete: undefined,
+      showDelete: false,
+    });
+    toast.success(
+      <Toast
+        success
+        title={this.props.intl.formatMessage(messages.success)}
+        content={this.props.intl.formatMessage(messages.groupDeleted)}
+      />,
+    );
+  }
+
   /**
    * On change page
    * @method onChangePage
@@ -375,6 +420,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)} />
@@ -386,6 +433,12 @@ class GroupsControlpanel extends Component {
             )}
             content={
               <div className="content">
+                <Dimmer active={this?.props?.deleteGroupRequest?.loading}>
+                  <Loader>
+                    <FormattedMessage id="Loading" defaultMessage="Loading." />
+                  </Loader>
+                </Dimmer>
+
                 <ul className="content">
                   <FormattedMessage
                     id="Do you really want to delete the group {groupname}?"
@@ -460,10 +513,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 +605,7 @@ class GroupsControlpanel extends Component {
                           group={group}
                           updateGroups={this.updateGroupRole}
                           inheritedRole={this.state.authenticatedRole}
+                          isUserManager={isUserManager}
                         />
                       ))}
                   </Table.Body>
@@ -575,8 +628,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 +681,9 @@ class GroupsControlpanel extends Component {
                   </Button>
                 </>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }
@@ -640,6 +693,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 +718,7 @@ export default compose(
           createGroup,
           updateGroup,
           authenticatedRole,
+          getUser,
         },
         dispatch,
       ),