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

package/src/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -5,6 +5,8 @@ import { useLocation, useHistory } from 'react-router-dom';
 
 import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
 import config from '@plone/volto/registry';
+import { usePrevious } from '@plone/volto/helpers';
+import { isEqual } from 'lodash';
 
 function getDisplayName(WrappedComponent) {
   return WrappedComponent.displayName || WrappedComponent.name || 'Component';
@@ -253,35 +255,50 @@ const withSearch = (options) => (WrappedComponent) => {
     const multiFacets = data.facets
       ?.filter((facet) => facet?.multiple)
       .map((facet) => facet?.field?.value);
-    const [facets, setFacets] = React.useState(
-      Object.assign(
-        {},
-        ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
-
-        // support for simple filters like ?Subject=something
-        // TODO: since the move to hash params this is no longer working.
-        // We'd have to treat the location.search and manage it just like the
-        // hash, to support it. We can read it, but we'd have to reset it as
-        // well, so at that point what's the difference to the hash?
-        ...configuredFacets.map((f) =>
-          locationSearchData[f]
-            ? {
-                [f]:
-                  multiFacets.indexOf(f) > -1
-                    ? [locationSearchData[f]]
-                    : locationSearchData[f],
-              }
-            : {},
-        ),
-      ),
-    );
+    const [facets, setFacets] = React.useState({});
+    const previousUrlQuery = usePrevious(urlQuery);
+
+    React.useEffect(() => {
+      if (!isEqual(urlQuery, previousUrlQuery)) {
+        setFacets(
+          Object.assign(
+            {},
+            ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
+
+            // support for simple filters like ?Subject=something
+            // TODO: since the move to hash params this is no longer working.
+            // We'd have to treat the location.search and manage it just like the
+            // hash, to support it. We can read it, but we'd have to reset it as
+            // well, so at that point what's the difference to the hash?
+            ...configuredFacets.map((f) =>
+              locationSearchData[f]
+                ? {
+                    [f]:
+                      multiFacets.indexOf(f) > -1
+                        ? [locationSearchData[f]]
+                        : locationSearchData[f],
+                  }
+                : {},
+            ),
+          ),
+        );
+      }
+    }, [
+      urlQuery,
+      configuredFacets,
+      locationSearchData,
+      multiFacets,
+      previousUrlQuery,
+    ]);
 
     const [sortOn, setSortOn] = React.useState(data?.query?.sort_on);
     const [sortOrder, setSortOrder] = React.useState(data?.query?.sort_order);
 
-    const [searchData, setSearchData] = React.useState(
-      getInitialState(data, facets, urlSearchText, id),
-    );
+    const [searchData, setSearchData] = React.useState({});
+
+    React.useEffect(() => {
+      setSearchData(getInitialState(data, facets, urlSearchText, id));
+    }, [facets, data, urlSearchText, id]);
 
     const timeoutRef = React.useRef();
     const facetSettings = data?.facets;

package/src/components/manage/Blocks/ToC/View.jsx

@@ -16,16 +16,79 @@ import {
   getBlocksLayoutFieldname,
 } from '@plone/volto/helpers';
 
+export const getBlocksTocEntries = (properties, tocData) => {
+  const blocksFieldName = getBlocksFieldname(properties);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+
+  const blocks = properties[blocksFieldName];
+  const blocks_layout = properties[blocksLayoutFieldname];
+
+  const levels =
+    tocData.levels?.length > 0
+      ? tocData.levels.map((l) => parseInt(l.slice(1)))
+      : [1, 2, 3, 4, 5, 6];
+  let rootLevel = Infinity;
+  let blocksFormEntries = [];
+  let tocEntries = {};
+  let tocEntriesLayout = [];
+
+  blocks_layout.items.forEach((id) => {
+    const block = blocks[id];
+    const blockConfig = config.blocks.blocksConfig[block['@type']];
+
+    if (!block || !blockConfig) {
+      return null;
+    }
+    if (!blockConfig.tocEntries && !blockConfig.tocEntry) {
+      return null;
+    }
+
+    const blockTocEntry = blockConfig.tocEntry?.(block, tocData);
+
+    const blockTocEntries = [
+      ...(blockConfig.tocEntries?.(block, tocData) ||
+        (blockTocEntry ? [blockTocEntry] : [])),
+    ];
+
+    blocksFormEntries = [...blocksFormEntries, ...blockTocEntries];
+
+    blockTocEntries.forEach((entry, index) => {
+      const i = `${id}-${index}`;
+      const level = entry[0];
+      const title = entry[1];
+      const items = [];
+      if (!level || !levels.includes(level)) return;
+      tocEntriesLayout.push(i);
+      tocEntries[i] = {
+        level,
+        title: title || block.plaintext,
+        items,
+        id: i,
+      };
+      if (level < rootLevel) {
+        rootLevel = level;
+      }
+    });
+  });
+
+  return {
+    rootLevel,
+    blocksFormEntries,
+    tocEntries,
+    tocEntriesLayout,
+  };
+};
+
 /**
  * View toc block class.
  * @class View
  * @extends Component
  */
 const View = (props) => {
-  const { properties, data } = props;
+  const { data } = props;
   const { variation } = props;
-  const blocksFieldname = getBlocksFieldname(properties);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+  const metadata = props.metadata || props.properties;
+  const blocksFieldname = getBlocksFieldname(metadata);
   const levels = React.useMemo(
     () =>
       data.levels?.length > 0
@@ -34,14 +97,15 @@ const View = (props) => {
     [data],
   );
   const tocEntries = React.useMemo(() => {
-    let rootLevel = Infinity;
     let entries = [];
     let prevEntry = {};
-    let tocEntries = {};
-    let tocEntriesLayout = [];
+    const { rootLevel, tocEntries, tocEntriesLayout } = getBlocksTocEntries(
+      metadata,
+      data,
+    );
 
-    properties[blocksLayoutFieldname].items.forEach((id) => {
-      const block = properties[blocksFieldname][id];
+    tocEntriesLayout.forEach((id) => {
+      const block = metadata[blocksFieldname][id];
       if (typeof block === 'undefined') {
         return null;
       }
@@ -50,6 +114,7 @@ const View = (props) => {
         block,
         data,
       );
+
       if (entry) {
         const level = entry[0];
         const title = entry[1];
@@ -64,9 +129,6 @@ const View = (props) => {
           override_toc: block.override_toc,
           plaintext: block.plaintext,
         };
-        if (level < rootLevel) {
-          rootLevel = level;
-        }
       }
     });
 
@@ -98,7 +160,7 @@ const View = (props) => {
     });
 
     return entries;
-  }, [data, levels, properties, blocksFieldname, blocksLayoutFieldname]);
+  }, [data, levels, metadata, blocksFieldname]);
 
   const Renderer = variation?.view;
   return (
@@ -108,7 +170,7 @@ const View = (props) => {
       )}
 
       {Renderer ? (
-        <Renderer {...props} tocEntries={tocEntries} properties={properties} />
+        <Renderer {...props} tocEntries={tocEntries} metadata={metadata} />
       ) : (
         <div>View extension not found</div>
       )}

package/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx

@@ -8,13 +8,10 @@ import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { List } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-import AnchorLink from 'react-anchor-link-smooth-scroll';
 import Slugger from 'github-slugger';
+import { UniversalLink } from '@plone/volto/components';
 
 const RenderListItems = ({ items, data }) => {
-  const history = useHistory();
-
   return map(items, (item) => {
     const { id, level, title, override_toc, plaintext } = item;
     const slug = override_toc
@@ -23,14 +20,7 @@ const RenderListItems = ({ items, data }) => {
     return (
       item && (
         <List.Item key={id} className={`item headline-${level}`} as="li">
-          <AnchorLink
-            href={`#${slug}`}
-            onClick={(e) => {
-              history.push({ hash: slug });
-            }}
-          >
-            {title}
-          </AnchorLink>
+          <UniversalLink href={`#${slug}`}>{title}</UniversalLink>
           {item.items?.length > 0 && (
             <List
               ordered={data.ordered}

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