@plone/volto 17.0.0-alpha.3 → 17.0.0-alpha.30

package/src/helpers/index.js

@@ -5,9 +5,9 @@
  */
 
 // export { injectLazyLibs } from './Loadable/Loadable';
-export Api from '@plone/volto/helpers/Api/Api';
+export { default as Api } from '@plone/volto/helpers/Api/Api';
 export { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWithAuth';
-export Html from '@plone/volto/helpers/Html/Html';
+export { default as Html } from '@plone/volto/helpers/Html/Html';
 export {
   getAuthToken,
   persistAuthToken,
@@ -54,12 +54,14 @@ export {
   previousBlockId,
   applyBlockDefaults,
   applySchemaDefaults,
+  blocksFormGenerator,
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
   getPreviousNextBlock,
+  findBlocks,
 } from '@plone/volto/helpers/Blocks/Blocks';
-export BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
-export ScrollToTop from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
+export { default as BodyClass } from '@plone/volto/helpers/BodyClass/BodyClass';
+export { default as ScrollToTop } from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
 export {
   getBoolean,
   getVocabName,
@@ -69,9 +71,10 @@ export {
   getFieldsVocabulary,
 } from '@plone/volto/helpers/Vocabularies/Vocabularies';
 
-export langmap from './LanguageMap/LanguageMap';
-export Helmet from './Helmet/Helmet';
-export FormValidation from './FormValidation/FormValidation';
+export { default as langmap } from './LanguageMap/LanguageMap';
+export { default as Helmet } from './Helmet/Helmet';
+export { default as FormValidation } from './FormValidation/FormValidation';
+export { validateFileUploadSize } from './FormValidation/FormValidation';
 export {
   difference,
   getColor,
@@ -80,11 +83,19 @@ export {
   applyConfig,
   withServerErrorCode,
   parseDateTime,
-  normalizeLanguageName,
-  toLangUnderscoreRegion,
+  toGettextLang,
+  normalizeLanguageName, // old name for toGettextLang
+  toReactIntlLang,
+  toLangUnderscoreRegion, // old name for toReactIntlLang
+  toBackendLang,
   hasApiExpander,
   replaceItemOfArray,
   cloneDeepSchema,
+  arrayRange,
+  reorderArray,
+  isInteractiveElement,
+  slugify,
+  normalizeString,
 } from '@plone/volto/helpers/Utils/Utils';
 export { messages } from './MessageLabels/MessageLabels';
 export {
@@ -104,10 +115,11 @@ export { useDetectClickOutside } from './Utils/useDetectClickOutside';
 export { useEvent } from './Utils/useEvent';
 export { usePrevious } from './Utils/usePrevious';
 export { usePagination } from './Utils/usePagination';
-export useUndoManager from './UndoManager/useUndoManager';
+export { default as useUndoManager } from './UndoManager/useUndoManager';
 export { getCookieOptions } from './Cookies/cookies';
 export { getWidgetView } from './Widget/widget';
 export {
   getCurrentStateMapping,
   getWorkflowOptions,
 } from './Workflows/Workflows';
+export { getSiteAsyncPropExtender } from './Site';

package/src/hooks/client/useClient.js

@@ -0,0 +1,11 @@
+//useClient hook to replace repetitive delcaration in the components
+import { useEffect, useState } from 'react';
+
+export function useClient() {
+  const [isClient, setisClient] = useState(false);
+  useEffect(() => {
+    setisClient(true);
+  }, []);
+
+  return isClient;
+}

package/src/hooks/clipboard/useClipboard.js

@@ -0,0 +1,26 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+export default function useClipboard(clipboardText = '') {
+  const stringToCopy = useRef(clipboardText);
+  const [copied, setCopied] = useState(false);
+
+  //synchronous: window.clipboardData.setData(options.format || "text", text);
+  const copyToClipboard = async (text) => {
+    if ('clipboard' in navigator) {
+      return await navigator.clipboard.writeText(text);
+    } else {
+      return document.execCommand('copy', true, text);
+    }
+  };
+
+  const copyAction = useCallback(() => {
+    const copiedString = copyToClipboard(stringToCopy.current);
+    setCopied(copiedString);
+  }, [stringToCopy]);
+
+  useEffect(() => {
+    stringToCopy.current = clipboardText;
+  }, [clipboardText]);
+
+  return [copied, copyAction, setCopied];
+}

package/src/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useClipboard } from '@plone/volto/hooks/clipboard/useClipboard';
+export { useClient } from '@plone/volto/hooks/client/useClient';

package/src/icons/grid-block.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="currentcolor" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(8 22)">
+      <rect width="18" height="53" x="42"/>
+      <rect width="18" height="53" x="63"/>
+      <rect width="18" height="53"/>
+      <rect width="18" height="53" x="21"/>
+    </g>
+  </g>
+</svg>

package/src/middleware/Api.test.js

@@ -53,6 +53,60 @@ describe('api middleware helpers', () => {
     );
     expect(result).toEqual('/de/mypage/@navigation?expand.navigation.depth=3');
   });
+  it('addExpandersToPath - Path matching, preserve query', () => {
+    config.settings.apiExpanders = [
+      {
+        match: '/de/mypage',
+        GET_CONTENT: ['mycustomexpander', 'mycustomexpander2'],
+      },
+    ];
+
+    const result = addExpandersToPath(
+      '/de/mypage/@navigation?expand.navigation.depth=3',
+      GET_CONTENT,
+    );
+    expect(result).toEqual(
+      '/de/mypage/@navigation?expand=mycustomexpander,mycustomexpander2&expand.navigation.depth=3',
+    );
+  });
+  it('addExpandersToPath - Path matching, preserve query with multiple', () => {
+    config.settings.apiExpanders = [
+      {
+        match: '/de/mypage',
+        GET_CONTENT: ['mycustomexpander', 'mycustomexpander2'],
+      },
+    ];
+
+    const result = addExpandersToPath(
+      '/de/mypage/@navigation?expand.navigation.depth=3&expand.other=2',
+      GET_CONTENT,
+    );
+    expect(result).toEqual(
+      '/de/mypage/@navigation?expand=mycustomexpander,mycustomexpander2&expand.navigation.depth=3&expand.other=2',
+    );
+  });
+  it('addExpandersToPath - Path not matching, preserve encoded query', () => {
+    config.settings.apiExpanders = [
+      {
+        match: '/de/otherpath',
+        GET_CONTENT: ['mycustomexpander'],
+      },
+    ];
+
+    const result = addExpandersToPath('/de/mypage?query=a%26b', GET_CONTENT);
+    expect(result).toEqual('/de/mypage?query=a%26b');
+  });
+  it('addExpandersToPath - Path matching, preserve encoded query', () => {
+    config.settings.apiExpanders = [
+      {
+        match: '/de/mypage',
+        GET_CONTENT: ['mycustomexpander'],
+      },
+    ];
+
+    const result = addExpandersToPath('/de/mypage?query=a%26b', GET_CONTENT);
+    expect(result).toEqual('/de/mypage?expand=mycustomexpander&query=a%26b');
+  });
   it('addExpandersToPath - Two custom expanders from settings', () => {
     config.settings.apiExpanders = [
       {

package/src/middleware/api.js

@@ -18,7 +18,11 @@ import {
   SET_APIERROR,
 } from '@plone/volto/constants/ActionTypes';
 import { changeLanguage } from '@plone/volto/actions';
-import { normalizeLanguageName, getCookieOptions } from '@plone/volto/helpers';
+import {
+  toGettextLang,
+  toReactIntlLang,
+  getCookieOptions,
+} from '@plone/volto/helpers';
 let socket = null;
 
 /**
@@ -43,7 +47,7 @@ export function addExpandersToPath(path, type, isAnonymous) {
   const {
     url,
     query: { expand, ...query },
-  } = qs.parseUrl(path);
+  } = qs.parseUrl(path, { decode: false });
 
   const expandersFromConfig = apiExpanders
     .filter((expand) => matchPath(url, expand.match) && expand[type])
@@ -63,7 +67,15 @@ export function addExpandersToPath(path, type, isAnonymous) {
 
   const querystringFromConfig = apiExpanders
     .filter((expand) => matchPath(url, expand.match) && expand[type])
-    .reduce((acc, expand) => ({ ...acc, ...expand?.['querystring'] }), {});
+    .reduce((acc, expand) => {
+      let querystring = expand?.['querystring'];
+      // The querystring accepts being a function to be able to take other
+      // config parameters
+      if (typeof querystring === 'function') {
+        querystring = querystring(config);
+      }
+      return { ...acc, ...querystring };
+    }, {});
 
   const queryMerge = { ...query, ...querystringFromConfig };
 
@@ -113,52 +125,76 @@ function sendOnSocket(request) {
  * @param {Object} api Api object.
  * @returns {Promise} Action promise.
  */
-const apiMiddlewareFactory = (api) => ({ dispatch, getState }) => (next) => (
-  action,
-) => {
-  const { settings } = config;
+const apiMiddlewareFactory =
+  (api) =>
+  ({ dispatch, getState }) =>
+  (next) =>
+  (action) => {
+    const { settings } = config;
 
-  const isAnonymous = !getState().userSession.token;
+    const token = getState().userSession.token;
+    let isAnonymous = true;
+    if (token) {
+      const tokenExpiration = jwtDecode(token).exp;
+      const currentTime = new Date().getTime() / 1000;
+      isAnonymous = !token || currentTime > tokenExpiration;
+    }
 
-  if (typeof action === 'function') {
-    return action(dispatch, getState);
-  }
+    if (typeof action === 'function') {
+      return action(dispatch, getState);
+    }
 
-  const { request, type, mode = 'parallel', ...rest } = action;
-  const { subrequest } = action; // We want subrequest remains in `...rest` above
+    const { request, type, mode = 'parallel', ...rest } = action;
+    const { subrequest } = action; // We want subrequest remains in `...rest` above
 
-  let actionPromise;
+    let actionPromise;
 
-  if (!request) {
-    return next(action);
-  }
+    if (!request) {
+      return next(action);
+    }
 
-  next({ ...rest, type: `${type}_PENDING` });
+    next({ ...rest, type: `${type}_PENDING` });
 
-  if (socket) {
-    actionPromise = Array.isArray(request)
-      ? Promise.all(
-          request.map((item) =>
-            sendOnSocket({
-              ...item,
-              path: addExpandersToPath(item.path, type, isAnonymous),
-              id: type,
-            }),
-          ),
-        )
-      : sendOnSocket({
-          ...request,
-          path: addExpandersToPath(request.path, type, isAnonymous),
-          id: type,
-        });
-  } else {
-    actionPromise = Array.isArray(request)
-      ? mode === 'serial'
-        ? request.reduce((prevPromise, item) => {
-            return prevPromise.then((acc) => {
-              return api[item.op](
-                addExpandersToPath(item.path, type, isAnonymous),
-                {
+    if (socket) {
+      actionPromise = Array.isArray(request)
+        ? Promise.all(
+            request.map((item) =>
+              sendOnSocket({
+                ...item,
+                path: addExpandersToPath(item.path, type, isAnonymous),
+                id: type,
+              }),
+            ),
+          )
+        : sendOnSocket({
+            ...request,
+            path: addExpandersToPath(request.path, type, isAnonymous),
+            id: type,
+          });
+    } else {
+      actionPromise = Array.isArray(request)
+        ? mode === 'serial'
+          ? request.reduce((prevPromise, item) => {
+              return prevPromise.then((acc) => {
+                return api[item.op](
+                  addExpandersToPath(item.path, type, isAnonymous),
+                  {
+                    data: item.data,
+                    type: item.type,
+                    headers: item.headers,
+                    params: request.params,
+                    checkUrl: settings.actions_raising_api_errors.includes(
+                      action.type,
+                    ),
+                  },
+                ).then((reqres) => {
+                  return [...acc, reqres];
+                });
+              });
+            }, Promise.resolve([]))
+          : Promise.all(
+              request.map((item) =>
+                api[item.op](addExpandersToPath(item.path, type, isAnonymous), {
                   data: item.data,
                   type: item.type,
                   headers: item.headers,
@@ -166,164 +202,162 @@ const apiMiddlewareFactory = (api) => ({ dispatch, getState }) => (next) => (
                   checkUrl: settings.actions_raising_api_errors.includes(
                     action.type,
                   ),
-                },
-              ).then((reqres) => {
-                return [...acc, reqres];
-              });
-            });
-          }, Promise.resolve([]))
-        : Promise.all(
-            request.map((item) =>
-              api[item.op](addExpandersToPath(item.path, type, isAnonymous), {
-                data: item.data,
-                type: item.type,
-                headers: item.headers,
-                params: request.params,
-                checkUrl: settings.actions_raising_api_errors.includes(
-                  action.type,
-                ),
-              }),
-            ),
-          )
-      : api[request.op](addExpandersToPath(request.path, type, isAnonymous), {
-          data: request.data,
-          type: request.type,
-          headers: request.headers,
-          params: request.params,
-          checkUrl: settings.actions_raising_api_errors.includes(action.type),
-        });
-    actionPromise.then(
-      (result) => {
-        const { settings } = config;
-        if (getState().apierror.connectionRefused) {
-          next({
-            ...rest,
-            type: RESET_APIERROR,
+                }),
+              ),
+            )
+        : api[request.op](addExpandersToPath(request.path, type, isAnonymous), {
+            data: request.data,
+            type: request.type,
+            headers: request.headers,
+            params: request.params,
+            checkUrl: settings.actions_raising_api_errors.includes(action.type),
           });
-        }
-        if (type === GET_CONTENT) {
-          const lang = result?.language?.token;
-          if (
-            lang &&
-            getState().intl.language !== lang &&
-            !subrequest &&
-            config.settings.supportedLanguages.includes(lang)
-          ) {
-            const langFileName = normalizeLanguageName(lang);
-            import('~/../locales/' + langFileName + '.json').then((locale) => {
-              dispatch(changeLanguage(lang, locale.default));
+      actionPromise.then(
+        (result) => {
+          const { settings } = config;
+          if (getState().apierror.connectionRefused) {
+            next({
+              ...rest,
+              type: RESET_APIERROR,
             });
           }
-        }
-        if (type === LOGIN && settings.websockets) {
-          const cookies = new Cookies();
-          cookies.set(
-            'auth_token',
-            result.token,
-            getCookieOptions({
-              expires: new Date(jwtDecode(result.token).exp * 1000),
-            }),
-          );
-          api.get('/@wstoken').then((res) => {
-            socket = new WebSocket(
-              `${settings.apiPath.replace('http', 'ws')}/@ws?ws_token=${
-                res.token
-              }`,
+          if (type === GET_CONTENT) {
+            const lang = result?.language?.token;
+            if (
+              lang &&
+              getState().intl.locale !== toReactIntlLang(lang) &&
+              !subrequest &&
+              config.settings.supportedLanguages.includes(lang)
+            ) {
+              const langFileName = toGettextLang(lang);
+              import('~/../locales/' + langFileName + '.json').then(
+                (locale) => {
+                  dispatch(changeLanguage(lang, locale.default));
+                },
+              );
+            }
+          }
+          if (type === LOGIN && settings.websockets) {
+            const cookies = new Cookies();
+            cookies.set(
+              'auth_token',
+              result.token,
+              getCookieOptions({
+                expires: new Date(jwtDecode(result.token).exp * 1000),
+              }),
             );
-            socket.onmessage = (message) => {
-              const packet = JSON.parse(message.data);
-              if (packet.error) {
-                dispatch({
-                  type: `${packet.id}_FAIL`,
-                  error: packet.error,
-                });
-              } else {
-                dispatch({
-                  type: `${packet.id}_SUCCESS`,
-                  result: JSON.parse(packet.data),
-                });
-              }
-            };
-          });
-        }
-        return next({ ...rest, result, type: `${type}_SUCCESS` });
-      },
-      (error) => {
-        // Only SRR can set ECONNREFUSED
-        if (error.code === 'ECONNREFUSED') {
-          next({
-            ...rest,
-            error,
-            statusCode: error.code,
-            connectionRefused: true,
-            type: SET_APIERROR,
-          });
-        }
-
-        // Response error is marked crossDomain if CORS error happen
-        else if (error.crossDomain) {
-          next({
-            ...rest,
-            error,
-            statusCode: 'CORSERROR',
-            connectionRefused: false,
-            type: SET_APIERROR,
-          });
-        }
-
-        // Check for actions who can raise api errors
-        if (settings.actions_raising_api_errors.includes(action.type)) {
-          // Gateway timeout
-          if (error?.response?.statusCode === 504) {
-            next({
-              ...rest,
-              error,
-              statusCode: error.code,
-              connectionRefused: true,
-              type: SET_APIERROR,
+            api.get('/@wstoken').then((res) => {
+              socket = new WebSocket(
+                `${settings.apiPath.replace('http', 'ws')}/@ws?ws_token=${
+                  res.token
+                }`,
+              );
+              socket.onmessage = (message) => {
+                const packet = JSON.parse(message.data);
+                if (packet.error) {
+                  dispatch({
+                    type: `${packet.id}_FAIL`,
+                    error: packet.error,
+                  });
+                } else {
+                  dispatch({
+                    type: `${packet.id}_SUCCESS`,
+                    result: JSON.parse(packet.data),
+                  });
+                }
+              };
             });
           }
-
-          // Redirect
-          else if (error?.code === 301) {
+          try {
+            return next({ ...rest, result, type: `${type}_SUCCESS` });
+          } catch (error) {
+            // There was an exception while processing reducers or downstream middleware.
             next({
               ...rest,
-              error,
-              statusCode: error.code,
-              connectionRefused: false,
-              type: SET_APIERROR,
+              error: { status: 500, error },
+              type: `${type}_FAIL`,
             });
+            // Rethrow the original exception on the client side only,
+            // so it doesn't fall through to express on the server.
+            if (__CLIENT__) throw error;
           }
-
-          // Redirect
-          else if (error?.code === 408) {
+        },
+        (error) => {
+          // Only SSR can set ECONNREFUSED
+          if (error.code === 'ECONNREFUSED') {
             next({
               ...rest,
               error,
               statusCode: error.code,
-              connectionRefused: false,
+              connectionRefused: true,
               type: SET_APIERROR,
             });
           }
 
-          // Unauthorized
-          else if (error?.response?.statusCode === 401) {
+          // Response error is marked crossDomain if CORS error happen
+          else if (error.crossDomain) {
             next({
               ...rest,
               error,
-              statusCode: error.response,
-              message: error.response.body.message,
+              statusCode: 'CORSERROR',
               connectionRefused: false,
               type: SET_APIERROR,
             });
           }
-        }
-        return next({ ...rest, error, type: `${type}_FAIL` });
-      },
-    );
-  }
 
-  return actionPromise;
-};
+          // Check for actions who can raise api errors
+          if (settings.actions_raising_api_errors.includes(action.type)) {
+            // Gateway timeout
+            if (error?.response?.statusCode === 504) {
+              next({
+                ...rest,
+                error,
+                statusCode: error.code,
+                connectionRefused: true,
+                type: SET_APIERROR,
+              });
+            }
+
+            // Redirect
+            else if (error?.code === 301) {
+              next({
+                ...rest,
+                error,
+                statusCode: error.code,
+                connectionRefused: false,
+                type: SET_APIERROR,
+              });
+            }
+
+            // Redirect
+            else if (error?.code === 408) {
+              next({
+                ...rest,
+                error,
+                statusCode: error.code,
+                connectionRefused: false,
+                type: SET_APIERROR,
+              });
+            }
+
+            // Unauthorized
+            else if (error?.response?.statusCode === 401) {
+              next({
+                ...rest,
+                error,
+                statusCode: error.response,
+                message: error.response.body.message,
+                connectionRefused: false,
+                type: SET_APIERROR,
+              });
+            }
+          }
+          return next({ ...rest, error, type: `${type}_FAIL` });
+        },
+      );
+    }
+
+    return actionPromise;
+  };
 
 export default apiMiddlewareFactory;