@plone/volto 17.0.0-alpha.24 → 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: '',
@@ -107,6 +109,7 @@ class UsersControlpanel extends Component {
       isClient: false,
       currentPage: 0,
       pageSize: 10,
+      loginUsingEmail: false,
     };
   }
 
@@ -120,6 +123,15 @@ class UsersControlpanel extends Component {
         entries: this.props.users,
       });
     }
+    await this.props.getUserSchema();
+  };
+
+  // Because username field needs to be disabled if email login is enabled!
+  checkLoginUsingEmailStatus = async () => {
+    await this.props.getControlpanel('security');
+    this.setState({
+      loginUsingEmail: this.props.controlPanelData?.data.use_email_as_login,
+    });
   };
 
   /**
@@ -132,6 +144,7 @@ class UsersControlpanel extends Component {
       isClient: true,
     });
     this.fetchData();
+    this.checkLoginUsingEmailStatus();
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -171,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);
+      });
   }
 
   /**
@@ -255,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,
+      });
+    }
   }
 
   /**
@@ -382,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)} />
@@ -408,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"
@@ -419,92 +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: [
-                      'username',
-                      'fullname',
-                      'email',
-                      'password',
-                      'sendPasswordReset',
-                      'roles',
-                      'groups',
-                    ],
-                  },
-                ],
-                properties: {
-                  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>
@@ -533,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,
                   )}
@@ -544,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>
@@ -578,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}
@@ -670,6 +695,8 @@ export default compose(
       createRequest: state.users.create,
       loadRolesRequest: state.roles,
       inheritedRole: state.authRole.authenticatedRole,
+      userschema: state.userschema,
+      controlPanelData: state.controlpanels?.controlpanel,
     }),
     (dispatch) =>
       bindActionCreators(
@@ -682,6 +709,7 @@ export default compose(
           createUser,
           updateUser,
           updateGroup,
+          getUserSchema,
         },
         dispatch,
       ),

package/src/components/manage/Diff/DiffField.jsx

@@ -17,6 +17,7 @@ import { useSelector } from 'react-redux';
 import { Api } from '@plone/volto/helpers';
 import configureStore from '@plone/volto/store';
 import { DefaultView } from '@plone/volto/components/';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
 
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
@@ -69,7 +70,7 @@ const DiffField = ({
             .replace('\u202F', ' '),
         );
         break;
-      case 'json':
+      case 'json': {
         const api = new Api();
         const history = createBrowserHistory();
         const store = configureStore(window.__data, history, api);
@@ -90,6 +91,29 @@ const DiffField = ({
           ),
         );
         break;
+      }
+      case 'slate': {
+        const api = new Api();
+        const history = createBrowserHistory();
+        const store = configureStore(window.__data, history, api);
+        parts = diffWords(
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(one)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(two)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+        );
+        break;
+      }
       case 'textarea':
       default:
         parts = diffWords(one, two);

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

@@ -44,7 +44,7 @@ const LinksToItem = (props) => {
 
   const title = useSelector((state) => state.content.data?.title || '');
   const myrelations = useSelector(
-    (state) => state.relations.subrequests[itempath]?.relations,
+    (state) => state.relations.subrequests[itempath]?.data,
   );
   const actions = useSelector((state) => state.actions?.actions ?? {});
   const ploneSetupAction = find(actions.user, {

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';
 
@@ -20,7 +21,7 @@ describe('LinksToItem', () => {
       relations: {
         subrequests: {
           '/page-1': {
-            relations: {
+            data: {
               isReferencing: {
                 items: [
                   {
@@ -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';