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

package/src/components/manage/Blocks/Listing/withQuerystringResults.jsx

@@ -23,7 +23,7 @@ export default function withQuerystringResults(WrappedComponent) {
     } = props;
     const { settings } = config;
     const querystring = data.querystring || data; // For backwards compat with data saved before Blocks schema. Note, this is also how the Search block passes data to ListingBody
-
+    const subrequestID = content?.UID + '-' + id;
     const { b_size = settings.defaultPageSize } = querystring; // batchsize
 
     // save the path so it won't trigger dispatch on eager router location change
@@ -52,31 +52,33 @@ export default function withQuerystringResults(WrappedComponent) {
 
     const folderItems = content?.is_folderish ? content.items : [];
     const hasQuery = querystring?.query?.length > 0;
-    const hasLoaded = hasQuery ? querystringResults?.[id]?.loaded : true;
+    const hasLoaded = hasQuery
+      ? querystringResults?.[subrequestID]?.loaded
+      : true;
 
     const listingItems = hasQuery
-      ? querystringResults?.[id]?.items || []
+      ? querystringResults?.[subrequestID]?.items || []
       : folderItems;
 
     const showAsFolderListing = !hasQuery && content?.items_total > b_size;
     const showAsQueryListing =
-      hasQuery && querystringResults?.[id]?.total > b_size;
+      hasQuery && querystringResults?.[subrequestID]?.total > b_size;
 
     const totalPages = showAsFolderListing
       ? Math.ceil(content.items_total / b_size)
       : showAsQueryListing
-      ? Math.ceil(querystringResults[id].total / b_size)
+      ? Math.ceil(querystringResults[subrequestID].total / b_size)
       : 0;
 
     const prevBatch = showAsFolderListing
       ? content.batching?.prev
       : showAsQueryListing
-      ? querystringResults[id].batching?.prev
+      ? querystringResults[subrequestID].batching?.prev
       : null;
     const nextBatch = showAsFolderListing
       ? content.batching?.next
       : showAsQueryListing
-      ? querystringResults[id].batching?.next
+      ? querystringResults[subrequestID].batching?.next
       : null;
 
     const isImageGallery =
@@ -86,7 +88,12 @@ export default function withQuerystringResults(WrappedComponent) {
     useDeepCompareEffect(() => {
       if (hasQuery) {
         dispatch(
-          getQueryStringResults(initialPath, adaptedQuery, id, currentPage),
+          getQueryStringResults(
+            initialPath,
+            adaptedQuery,
+            subrequestID,
+            currentPage,
+          ),
         );
       } else if (isImageGallery && !hasQuery) {
         // when used as image gallery, it doesn't need a query to list children
@@ -104,7 +111,7 @@ export default function withQuerystringResults(WrappedComponent) {
                 },
               ],
             },
-            id,
+            subrequestID,
           ),
         );
       } else {
@@ -113,7 +120,7 @@ export default function withQuerystringResults(WrappedComponent) {
       adaptedQueryRef.current = adaptedQuery;
       currentPageRef.current = currentPage;
     }, [
-      id,
+      subrequestID,
       isImageGallery,
       adaptedQuery,
       hasQuery,
@@ -126,7 +133,7 @@ export default function withQuerystringResults(WrappedComponent) {
       <WrappedComponent
         {...props}
         onPaginationChange={(e, { activePage }) => setCurrentPage(activePage)}
-        total={querystringResults?.[id]?.total}
+        total={querystringResults?.[subrequestID]?.total}
         batch_size={b_size}
         currentPage={currentPage}
         totalPages={totalPages}

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

@@ -1,8 +1,37 @@
-const TableOfContentsSchema = ({ data }) => {
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  toc: {
+    id: 'toc',
+    defaultMessage: 'Table of Contents',
+  },
+  Title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  HideTitle: {
+    id: 'Hide title',
+    defaultMessage: 'Hide title',
+  },
+  Entries: {
+    id: 'Entries',
+    defaultMessage: 'Entries',
+  },
+  Ordered: {
+    id: 'Ordered',
+    defaultMessage: 'Ordered',
+  },
+  Sticky: {
+    id: 'Sticky',
+    defaultMessage: 'Sticky',
+  },
+});
+
+const TableOfContentsSchema = ({ data, intl }) => {
   const { variation = 'default' } = data;
 
   return {
-    title: 'Table of Contents',
+    title: intl.formatMessage(messages.toc),
     fieldsets: [
       {
         id: 'default',
@@ -17,14 +46,14 @@ const TableOfContentsSchema = ({ data }) => {
     ],
     properties: {
       title: {
-        title: 'Block title',
+        title: intl.formatMessage(messages.Title),
       },
       hide_title: {
-        title: 'Hide title',
+        title: intl.formatMessage(messages.HideTitle),
         type: 'boolean',
       },
       levels: {
-        title: 'Entries',
+        title: intl.formatMessage(messages.Entries),
         isMulti: true,
         choices: [
           ['h1', 'h1'],
@@ -36,11 +65,11 @@ const TableOfContentsSchema = ({ data }) => {
         ],
       },
       ordered: {
-        title: 'Ordered',
+        title: intl.formatMessage(messages.Ordered),
         type: 'boolean',
       },
       sticky: {
-        title: 'Sticky',
+        title: intl.formatMessage(messages.Sticky),
         type: 'boolean',
       },
     },

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

@@ -12,7 +12,9 @@ import { useHistory } from 'react-router-dom';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
 import Slugger from 'github-slugger';
 
-const RenderListItems = ({ items, data, history }) => {
+const RenderListItems = ({ items, data }) => {
+  const history = useHistory();
+
   return map(items, (item) => {
     const { id, level, title, override_toc, plaintext } = item;
     const slug = override_toc
@@ -50,7 +52,6 @@ const RenderListItems = ({ items, data, history }) => {
  * @extends Component
  */
 const View = ({ data, tocEntries }) => {
-  const history = useHistory();
   return (
     <>
       {data.title && !data.hide_title ? (
@@ -70,7 +71,7 @@ const View = ({ data, tocEntries }) => {
         bulleted={!data.ordered}
         as={data.ordered ? 'ol' : 'ul'}
       >
-        <RenderListItems items={tocEntries} data={data} history={history} />
+        <RenderListItems items={tocEntries} data={data} />
       </List>
     </>
   );

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

@@ -0,0 +1,44 @@
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
+import DefaultTocRenderer from './DefaultTocRenderer';
+
+const mockStore = configureStore();
+
+const data = { '@type': 'toc', variation: 'default' };
+
+const tocEntries = [
+  {
+    level: 2,
+    title: 'Hello this is a sample page',
+    items: [
+      {
+        level: 3,
+        title: 'Test level 3',
+        items: [],
+        id: 'be612682-6df9-4a5e-b3a1-9dec5d82ae14',
+        parentId: '3a8bff13-3245-44f6-8a35-e0defef5898e',
+      },
+    ],
+    id: '3a8bff13-3245-44f6-8a35-e0defef5898e',
+  },
+];
+
+test('renders a default toc renderer component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <MemoryRouter>
+        <DefaultTocRenderer data={data} tocEntries={tocEntries} />
+      </MemoryRouter>
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

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

@@ -1334,6 +1334,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.upload}
                                 className="upload"
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.upload,
+                                )}
                               >
                                 <Icon
                                   name={uploadSVG}
@@ -1358,6 +1361,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.rename}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.rename,
+                                )}
                               >
                                 <Icon
                                   name={renameSVG}
@@ -1380,6 +1386,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.workflow}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.state,
+                                )}
                               >
                                 <Icon
                                   name={semaphoreSVG}
@@ -1402,6 +1411,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.tags}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.tags,
+                                )}
                               >
                                 <Icon
                                   name={tagSVG}
@@ -1425,6 +1437,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.properties}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.properties,
+                                )}
                               >
                                 <Icon
                                   name={propertiesSVG}
@@ -1449,6 +1464,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.cut}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.cut,
+                                )}
                               >
                                 <Icon
                                   name={cutSVG}
@@ -1471,6 +1489,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.copy}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.copy,
+                                )}
                               >
                                 <Icon
                                   name={copySVG}
@@ -1494,6 +1515,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.paste}
                                 disabled={!this.props.action}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.paste,
+                                )}
                               >
                                 <Icon
                                   name={pasteSVG}
@@ -1517,6 +1541,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.delete}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.delete,
+                                )}
                               >
                                 <Icon
                                   name={deleteSVG}

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(() => {
@@ -60,20 +60,22 @@ const BrokenRelations = () => {
                 }).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>
-                      <UniversalLink
-                        href={`${flattenToAppURL(el[1])}/edit`}
+                      <ConditionalLink
+                        to={`${el[1]}/edit`}
                         openLinkInNewTab={true}
+                        condition={el[1].includes('http')}
                       >
                         {flattenToAppURL(el[1])}
-                      </UniversalLink>
+                      </ConditionalLink>
                     </Table.Cell>
                   </Table.Row>
                 ))}

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,7 +58,7 @@ const RelationsControlPanel = () => {
               <h1>
                 <FormattedMessage id="Relations" defaultMessage="Relations" />
               </h1>
-              {!relations_stats ? (
+              {relations_stats?.error ? (
                 <React.Fragment>
                   <Divider hidden />
                   <Message warning>

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>
       ),

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

@@ -107,6 +107,7 @@ class UsersControlpanel extends Component {
       isClient: false,
       currentPage: 0,
       pageSize: 10,
+      loginUsingEmail: false,
     };
   }
 
@@ -122,6 +123,14 @@ class UsersControlpanel extends Component {
     }
   };
 
+  // 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,
+    });
+  };
+
   /**
    * Component did mount
    * @method componentDidMount
@@ -132,6 +141,7 @@ class UsersControlpanel extends Component {
       isClient: true,
     });
     this.fetchData();
+    this.checkLoginUsingEmailStatus();
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -425,7 +435,7 @@ class UsersControlpanel extends Component {
                     id: 'default',
                     title: 'FIXME: User Data',
                     fields: [
-                      'username',
+                      ...(!this.state.loginUsingEmail ? ['username'] : []),
                       'fullname',
                       'email',
                       'password',
@@ -436,15 +446,19 @@ class UsersControlpanel extends Component {
                   },
                 ],
                 properties: {
-                  username: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormUsernameTitle,
-                    ),
-                    type: 'string',
-                    description: this.props.intl.formatMessage(
-                      messages.addUserFormUsernameDescription,
-                    ),
-                  },
+                  ...(!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,
@@ -670,6 +684,7 @@ export default compose(
       createRequest: state.users.create,
       loadRolesRequest: state.roles,
       inheritedRole: state.authRole.authenticatedRole,
+      controlPanelData: state.controlpanels?.controlpanel,
     }),
     (dispatch) =>
       bindActionCreators(

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

@@ -20,7 +20,7 @@ describe('LinksToItem', () => {
       relations: {
         subrequests: {
           '/page-1': {
-            relations: {
+            data: {
               isReferencing: {
                 items: [
                   {

package/src/components/manage/Sharing/Sharing.jsx

@@ -246,9 +246,9 @@ class SharingComponent extends Component {
    * @returns {undefined}
    */
   onToggleInherit() {
-    this.setState({
-      inherit: !this.state.inherit,
-    });
+    this.setState((state) => ({
+      inherit: !state.inherit,
+    }));
   }
 
   /**
@@ -404,9 +404,15 @@ class SharingComponent extends Component {
               <Segment attached>
                 <Form.Field>
                   <Checkbox
-                    checked={this.state.inherit}
+                    id="inherit-permissions-checkbox"
+                    name="inherit-permissions-checkbox"
+                    defaultChecked={this.state.inherit}
                     onChange={this.onToggleInherit}
-                    label={this.props.intl.formatMessage(messages.inherit)}
+                    label={
+                      <label htmlFor="inherit-permissions-checkbox">
+                        {this.props.intl.formatMessage(messages.inherit)}
+                      </label>
+                    }
                   />
                 </Form.Field>
                 <p className="help">