@plone/volto 16.23.0 → 16.25.0

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

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

@@ -11,6 +11,7 @@ import {
   getControlpanel,
   updateUser,
   updateGroup,
+  getUserSchema,
 } from '@plone/volto/actions';
 import {
   Icon,
@@ -98,6 +99,7 @@ class UsersControlpanel extends Component {
     this.updateUserRole = this.updateUserRole.bind(this);
     this.state = {
       search: '',
+      isLoading: false,
       showAddUser: false,
       showAddUserErrorConfirm: false,
       addUserError: '',
@@ -121,6 +123,7 @@ class UsersControlpanel extends Component {
         entries: this.props.users,
       });
     }
+    await this.props.getUserSchema();
   };
 
   // Because username field needs to be disabled if email login is enabled!
@@ -181,9 +184,19 @@ class UsersControlpanel extends Component {
    */
   onSearch(event) {
     event.preventDefault();
-    this.props.listUsers({
-      search: this.state.search,
-    });
+    this.setState({ isLoading: true });
+    this.props
+      .listUsers({
+        search: this.state.search,
+      })
+      .then(() => {
+        this.setState({ isLoading: false });
+      })
+      .catch((error) => {
+        this.setState({ isLoading: false });
+        // eslint-disable-next-line no-console
+        console.error('Error searching users', error);
+      });
   }
 
   /**
@@ -265,12 +278,28 @@ class UsersControlpanel extends Component {
    * @returns {undefined}
    */
   onAddUserSubmit(data, callback) {
-    const { groups, sendPasswordReset } = data;
-    if (groups && groups.length > 0) this.addUserToGroup(data);
-    this.props.createUser(data, sendPasswordReset);
-    this.setState({
-      addUserSetFormDataCallback: callback,
-    });
+    const { groups, sendPasswordReset, password } = data;
+    if (
+      sendPasswordReset !== undefined &&
+      sendPasswordReset === true &&
+      password !== undefined
+    ) {
+      toast.error(
+        <Toast
+          error
+          title={this.props.intl.formatMessage(messages.error)}
+          content={this.props.intl.formatMessage(
+            messages.addUserFormPasswordAndSendPasswordTogetherNotAllowed,
+          )}
+        />,
+      );
+    } else {
+      if (groups && groups.length > 0) this.addUserToGroup(data);
+      this.props.createUser(data, sendPasswordReset);
+      this.setState({
+        addUserSetFormDataCallback: callback,
+      });
+    }
   }
 
   /**
@@ -392,6 +421,65 @@ class UsersControlpanel extends Component {
     let usernameToDelete = this.state.userToDelete
       ? this.state.userToDelete.username
       : '';
+    // Copy the userschema using JSON serialization/deserialization
+    // this is really ugly, but if we don't do this the original value
+    // of the userschema is changed and it is used like that through
+    // the lifecycle of the application
+    let adduserschema = {};
+    if (this.props?.userschema?.loaded) {
+      adduserschema = JSON.parse(
+        JSON.stringify(this.props?.userschema?.userschema),
+      );
+      adduserschema.properties['username'] = {
+        title: this.props.intl.formatMessage(messages.addUserFormUsernameTitle),
+        type: 'string',
+        description: this.props.intl.formatMessage(
+          messages.addUserFormUsernameDescription,
+        ),
+      };
+      adduserschema.properties['password'] = {
+        title: this.props.intl.formatMessage(messages.addUserFormPasswordTitle),
+        type: 'password',
+        description: this.props.intl.formatMessage(
+          messages.addUserFormPasswordDescription,
+        ),
+        widget: 'password',
+      };
+      adduserschema.properties['sendPasswordReset'] = {
+        title: this.props.intl.formatMessage(
+          messages.addUserFormSendPasswordResetTitle,
+        ),
+        type: 'boolean',
+      };
+      adduserschema.properties['roles'] = {
+        title: this.props.intl.formatMessage(messages.addUserFormRolesTitle),
+        type: 'array',
+        choices: this.props.roles.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]),
+        noValueOption: false,
+      };
+      if (
+        adduserschema.fieldsets &&
+        adduserschema.fieldsets.length > 0 &&
+        !adduserschema.fieldsets[0]['fields'].includes('username')
+      ) {
+        adduserschema.fieldsets[0]['fields'] = adduserschema.fieldsets[0][
+          'fields'
+        ].concat([
+          'username',
+          'password',
+          'sendPasswordReset',
+          'roles',
+          'groups',
+        ]);
+      }
+    }
+
     return (
       <Container className="users-control-panel">
         <Helmet title={this.props.intl.formatMessage(messages.users)} />
@@ -418,7 +506,7 @@ class UsersControlpanel extends Component {
             onConfirm={this.onDeleteOk}
             size={null}
           />
-          {this.state.showAddUser ? (
+          {this.props?.userschema?.loaded && this.state.showAddUser ? (
             <ModalForm
               open={this.state.showAddUser}
               className="modal"
@@ -429,96 +517,7 @@ class UsersControlpanel extends Component {
               }
               title={this.props.intl.formatMessage(messages.addUserFormTitle)}
               loading={this.props.createRequest.loading}
-              schema={{
-                fieldsets: [
-                  {
-                    id: 'default',
-                    title: 'FIXME: User Data',
-                    fields: [
-                      ...(!this.state.loginUsingEmail ? ['username'] : []),
-                      'fullname',
-                      'email',
-                      'password',
-                      'sendPasswordReset',
-                      'roles',
-                      'groups',
-                    ],
-                  },
-                ],
-                properties: {
-                  ...(!this.state.loginUsingEmail
-                    ? {
-                        username: {
-                          title: this.props.intl.formatMessage(
-                            messages.addUserFormUsernameTitle,
-                          ),
-                          type: 'string',
-                          description: this.props.intl.formatMessage(
-                            messages.addUserFormUsernameDescription,
-                          ),
-                        },
-                      }
-                    : {}),
-                  fullname: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormFullnameTitle,
-                    ),
-                    type: 'string',
-                    description: this.props.intl.formatMessage(
-                      messages.addUserFormFullnameDescription,
-                    ),
-                  },
-                  email: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormEmailTitle,
-                    ),
-                    type: 'string',
-                    description: this.props.intl.formatMessage(
-                      messages.addUserFormEmailDescription,
-                    ),
-                    widget: 'email',
-                  },
-                  password: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormPasswordTitle,
-                    ),
-                    type: 'password',
-                    description: this.props.intl.formatMessage(
-                      messages.addUserFormPasswordDescription,
-                    ),
-                    widget: 'password',
-                  },
-                  sendPasswordReset: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormSendPasswordResetTitle,
-                    ),
-                    type: 'boolean',
-                  },
-                  roles: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormRolesTitle,
-                    ),
-                    type: 'array',
-                    choices: this.props.roles.map((role) => [
-                      role.id,
-                      role.title,
-                    ]),
-                    noValueOption: false,
-                  },
-                  groups: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserGroupNameTitle,
-                    ),
-                    type: 'array',
-                    choices: this.props.groups.map((group) => [
-                      group.id,
-                      group.id,
-                    ]),
-                    noValueOption: false,
-                  },
-                },
-                required: ['username', 'email'],
-              }}
+              schema={adduserschema}
             />
           ) : null}
         </div>
@@ -547,7 +546,11 @@ class UsersControlpanel 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.searchUsers,
                   )}
@@ -558,7 +561,8 @@ class UsersControlpanel extends Component {
             </Form>
           </Segment>
           <Form>
-            <div className="table">
+            {((this.props.many_users && this.state.entries.length > 0) ||
+              !this.props.many_users) && (
               <Table padded striped attached unstackable>
                 <Table.Header>
                   <Table.Row>
@@ -592,11 +596,18 @@ class UsersControlpanel extends Component {
                         user={user}
                         updateUser={this.updateUserRole}
                         inheritedRole={this.props.inheritedRole}
+                        userschema={this.props.userschema}
+                        listUsers={this.props.listUsers}
                       />
                     ))}
                 </Table.Body>
               </Table>
-            </div>
+            )}
+            {this.state.entries.length === 0 && this.state.search && (
+              <Segment>
+                {this.props.intl.formatMessage(messages.userSearchNoResults)}
+              </Segment>
+            )}
             <div className="contents-pagination">
               <Pagination
                 current={this.state.currentPage}
@@ -684,6 +695,7 @@ export default compose(
       createRequest: state.users.create,
       loadRolesRequest: state.roles,
       inheritedRole: state.authRole.authenticatedRole,
+      userschema: state.userschema,
       controlPanelData: state.controlpanels?.controlpanel,
     }),
     (dispatch) =>
@@ -697,6 +709,7 @@ export default compose(
           createUser,
           updateUser,
           updateGroup,
+          getUserSchema,
         },
         dispatch,
       ),

package/src/components/manage/Sharing/Sharing.jsx

@@ -145,6 +145,7 @@ class SharingComponent extends Component {
     this.onToggleInherit = this.onToggleInherit.bind(this);
     this.state = {
       search: '',
+      isLoading: false,
       inherit: props.inherit,
       entries: props.entries,
       isClient: false,
@@ -225,7 +226,17 @@ class SharingComponent extends Component {
    */
   onSearch(event) {
     event.preventDefault();
-    this.props.getSharing(getBaseUrl(this.props.pathname), this.state.search);
+    this.setState({ isLoading: true });
+    this.props
+      .getSharing(getBaseUrl(this.props.pathname), this.state.search)
+      .then(() => {
+        this.setState({ isLoading: false });
+      })
+      .catch((error) => {
+        this.setState({ isLoading: false });
+        // eslint-disable-next-line no-console
+        console.error('Error searching users or groups', error);
+      });
   }
 
   /**
@@ -296,7 +307,10 @@ class SharingComponent extends Component {
       <Container id="page-sharing">
         <Helmet title={this.props.intl.formatMessage(messages.sharing)} />
         <Segment.Group raised>
-          <Pluggable name="sharing-component" />
+          <Pluggable
+            name="sharing-component"
+            params={{ isLoading: this.state.isLoading }}
+          />
           <Plug pluggable="sharing-component" id="sharing-component-title">
             <Segment className="primary">
               <FormattedMessage
@@ -318,20 +332,29 @@ class SharingComponent extends Component {
             </Segment>
           </Plug>
           <Plug pluggable="sharing-component" id="sharing-component-search">
-            <Segment>
-              <Form onSubmit={this.onSearch}>
-                <Form.Field>
-                  <Input
-                    name="SearchableText"
-                    action={{ icon: 'search' }}
-                    placeholder={this.props.intl.formatMessage(
-                      messages.searchForUserOrGroup,
-                    )}
-                    onChange={this.onChangeSearch}
-                  />
-                </Form.Field>
-              </Form>
-            </Segment>
+            {({ isLoading }) => {
+              return (
+                <Segment>
+                  <Form onSubmit={this.onSearch}>
+                    <Form.Field>
+                      <Input
+                        name="SearchableText"
+                        action={{
+                          icon: 'search',
+                          loading: isLoading,
+                          disabled: isLoading,
+                        }}
+                        placeholder={this.props.intl.formatMessage(
+                          messages.searchForUserOrGroup,
+                        )}
+                        onChange={this.onChangeSearch}
+                        id="sharing-component-search"
+                      />
+                    </Form.Field>
+                  </Form>
+                </Segment>
+              );
+            }}
           </Plug>
           <Plug
             pluggable="sharing-component"

package/src/components/manage/Widgets/QueryWidget.jsx

@@ -314,7 +314,8 @@ export class QuerystringWidgetComponent extends Component {
                                   label: field[1].title,
                                   value: field[0],
                                   isDisabled: (value || []).some(
-                                    (v) => v['i'] === field[0],
+                                    (v) =>
+                                      v['i'] !== 'path' && v['i'] === field[0],
                                   ),
                                 }),
                               ),
@@ -444,8 +445,11 @@ export class QuerystringWidgetComponent extends Component {
                           (field) => ({
                             label: field[1].title,
                             value: field[0],
+                            // disable selecting indexes that are already used,
+                            // except for path, which has explicit support
+                            // in the backend for multipath queries
                             isDisabled: (value || []).some(
-                              (v) => v['i'] === field[0],
+                              (v) => v['i'] !== 'path' && v['i'] === field[0],
                             ),
                           }),
                         ),

package/src/helpers/MessageLabels/MessageLabels.js

@@ -172,6 +172,28 @@ export const messages = defineMessages({
     id: 'Roles',
     defaultMessage: 'Roles',
   },
+  addUserFormPasswordAndSendPasswordTogetherNotAllowed: {
+    id:
+      'It is not allowed to define both the password and to request sending the password reset message by e-mail. You need to select one of them.',
+    defaultMessage:
+      'It is not allowed to define both the password and to request sending the password reset message by e-mail. You need to select one of them.',
+  },
+  userSearchNoResults: {
+    id: 'There are no users with the searched criteria',
+    defaultMessage: 'There are no users with the searched criteria',
+  },
+  groupSearchNoResults: {
+    id: 'There are no groups with the searched criteria',
+    defaultMessage: 'There are no groups with the searched criteria',
+  },
+  updateUserFormTitle: {
+    id: 'Update User',
+    defaultMessage: 'Update User',
+  },
+  updateUserSuccess: {
+    id: 'User updated successfuly',
+    defaultMessage: 'User updated successfuly',
+  },
   updateRoles: {
     id: 'User roles updated',
     defaultMessage: 'User roles updated',
@@ -234,19 +256,19 @@ export const messages = defineMessages({
   },
   copyBlocks: {
     id: 'Copy blocks',
-    defaultMesages: 'Copy blocks',
+    defaultMessage: 'Copy blocks',
   },
   cutBlocks: {
     id: 'Cut blocks',
-    defaultMesages: 'Cut blocks',
+    defaultMessage: 'Cut blocks',
   },
   pasteBlocks: {
     id: 'Paste blocks',
-    defaultMesages: 'Paste blocks',
+    defaultMessage: 'Paste blocks',
   },
   deleteBlocks: {
     id: 'Delete blocks',
-    defaultMesages: 'Delete blocks',
+    defaultMessage: 'Delete blocks',
   },
   showAllUserButton: {
     id: 'Show All',

package/src/reducers/navigation/navigation.js

@@ -73,11 +73,11 @@ export default function navigation(state = initialState, action = {}) {
       }
       return state;
     case `${GET_NAVIGATION}_SUCCESS`:
-      hasExpander = hasApiExpander(
-        'navigation',
-        getBaseUrl(flattenToAppURL(action.result['@id'])),
-      );
-      if (!hasExpander) {
+      // Even if the expander is set or not, if the GET_NAVIGATION is
+      // called, we want it to store the data if the actions data is
+      // not set in the expander data (['@components']) but in the "normal"
+      // action result (we look for the object property returned by the endpoint)
+      if (!action.result?.['@components'] && action.result?.items) {
         return {
           ...state,
           error: null,

package/src/reducers/navigation/navigation.test.js

@@ -172,4 +172,34 @@ describe('Navigation reducer (NAVIGATION)GET_CONTENT', () => {
       loading: false,
     });
   });
+
+  it('should handle (NAVIGATION)GET_NAVIGATION_SUCCESS (standalone with apiExpander enabled)', () => {
+    expect(
+      navigation(undefined, {
+        type: `${GET_NAVIGATION}_SUCCESS`,
+        result: {
+          items: [
+            {
+              title: 'Welcome to Plone!',
+              description:
+                'Congratulations! You have successfully installed Plone.',
+              '@id': `${settings.apiPath}/front-page`,
+            },
+          ],
+        },
+      }),
+    ).toEqual({
+      error: null,
+      items: [
+        {
+          title: 'Welcome to Plone!',
+          description:
+            'Congratulations! You have successfully installed Plone.',
+          url: '/front-page',
+        },
+      ],
+      loaded: true,
+      loading: false,
+    });
+  });
 });

package/styles/Microsoft/AMPM.yml

@@ -0,0 +1,9 @@
+extends: existence
+message: Use 'AM' or 'PM' (preceded by a space).
+link: https://docs.microsoft.com/en-us/style-guide/a-z-word-list-term-collections/term-collections/date-time-terms
+level: error
+nonword: true
+tokens:
+  - '\d{1,2}[AP]M'
+  - '\d{1,2} ?[ap]m'
+  - '\d{1,2} ?[aApP]\.[mM]\.'