@plone/volto 17.0.0-alpha.8 → 17.0.0

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/Groups/RenderGroups.jsx

@@ -57,7 +57,7 @@ class RenderGroups extends Component {
    * @memberof UsersControlpanelUser
    */
   onChange(event, { value }) {
-    const [group, role] = value.split('.');
+    const [group, role] = value.split('&role=');
     this.props.updateGroups(group, role);
   }
 
@@ -97,7 +97,7 @@ class RenderGroups extends Component {
                     : this.props.group.roles.includes(role.id)
                 }
                 onChange={this.onChange}
-                value={`${this.props.group.id}.${role.id}`}
+                value={`${this.props.group.id}&role=${role.id}`}
               />
             )}
           </Table.Cell>

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

@@ -5,15 +5,15 @@ import { useSelector, useDispatch } from 'react-redux';
 import { Divider, Segment, Table } from 'semantic-ui-react';
 import { queryRelations } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { UniversalLink } from '@plone/volto/components';
+import { ConditionalLink } from '@plone/volto/components';
 
 const BrokenRelations = () => {
   const dispatch = useDispatch();
   const brokenRelationStats = useSelector(
-    (state) => state.relations?.stats?.broken || {},
+    (state) => state.relations?.stats?.data?.broken || {},
   );
   const brokenRelations = useSelector(
-    (state) => state.relations?.subrequests?.broken?.relations,
+    (state) => state.relations?.subrequests?.broken?.data,
   );
 
   useEffect(() => {
@@ -34,24 +34,49 @@ const BrokenRelations = () => {
           <div key={relationname}>
             <Divider section hidden />
             <h4>
-              {brokenRelationStats[relationname]} broken <i>{relationname}</i>{' '}
-              relations
+              <FormattedMessage
+                id="countBrokenRelations"
+                defaultMessage="{countofrelation} broken {countofrelation, plural, one {relation} other {relations}} of type {typeofrelation}"
+                values={{
+                  countofrelation: brokenRelationStats[relationname],
+                  typeofrelation: relationname,
+                }}
+              />
             </h4>
-            <Table>
+            <Table compact="very">
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeaderCell width={6}>
+                    <FormattedMessage id="Source" defaultMessage="Source" />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell>
+                    <FormattedMessage id="Target" defaultMessage="Target" />
+                  </Table.HeaderCell>
+                </Table.Row>
+              </Table.Header>
               <Table.Body>
                 {uniqBy(brokenRelations[relationname].items, function (el) {
-                  return el[0];
-                }).map((el) => (
-                  <Table.Row key={el[0]}>
+                  return el.toString();
+                }).map((el, index) => (
+                  <Table.Row key={index}>
                     <Table.Cell>
-                      <UniversalLink
-                        href={`${flattenToAppURL(el[0])}/edit`}
+                      <ConditionalLink
+                        to={`${el[0]}/edit`}
                         openLinkInNewTab={true}
+                        condition={el[0].includes('http')}
                       >
                         {flattenToAppURL(el[0])}
-                      </UniversalLink>
+                      </ConditionalLink>
+                    </Table.Cell>
+                    <Table.Cell>
+                      <ConditionalLink
+                        to={`${el[1]}/edit`}
+                        openLinkInNewTab={true}
+                        condition={el[1].includes('http')}
+                      >
+                        {flattenToAppURL(el[1])}
+                      </ConditionalLink>
                     </Table.Cell>
-                    <Table.Cell>{el[1]}</Table.Cell>
                   </Table.Row>
                 ))}
               </Table.Body>

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

@@ -24,10 +24,10 @@ const RelationsControlPanel = () => {
   const dispatch = useDispatch();
 
   const brokenRelations = useSelector(
-    (state) => state.relations?.stats?.broken,
+    (state) => state.relations?.stats?.data?.broken,
   );
 
-  const relations_stats = useSelector((state) => state.relations?.stats?.stats);
+  const relations_stats = useSelector((state) => state.relations?.stats?.data);
   const actions = useSelector((state) => state.actions?.actions ?? {});
   const can_edit = find(actions.object, {
     id: 'edit',
@@ -58,13 +58,13 @@ const RelationsControlPanel = () => {
               <h1>
                 <FormattedMessage id="Relations" defaultMessage="Relations" />
               </h1>
-              {!relations_stats ? (
+              {relations_stats?.error ? (
                 <React.Fragment>
                   <Divider hidden />
                   <Message warning>
                     <FormattedMessage
-                      id="Please upgrade to plone.restapi >= 8.35.3."
-                      defaultMessage="Please upgrade to plone.restapi >= 8.35.3."
+                      id="Please upgrade to plone.restapi >= 8.39.0."
+                      defaultMessage="Please upgrade to plone.restapi >= 8.39.0."
                     />
                   </Message>
                 </React.Fragment>

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

@@ -11,6 +11,7 @@ import {
   createRelations,
   deleteRelations,
   queryRelations,
+  resetSearchContent,
   searchContent,
 } from '@plone/volto/actions';
 
@@ -28,9 +29,10 @@ const ListingTemplate = ({
   const MAX = 40; // Maximum of rows and columns
   const MAX_RELATIONS = 1000;
 
-  const stats = useSelector((state) => state.relations?.stats || null);
+  const stats = useSelector((state) => state.relations?.stats?.data || null);
+
   let relations = useSelector(
-    (state) => state.relations?.relations?.[relationtype]?.items || [],
+    (state) => state.relations?.relations?.data?.[relationtype]?.items || [],
   );
 
   let potential_targets_objects = useSelector(
@@ -49,7 +51,8 @@ const ListingTemplate = ({
 
   // Editable if plone.api.relations available
   const editable = useSelector(
-    (state) => state.relations?.relations?.[relationtype]?.readonly !== true,
+    (state) =>
+      state.relations?.relations?.data?.[relationtype]?.readonly !== true,
   );
 
   let relationMatrix = {};
@@ -192,8 +195,7 @@ const ListingTemplate = ({
         ),
       );
     } else {
-      // TODO Better just reset redux store
-      dispatch(searchContent('/findstenichätsch', null, 'potential_targets'));
+      dispatch(resetSearchContent('potential_targets'));
     }
 
     // Fetch fresh potential sources
@@ -211,8 +213,7 @@ const ListingTemplate = ({
         ),
       );
     } else {
-      // TODO Better just reset redux store
-      dispatch(searchContent('/findstenichätsch', null, 'potential_sources'));
+      dispatch(resetSearchContent('potential_sources'));
     }
   }, [
     dispatch,

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

@@ -17,7 +17,11 @@ import {
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import { messages } from '@plone/volto/helpers';
 import { Icon, Toast } from '@plone/volto/components';
-import { rebuildRelations, queryRelations } from '@plone/volto/actions';
+import {
+  getRelationStats,
+  queryRelations,
+  rebuildRelations,
+} from '@plone/volto/actions';
 import RelationsListing from './RelationsListing';
 import BrokenRelations from './BrokenRelations';
 import helpSVG from '@plone/volto/icons/help.svg';
@@ -39,12 +43,14 @@ const RelationsMatrix = (props) => {
     id: 'plone_setup',
   });
 
-  const relationtypes = useSelector((state) => state.relations?.stats?.stats);
+  const relationtypes = useSelector(
+    (state) => state.relations?.stats?.data?.stats,
+  );
   const relationsListError = useSelector(
-    (state) => state.relations?.list?.error?.response?.body?.error,
+    (state) => state.relations?.stats?.error?.response?.body?.error,
   );
   const brokenRelations = useSelector(
-    (state) => state.relations?.stats?.broken,
+    (state) => state.relations?.stats?.data?.broken,
   );
 
   let filter_options = useSelector((state) => state.groups.filter_groups);
@@ -67,7 +73,7 @@ const RelationsMatrix = (props) => {
   }
 
   useEffect(() => {
-    dispatch(queryRelations());
+    dispatch(getRelationStats());
   }, [dispatch]);
 
   const onReset = (event) => {
@@ -128,9 +134,7 @@ const RelationsMatrix = (props) => {
   const rebuildRelationsHandler = (flush = false) => {
     dispatch(rebuildRelations(flush))
       .then(() => {
-        dispatch(queryRelations());
-      })
-      .then(() => {
+        dispatch(getRelationStats());
         dispatch(queryRelations(null, true, 'broken'));
       })
       .then(() => {
@@ -443,7 +447,9 @@ const RelationsMatrix = (props) => {
               ) : null}
             </div>
           ) : (
-            <p>{relationsListError?.message}</p>
+            <p>
+              <b>{relationsListError?.type}</b> {relationsListError?.message}
+            </p>
           )}
         </Tab.Pane>
       ),
@@ -452,68 +458,62 @@ const RelationsMatrix = (props) => {
       menuItem: intl.formatMessage(messages.fixRelations),
       pane: (
         <Tab.Pane attached={true} key="rebuild">
-          {brokenRelations && Object.keys(brokenRelations).length > 0 ? (
-            <div>
-              {can_fix_relations ? (
-                <React.Fragment>
-                  <Divider hidden />
-                  <h2>
-                    {capitalize(intl.formatMessage(messages.rebuildRelations))}
-                  </h2>
+          <div>
+            {!(brokenRelations && Object.keys(brokenRelations).length > 0) && (
+              <div>
+                <FormattedMessage
+                  id="No broken relations found."
+                  defaultMessage="No broken relations found."
+                />
+              </div>
+            )}
+            {can_fix_relations ? (
+              <React.Fragment>
+                <Divider hidden />
+                <h2>
+                  {capitalize(intl.formatMessage(messages.rebuildRelations))}
+                </h2>
 
-                  <Button.Group>
-                    <Button
-                      primary
-                      onClick={() => rebuildRelationsHandler(false)}
-                      content={intl.formatMessage(messages.rebuildRelations)}
-                      aria-label={intl.formatMessage(messages.rebuildRelations)}
-                    />
-                  </Button.Group>
+                <Button.Group>
+                  <Button
+                    primary
+                    onClick={() => rebuildRelationsHandler(false)}
+                    content={intl.formatMessage(messages.rebuildRelations)}
+                    aria-label={intl.formatMessage(messages.rebuildRelations)}
+                  />
+                </Button.Group>
 
-                  <Divider hidden />
-                  <h2>
-                    {capitalize(
-                      intl.formatMessage(messages.flushAndRebuildRelations),
+                <Divider hidden />
+                <h2>
+                  {capitalize(
+                    intl.formatMessage(messages.flushAndRebuildRelations),
+                  )}
+                </h2>
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: intl.formatMessage(
+                      messages.flushAndRebuildRelationsHints,
+                    ),
+                  }}
+                />
+                <Divider hidden />
+                <Button.Group>
+                  <Button
+                    secondary
+                    color="red"
+                    onClick={() => rebuildRelationsHandler(true)}
+                    content={intl.formatMessage(
+                      messages.flushAndRebuildRelations,
                     )}
-                  </h2>
-                  <ul>
-                    <li>
-                      Regenerate intIds (tokens of relations in relation
-                      catalog)
-                    </li>
-                    <li>Rebuild relations</li>
-                  </ul>
-                  <p>Check the log for details!</p>
-                  <p>
-                    <b>Warning</b>: If you have add-ons relying on intIds, you
-                    should not flush them.
-                  </p>
-                  <Divider hidden />
-                  <Button.Group>
-                    <Button
-                      secondary
-                      color="red"
-                      onClick={() => rebuildRelationsHandler(true)}
-                      content={intl.formatMessage(
-                        messages.flushAndRebuildRelations,
-                      )}
-                      aria-label={intl.formatMessage(
-                        messages.flushAndRebuildRelations,
-                      )}
-                    />
-                  </Button.Group>
-                </React.Fragment>
-              ) : null}
-              <BrokenRelations />
-            </div>
-          ) : (
-            <div>
-              <FormattedMessage
-                id="No broken relations found."
-                defaultMessage="No broken relations found."
-              />
-            </div>
-          )}
+                    aria-label={intl.formatMessage(
+                      messages.flushAndRebuildRelations,
+                    )}
+                  />
+                </Button.Group>
+              </React.Fragment>
+            ) : null}
+            <BrokenRelations />
+          </div>
         </Tab.Pane>
       ),
     },

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

@@ -155,15 +155,8 @@ class AddRule extends Component {
    * @returns {undefined}
    */
   handleAdd() {
-    const {
-      title,
-      description,
-      event,
-      cascading,
-      stop,
-      enabled,
-      invalidForm,
-    } = this.state;
+    const { title, description, event, cascading, stop, enabled, invalidForm } =
+      this.state;
     const data = { title, description, event, cascading, enabled, stop };
     if (!invalidForm) {
       this.props.addNewRule(getBaseUrl(this.props.pathname), data);
@@ -179,7 +172,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/UndoControlpanel.jsx

@@ -141,15 +141,12 @@ class UndoControlpanel extends Component {
     this.onNext = this.onNext.bind(this);
     this.onUndo = this.onUndo.bind(this);
     this.handleTableVisiblity = this.handleTableVisiblity.bind(this);
-    this.handleNotSortedNextPrevButtons = this.handleNotSortedNextPrevButtons.bind(
-      this,
-    );
-    this.handleSortedNextPrevButtons = this.handleSortedNextPrevButtons.bind(
-      this,
-    );
-    this.checkTransactionsUndoneStatus = this.checkTransactionsUndoneStatus.bind(
-      this,
-    );
+    this.handleNotSortedNextPrevButtons =
+      this.handleNotSortedNextPrevButtons.bind(this);
+    this.handleSortedNextPrevButtons =
+      this.handleSortedNextPrevButtons.bind(this);
+    this.checkTransactionsUndoneStatus =
+      this.checkTransactionsUndoneStatus.bind(this);
   }
 
   /**