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

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(
@@ -282,4 +286,51 @@ describe('api middleware helpers', () => {
       '/de/mypage?expand=navigation&expand.navigation.coolness=1&expand.navigation.depth=3&someotherquery=1&someotherquery=2',
     );
   });
+
+  it('addExpandersToPath - inherit expander merged using querystring as a function', () => {
+    config.settings.apiExpanders = [
+      {
+        match: '/',
+        GET_CONTENT: ['navigation'],
+        querystring: {
+          'expand.navigation.depth': 3,
+          'expand.navigation.coolness': 1,
+        },
+      },
+      {
+        match: '/',
+        GET_CONTENT: ['inherit'],
+        querystring: {
+          'expand.inherit.behaviors':
+            'voltolighttheme.header,voltolighttheme.theme,voltolighttheme.footer',
+        },
+      },
+      {
+        match: '/',
+        GET_CONTENT: ['inherit'],
+        querystring: (config, querystring) => {
+          if (querystring['expand.inherit.behaviors']) {
+            return {
+              'expand.inherit.behaviors': querystring[
+                'expand.inherit.behaviors'
+              ].concat(',', 'plonegovbr.socialmedia.settings'),
+            };
+          } else {
+            return {
+              'expand.inherit.behaviors': 'plonegovbr.socialmedia.settings',
+            };
+          }
+        },
+      },
+    ];
+
+    const result = addExpandersToPath(
+      '/de/mypage?someotherquery=1&someotherquery=2',
+      GET_CONTENT,
+    );
+
+    expect(result).toEqual(
+      '/de/mypage?expand=navigation,inherit&expand.inherit.behaviors=voltolighttheme.header,voltolighttheme.theme,voltolighttheme.footer,plonegovbr.socialmedia.settings&expand.navigation.coolness=1&expand.navigation.depth=3&someotherquery=1&someotherquery=2',
+    );
+  });
 });

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 },
@@ -75,7 +82,7 @@ export function addExpandersToPath(path, type, isAnonymous) {
       // The querystring accepts being a function to be able to take other
       // config parameters
       if (typeof querystring === 'function') {
-        querystring = querystring(config);
+        querystring = querystring(config, acc);
       }
       return { ...acc, ...querystring };
     }, {});
@@ -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,
               });