@plone/volto 17.0.0-alpha.2 → 17.0.0-alpha.20

package/src/helpers/Sitemap/Sitemap.js

@@ -11,19 +11,23 @@ import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
 
 import config from '@plone/volto/registry';
 
+export const SITEMAP_BATCH_SIZE = 5000;
+
 /**
  * Generate sitemap
  * @function generateSitemap
  * @param {Object} _req Request object
  * @return {string} Generated sitemap
  */
-export const generateSitemap = (_req) =>
+export const generateSitemap = (_req, start = 0, size = undefined) =>
   new Promise((resolve) => {
     const { settings } = config;
     const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
     const apiPath = settings.internalApiPath ?? settings.apiPath;
     const request = superagent.get(
-      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_size=100000000&use_site_search_settings=1`,
+      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_start=${start}&b_size=${
+        size !== undefined ? size : 100000000
+      }&use_site_search_settings=1`,
     );
     request.set('Accept', 'application/json');
     request.use(addHeadersFactory(_req));
@@ -50,3 +54,41 @@ export const generateSitemap = (_req) =>
       }
     });
   });
+
+/**
+ * Generate sitemap
+ * @function generateSitemapIndex
+ * @param {Object} _req Request object
+ * @return {string} Generated sitemap index
+ */
+export const generateSitemapIndex = (_req) =>
+  new Promise((resolve) => {
+    const { settings } = config;
+    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+    const apiPath = settings.internalApiPath ?? settings.apiPath;
+    const request = superagent.get(
+      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_size=0&use_site_search_settings=1`,
+    );
+    request.set('Accept', 'application/json');
+    const authToken = _req.universalCookies.get('auth_token');
+    if (authToken) {
+      request.set('Authorization', `Bearer ${authToken}`);
+    }
+    request.end((error, { body } = {}) => {
+      if (error) {
+        resolve(body || error);
+      } else {
+        const items = Array.from(
+          { length: Math.ceil(body.items_total / SITEMAP_BATCH_SIZE) },
+          (_, i) =>
+            `  <sitemap>
+    <loc>${toPublicURL('/sitemap' + (i + 1) + '.xml.gz')}</loc>
+  </sitemap>`,
+        );
+        const result = `<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${items.join('\n')}\n</sitemapindex>`;
+        resolve(result);
+      }
+    });
+  });

package/src/helpers/Url/Url.js

@@ -7,6 +7,7 @@ import { last, memoize } from 'lodash';
 import { urlRegex, telRegex, mailRegex } from './urlRegex';
 import prependHttp from 'prepend-http';
 import config from '@plone/volto/registry';
+import { matchPath } from 'react-router';
 
 /**
  * Get base url.
@@ -213,7 +214,17 @@ export function expandToBackendURL(path) {
  */
 export function isInternalURL(url) {
   const { settings } = config;
-  return (
+
+  const isMatch = (config.settings.externalRoutes ?? []).find((route) => {
+    if (typeof route === 'object') {
+      return matchPath(flattenToAppURL(url), route.match);
+    }
+    return matchPath(flattenToAppURL(url), route);
+  });
+
+  const isExcluded = isMatch && Object.keys(isMatch)?.length > 0;
+
+  const internalURL =
     url &&
     (url.indexOf(settings.publicURL) !== -1 ||
       (settings.internalApiPath &&
@@ -221,8 +232,13 @@ export function isInternalURL(url) {
       url.indexOf(settings.apiPath) !== -1 ||
       url.charAt(0) === '/' ||
       url.charAt(0) === '.' ||
-      url.startsWith('#'))
-  );
+      url.startsWith('#'));
+
+  if (internalURL && isExcluded) {
+    return false;
+  }
+
+  return internalURL;
 }
 
 /**
@@ -264,14 +280,14 @@ export function isTelephone(text) {
 }
 
 export function normaliseMail(email) {
-  if (email.toLowerCase().startsWith('mailto:')) {
+  if (email?.toLowerCase()?.startsWith('mailto:')) {
     return email;
   }
   return `mailto:${email}`;
 }
 
 export function normalizeTelephone(tel) {
-  if (tel.toLowerCase().startsWith('tel:')) {
+  if (tel?.toLowerCase()?.startsWith('tel:')) {
     return tel;
   }
   return `tel:${tel}`;
@@ -294,12 +310,17 @@ export function checkAndNormalizeUrl(url) {
     res.url = URLUtils.normalizeTelephone(url);
   } else {
     //url
-    if (!res.url.startsWith('/') && !res.url.startsWith('#')) {
+    if (
+      res.url?.length >= 0 &&
+      !res.url.startsWith('/') &&
+      !res.url.startsWith('#')
+    ) {
       res.url = URLUtils.normalizeUrl(url);
       if (!URLUtils.isUrl(res.url)) {
         res.isValid = false;
       }
     }
+    if (res.url === undefined || res.url === null) res.isValid = false;
   }
   return res;
 }

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

@@ -14,6 +14,9 @@ import {
   removeProtocol,
   addAppURL,
   expandToBackendURL,
+  checkAndNormalizeUrl,
+  normaliseMail,
+  normalizeTelephone,
 } from './Url';
 
 beforeEach(() => {
@@ -61,6 +64,17 @@ describe('Url', () => {
     it('return empty string if no url is empty string', () => {
       expect(getBaseUrl('')).toBe('');
     });
+    it('return a null/undefined mailto adress ', () => {
+      expect(normaliseMail(null)).toBe('mailto:null');
+      expect(normaliseMail(undefined)).toBe('mailto:undefined');
+    });
+    it('return a null/undefined telephone number', () => {
+      expect(normalizeTelephone(null)).toBe('tel:null');
+      expect(normalizeTelephone(undefined)).toBe('tel:undefined');
+    });
+    it('null returns an invalid link', () => {
+      expect(checkAndNormalizeUrl(null).isValid).toBe(false);
+    });
   });
 
   describe('getView', () => {
@@ -191,6 +205,7 @@ describe('Url', () => {
       expect(isInternalURL(href)).toBe(false);
       settings.internalApiPath = saved;
     });
+
     it('tells if an URL is internal if it is an anchor', () => {
       const href = '#anchor';
       expect(isInternalURL(href)).toBe(true);
@@ -211,6 +226,17 @@ describe('Url', () => {
       const href = undefined;
       expect(isInternalURL(href)).toBe(undefined);
     });
+    it('tells if an  URL is external if settings.externalroutes is persent.', () => {
+      const url = `https://localhost:3000/fb/my-page/contents`;
+      const blacklistedurl = '/blacklisted';
+      settings.externalRoutes = [
+        { title: 'My Page', match: '/fb' },
+        '/blacklisted',
+      ];
+      settings.publicURL = 'https://localhost:3000';
+      expect(isInternalURL(url)).toBe(false);
+      expect(isInternalURL(blacklistedurl)).toBe(false);
+    });
   });
   describe('isUrl', () => {
     it('isUrl test', () => {

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

@@ -0,0 +1,191 @@
+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

@@ -174,13 +174,13 @@ export const parseDateTime = (locale, value, format, moment) => {
 };
 
 /**
- * Converts a language code to the format `lang_region`
+ * Converts a language code like pt-br to the format `pt_BR` (`lang_region`)
  * Useful for passing from Plone's i18n lang names to Xnix locale names
- * eg. LC_MESSAGES/lang_region.po filenames
+ * eg. LC_MESSAGES/lang_region.po filenames. Also used in the I18N_LANGUAGE cookie.
  * @param {string} language Language to be converted
  * @returns {string} Language converted
  */
-export const normalizeLanguageName = (language) => {
+export const toGettextLang = (language) => {
   if (language.includes('-')) {
     let normalizedLang = language.split('-');
     normalizedLang = `${normalizedLang[0]}_${normalizedLang[1].toUpperCase()}`;
@@ -189,23 +189,35 @@ export const normalizeLanguageName = (language) => {
 
   return language;
 };
+export const normalizeLanguageName = toGettextLang;
 
 /**
- * Converts a language code to the format `lang-region`
- * `react-intl` only supports this syntax, so coming from the language
- * negotiation of the `locale` lib, one need to convert it first
+ * Converts a language code like pt-br or pt_BR to the format `pt-BR`.
+ * `react-intl` only supports this syntax. We also use it for the locales
+ * in the volto Redux store.
  * @param {string} language Language to be converted
  * @returns {string} Language converted
  */
-export const toLangUnderscoreRegion = (language) => {
-  if (language.includes('_')) {
-    let langCode = language.split('_');
+export const toReactIntlLang = (language) => {
+  if (language.includes('_') || language.includes('-')) {
+    let langCode = language.split(/[-_]/);
     langCode = `${langCode[0]}-${langCode[1].toUpperCase()}`;
     return langCode;
   }
 
   return language;
 };
+export const toLangUnderscoreRegion = toReactIntlLang; // old name for backwards-compat
+
+/**
+ * Converts a language code like pt_BR or pt-BR to the format `pt-br`.
+ * This format is used on the backend and in volto config settings.
+ * @param {string} language Language to be converted
+ * @returns {string} Language converted
+ */
+export const toBackendLang = (language) => {
+  return toReactIntlLang(language).toLowerCase();
+};
 
 /**
  * Lookup if a given expander is set in apiExpanders for the given path and action type
@@ -258,11 +270,11 @@ export const removeFromArray = (array, index) => {
 };
 
 /**
- * Reorder array
+ * Moves an item from origin to target inside an array in an immutable way
  * @param {Array} array Array with data
- * @param {number} origin Index of item to be reordered
- * @param {number} target Index of item to be reordered to
- * @returns {Array} Array with reordered elements
+ * @param {number} origin Index of item to be moved from
+ * @param {number} target Index of item to be moved to
+ * @returns {Array} Resultant array
  */
 export const reorderArray = (array, origin, target) => {
   const result = Array.from(array);
@@ -299,3 +311,41 @@ export const cloneDeepSchema = (object) => {
     }
   });
 };
+
+/**
+ * Creates an array given a range of numbers
+ * @param {number} start start number from
+ * @param {number} stop stop number at
+ * @param {number} step step every each number in the sequence
+ * @returns {array} The result, eg. [0, 1, 2, 3, 4]
+ */
+export const arrayRange = (start, stop, step) =>
+  Array.from(
+    { 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

@@ -6,7 +6,7 @@ import {
   getColor,
   getInitials,
   hasApiExpander,
-  normalizeLanguageName,
+  toGettextLang,
   parseDateTime,
   removeFromArray,
   reorderArray,
@@ -284,12 +284,12 @@ describe('Utils tests', () => {
     });
   });
 
-  describe('normalizeLanguageName', () => {
+  describe('toGettextLang', () => {
     it('Normalizes an extended language (pt_BR)', () => {
-      expect(normalizeLanguageName('pt-br')).toStrictEqual('pt_BR');
+      expect(toGettextLang('pt-br')).toStrictEqual('pt_BR');
     });
     it('Normalizes a simple language (ca)', () => {
-      expect(normalizeLanguageName('ca')).toStrictEqual('ca');
+      expect(toGettextLang('ca')).toStrictEqual('ca');
     });
   });
 

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,
   };
 };