@plone/volto 17.0.0-alpha.4 → 17.0.0-alpha.6

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

@@ -114,15 +114,19 @@ function normalizeState({
     block: id,
   };
 
-  // TODO: need to check if SearchableText facet is not already in the query
-  // Ideally the searchtext functionality should be restructured as being just
-  // another facet
-  params.query = params.query.reduce(
-    // Remove SearchableText from query
-    (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
-    [],
-  );
+  // Note Ideally the searchtext functionality should be restructured as being just
+  // another facet. But right now it's the same. This means that if a searchText
+  // is provided, it will override the SearchableText facet.
+  // If there is no searchText, the SearchableText in the query remains in effect.
+  // TODO eventually the searchText should be a distinct facet from SearchableText, and
+  // the two conditions could be combined, in comparison to the current state, when
+  // one overrides the other.
   if (searchText) {
+    params.query = params.query.reduce(
+      // Remove SearchableText from query
+      (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
+      [],
+    );
     params.query.push({
       i: 'SearchableText',
       o: 'plone.app.querystring.operation.string.contains',
@@ -144,16 +148,12 @@ const getSearchFields = (searchData) => {
 };
 
 /**
- * A hook that will mirror the search block state to a hash location
+ * A HOC that will mirror the search block state to a hash location
  */
 const useHashState = () => {
   const location = useLocation();
   const history = useHistory();
 
-  /**
-   * Required to maintain parameter compatibility.
-    With this we will maintain support for receiving hash (#) and search (?) type parameters.
-  */
   const oldState = React.useMemo(() => {
     return {
       ...qs.parse(location.search),
@@ -169,7 +169,7 @@ const useHashState = () => {
 
   const setSearchData = React.useCallback(
     (searchData) => {
-      const newParams = qs.parse(location.search);
+      const newParams = qs.parse(location.hash);
 
       let changed = false;
 
@@ -186,11 +186,11 @@ const useHashState = () => {
 
       if (changed) {
         history.push({
-          search: qs.stringify(newParams),
+          hash: qs.stringify(newParams),
         });
       }
     },
-    [history, oldState, location.search],
+    [history, oldState, location.hash],
   );
 
   return [current, setSearchData];
@@ -282,8 +282,14 @@ const withSearch = (options) => (WrappedComponent) => {
     const timeoutRef = React.useRef();
     const facetSettings = data?.facets;
 
+    const deepQuery = JSON.stringify(data.query);
     const onTriggerSearch = React.useCallback(
-      (toSearchText, toSearchFacets, toSortOn, toSortOrder) => {
+      (
+        toSearchText = undefined,
+        toSearchFacets = undefined,
+        toSortOn = undefined,
+        toSortOrder = undefined,
+      ) => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(
           () => {
@@ -291,7 +297,7 @@ const withSearch = (options) => (WrappedComponent) => {
               id,
               query: data.query || {},
               facets: toSearchFacets || facets,
-              searchText: toSearchText,
+              searchText: toSearchText || searchText,
               sortOn: toSortOn || sortOn,
               sortOrder: toSortOrder || sortOrder,
               facetSettings,
@@ -305,11 +311,14 @@ const withSearch = (options) => (WrappedComponent) => {
           toSearchFacets ? inputDelay / 3 : inputDelay,
         );
       },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [
-        data.query,
+        // Use deep comparison of data.query
+        deepQuery,
         facets,
         id,
         setLocationSearchData,
+        searchText,
         sortOn,
         sortOrder,
         facetSettings,

package/src/components/manage/Contents/Contents.jsx

@@ -796,18 +796,20 @@ class Contents extends Component {
    */
   onMoveToTop(event, { value }) {
     const id = this.state.items[value]['@id'];
-    value = this.state.currentPage * this.state.pageSize + value;
-    this.props.orderContent(
-      getBaseUrl(this.props.pathname),
-      id.replace(/^.*\//, ''),
-      -value,
-    );
-    this.setState(
-      {
-        currentPage: 0,
-      },
-      () => this.fetchContents(),
-    );
+    this.props
+      .orderContent(
+        getBaseUrl(this.props.pathname),
+        id.replace(/^.*\//, ''),
+        'top',
+      )
+      .then(() => {
+        this.setState(
+          {
+            currentPage: 0,
+          },
+          () => this.fetchContents(),
+        );
+      });
   }
 
   /**
@@ -818,18 +820,21 @@ class Contents extends Component {
    * @returns {undefined}
    */
   onMoveToBottom(event, { value }) {
-    this.onOrderItem(
-      this.state.items[value]['@id'],
-      value,
-      this.state.items.length - 1 - value,
-      false,
-    );
-    this.onOrderItem(
-      this.state.items[value]['@id'],
-      value,
-      this.state.items.length - 1 - value,
-      true,
-    );
+    const id = this.state.items[value]['@id'];
+    this.props
+      .orderContent(
+        getBaseUrl(this.props.pathname),
+        id.replace(/^.*\//, ''),
+        'bottom',
+      )
+      .then(() => {
+        this.setState(
+          {
+            currentPage: 0,
+          },
+          () => this.fetchContents(),
+        );
+      });
   }
 
   /**

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

@@ -3,16 +3,16 @@
  * @module components/manage/Controlpanels/Controlpanels
  */
 
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { concat, filter, last, map, uniqBy } from 'lodash';
 import { Portal } from 'react-portal';
-import { Helmet } from '@plone/volto/helpers';
+import { asyncConnect, Helmet } from '@plone/volto/helpers';
 import { Container, Grid, Header, Message, Segment } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { listControlpanels, getSystemInformation } from '@plone/volto/actions';
 import { Error, Icon, Toolbar, VersionOverview } from '@plone/volto/components';
@@ -94,185 +94,126 @@ const messages = defineMessages({
 
 /**
  * Controlpanels container class.
- * @class Controlpanels
- * @extends Component
  */
-class Controlpanels extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    listControlpanels: PropTypes.func.isRequired,
-    controlpanels: PropTypes.arrayOf(
-      PropTypes.shape({
-        '@id': PropTypes.string,
-        group: PropTypes.string,
-        title: PropTypes.string,
-      }),
-    ).isRequired,
-    pathname: PropTypes.string.isRequired,
-  };
+function Controlpanels({
+  controlpanels,
+  controlpanelsRequest,
+  systemInformation,
+  pathname,
+}) {
+  const intl = useIntl();
+  const [isClient, setIsClient] = useState(false);
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs EditComponent
-   */
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: null,
-      isClient: false,
-    };
-  }
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
 
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.listControlpanels();
-    this.props.getSystemInformation();
-    this.setState({ isClient: true });
-  }
+  const error = controlpanelsRequest?.error;
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Error
-    if (
-      this.props.controlpanelsRequest.loading &&
-      nextProps.controlpanelsRequest.error
-    ) {
-      this.setState({
-        error: nextProps.controlpanelsRequest.error,
-      });
-    }
+  if (error) {
+    return <Error error={error} />;
   }
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    // Error
-    if (this.state.error) {
-      return <Error error={this.state.error} />;
-    }
+  let customcontrolpanels = config.settings.controlpanels
+    ? config.settings.controlpanels.map((el) => {
+        el.group =
+          intl.formatMessage({
+            id: el.group,
+            defaultMessage: el.group,
+          }) || el.group;
+        return el;
+      })
+    : [];
+  const { filterControlPanels } = config.settings;
 
-    let customcontrolpanels = config.settings.controlpanels
-      ? config.settings.controlpanels.map((el) => {
-          el.group =
-            this.props.intl.formatMessage({
-              id: el.group,
-              defaultMessage: el.group,
-            }) || el.group;
-          return el;
-        })
-      : [];
-    const { filterControlPanels } = config.settings;
-    const controlpanels = map(
-      concat(
-        filterControlPanels(this.props.controlpanels),
-        customcontrolpanels,
-        [
-          {
-            '@id': '/addons',
-            group: this.props.intl.formatMessage(messages.general),
-            title: this.props.intl.formatMessage(messages.addons),
-          },
-          {
-            '@id': '/database',
-            group: this.props.intl.formatMessage(messages.general),
-            title: this.props.intl.formatMessage(messages.database),
-          },
-          {
-            '@id': '/rules',
-            group: this.props.intl.formatMessage(messages.content),
-            title: this.props.intl.formatMessage(messages.contentRules),
-          },
-          {
-            '@id': '/undo',
-            group: this.props.intl.formatMessage(messages.general),
-            title: this.props.intl.formatMessage(messages.undo),
-          },
-          {
-            '@id': '/aliases',
-            group: this.props.intl.formatMessage(messages.general),
-            title: this.props.intl.formatMessage(messages.urlmanagement),
-          },
-          {
-            '@id': '/moderate-comments',
-            group: this.props.intl.formatMessage(messages.content),
-            title: this.props.intl.formatMessage(messages.moderatecomments),
-          },
-          {
-            '@id': '/users',
-            group: this.props.intl.formatMessage(
-              messages.usersControlPanelCategory,
-            ),
-            title: this.props.intl.formatMessage(messages.users),
-          },
-          {
-            '@id': '/usergroupmembership',
-            group: this.props.intl.formatMessage(
-              messages.usersControlPanelCategory,
-            ),
-            title: this.props.intl.formatMessage(
-              messages.usergroupmemberbership,
-            ),
-          },
-          {
-            '@id': '/groups',
-            group: this.props.intl.formatMessage(
-              messages.usersControlPanelCategory,
-            ),
-            title: this.props.intl.formatMessage(messages.groups),
-          },
-        ],
-      ),
-      (controlpanel) => ({
-        ...controlpanel,
-        id: last(controlpanel['@id'].split('/')),
-      }),
-    );
-    const groups = map(uniqBy(controlpanels, 'group'), 'group');
-    const { controlPanelsIcons: icons } = config.settings;
+  const filteredControlPanels = map(
+    concat(filterControlPanels(controlpanels), customcontrolpanels, [
+      {
+        '@id': '/addons',
+        group: intl.formatMessage(messages.general),
+        title: intl.formatMessage(messages.addons),
+      },
+      {
+        '@id': '/database',
+        group: intl.formatMessage(messages.general),
+        title: intl.formatMessage(messages.database),
+      },
+      {
+        '@id': '/rules',
+        group: intl.formatMessage(messages.content),
+        title: intl.formatMessage(messages.contentRules),
+      },
+      {
+        '@id': '/undo',
+        group: intl.formatMessage(messages.general),
+        title: intl.formatMessage(messages.undo),
+      },
+      {
+        '@id': '/aliases',
+        group: intl.formatMessage(messages.general),
+        title: intl.formatMessage(messages.urlmanagement),
+      },
+      {
+        '@id': '/moderate-comments',
+        group: intl.formatMessage(messages.content),
+        title: intl.formatMessage(messages.moderatecomments),
+      },
+      {
+        '@id': '/users',
+        group: intl.formatMessage(messages.usersControlPanelCategory),
+        title: intl.formatMessage(messages.users),
+      },
+      {
+        '@id': '/usergroupmembership',
+        group: intl.formatMessage(messages.usersControlPanelCategory),
+        title: intl.formatMessage(messages.usergroupmemberbership),
+      },
+      {
+        '@id': '/groups',
+        group: intl.formatMessage(messages.usersControlPanelCategory),
+        title: intl.formatMessage(messages.groups),
+      },
+    ]),
+    (controlpanel) => ({
+      ...controlpanel,
+      id: last(controlpanel['@id'].split('/')),
+    }),
+  );
+  const groups = map(uniqBy(filteredControlPanels, 'group'), 'group');
+  const { controlPanelsIcons: icons } = config.settings;
 
-    return (
-      <div className="view-wrapper">
-        <Helmet title={this.props.intl.formatMessage(messages.sitesetup)} />
-        <Container className="controlpanel">
-          <Segment.Group raised>
-            <Segment className="primary">
-              <FormattedMessage id="Site Setup" defaultMessage="Site Setup" />
-            </Segment>
-            {this.props.systemInformation &&
-              this.props.systemInformation.upgrade && (
-                <Message attached warning>
-                  <FormattedMessage
-                    id="The site configuration is outdated and needs to be upgraded."
-                    defaultMessage="The site configuration is outdated and needs to be upgraded."
-                  />{' '}
-                  <Link to={`/controlpanel/plone-upgrade`}>
-                    <FormattedMessage
-                      id="Please continue with the upgrade."
-                      defaultMessage="Please continue with the upgrade."
-                    />
-                  </Link>
-                </Message>
-              )}
-            {map(groups, (group) => [
-              <Segment key={`header-${group}`} secondary>
-                {group}
-              </Segment>,
-              <Segment key={`body-${group}`} attached>
-                <Grid doubling columns={6}>
-                  <Grid.Row>
-                    {map(filter(controlpanels, { group }), (controlpanel) => (
+  return (
+    <div className="view-wrapper">
+      <Helmet title={intl.formatMessage(messages.sitesetup)} />
+      <Container className="controlpanel">
+        <Segment.Group raised>
+          <Segment className="primary">
+            <FormattedMessage id="Site Setup" defaultMessage="Site Setup" />
+          </Segment>
+          {systemInformation && systemInformation.upgrade && (
+            <Message attached warning>
+              <FormattedMessage
+                id="The site configuration is outdated and needs to be upgraded."
+                defaultMessage="The site configuration is outdated and needs to be upgraded."
+              />{' '}
+              <Link to={`/controlpanel/plone-upgrade`}>
+                <FormattedMessage
+                  id="Please continue with the upgrade."
+                  defaultMessage="Please continue with the upgrade."
+                />
+              </Link>
+            </Message>
+          )}
+          {map(groups, (group) => [
+            <Segment key={`header-${group}`} secondary>
+              {group}
+            </Segment>,
+            <Segment key={`body-${group}`} attached>
+              <Grid doubling columns={6}>
+                <Grid.Row>
+                  {map(
+                    filter(filteredControlPanels, { group }),
+                    (controlpanel) => (
                       <Grid.Column key={controlpanel.id}>
                         <Link to={`/controlpanel/${controlpanel.id}`}>
                           <Header as="h3" icon textAlign="center">
@@ -286,58 +227,83 @@ class Controlpanels extends Component {
                           </Header>
                         </Link>
                       </Grid.Column>
-                    ))}
-                  </Grid.Row>
-                </Grid>
-              </Segment>,
-            ])}
-          </Segment.Group>
-          <Segment.Group raised>
-            <Segment className="primary">
-              <FormattedMessage
-                id="Version Overview"
-                defaultMessage="Version Overview"
-              />
-            </Segment>
-            <Segment attached>
-              {this.props.systemInformation ? (
-                <VersionOverview {...this.props.systemInformation} />
-              ) : null}
-            </Segment>
-          </Segment.Group>
-        </Container>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <Link to="/" className="item">
-                  <Icon
-                    name={backSVG}
-                    className="contents circled"
-                    size="30px"
-                    title={this.props.intl.formatMessage(messages.back)}
-                  />
-                </Link>
-              }
+                    ),
+                  )}
+                </Grid.Row>
+              </Grid>
+            </Segment>,
+          ])}
+        </Segment.Group>
+        <Segment.Group raised>
+          <Segment className="primary">
+            <FormattedMessage
+              id="Version Overview"
+              defaultMessage="Version Overview"
             />
-          </Portal>
-        )}
-      </div>
-    );
-  }
+          </Segment>
+          <Segment attached>
+            {systemInformation ? (
+              <VersionOverview {...systemInformation} />
+            ) : null}
+          </Segment>
+        </Segment.Group>
+      </Container>
+      {isClient && (
+        <Portal node={document.getElementById('toolbar')}>
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <Link to="/" className="item">
+                <Icon
+                  name={backSVG}
+                  className="contents circled"
+                  size="30px"
+                  title={intl.formatMessage(messages.back)}
+                />
+              </Link>
+            }
+          />
+        </Portal>
+      )}
+    </div>
+  );
 }
 
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      controlpanels: state.controlpanels.controlpanels,
-      controlpanelsRequest: state.controlpanels.list,
-      pathname: props.location.pathname,
-      systemInformation: state.controlpanels.systeminformation,
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Controlpanels.propTypes = {
+  controlpanels: PropTypes.arrayOf(
+    PropTypes.shape({
+      '@id': PropTypes.string,
+      group: PropTypes.string,
+      title: PropTypes.string,
     }),
-    { listControlpanels, getSystemInformation },
-  ),
+  ).isRequired,
+  pathname: PropTypes.string.isRequired,
+};
+
+export default compose(
+  connect((state, props) => ({
+    controlpanels: state.controlpanels.controlpanels,
+    controlpanelsRequest: state.controlpanels.list,
+    pathname: props.location.pathname,
+    systemInformation: state.controlpanels.systeminformation,
+  })),
+
+  asyncConnect([
+    {
+      key: 'controlpanels',
+      promise: async ({ location, store: { dispatch } }) =>
+        await dispatch(listControlpanels()),
+    },
+    {
+      key: 'systemInformation',
+      promise: async ({ location, store: { dispatch } }) =>
+        await dispatch(getSystemInformation()),
+    },
+  ]),
 )(Controlpanels);