@plone/volto 19.0.0-alpha.1 → 19.0.0-alpha.10

package/src/helpers/Sitemap/Sitemap.js

@@ -22,10 +22,10 @@ export const SITEMAP_BATCH_SIZE = 5000;
 export const generateSitemap = (_req, start = 0, size = undefined) =>
   new Promise((resolve) => {
     const { settings } = config;
-    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
     const apiPath = settings.internalApiPath ?? settings.apiPath;
     const request = superagent.get(
-      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_start=${start}&b_size=${
+      `${apiPath}${apiSuffix}/@search?metadata_fields=modified&b_start=${start}&b_size=${
         size !== undefined ? size : 100000000
       }&use_site_search_settings=1`,
     );
@@ -64,10 +64,10 @@ export const generateSitemap = (_req, start = 0, size = undefined) =>
 export const generateSitemapIndex = (_req, gzip = false) =>
   new Promise((resolve) => {
     const { settings } = config;
-    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+    const apiSuffix = 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`,
+      `${apiPath}${apiSuffix}/@search?metadata_fields=modified&b_size=0&use_site_search_settings=1`,
     );
     request.set('Accept', 'application/json');
     const authToken = _req.universalCookies.get('auth_token');

package/src/helpers/Url/Url.js

@@ -193,7 +193,7 @@ export function addAppURL(url) {
  */
 export function expandToBackendURL(path) {
   const { settings } = config;
-  const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+  const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
   let adjustedPath;
   if (path.startsWith('http://') || path.startsWith('https://')) {
     // flattenToAppURL first if we get a full URL
@@ -210,7 +210,7 @@ export function expandToBackendURL(path) {
     apiPath = settings.apiPath;
   }
 
-  return `${apiPath}${APISUFIX}${adjustedPath}`;
+  return `${apiPath}${apiSuffix}${adjustedPath}`;
 }
 
 /**
@@ -258,6 +258,36 @@ export function isUrl(url) {
   return urlRegex().test(url);
 }
 
+/**
+ * Add subpath path if set in settings
+ * @method addSubpathPrefix
+ * @param {string} src pathname
+ * @returns {string} prefixed subpath pathname
+ */
+export function addSubpathPrefix(src) {
+  let url = src;
+  const { subpathPrefix } = config.settings;
+  if (isInternalURL(src) && subpathPrefix && !src.startsWith(subpathPrefix)) {
+    url = subpathPrefix + src; //add subpathPrefix to src if it's an internal url and not a static resource.
+  }
+  return url;
+}
+
+/**
+ * strip subpath path particulary from api calls
+ * @method stripSubpathPrefix
+ * @param {string} src pathname
+ * @returns {string} pathname
+ */
+export function stripSubpathPrefix(src) {
+  let url = src;
+  const { subpathPrefix } = config.settings;
+  if (subpathPrefix && src.match(new RegExp(`^${subpathPrefix}(/|$)`))) {
+    url = src.slice(subpathPrefix.length);
+  }
+  return url;
+}
+
 /**
  * Get field url
  * @method getFieldURL

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

@@ -19,6 +19,8 @@ import {
   normaliseMail,
   normalizeTelephone,
   flattenScales,
+  addSubpathPrefix,
+  stripSubpathPrefix,
 } from './Url';
 
 beforeEach(() => {
@@ -533,4 +535,64 @@ describe('Url', () => {
       });
     });
   });
+
+  describe('Subpath tests', () => {
+    beforeEach(() => {
+      settings.subpathPrefix = '/site';
+    });
+    describe('addSubpathPrefix', () => {
+      it('adds subpath prefix to internal URLs', () => {
+        expect(addSubpathPrefix('/some-page')).toBe('/site/some-page');
+        expect(addSubpathPrefix('/news/article')).toBe('/site/news/article');
+      });
+
+      it('does not add subpath prefix to URLs that already have it', () => {
+        expect(addSubpathPrefix('/site/some-page')).toBe('/site/some-page');
+      });
+
+      it('does not add subpath prefix to external URLs', () => {
+        expect(addSubpathPrefix('https://example.com/page')).toBe(
+          'https://example.com/page',
+        );
+      });
+
+      it('handles empty subpath prefix', () => {
+        settings.subpathPrefix = '';
+        expect(addSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+
+      it('handles undefined subpath prefix', () => {
+        settings.subpathPrefix = undefined;
+        expect(addSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+    });
+
+    describe('stripSubpathPrefix', () => {
+      beforeEach(() => {
+        settings.subpathPrefix = '/site';
+      });
+      it('removes subpath prefix from URLs that have it', () => {
+        expect(stripSubpathPrefix('/site/some-page')).toBe('/some-page');
+        expect(stripSubpathPrefix('/site/news/article')).toBe('/news/article');
+      });
+
+      it('leaves URLs unchanged if they do not have the prefix', () => {
+        expect(stripSubpathPrefix('/other/some-page')).toBe('/other/some-page');
+      });
+
+      it('handles the case where URL is exactly the subpath prefix', () => {
+        expect(stripSubpathPrefix('/site')).toBe('');
+      });
+
+      it('handles empty subpath prefix', () => {
+        settings.subpathPrefix = '';
+        expect(stripSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+
+      it('handles undefined subpath prefix', () => {
+        settings.subpathPrefix = undefined;
+        expect(stripSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+    });
+  });
 });

package/src/helpers/Utils/withSaveAsDraft.jsx

@@ -0,0 +1,241 @@
+import React from 'react';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import isEqual from 'react-fast-compare';
+import { toast } from 'react-toastify';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
+import { Button } from 'semantic-ui-react';
+import checkSVG from '@plone/volto/icons/check.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import { useIntl, defineMessages } from 'react-intl';
+import { useLocation } from 'react-router-dom';
+
+const messages = defineMessages({
+  autoSaveFound: {
+    id: 'Autosaved content found',
+    defaultMessage: 'Autosaved content found',
+  },
+  loadData: {
+    id: 'Do you want to restore your autosaved content?',
+    defaultMessage: 'Do you want to restore your autosaved content?',
+  },
+  loadExpiredData: {
+    id: "Another person edited this content, and it's currently displayed. Do you want to replace it with your autosaved content?",
+    defaultMessage:
+      "Another person edited this content, and it's currently displayed. Do you want to replace it with your autosaved content?",
+  },
+});
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+const mapSchemaToData = (schema, data) => {
+  if (!data) return {};
+  const dataKeys = Object.keys(data);
+  return Object.assign(
+    {},
+    ...Object.keys(schema.properties)
+      .filter((k) => dataKeys.includes(k))
+      .map((k) => ({ [k]: data[k] })),
+  );
+};
+
+// will be used to avoid using the first mount call if there is a second call
+let mountTime;
+
+const getFormId = (props, location) => {
+  const { type, pathname = location.pathname, isEditForm, schema } = props;
+  const id = isEditForm
+    ? ['form', type, pathname].join('-')
+    : type
+      ? ['form', pathname, type].join('-')
+      : schema?.properties?.comment
+        ? ['form', pathname, 'comment'].join('-')
+        : ['form', pathname].join('-');
+
+  return id;
+};
+
+/**
+ * Toast content that has OK and Cancel buttons
+ * @param {function} onUpdate
+ * @param {function} onClose
+ * @param {string} userMessage
+ * @returns
+ */
+const ConfirmAutoSave = ({ onUpdate, onClose, userMessage }) => {
+  const handleClickOK = () => onUpdate();
+  const handleClickCancel = () => onClose();
+
+  return (
+    <div className="toast-box-center">
+      <div>{userMessage}</div>
+      <Button
+        icon
+        aria-label="Unchecked"
+        className="save toast-box"
+        onClick={handleClickOK}
+      >
+        <Icon
+          name={checkSVG}
+          size="24px"
+          className="circled toast-box-blue-icon"
+        />
+      </Button>
+      <Button
+        icon
+        aria-label="Unchecked"
+        className="save toast-box"
+        onClick={handleClickCancel}
+      >
+        <Icon
+          name={clearSVG}
+          size="24px"
+          className="circled toast-box-blue-icon"
+        />
+      </Button>
+    </div>
+  );
+};
+
+/**
+ * Will remove localStorage item using debounce
+ * @param {string} id
+ * @param {number} timerForDeletion
+ */
+const clearStorage = (id, timerForDeletion) => {
+  timerForDeletion.current && clearTimeout(timerForDeletion.current);
+  timerForDeletion.current = setTimeout(() => {
+    localStorage.removeItem(id);
+  }, 500);
+};
+
+/**
+ * Stale if server date is more recent
+ * @param {string} serverModifiedDate
+ * @param {string} autoSaveDate
+ * @returns {Boolean}
+ */
+const autoSaveFoundIsStale = (serverModifiedDate, autoSaveDate) => {
+  const result = !serverModifiedDate
+    ? false
+    : new Date(serverModifiedDate) > new Date(autoSaveDate);
+  return result;
+};
+
+const draftApi = (id, schema, timer, timerForDeletion, intl) => ({
+  // - since Add Content Type will call componentDidMount twice, we will
+  // use the second call (using debounce)- the first will ignore any setState comands;
+  // - Delete local data only if user confirms Cancel
+  // - Will tell user that it has local stored data, even if its less recent than the server data
+  checkSavedDraft(state, updateCallback) {
+    if (!schema) return;
+    const saved = localStorage.getItem(id);
+
+    if (saved && Object.keys(JSON.parse(saved)).length > 1) {
+      const formData = mapSchemaToData(schema, state);
+      // includes autoSaveDate
+      const foundSavedData = JSON.parse(saved);
+      // includes only form data found in schema (no autoSaveDate)
+      const foundSavedSchemaData = mapSchemaToData(schema, foundSavedData);
+
+      if (!isEqual(formData, foundSavedSchemaData)) {
+        // eslint-disable-next-line no-alert
+        // cancel existing setTimeout to avoid using first call if
+        // successive calls are made
+        mountTime && clearTimeout(mountTime);
+        mountTime = setTimeout(() => {
+          toast.info(
+            <Toast
+              position="top-right"
+              info
+              autoClose={false}
+              title={intl.formatMessage(messages.autoSaveFound)}
+              content={
+                <ConfirmAutoSave
+                  onUpdate={() => updateCallback(foundSavedSchemaData)}
+                  onClose={() => clearStorage(id, timerForDeletion)}
+                  userMessage={
+                    autoSaveFoundIsStale(
+                      state.modified,
+                      foundSavedData.autoSaveDate,
+                    )
+                      ? intl.formatMessage(messages.loadExpiredData)
+                      : intl.formatMessage(messages.loadData)
+                  }
+                />
+              }
+            />,
+          );
+        }, 300);
+      }
+    }
+  },
+  // use debounce mode
+  onSaveDraft(state) {
+    if (!schema) return;
+    timer.current && clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      const formData = mapSchemaToData(schema, state);
+      const saved = localStorage.getItem(id);
+      const newData = JSON.parse(saved);
+
+      localStorage.setItem(
+        id,
+        JSON.stringify({
+          ...newData,
+          ...formData,
+          autoSaveDate: new Date(),
+        }),
+      );
+    }, 300);
+  },
+
+  onCancelDraft() {
+    if (!schema) return;
+    clearStorage(id, timerForDeletion);
+  },
+});
+
+export default function withSaveAsDraft(options) {
+  const { forwardRef } = options;
+
+  return (WrappedComponent) => {
+    function WithSaveAsDraft(props) {
+      const { schema } = props;
+      const intl = useIntl();
+      const location = useLocation();
+      const id = getFormId(props, location);
+      const timmeRef = React.useRef();
+      const timmerForDeletionRef = React.useRef();
+      const api = React.useMemo(
+        () => draftApi(id, schema, timmeRef, timmerForDeletionRef, intl),
+        [id, schema, timmeRef, timmerForDeletionRef, intl],
+      );
+
+      return (
+        <WrappedComponent
+          {...props}
+          {...api}
+          ref={forwardRef ? props.forwardedRef : null}
+        />
+      );
+    }
+
+    WithSaveAsDraft.displayName = `WithSaveAsDraft(${getDisplayName(
+      WrappedComponent,
+    )})`;
+
+    if (forwardRef) {
+      return hoistNonReactStatics(
+        React.forwardRef((props, ref) => (
+          <WithSaveAsDraft {...props} forwardedRef={ref} />
+        )),
+        WrappedComponent,
+      );
+    }
+
+    return hoistNonReactStatics(WithSaveAsDraft, WrappedComponent);
+  };
+}

package/src/hooks/user/useUser.js

@@ -12,7 +12,7 @@ const useUser = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!user?.id && users?.get.loading === false) {
+    if (userId && !user?.id && users?.get.loading === false) {
       dispatch(getUser(userId));
     }
   }, [dispatch, userId, user, users?.get.loading]);

package/src/middleware/Api.test.js

@@ -25,6 +25,8 @@ describe('api middleware helpers', () => {
     const result = addExpandersToPath(
       '/de/mypage?expand=translations',
       GET_CONTENT,
+      false,
+      true,
     );
     expect(result).toEqual('/de/mypage?expand=translations,mycustomexpander');
   });
@@ -183,6 +185,8 @@ describe('api middleware helpers', () => {
     const result = addExpandersToPath(
       '/de/mypage/@navigation?expand=translations&expand.navigation.depth=3&someotherquery=1&someotherquery=2',
       GET_CONTENT,
+      false,
+      true,
     );
     // No need to stringify
     expect(result).toEqual(

package/src/middleware/api.js

@@ -35,7 +35,7 @@ let socket = null;
  *
  * - It should add the expanders set in the config settings
  * - It should preserve any query if present
- * - It should preserve (and add) any expand parameter (if present) e.g. translations
+ * - It should preserve (and add) any expand parameter (if present)
  * - It should take use the correct codification for arrays in querystring (repeated parameter for each member of the array)
  *
  * @function addExpandersToPath
@@ -43,7 +43,7 @@ let socket = null;
  * @param {*} type The action type
  * @returns {string} The url/path with the configured expanders added to the query string
  */
-export function addExpandersToPath(path, type, isAnonymous) {
+export function addExpandersToPath(path, type, isAnonymous, isMultilingual) {
   const { settings } = config;
   const { apiExpanders = [] } = settings;
 
@@ -58,7 +58,14 @@ export function addExpandersToPath(path, type, isAnonymous) {
 
   const expandMerge = compact(
     union([expand, ...flatten(expandersFromConfig)]),
-  ).filter((item) => !(item === 'types' && isAnonymous)); // Remove types expander if isAnonymous
+  ).filter(
+    // Remove types for anonymous, translations unless multilingual
+    (item) =>
+      !(
+        (item === 'types' && isAnonymous) ||
+        (item === 'translations' && !isMultilingual)
+      ),
+  );
 
   const stringifiedExpand = qs.stringify(
     { expand: expandMerge },
@@ -128,6 +135,8 @@ function sendOnSocket(request) {
  * @param {Object} api Api object.
  * @returns {Promise} Action promise.
  */
+let isHydrating = __CLIENT__ ? true : false;
+
 const apiMiddlewareFactory =
   (api) =>
   ({ dispatch, getState }) =>
@@ -135,14 +144,17 @@ const apiMiddlewareFactory =
   (action) => {
     const { settings } = config;
 
-    const token = getState().userSession.token;
-    let uploadedFiles = getState().content.uploadedFiles;
+    const state = getState();
+    const token = state.userSession.token;
+    let uploadedFiles = state.content.uploadedFiles;
+    const isMultilingual = state.site.data.features?.multilingual;
     let isAnonymous = true;
     if (token) {
       const tokenExpiration = jwtDecode(token).exp;
       const currentTime = new Date().getTime() / 1000;
       isAnonymous = !token || currentTime > tokenExpiration;
     }
+    const hasExistingError = state.content.get?.error;
 
     if (typeof action === 'function') {
       return action(dispatch, getState);
@@ -164,14 +176,24 @@ const apiMiddlewareFactory =
             request.map((item) =>
               sendOnSocket({
                 ...item,
-                path: addExpandersToPath(item.path, type, isAnonymous),
+                path: addExpandersToPath(
+                  item.path,
+                  type,
+                  isAnonymous,
+                  isMultilingual,
+                ),
                 id: type,
               }),
             ),
           )
         : sendOnSocket({
             ...request,
-            path: addExpandersToPath(request.path, type, isAnonymous),
+            path: addExpandersToPath(
+              request.path,
+              type,
+              isAnonymous,
+              isMultilingual,
+            ),
             id: type,
           });
     } else {
@@ -180,7 +202,12 @@ const apiMiddlewareFactory =
           ? request.reduce((prevPromise, item) => {
               return prevPromise.then((acc) => {
                 return api[item.op](
-                  addExpandersToPath(item.path, type, isAnonymous),
+                  addExpandersToPath(
+                    item.path,
+                    type,
+                    isAnonymous,
+                    isMultilingual,
+                  ),
                   {
                     data: item.data,
                     type: item.type,
@@ -201,28 +228,42 @@ const apiMiddlewareFactory =
             }, 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[item.op](
+                  addExpandersToPath(
+                    item.path,
+                    type,
+                    isAnonymous,
+                    isMultilingual,
                   ),
-                  attach: item.attach,
-                }),
+                  {
+                    data: item.data,
+                    type: item.type,
+                    headers: item.headers,
+                    params: request.params,
+                    checkUrl: settings.actions_raising_api_errors.includes(
+                      action.type,
+                    ),
+                    attach: item.attach,
+                  },
+                ),
               ),
             )
-        : 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),
-            attach: request.attach,
-          });
+        : api[request.op](
+            addExpandersToPath(request.path, type, isAnonymous, isMultilingual),
+            {
+              data: request.data,
+              type: request.type,
+              headers: request.headers,
+              params: request.params,
+              checkUrl: settings.actions_raising_api_errors.includes(
+                action.type,
+              ),
+              attach: request.attach,
+            },
+          );
       actionPromise.then(
         (result) => {
+          isHydrating = false;
           if (uploadedFiles !== 0) {
             dispatch(updateUploadedFiles(0));
           }
@@ -298,8 +339,16 @@ const apiMiddlewareFactory =
           }
         },
         (error) => {
+          // Make sure an error during hydration
+          // (for example when serving an archived page)
+          // doesn't hide the SSR content.
+          if (isHydrating && !hasExistingError) {
+            isHydrating = false;
+            return;
+          }
+
           // Only SSR can set ECONNREFUSED
-          if (error.code === 'ECONNREFUSED') {
+          if (error?.code === 'ECONNREFUSED') {
             next({
               ...rest,
               error,
@@ -310,7 +359,7 @@ const apiMiddlewareFactory =
           }
 
           // Response error is marked crossDomain if CORS error happen
-          else if (error.crossDomain) {
+          else if (error?.crossDomain) {
             next({
               ...rest,
               error,
@@ -361,7 +410,7 @@ const apiMiddlewareFactory =
                 ...rest,
                 error,
                 statusCode: error.response,
-                message: error.response.body.message,
+                message: error.response?.body?.message,
                 connectionRefused: false,
                 type: SET_APIERROR,
               });

package/src/middleware/storeProtectLoadUtils.test.js

@@ -445,9 +445,9 @@ describe('storeProtectLoadUtils', () => {
           isCounting: false,
         });
       };
-      test('pending', expectPass({ type: 'ANY_PENDING' }), 2);
-      test('success', expectPass({ type: 'ANY_SUCCESS' }), 2);
-      test('failure', expectPass({ type: 'ANY_FAIL' }), 2);
+      test('pending', expectPass({ type: 'ANY_PENDING' }, 2));
+      test('success', expectPass({ type: 'ANY_SUCCESS' }, 2));
+      test('failure', expectPass({ type: 'ANY_FAIL' }, 2));
     });
     describe('counting', () => {
       const expectCount = (action, from, to) => () => {

package/src/reducers/content/content.js

@@ -3,11 +3,10 @@
  * @module reducers/content/content
  */
 
-import map from 'lodash/map';
-import mapKeys from 'lodash/mapKeys';
 import omit from 'lodash/omit';
 
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { flattenStaticBehaviors } from '@plone/volto/helpers/Content/Content';
 
 import {
   CREATE_CONTENT,
@@ -131,14 +130,7 @@ export default function content(state = initialState, action = {}) {
             },
           };
     case `${CREATE_CONTENT}_SUCCESS`:
-      if (result['@static_behaviors']) {
-        map(result['@static_behaviors'], (behavior) => {
-          result = {
-            ...omit(result, behavior),
-            ...mapKeys(result[behavior], (value, key) => `${behavior}.${key}`),
-          };
-        });
-      }
+      result = flattenStaticBehaviors(result);
       const data = action.subrequest
         ? Array.isArray(result)
           ? result.map((item) => ({
@@ -188,14 +180,7 @@ export default function content(state = initialState, action = {}) {
             },
           };
     case `${GET_CONTENT}_SUCCESS`:
-      if (result['@static_behaviors']) {
-        map(result['@static_behaviors'], (behavior) => {
-          result = {
-            ...omit(result, behavior),
-            ...mapKeys(result[behavior], (value, key) => `${behavior}.${key}`),
-          };
-        });
-      }
+      result = flattenStaticBehaviors(result);
 
       const transforms = config.getUtilities({
         type: 'transform',