@plone/volto 17.0.0-alpha.9 → 17.0.1

package/src/helpers/Loadable/__mocks__/Loadable.js

@@ -18,22 +18,22 @@ export const __setLoadables = async () => {
 };
 
 // TODO: filter mockAllLoadables
-export const injectLazyLibs = jest
-  .fn()
-  .mockImplementation(function ([libraries]) {
-    return jest.fn((WrappedComponent) =>
-      jest.fn((props) => {
-        return <WrappedComponent {...props} {...mockAllLoadables} />;
-      }),
-    );
-  });
+export const injectLazyLibs = jest.fn().mockImplementation(function ([
+  libraries,
+]) {
+  return jest.fn((WrappedComponent) =>
+    jest.fn((props) => {
+      return <WrappedComponent {...props} {...mockAllLoadables} />;
+    }),
+  );
+});
 
-export const preloadLazyLibs = jest
-  .fn()
-  .mockImplementation(function ([libraries]) {
-    return jest.fn((WrappedComponent) =>
-      jest.fn((props) => {
-        return <WrappedComponent {...props} />;
-      }),
-    );
-  });
+export const preloadLazyLibs = jest.fn().mockImplementation(function ([
+  libraries,
+]) {
+  return jest.fn((WrappedComponent) =>
+    jest.fn((props) => {
+      return <WrappedComponent {...props} />;
+    }),
+  );
+});

package/src/helpers/MessageLabels/MessageLabels.js

@@ -172,6 +172,27 @@ export const messages = defineMessages({
     id: 'Roles',
     defaultMessage: 'Roles',
   },
+  addUserFormPasswordAndSendPasswordTogetherNotAllowed: {
+    id: 'It is not allowed to define both the password and to request sending the password reset message by e-mail. You need to select one of them.',
+    defaultMessage:
+      'It is not allowed to define both the password and to request sending the password reset message by e-mail. You need to select one of them.',
+  },
+  userSearchNoResults: {
+    id: 'There are no users with the searched criteria',
+    defaultMessage: 'There are no users with the searched criteria',
+  },
+  groupSearchNoResults: {
+    id: 'There are no groups with the searched criteria',
+    defaultMessage: 'There are no groups with the searched criteria',
+  },
+  updateUserFormTitle: {
+    id: 'Update User',
+    defaultMessage: 'Update User',
+  },
+  updateUserSuccess: {
+    id: 'User updated successfuly',
+    defaultMessage: 'User updated successfuly',
+  },
   updateRoles: {
     id: 'User roles updated',
     defaultMessage: 'User roles updated',
@@ -234,19 +255,19 @@ export const messages = defineMessages({
   },
   copyBlocks: {
     id: 'Copy blocks',
-    defaultMesages: 'Copy blocks',
+    defaultMessage: 'Copy blocks',
   },
   cutBlocks: {
     id: 'Cut blocks',
-    defaultMesages: 'Cut blocks',
+    defaultMessage: 'Cut blocks',
   },
   pasteBlocks: {
     id: 'Paste blocks',
-    defaultMesages: 'Paste blocks',
+    defaultMessage: 'Paste blocks',
   },
   deleteBlocks: {
     id: 'Delete blocks',
-    defaultMesages: 'Delete blocks',
+    defaultMessage: 'Delete blocks',
   },
   showAllUserButton: {
     id: 'Show All',
@@ -260,6 +281,10 @@ export const messages = defineMessages({
     id: 'Show groups of users below',
     defaultMessage: 'Show groups of users below',
   },
+  urlClipboardCopy: {
+    id: 'Link copied to clipboard',
+    defaultMessage: 'Anchor link copied to the clipboard',
+  },
   inspectRelations: {
     id: 'Inspect relations',
     defaultMessage: 'Inspect relations',
@@ -308,6 +333,12 @@ export const messages = defineMessages({
     id: 'flush intIds and rebuild relations',
     defaultMessage: 'flush intIds and rebuild relations',
   },
+  flushAndRebuildRelationsHints: {
+    id: 'flushAndRebuildRelationsHints',
+    defaultMessage:
+      '<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>',
+  },
+
   addPotentialTargetsPath: {
     id: 'target path',
     defaultMessage: 'target path',
@@ -332,4 +363,8 @@ export const messages = defineMessages({
     id: 'Filter',
     defaultMessage: 'Filter',
   },
+  fileTooLarge: {
+    id: 'fileTooLarge',
+    defaultMessage: 'This website does not accept files larger than {limit}',
+  },
 });

package/src/helpers/ScrollToTop/ScrollToTop.jsx

@@ -28,15 +28,17 @@ class ScrollToTop extends React.Component {
    * @memberof ScrollToTop
    */
   componentDidUpdate(prevProps) {
+    const { location } = this.props;
     const noInitialBlocksFocus = // Do not scroll on /edit
       config.blocks?.initialBlocksFocus === null
         ? this.props.location?.pathname.slice(-5) !== '/edit'
         : true;
+
+    const isHash = location?.hash || location?.pathname.hash;
     if (
-      !this.props.location?.hash &&
-      !this.props.location?.pathname.hash &&
+      !isHash &&
       noInitialBlocksFocus &&
-      this.props.location?.pathname !== prevProps.location?.pathname
+      location?.pathname !== prevProps.location?.pathname
     ) {
       window.scrollTo(0, 0);
     }

package/src/helpers/Site/index.js

@@ -0,0 +1,21 @@
+import { GET_SITE } from '@plone/volto/constants/ActionTypes';
+import { getSite } from '@plone/volto/actions';
+
+const getSiteAsyncPropExtender = {
+  path: '/',
+  extend: (dispatchActions) => {
+    if (
+      dispatchActions.filter((asyncAction) => asyncAction.key === GET_SITE)
+        .length === 0
+    ) {
+      dispatchActions.push({
+        key: GET_SITE,
+        promise: ({ location, store: { dispatch } }) =>
+          __SERVER__ && dispatch(getSite()),
+      });
+    }
+    return dispatchActions;
+  },
+};
+
+export { getSiteAsyncPropExtender };

package/src/helpers/Url/Url.js

@@ -3,7 +3,7 @@
  * @module helpers/Url
  */
 
-import { last, memoize } from 'lodash';
+import { last, memoize, isArray, isObject, isString } from 'lodash';
 import { urlRegex, telRegex, mailRegex } from './urlRegex';
 import prependHttp from 'prepend-http';
 import config from '@plone/volto/registry';
@@ -251,6 +251,27 @@ export function isUrl(url) {
   return urlRegex().test(url);
 }
 
+/**
+ * Get field url
+ * @method getFieldURL
+ * @param {object} data
+ * @returns {string | any} URL string value if field is of url type or any.
+ */
+export const getFieldURL = (data) => {
+  let url = data;
+  const _isObject = data && isObject(data) && !isArray(data);
+  if (_isObject && data['@type'] === 'URL') {
+    url = data['value'] ?? data['url'] ?? data['href'] ?? data;
+  } else if (_isObject) {
+    url = data['@id'] ?? data['url'] ?? data['href'] ?? data;
+  }
+  if (isArray(data)) {
+    url = data.map((item) => getFieldURL(item));
+  }
+  if (isString(url) && isInternalURL(url)) return flattenToAppURL(url);
+  return url;
+};
+
 /**
  * Normalize URL, adds protocol (if required eg. user has not entered the protocol)
  * @method normalizeUrl

package/src/helpers/Url/Url.test.js

@@ -10,6 +10,7 @@ import {
   isCmsUi,
   isInternalURL,
   isUrl,
+  getFieldURL,
   normalizeUrl,
   removeProtocol,
   addAppURL,
@@ -260,6 +261,46 @@ describe('Url', () => {
       expect(isUrl(href)).toBe(false);
     });
   });
+  describe('getFieldURL', () => {
+    it('returns app URL if the field is a string', () => {
+      const field = `${settings.apiPath}/foo/bar`;
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with "@id"', () => {
+      const field = { '@id': '/foo/bar' };
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with type URL', () => {
+      const field = { '@type': 'URL', value: '/foo/bar' };
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with url or href properties', () => {
+      const fieldUrl = { url: '/foo/bar' };
+      const fieldHref = { href: '/foo/bar' };
+      expect(getFieldURL(fieldUrl)).toBe('/foo/bar');
+      expect(getFieldURL(fieldHref)).toBe('/foo/bar');
+    });
+    it('returns array of app URL if the field is an array of strings', () => {
+      const field = [
+        `${settings.apiPath}/foo/bar/1`,
+        `${settings.apiPath}/foo/bar/2`,
+      ];
+      expect(getFieldURL(field)).toStrictEqual(['/foo/bar/1', '/foo/bar/2']);
+    });
+    it('returns array of app URL if the field is an array of objects', () => {
+      const field = [
+        {
+          '@type': 'URL',
+          value: `${settings.apiPath}/foo/bar/1`,
+        },
+        {
+          '@type': 'URL',
+          value: `${settings.apiPath}/foo/bar/2`,
+        },
+      ];
+      expect(getFieldURL(field)).toStrictEqual(['/foo/bar/1', '/foo/bar/2']);
+    });
+  });
   describe('normalizeUrl', () => {
     it('normalizeUrl test', () => {
       const href = `www.example.com`;

package/src/helpers/Utils/UseDetectClickOutside.stories.jsx

@@ -0,0 +1,190 @@
+import React from 'react';
+import { useDetectClickOutside } from './useDetectClickOutside';
+import { Portal } from 'react-portal';
+import { usePopper } from 'react-popper';
+import { BlockChooser } from '@plone/volto/components';
+
+function OpenedChooser(props) {
+  const blockChooserRef = useDetectClickOutside({
+    onTriggered: () => props.setOpenMenu(false),
+    triggerKeys: ['Escape'],
+  });
+
+  return (
+    <div ref={blockChooserRef} style={{ marginLeft: '20px' }}>
+      Hello
+    </div>
+  );
+}
+
+function TestComponent(props) {
+  const [isOpenMenu, setOpenMenu] = React.useState(false);
+
+  return (
+    <div style={{ display: 'flex', marginBottom: '20px' }}>
+      <button onClick={() => setOpenMenu(true)}>Click me</button>
+      {isOpenMenu && <OpenedChooser setOpenMenu={setOpenMenu} />}
+    </div>
+  );
+}
+
+function StoryComponent(args) {
+  return (
+    <>
+      <TestComponent />
+      <TestComponent />
+      <TestComponent />
+    </>
+  );
+}
+
+function OpenedChooserWithPortal(props) {
+  const blockChooserRef = useDetectClickOutside({
+    onTriggered: () => props.setOpenMenu(false),
+    triggerKeys: ['Escape'],
+  });
+
+  return (
+    <Portal node={document.getElementById('body')}>
+      <div ref={blockChooserRef}>{`Hello ${props.id}`}</div>
+    </Portal>
+  );
+}
+
+function TestComponentWithPortal(props) {
+  const [isOpenMenu, setOpenMenu] = React.useState(false);
+
+  return (
+    <div style={{ display: 'flex', marginBottom: '20px' }}>
+      <button
+        onClick={() => setOpenMenu(true)}
+      >{`Click me ${props.id}`}</button>
+      {isOpenMenu && (
+        <OpenedChooserWithPortal {...props} setOpenMenu={setOpenMenu} />
+      )}
+    </div>
+  );
+}
+
+function StoryComponentWithPortal(args) {
+  return (
+    <>
+      <TestComponentWithPortal id={1} />
+      <TestComponentWithPortal id={2} />
+      <TestComponentWithPortal id={3} />
+    </>
+  );
+}
+
+function OpenedChooserWithPortalAndPopper(props) {
+  const { showBlockChooser } = props;
+
+  const blockChooserRef = useDetectClickOutside({
+    onTriggered: () => props.setOpenMenu(false),
+    triggerKeys: ['Escape'],
+  });
+
+  return showBlockChooser ? (
+    <BlockChooser
+      // onMutateBlock={onMutateBlock}
+      // currentBlock={block}
+      showRestricted
+      // blocksConfig={blocksConfig}
+      ref={blockChooserRef}
+    />
+  ) : (
+    <div ref={blockChooserRef}>{`Hello ${props.id}`}</div>
+  );
+}
+
+function TestComponentWithPortalAndPopper(props) {
+  const [isOpenMenu, setOpenMenu] = React.useState(false);
+  const [referenceElement, setReferenceElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: 'right',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [-10, 10],
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['top-start'],
+        },
+      },
+    ],
+  });
+  return (
+    <div style={{ display: 'flex', marginBottom: '20px' }}>
+      <button
+        ref={setReferenceElement}
+        onClick={() => setOpenMenu(true)}
+      >{`Click me ${props.id}`}</button>
+      <Portal node={document.getElementById('body')}>
+        <div
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          {isOpenMenu && (
+            <OpenedChooserWithPortalAndPopper
+              {...props}
+              setOpenMenu={setOpenMenu}
+            />
+          )}
+        </div>
+      </Portal>
+    </div>
+  );
+}
+
+function StoryComponentWithPortalAndPopper(args) {
+  const { showBlockChooser } = args;
+  return (
+    <>
+      <TestComponentWithPortalAndPopper
+        id={1}
+        showBlockChooser={showBlockChooser}
+      />
+      <TestComponentWithPortalAndPopper
+        id={2}
+        showBlockChooser={showBlockChooser}
+      />
+      <TestComponentWithPortalAndPopper
+        id={3}
+        showBlockChooser={showBlockChooser}
+      />
+    </>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {};
+
+export const WithPortal = StoryComponentWithPortal.bind({});
+WithPortal.args = {};
+
+export const WithPortalAndPopper = StoryComponentWithPortalAndPopper.bind({});
+WithPortalAndPopper.args = {};
+
+export const WithPortalAndPopperUsingBlockChooser =
+  StoryComponentWithPortalAndPopper.bind({});
+WithPortalAndPopperUsingBlockChooser.args = {
+  showBlockChooser: true,
+};
+
+export default {
+  title: 'Internal Components/useDetectClickOutside',
+  component: TestComponent,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '600px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/helpers/Utils/Utils.js

@@ -284,6 +284,16 @@ export const reorderArray = (array, origin, target) => {
   return result;
 };
 
+/**
+ * Normalize (unicode) string to a normalized plain ascii string
+ * @method normalizeString
+ * @param {string} str The string to be normalized
+ * @returns {string} Normalized plain ascii string
+ */
+export function normalizeString(str) {
+  return str.normalize('NFD').replace(/\p{Diacritic}/gu, '');
+}
+
 /**
  * Slugify a string: remove whitespaces, special chars and replace with _
  * @param {string} string String to be slugified
@@ -324,3 +334,28 @@ export const arrayRange = (start, stop, step) =>
     { length: (stop - start) / step + 1 },
     (value, index) => start + index * step,
   );
+
+/**
+ * Given an event target element returns if it's an interactive element
+ * of the one in the list.
+ * @param {node} element event.target element type
+ * @returns {boolean} If it's an interactive element of the list
+ */
+export function isInteractiveElement(
+  element,
+  interactiveElements = [
+    'button',
+    'input',
+    'textarea',
+    'select',
+    'option',
+    'svg',
+    'path',
+  ],
+) {
+  if (interactiveElements.includes(element.tagName.toLowerCase())) {
+    return true;
+  }
+
+  return false;
+}

package/src/helpers/Utils/Utils.test.js

@@ -14,6 +14,7 @@ import {
   safeWrapper,
   slugify,
   cloneDeepSchema,
+  normalizeString,
 } from './Utils';
 import moment from 'moment';
 import deepFreeze from 'deep-freeze';
@@ -386,6 +387,18 @@ describe('Utils tests', () => {
     });
   });
 
+  describe('normalizeString', () => {
+    it('normalizeString no diacritics', () => {
+      const str = `my string without diacritics`;
+      expect(normalizeString(str)).toBe('my string without diacritics');
+    });
+
+    it('normalizeString with diacritics', () => {
+      const str = `my Ü Ú é à ñ string with diacritics`;
+      expect(normalizeString(str)).toBe('my U U e a n string with diacritics');
+    });
+  });
+
   describe('slugify', () => {
     it('slugifies a standard string', () => {
       expect(slugify('Content Type')).toBe('content_type');

package/src/helpers/Utils/usePagination.js

@@ -1,25 +1,78 @@
-import React from 'react';
-import { isEqual } from 'lodash';
-import { usePrevious } from './usePrevious';
-import useDeepCompareEffect from 'use-deep-compare-effect';
+import React, { useRef, useEffect } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import qs from 'query-string';
+import { useSelector } from 'react-redux';
+import { findBlocks, slugify } from '@plone/volto/helpers';
+
+/**
+ * @function useCreatePageQueryStringKey
+ * @description A hook that creates a key with an id if there are multiple blocks with pagination.
+ * @returns {string} Example: page || page_012345678
+ */
+const useCreatePageQueryStringKey = (id) => {
+  const blockTypesWithPagination = ['search', 'listing'];
+  const blocks = useSelector((state) => state?.content?.data?.blocks) || [];
+  const hasMultiplePaginations =
+    findBlocks(blocks, blockTypesWithPagination).length > 1;
+
+  return hasMultiplePaginations ? slugify(`page-${id}`) : 'page';
+};
+
+const useGetBlockType = (id) => {
+  const blocks = useSelector((state) => state?.content?.data?.blocks) || [];
+  const block = blocks[id];
+  return block ? block?.['@type'] : null;
+};
 
 /**
  * A pagination helper that tracks the query and resets pagination in case the
  * query changes.
  */
-export const usePagination = (query, defaultPage = 1) => {
-  const previousQuery = usePrevious(query);
-  const [currentPage, setCurrentPage] = React.useState(defaultPage);
+export const usePagination = (id = null, defaultPage = 1) => {
+  const location = useLocation();
+  const history = useHistory();
+  const pageQueryStringKey = useCreatePageQueryStringKey(id);
+  const block_type = useGetBlockType(id);
+  const pageQueryParam =
+    qs.parse(location.search)[pageQueryStringKey] || defaultPage;
+  const [currentPage, setCurrentPageState] = React.useState(
+    parseInt(pageQueryParam),
+  );
+  const setCurrentPage = (page) => {
+    setCurrentPageState(page);
+    const newParams = {
+      ...qs.parse(location.search),
+      [pageQueryStringKey]: page,
+    };
+    history.push({ search: qs.stringify(newParams) });
+  };
 
-  useDeepCompareEffect(() => {
-    setCurrentPage(defaultPage);
-  }, [query, previousQuery, defaultPage]);
+  const queryRef = useRef(qs.parse(location.search)?.query);
+  useEffect(() => {
+    if (
+      queryRef.current !== qs.parse(location.search)?.query &&
+      block_type === 'search'
+    ) {
+      setCurrentPageState(defaultPage);
+      const newParams = {
+        ...qs.parse(location.search),
+        [pageQueryStringKey]: defaultPage,
+      };
+      delete newParams[pageQueryStringKey];
+      history.replace({ search: qs.stringify(newParams) });
+      queryRef.current = qs.parse(location.search)?.query;
+    } else {
+      setCurrentPageState(
+        parseInt(
+          qs.parse(location.search)?.[pageQueryStringKey] || defaultPage,
+        ),
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.search, block_type]);
 
   return {
-    currentPage:
-      previousQuery && !isEqual(previousQuery, query)
-        ? defaultPage
-        : currentPage,
+    currentPage,
     setCurrentPage,
   };
 };