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

package/src/actions/site/site.test.js

@@ -0,0 +1,15 @@
+import { getSite } from './site';
+import { GET_SITE } from '@plone/volto/constants/ActionTypes';
+
+describe('Site action', () => {
+  describe('getSite', () => {
+    it('should create an action to get the site config', () => {
+      const url = 'http://localhost';
+      const action = getSite(url);
+
+      expect(action.type).toEqual(GET_SITE);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(`/@site`);
+    });
+  });
+});

package/src/actions/userSession/userSession.js

@@ -3,7 +3,12 @@
  * @module actions/search/search
  */
 
-import { LOGIN, LOGIN_RENEW, LOGOUT } from '@plone/volto/constants/ActionTypes';
+import {
+  LOGIN,
+  LOGIN_RENEW,
+  LOGOUT,
+  RESET_LOGIN_REQUEST,
+} from '@plone/volto/constants/ActionTypes';
 
 /**
  * Login function.
@@ -52,3 +57,14 @@ export function logout() {
     },
   };
 }
+
+/**
+ * Reset login request data function
+ * @function resetLoginRequest
+ * @returns {Object} Get content action
+ */
+export function resetLoginRequest() {
+  return {
+    type: RESET_LOGIN_REQUEST,
+  };
+}

package/src/components/manage/Blocks/Block/Settings.jsx

@@ -14,7 +14,9 @@ const Settings = ({ data, block, onChangeBlock, schema }) => {
           [id]: value,
         });
       }}
+      onChangeBlock={onChangeBlock}
       formData={data}
+      applySchemaEnhancers={false}
     />
   );
 };

package/src/components/manage/Blocks/Block/Settings.test.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import Settings from './Settings';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import configureStore from 'redux-mock-store';
+import config from '@plone/volto/registry';
+import { Provider } from 'react-intl-redux';
+
+const mockStore = configureStore();
+
+const withStateManagement = (Component) => ({ ...props }) => {
+  const [formData, onChangeFormData] = React.useState(props.formData || {});
+  const onChangeField = (id, value) => {
+    onChangeFormData({ ...formData, [id]: value });
+  };
+
+  // NOTE: onChangeBlock here is not "really" implemented
+
+  return (
+    <Component
+      {...props}
+      onChangeField={onChangeField}
+      onChangeBlock={(block, data) => onChangeFormData(data)}
+      formData={formData}
+    />
+  );
+};
+
+beforeAll(() => {
+  config.widgets = {
+    id: {},
+    widget: {},
+    vocabulary: {},
+    choices: (props) => (
+      <div className="SelectWidget">{JSON.stringify(props.choices)}</div>
+    ),
+    type: {},
+    default: () => <div className="TextWidget" />,
+  };
+
+  config.blocks.blocksConfig = {
+    ...config.blocks.blocksConfig,
+
+    testBlock: {
+      id: 'testBlock',
+      variations: [
+        {
+          id: 'default',
+          title: 'Default',
+          isDefault: true,
+        },
+        {
+          id: 'extra',
+          title: 'Extra',
+        },
+      ],
+    },
+  };
+});
+
+describe('Settings', () => {
+  it('renders block settings form without schema enhancers', () => {
+    const WrappedSettings = withStateManagement(Settings);
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const testSchema = {
+      fieldsets: [{ title: 'Default', id: 'default', fields: [] }],
+      properties: {},
+      required: [],
+    };
+    const data = {
+      '@type': 'testBlock',
+    };
+    const { container } = render(
+      <Provider store={store}>
+        <WrappedSettings
+          data={data}
+          block="test"
+          schema={testSchema}
+          onChangeBlock={(block, value) => {}}
+        />
+      </Provider>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/manage/Blocks/Image/schema.js

@@ -33,6 +33,10 @@ const messages = defineMessages({
     id: 'Alt text hint link text',
     defaultMessage: 'Describe the purpose of the image.',
   },
+  linkSettings: {
+    id: 'Link settings',
+    defaultMessage: 'Link settings',
+  },
 });
 
 export function ImageSchema({ formData, intl }) {
@@ -47,7 +51,7 @@ export function ImageSchema({ formData, intl }) {
         ? [
             {
               id: 'link_settings',
-              title: 'Link settings',
+              title: intl.formatMessage(messages.linkSettings),
               fields: ['href', 'openLinkInNewTab'],
             },
           ]

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 ? `${content?.UID}-${id}` : 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/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,11 +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, history }) => {
+const RenderListItems = ({ items, data }) => {
   return map(items, (item) => {
     const { id, level, title, override_toc, plaintext } = item;
     const slug = override_toc
@@ -21,14 +20,7 @@ const RenderListItems = ({ items, data, history }) => {
     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}
@@ -50,7 +42,6 @@ const RenderListItems = ({ items, data, history }) => {
  * @extends Component
  */
 const View = ({ data, tocEntries }) => {
-  const history = useHistory();
   return (
     <>
       {data.title && !data.hide_title ? (
@@ -70,7 +61,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}