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

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/Form/BlockDataForm.jsx

@@ -5,7 +5,7 @@ import { withVariationSchemaEnhancer } from '@plone/volto/helpers';
 const EnhancedBlockDataForm = withVariationSchemaEnhancer(InlineForm);
 
 export default function BlockDataForm(props) {
-  const { onChangeBlock, block } = props;
+  const { onChangeBlock, block, applySchemaEnhancers = true } = props;
 
   if (!onChangeBlock) {
     // eslint-disable-next-line no-console
@@ -19,8 +19,9 @@ export default function BlockDataForm(props) {
     [block, onChangeBlock],
   );
 
+  const Form = applySchemaEnhancers ? EnhancedBlockDataForm : InlineForm;
   return (
-    <EnhancedBlockDataForm
+    <Form
       {...props}
       onChangeFormData={onChangeBlock ? onChangeFormData : undefined}
     />

package/src/components/manage/Form/BlockDataForm.test.jsx

@@ -72,7 +72,7 @@ beforeAll(() => {
 });
 
 describe('BlockDataForm', () => {
-  it('should does not add variations to schema when unneeded', () => {
+  it('should not add variations to schema when unneeded', () => {
     const WrappedBlockDataForm = withStateManagement(BlockDataForm);
     const store = mockStore({
       intl: {
@@ -103,7 +103,7 @@ describe('BlockDataForm', () => {
     expect(testSchema.fieldsets[0].fields).toStrictEqual([]);
   });
 
-  it('should does not add variations when only one variation', () => {
+  it('should not add variations when only one variation', () => {
     const WrappedBlockDataForm = withStateManagement(BlockDataForm);
     const store = mockStore({
       intl: {
@@ -164,4 +164,36 @@ describe('BlockDataForm', () => {
     // schema is cloned, not mutated in place
     expect(testSchema.fieldsets[0].fields).toStrictEqual([]);
   });
+
+  it('should not add variations to schema when explicitly disabled', () => {
+    const WrappedBlockDataForm = withStateManagement(BlockDataForm);
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const testSchema = {
+      fieldsets: [{ title: 'Default', id: 'default', fields: [] }],
+      properties: {},
+      required: [],
+    };
+    const formData = {
+      '@type': 'testBlock',
+    };
+    const { container } = render(
+      <Provider store={store}>
+        <WrappedBlockDataForm
+          formData={formData}
+          schema={testSchema}
+          onChangeField={(id, value) => {}}
+          applySchemaEnhancers={false}
+        />
+      </Provider>,
+    );
+    expect(container).toMatchSnapshot();
+
+    // schema is cloned, not mutated in place
+    expect(testSchema.fieldsets[0].fields).toStrictEqual([]);
+  });
 });

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

@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
 import { Provider } from 'react-intl-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
+import { MemoryRouter } from 'react-router-dom';
 
 import LinksToItem from './LinksToItem';
 
@@ -88,7 +89,9 @@ describe('LinksToItem', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <LinksToItem location={{ pathname: '/page-1/links-to-item' }} />
+        <MemoryRouter>
+          <LinksToItem location={{ pathname: '/page-1/links-to-item' }} />
+        </MemoryRouter>
       </Provider>,
     );
     const json = component.toJSON();

package/src/components/manage/Messages/Messages.jsx

@@ -1,107 +1,40 @@
-/**
- * Messages component.
- * @module components/manage/Messages/Messages
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Message, Container } from 'semantic-ui-react';
 import { map } from 'lodash';
 
 import { removeMessage } from '@plone/volto/actions';
 
-/**
- * Messages container class.
- * @class Messages
- * @extends Component
- */
-class Messages extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    removeMessage: PropTypes.func.isRequired,
-    messages: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        body: PropTypes.string,
-        level: PropTypes.string,
-      }),
-    ).isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Messages
-   */
-  constructor(props) {
-    super(props);
-    this.onDismiss = this.onDismiss.bind(this);
-  }
+const Messages = () => {
+  const dispatch = useDispatch();
 
-  // /**
-  //  * Component will receive props
-  //  * @method componentWillReceiveProps
-  //  * @param {Object} nextProps Next properties
-  //  * @returns {undefined}
-  //  */
-  // componentWillReceiveProps(nextProps) {
-  //   if (nextProps.messages.length > this.props.messages.length) {
-  //     window.setTimeout(() => {
-  //       if (this.props.messages.length > 0) {
-  //         this.props.removeMessage(-1);
-  //       }
-  //     }, 6000);
-  //   }
-  // }
+  const messages = useSelector(
+    (state) => state.messages.messages,
+    shallowEqual,
+  );
 
-  /**
-   * On dismiss
-   * @method onDismiss
-   * @param {Object} event Event object
-   * @param {number} value Index of message
-   * @returns {undefined}
-   */
-  onDismiss(event, { value }) {
-    this.props.removeMessage(value);
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      this.props.messages && (
-        <Container className="messages">
-          {map(this.props.messages, (message, index) => (
-            <Message
-              key={message.id}
-              value={index}
-              onDismiss={this.onDismiss}
-              error={message.level === 'error'}
-              success={message.level === 'success'}
-              warning={message.level === 'warning'}
-              info={message.level === 'info'}
-              header={message.title}
-              content={message.body}
-            />
-          ))}
-        </Container>
-      )
-    );
-  }
-}
+  const onDismiss = (event, { value }) => {
+    dispatch(removeMessage(value));
+  };
 
-export default connect(
-  (state) => ({
-    messages: state.messages.messages,
-  }),
-  { removeMessage },
-)(Messages);
+  return (
+    messages && (
+      <Container className="messages">
+        {map(messages, (message, index) => (
+          <Message
+            key={message.id}
+            value={index}
+            onDismiss={onDismiss}
+            error={message.level === 'error'}
+            success={message.level === 'success'}
+            warning={message.level === 'warning'}
+            info={message.level === 'info'}
+            header={message.title}
+            content={message.body}
+          />
+        ))}
+      </Container>
+    )
+  );
+};
+
+export default Messages;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-redux';

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/UniversalLink/UniversalLink.jsx

@@ -14,6 +14,7 @@ import {
 } from '@plone/volto/helpers/Url/Url';
 
 import config from '@plone/volto/registry';
+import cx from 'classnames';
 
 const UniversalLink = ({
   href,
@@ -88,19 +89,16 @@ const UniversalLink = ({
   );
 
   if (isExternal) {
+    const isTelephoneOrMail = checkedURL.isMail || checkedURL.isTelephone;
     tag = (
       <a
         href={url}
         title={title}
         target={
-          !checkedURL.isMail &&
-          !checkedURL.isTelephone &&
-          !(openLinkInNewTab === false)
-            ? '_blank'
-            : null
+          !isTelephoneOrMail && !(openLinkInNewTab === false) ? '_blank' : null
         }
         rel="noopener noreferrer"
-        className={className}
+        className={cx({ external: !isTelephoneOrMail }, className)}
         {...props}
       >
         {children}

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

@@ -325,7 +325,9 @@ class ArrayWidget extends Component {
               : this.props.choices
               ? [
                   ...choices,
-                  ...(this.props.noValueOption && !this.props.default
+                  ...(this.props.noValueOption &&
+                  (this.props.default === undefined ||
+                    this.props.default === null)
                     ? [
                         {
                           label: this.props.intl.formatMessage(