@plone/volto 17.0.0-alpha.24 → 17.0.0-alpha.26

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

@@ -96,6 +96,7 @@ class GroupsControlpanel extends Component {
     this.updateGroupRole = this.updateGroupRole.bind(this);
     this.state = {
       search: '',
+      isLoading: false,
       addGroupError: '',
       showDelete: false,
       groupToDelete: undefined,
@@ -173,8 +174,18 @@ class GroupsControlpanel extends Component {
    * @returns {undefined}
    */
   onSearchGroups(event) {
+    this.setState({ isLoading: true });
     event.preventDefault();
-    this.props.listGroups(this.state.search);
+    this.props
+      .listGroups(this.state.search)
+      .then(() => {
+        this.setState({ isLoading: false });
+      })
+      .catch((error) => {
+        this.setState({ isLoading: false });
+        // eslint-disable-next-line no-console
+        console.error('Error searching group', error);
+      });
   }
 
   /**
@@ -487,7 +498,11 @@ class GroupsControlpanel extends Component {
               <Form.Field>
                 <Input
                   name="SearchableText"
-                  action={{ icon: 'search' }}
+                  action={{
+                    icon: 'search',
+                    loading: this.state.isLoading,
+                    disabled: this.state.isLoading,
+                  }}
                   placeholder={this.props.intl.formatMessage(
                     messages.searchGroups,
                   )}
@@ -499,43 +514,55 @@ class GroupsControlpanel extends Component {
           </Segment>
           <Form>
             <div className="table">
-              <Table padded striped attached unstackable>
-                <Table.Header>
-                  <Table.Row>
-                    <Table.HeaderCell>
-                      <FormattedMessage
-                        id="Groupname"
-                        defaultMessage="Groupname"
-                      />
-                    </Table.HeaderCell>
-                    {this.props.roles.map((role) => (
-                      <Table.HeaderCell key={role.id}>
-                        {role.title}
+              {((this.props.many_groups &&
+                this.state.groupEntries.length > 0) ||
+                !this.props.many_groups) && (
+                <Table padded striped attached unstackable>
+                  <Table.Header>
+                    <Table.Row>
+                      <Table.HeaderCell>
+                        <FormattedMessage
+                          id="Groupname"
+                          defaultMessage="Groupname"
+                        />
+                      </Table.HeaderCell>
+                      {this.props.roles.map((role) => (
+                        <Table.HeaderCell key={role.id}>
+                          {role.title}
+                        </Table.HeaderCell>
+                      ))}
+                      <Table.HeaderCell>
+                        <FormattedMessage
+                          id="Actions"
+                          defaultMessage="Actions"
+                        />
                       </Table.HeaderCell>
-                    ))}
-                    <Table.HeaderCell>
-                      <FormattedMessage id="Actions" defaultMessage="Actions" />
-                    </Table.HeaderCell>
-                  </Table.Row>
-                </Table.Header>
-                <Table.Body data-group="groups">
-                  {this.state.groupEntries
-                    .slice(
-                      this.state.currentPage * 10,
-                      this.state.pageSize * (this.state.currentPage + 1),
-                    )
-                    .map((group) => (
-                      <RenderGroups
-                        key={group.id}
-                        onDelete={this.deleteGroup}
-                        roles={this.props.roles}
-                        group={group}
-                        updateGroups={this.updateGroupRole}
-                        inheritedRole={this.state.authenticatedRole}
-                      />
-                    ))}
-                </Table.Body>
-              </Table>
+                    </Table.Row>
+                  </Table.Header>
+                  <Table.Body data-group="groups">
+                    {this.state.groupEntries
+                      .slice(
+                        this.state.currentPage * 10,
+                        this.state.pageSize * (this.state.currentPage + 1),
+                      )
+                      .map((group) => (
+                        <RenderGroups
+                          key={group.id}
+                          onDelete={this.deleteGroup}
+                          roles={this.props.roles}
+                          group={group}
+                          updateGroups={this.updateGroupRole}
+                          inheritedRole={this.state.authenticatedRole}
+                        />
+                      ))}
+                  </Table.Body>
+                </Table>
+              )}
+              {this.state.groupEntries.length === 0 && this.state.search && (
+                <Segment>
+                  {this.props.intl.formatMessage(messages.groupSearchNoResults)}
+                </Segment>
+              )}
             </div>
             <div className="contents-pagination">
               <Pagination

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

@@ -5,15 +5,15 @@ import { useSelector, useDispatch } from 'react-redux';
 import { Divider, Segment, Table } from 'semantic-ui-react';
 import { queryRelations } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { UniversalLink } from '@plone/volto/components';
+import { ConditionalLink } from '@plone/volto/components';
 
 const BrokenRelations = () => {
   const dispatch = useDispatch();
   const brokenRelationStats = useSelector(
-    (state) => state.relations?.stats?.broken || {},
+    (state) => state.relations?.stats?.data?.broken || {},
   );
   const brokenRelations = useSelector(
-    (state) => state.relations?.subrequests?.broken?.relations,
+    (state) => state.relations?.subrequests?.broken?.data,
   );
 
   useEffect(() => {
@@ -60,20 +60,22 @@ const BrokenRelations = () => {
                 }).map((el, index) => (
                   <Table.Row key={index}>
                     <Table.Cell>
-                      <UniversalLink
-                        href={`${flattenToAppURL(el[0])}/edit`}
+                      <ConditionalLink
+                        to={`${el[0]}/edit`}
                         openLinkInNewTab={true}
+                        condition={el[0].includes('http')}
                       >
                         {flattenToAppURL(el[0])}
-                      </UniversalLink>
+                      </ConditionalLink>
                     </Table.Cell>
                     <Table.Cell>
-                      <UniversalLink
-                        href={`${flattenToAppURL(el[1])}/edit`}
+                      <ConditionalLink
+                        to={`${el[1]}/edit`}
                         openLinkInNewTab={true}
+                        condition={el[1].includes('http')}
                       >
                         {flattenToAppURL(el[1])}
-                      </UniversalLink>
+                      </ConditionalLink>
                     </Table.Cell>
                   </Table.Row>
                 ))}

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

@@ -24,10 +24,10 @@ const RelationsControlPanel = () => {
   const dispatch = useDispatch();
 
   const brokenRelations = useSelector(
-    (state) => state.relations?.stats?.broken,
+    (state) => state.relations?.stats?.data?.broken,
   );
 
-  const relations_stats = useSelector((state) => state.relations?.stats?.stats);
+  const relations_stats = useSelector((state) => state.relations?.stats?.data);
   const actions = useSelector((state) => state.actions?.actions ?? {});
   const can_edit = find(actions.object, {
     id: 'edit',
@@ -58,7 +58,7 @@ const RelationsControlPanel = () => {
               <h1>
                 <FormattedMessage id="Relations" defaultMessage="Relations" />
               </h1>
-              {!relations_stats ? (
+              {relations_stats?.error ? (
                 <React.Fragment>
                   <Divider hidden />
                   <Message warning>

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

@@ -11,6 +11,7 @@ import {
   createRelations,
   deleteRelations,
   queryRelations,
+  resetSearchContent,
   searchContent,
 } from '@plone/volto/actions';
 
@@ -28,9 +29,10 @@ const ListingTemplate = ({
   const MAX = 40; // Maximum of rows and columns
   const MAX_RELATIONS = 1000;
 
-  const stats = useSelector((state) => state.relations?.stats || null);
+  const stats = useSelector((state) => state.relations?.stats?.data || null);
+
   let relations = useSelector(
-    (state) => state.relations?.relations?.[relationtype]?.items || [],
+    (state) => state.relations?.relations?.data?.[relationtype]?.items || [],
   );
 
   let potential_targets_objects = useSelector(
@@ -49,7 +51,8 @@ const ListingTemplate = ({
 
   // Editable if plone.api.relations available
   const editable = useSelector(
-    (state) => state.relations?.relations?.[relationtype]?.readonly !== true,
+    (state) =>
+      state.relations?.relations?.data?.[relationtype]?.readonly !== true,
   );
 
   let relationMatrix = {};
@@ -192,8 +195,7 @@ const ListingTemplate = ({
         ),
       );
     } else {
-      // TODO Better just reset redux store
-      dispatch(searchContent('/findstenichätsch', null, 'potential_targets'));
+      dispatch(resetSearchContent('potential_targets'));
     }
 
     // Fetch fresh potential sources
@@ -211,8 +213,7 @@ const ListingTemplate = ({
         ),
       );
     } else {
-      // TODO Better just reset redux store
-      dispatch(searchContent('/findstenichätsch', null, 'potential_sources'));
+      dispatch(resetSearchContent('potential_sources'));
     }
   }, [
     dispatch,

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

@@ -17,7 +17,11 @@ import {
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import { messages } from '@plone/volto/helpers';
 import { Icon, Toast } from '@plone/volto/components';
-import { rebuildRelations, queryRelations } from '@plone/volto/actions';
+import {
+  getRelationStats,
+  queryRelations,
+  rebuildRelations,
+} from '@plone/volto/actions';
 import RelationsListing from './RelationsListing';
 import BrokenRelations from './BrokenRelations';
 import helpSVG from '@plone/volto/icons/help.svg';
@@ -39,12 +43,14 @@ const RelationsMatrix = (props) => {
     id: 'plone_setup',
   });
 
-  const relationtypes = useSelector((state) => state.relations?.stats?.stats);
+  const relationtypes = useSelector(
+    (state) => state.relations?.stats?.data?.stats,
+  );
   const relationsListError = useSelector(
-    (state) => state.relations?.list?.error?.response?.body?.error,
+    (state) => state.relations?.stats?.error?.response?.body?.error,
   );
   const brokenRelations = useSelector(
-    (state) => state.relations?.stats?.broken,
+    (state) => state.relations?.stats?.data?.broken,
   );
 
   let filter_options = useSelector((state) => state.groups.filter_groups);
@@ -67,7 +73,7 @@ const RelationsMatrix = (props) => {
   }
 
   useEffect(() => {
-    dispatch(queryRelations());
+    dispatch(getRelationStats());
   }, [dispatch]);
 
   const onReset = (event) => {
@@ -128,9 +134,7 @@ const RelationsMatrix = (props) => {
   const rebuildRelationsHandler = (flush = false) => {
     dispatch(rebuildRelations(flush))
       .then(() => {
-        dispatch(queryRelations());
-      })
-      .then(() => {
+        dispatch(getRelationStats());
         dispatch(queryRelations(null, true, 'broken'));
       })
       .then(() => {
@@ -443,7 +447,9 @@ const RelationsMatrix = (props) => {
               ) : null}
             </div>
           ) : (
-            <p>{relationsListError?.message}</p>
+            <p>
+              <b>{relationsListError?.type}</b> {relationsListError?.message}
+            </p>
           )}
         </Tab.Pane>
       ),

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

@@ -179,7 +179,7 @@ class AddRule extends Component {
     const { title, description, event, cascading, stop, enabled } = this.state;
     const triggeringEvents =
       this.props.events?.items && this.props.events?.items.length > 0
-        ? this.props.events?.items.map((event) => [event.title, event.token])
+        ? this.props.events?.items.map((event) => [event.token, event.title])
         : '';
 
     return (

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

@@ -209,7 +209,7 @@ class EditRule extends Component {
 
     const triggeringEvents =
       this.props.events?.items && this.props.events?.items.length > 0
-        ? this.props.events?.items.map((event) => [event.title, event.token])
+        ? this.props.events?.items.map((event) => [event.token, event.title])
         : '';
 
     return (

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

@@ -7,8 +7,14 @@ import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
 import trashSVG from '@plone/volto/icons/delete.svg';
-import { Icon } from '@plone/volto/components';
+import editSVG from '@plone/volto/icons/editing.svg';
+import { Icon, ModalForm, Toast } from '@plone/volto/components';
+import { updateUser } from '@plone/volto/actions';
 import ploneSVG from '@plone/volto/icons/plone.svg';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { messages } from '@plone/volto/helpers';
+import { toast } from 'react-toastify';
 
 /**
  * UsersControlpanelUser class.
@@ -43,9 +49,14 @@ class RenderUsers extends Component {
    */
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      user: {},
+    };
     this.onChange = this.onChange.bind(this);
+    this.onEditUserError = this.onEditUserError.bind(this);
+    this.onEditUserSubmit = this.onEditUserSubmit.bind(this);
   }
+
   /**
    * @param {*} event
    * @param {*} { value }
@@ -56,6 +67,49 @@ class RenderUsers extends Component {
     const [user, role] = value.split('&role=');
     this.props.updateUser(user, role);
   }
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.updateRequest.loading &&
+      this.props.updateRequest.loaded &&
+      this.state?.user?.id === this.props?.user?.id
+    ) {
+      this.setState({ user: {} });
+      this.props.listUsers();
+      return toast.success(
+        <Toast
+          success
+          title={this.props.intl.formatMessage(messages.success)}
+          content={this.props.intl.formatMessage(messages.updateUserSuccess)}
+        />,
+      );
+    }
+  }
+
+  onEditUserSubmit(data, callback) {
+    // Do not handle groups and roles in this form
+    delete data.groups;
+    delete data.roles;
+    this.props.updateUserData(data.id, data);
+  }
+
+  onEditUserError() {
+    return toast.error(
+      <Toast
+        error
+        title={this.props.intl.formatMessage(messages.error)}
+        content={this.props.intl.formatMessage(
+          messages.addUserFormPasswordAndSendPasswordTogetherNotAllowed,
+        )}
+      />,
+    );
+  }
+
+  onClickEdit(props) {
+    const { formData } = props;
+    this.setState({ user: { ...formData } });
+  }
+
   /**
    * Render method.
    * @method render
@@ -67,7 +121,8 @@ class RenderUsers extends Component {
         <Table.Cell className="fullname">
           {this.props.user.fullname
             ? this.props.user.fullname
-            : this.props.user.username}
+            : this.props.user.username}{' '}
+          ({this.props.user.username})
         </Table.Cell>
         {this.props.roles.map((role) => (
           <Table.Cell key={role.id}>
@@ -91,7 +146,20 @@ class RenderUsers extends Component {
         <Table.Cell textAlign="right">
           <Dropdown icon="ellipsis horizontal">
             <Dropdown.Menu className="left">
+              {this.props.userschema && (
+                <Dropdown.Item
+                  id="edit-user-button"
+                  onClick={() => {
+                    this.onClickEdit({ formData: this.props.user });
+                  }}
+                  value={this.props.user['@id']}
+                >
+                  <Icon name={editSVG} size="15px" />
+                  <FormattedMessage id="Edit" defaultMessage="Edit" />
+                </Dropdown.Item>
+              )}
               <Dropdown.Item
+                id="delete-user-button"
                 onClick={this.props.onDelete}
                 value={this.props.user['@id']}
               >
@@ -101,9 +169,31 @@ class RenderUsers extends Component {
             </Dropdown.Menu>
           </Dropdown>
         </Table.Cell>
+        {Object.keys(this.state.user).length > 0 &&
+          this.props.userschema.loaded && (
+            <ModalForm
+              className="modal"
+              onSubmit={this.onEditUserSubmit}
+              submitError={this.state.editUserError}
+              formData={this.state.user}
+              onCancel={() => this.setState({ user: {} })}
+              title={this.props.intl.formatMessage(
+                messages.updateUserFormTitle,
+              )}
+              loading={this.props.updateRequest.loading}
+              schema={this.props.userschema.userschema}
+            />
+          )}
       </Table.Row>
     );
   }
 }
-
-export default injectIntl(RenderUsers);
+export default compose(
+  injectIntl,
+  connect(
+    (state, props) => ({
+      updateRequest: state.users?.update,
+    }),
+    { updateUserData: updateUser },
+  ),
+)(RenderUsers);