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

package/src/helpers/AuthToken/AuthToken.test.js

@@ -1,60 +1,94 @@
 import Cookies from 'universal-cookie';
 import jwt from 'jsonwebtoken';
 import jwtDecode from 'jwt-decode';
-
 import { getAuthToken, persistAuthToken } from './AuthToken';
 
-jest.mock('universal-cookie', () => {
+vi.mock('universal-cookie', () => {
   const mCookie = {
-    get: jest
-      .fn(() => require('jsonwebtoken').sign({ exp: 1 }, 'secret')) // eslint-disable-line global-require
-      .mockImplementationOnce(() => null), // the first call is for anonymous, no auth_token cookie
-    remove: jest.fn(),
-    set: jest.fn(),
+    get: vi
+      .fn(() => jwt.sign({ exp: 1 }, 'secret'))
+      .mockImplementationOnce(() => null),
+    remove: vi.fn(),
+    set: vi.fn(),
+  };
+  return {
+    default: vi.fn(() => mCookie),
   };
-  return jest.fn(() => mCookie);
 });
 
 describe('AuthToken', () => {
+  let cookies;
+  let mockStore;
+
+  beforeEach(() => {
+    cookies = new Cookies();
+    vi.clearAllMocks();
+
+    mockStore = {
+      subscribe: vi.fn(),
+      dispatch: vi.fn(),
+      getState: vi.fn(() => ({
+        userSession: {
+          token: null,
+        },
+        router: {
+          location: {
+            pathname: '/current-path',
+          },
+        },
+      })),
+    };
+  });
+
   describe('anonymousAuthToken', () => {
     it('avoid unnecessary removing auth token', () => {
-      const cookies = new Cookies();
       const store = {
-        subscribe: jest.fn(),
-        getState: jest.fn(() => ({
+        ...mockStore,
+        getState: vi.fn(() => ({
           userSession: {
             token: null,
           },
+          router: {
+            location: {
+              pathname: '/current-path',
+            },
+          },
         })),
       };
+
       persistAuthToken(store);
-      expect(cookies.remove).not.toBeCalledWith('auth_token', { path: '/' });
+      expect(cookies.remove).not.toHaveBeenCalledWith('auth_token', {
+        path: '/',
+      });
     });
   });
 
   describe('getAuthToken', () => {
     it('can get the auth token', () => {
-      const cookies = new Cookies();
       getAuthToken();
-      expect(cookies.get).toBeCalledWith('auth_token');
+      expect(cookies.get).toHaveBeenCalledWith('auth_token');
     });
   });
 
   describe('persistAuthToken', () => {
     it('can set a new auth token', () => {
-      const cookies = new Cookies();
       const store = {
-        subscribe: jest.fn(),
-        getState: jest.fn(() => ({
+        ...mockStore,
+        getState: vi.fn(() => ({
           userSession: {
             token: jwt.sign({ exp: 2 }, 'secret'),
           },
+          router: {
+            location: {
+              pathname: '/current-path',
+            },
+          },
         })),
       };
       const { token } = store.getState().userSession;
 
       persistAuthToken(store);
-      expect(cookies.set).toBeCalledWith('auth_token', token, {
+      expect(cookies.set).toHaveBeenCalledWith('auth_token', token, {
         path: '/',
         expires: new Date(jwtDecode(token).exp * 1000),
         secure: false,
@@ -62,18 +96,22 @@ describe('AuthToken', () => {
     });
 
     it('can remove an auth token', () => {
-      const cookies = new Cookies();
       const store = {
-        subscribe: jest.fn(),
-        getState: jest.fn(() => ({
+        ...mockStore,
+        getState: vi.fn(() => ({
           userSession: {
             token: null,
           },
+          router: {
+            location: {
+              pathname: '/current-path',
+            },
+          },
         })),
       };
 
       persistAuthToken(store);
-      expect(cookies.remove).toBeCalledWith('auth_token', { path: '/' });
+      expect(cookies.remove).toHaveBeenCalledWith('auth_token', { path: '/' });
     });
   });
 });

package/src/helpers/Blocks/Blocks.test.js

@@ -572,7 +572,7 @@ describe('Blocks', () => {
     it('initialValue with intl', () => {
       // Mock intl with formatMessage function
       const intl = {
-        formatMessage: jest.fn(({ id }) => id),
+        formatMessage: vi.fn(({ id }) => id),
       };
 
       const messages = {

package/src/helpers/Html/Html.test.jsx

@@ -3,36 +3,40 @@ import renderer from 'react-test-renderer';
 import config from '@plone/volto/registry';
 import Html from './Html';
 
-jest.mock('../Helmet/Helmet', () => ({
-  rewind: () => ({
-    base: {
-      toComponent: () => '',
-    },
-    title: {
-      toComponent: () => '',
-    },
-    meta: {
-      toComponent: () => '',
-    },
-    link: {
-      toComponent: () => '',
-    },
-    script: {
-      toComponent: () => '',
-    },
-    style: {
-      toComponent: () => '',
-    },
-    htmlAttributes: {
-      toComponent: () => ({
-        lang: 'en',
-      }),
-    },
-  }),
+vi.mock('../Helmet/Helmet', () => ({
+  default: {
+    rewind: () => ({
+      base: {
+        toComponent: () => '',
+      },
+      title: {
+        toComponent: () => '',
+      },
+      meta: {
+        toComponent: () => '',
+      },
+      link: {
+        toComponent: () => '',
+      },
+      script: {
+        toComponent: () => '',
+      },
+      style: {
+        toComponent: () => '',
+      },
+      htmlAttributes: {
+        toComponent: () => ({
+          lang: 'en',
+        }),
+      },
+    }),
+  },
 }));
 
-jest.mock('../BodyClass/BodyClass', () => ({
-  rewind: () => ['class1', 'class2'],
+vi.mock('../BodyClass/BodyClass', () => ({
+  default: {
+    rewind: () => ['class1', 'class2'],
+  },
 }));
 
 config.settings = {};

package/src/helpers/Loadable/__mocks__/Loadable.jsx

@@ -1,4 +1,19 @@
-import React from 'react';
+/* TODO: When the Volto Team removes Jest configuration support from Volto core, update this file with the Vitest version of the mock.
+Then, in the tests, we need to replace:
+
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
+with the following:
+
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+
+Finally, remove this comment.
+*/
+
 import config from '@plone/volto/registry';
 const loadables = config.settings.loadables;
 

package/src/helpers/Loadable/__mocks__/Loadable.vitest.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import config from '@plone/volto/registry';
+const loadables = config.settings.loadables;
+
+let mockAllLoadables = Object.create(null);
+
+export const __setLoadables = async () => {
+  if (Object.keys(mockAllLoadables).length > 0) return;
+  const resolved = await Promise.all(
+    Object.keys(loadables).map(async (n) => {
+      const lib = await Promise.resolve(loadables[n].load());
+      return [n, { current: lib }];
+    }),
+  );
+  resolved.forEach(([name, { current }]) => {
+    mockAllLoadables[name] = current;
+  });
+};
+
+// TODO: filter mockAllLoadables
+export const injectLazyLibs = vi.fn().mockImplementation(function ([
+  libraries,
+]) {
+  return vi.fn((WrappedComponent) =>
+    vi.fn((props) => {
+      return <WrappedComponent {...props} {...mockAllLoadables} />;
+    }),
+  );
+});
+
+export const preloadLazyLibs = vi.fn().mockImplementation(function ([
+  libraries,
+]) {
+  return vi.fn((WrappedComponent) =>
+    vi.fn((props) => {
+      return <WrappedComponent {...props} />;
+    }),
+  );
+});

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/middleware/Api.test.js

@@ -282,4 +282,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

@@ -75,7 +75,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 };
     }, {});