@plone/volto 18.0.0-alpha.8 → 18.0.0

package/src/middleware/api.js

@@ -17,7 +17,7 @@ import {
   RESET_APIERROR,
   SET_APIERROR,
 } from '@plone/volto/constants/ActionTypes';
-import { changeLanguage } from '@plone/volto/actions';
+import { changeLanguage, updateUploadedFiles } from '@plone/volto/actions';
 import {
   toGettextLang,
   toReactIntlLang,
@@ -133,6 +133,7 @@ const apiMiddlewareFactory =
     const { settings } = config;
 
     const token = getState().userSession.token;
+    let uploadedFiles = getState().content.uploadedFiles;
     let isAnonymous = true;
     if (token) {
       const tokenExpiration = jwtDecode(token).exp;
@@ -154,7 +155,6 @@ const apiMiddlewareFactory =
     }
 
     next({ ...rest, type: `${type}_PENDING` });
-
     if (socket) {
       actionPromise = Array.isArray(request)
         ? Promise.all(
@@ -186,8 +186,12 @@ const apiMiddlewareFactory =
                     checkUrl: settings.actions_raising_api_errors.includes(
                       action.type,
                     ),
+                    attach: item.attach,
                   },
                 ).then((reqres) => {
+                  if (action.subrequest === 'batch-upload') {
+                    dispatch(updateUploadedFiles(++uploadedFiles));
+                  }
                   return [...acc, reqres];
                 });
               });
@@ -202,6 +206,7 @@ const apiMiddlewareFactory =
                   checkUrl: settings.actions_raising_api_errors.includes(
                     action.type,
                   ),
+                  attach: item.attach,
                 }),
               ),
             )
@@ -211,11 +216,17 @@ const apiMiddlewareFactory =
             headers: request.headers,
             params: request.params,
             checkUrl: settings.actions_raising_api_errors.includes(action.type),
+            attach: request.attach,
           });
       actionPromise.then(
         (result) => {
+          if (uploadedFiles !== 0) {
+            dispatch(updateUploadedFiles(0));
+          }
+
           const { settings } = config;
-          if (getState().apierror.connectionRefused) {
+          const state = getState();
+          if (state.apierror.connectionRefused) {
             next({
               ...rest,
               type: RESET_APIERROR,
@@ -225,18 +236,19 @@ const apiMiddlewareFactory =
             const lang = result?.language?.token;
             if (
               lang &&
-              getState().intl.locale !== toReactIntlLang(lang) &&
+              state.intl.locale !== toReactIntlLang(lang) &&
               !subrequest &&
               config.settings.supportedLanguages.includes(lang)
             ) {
               const langFileName = toGettextLang(lang);
-              import('@root/../locales/' + langFileName + '.json').then(
-                (locale) => {
-                  dispatch(changeLanguage(lang, locale.default));
-                },
-              );
+              import(
+                /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
+              ).then((locale) => {
+                dispatch(changeLanguage(lang, locale.default));
+              });
             }
           }
+
           if (type === LOGIN && settings.websockets) {
             const cookies = new Cookies();
             cookies.set(

package/src/middleware/index.js

@@ -11,3 +11,4 @@ export {
   protectLoadEnd,
   loadProtector,
 } from '@plone/volto/middleware/storeProtectLoadUtils';
+export { default as userSessionReset } from './userSessionReset';

package/src/middleware/userSessionReset.js

@@ -0,0 +1,46 @@
+import Cookies from 'universal-cookie';
+
+const LOCATION_CHANGE = '@@router/LOCATION_CHANGE';
+
+const userSessionReset =
+  ({ dispatch, getState }) =>
+  (next) =>
+  (action) => {
+    if (typeof action === 'function') {
+      return next(action);
+    }
+
+    switch (action.type) {
+      case LOCATION_CHANGE:
+        if (action.request?.subrequest || __SERVER__) {
+          return next(action);
+        }
+
+        const cookies = new Cookies();
+        const token = cookies.get('auth_token');
+        const state = getState();
+
+        if (token && !state.userSession?.token) {
+          const loginAction = {
+            type: 'LOGIN_SUCCESS',
+            result: {
+              token,
+            },
+          };
+          dispatch(loginAction);
+        } else if (!token && state.userSession?.token) {
+          const logoutAction = {
+            type: 'LOGOUT_SUCCESS',
+            result: {
+              token,
+            },
+          };
+          dispatch(logoutAction);
+        }
+        return next(action);
+      default:
+        return next(action);
+    }
+  };
+
+export default userSessionReset;

package/src/reducers/content/content.js

@@ -17,8 +17,11 @@ import {
   RESET_CONTENT,
   UPDATE_CONTENT,
   UPDATECOLUMNS_CONTENT,
+  UPDATE_UPLOADED_FILES,
 } from '@plone/volto/constants/ActionTypes';
 
+import config from '@plone/volto/registry';
+
 const initialState = {
   create: {
     loaded: false,
@@ -62,6 +65,7 @@ const initialState = {
   },
   data: null,
   subrequests: {},
+  uploadedFiles: 0,
 };
 
 /**
@@ -190,6 +194,16 @@ export default function content(state = initialState, action = {}) {
           };
         });
       }
+
+      const transforms = config.getUtilities({
+        type: 'transform',
+        dependencies: { reducer: 'content' },
+      });
+
+      transforms.forEach(({ method }) => {
+        method(result);
+      });
+
       return action.subrequest
         ? {
             ...state,
@@ -350,6 +364,11 @@ export default function content(state = initialState, action = {}) {
             },
             data: null,
           };
+    case UPDATE_UPLOADED_FILES:
+      return {
+        ...state,
+        uploadedFiles: action.uploadedFiles,
+      };
     default:
       return state;
   }

package/src/reducers/content/content.test.js

@@ -8,6 +8,7 @@ import {
   UPDATE_CONTENT,
   LOCK_CONTENT,
   UNLOCK_CONTENT,
+  UPDATE_UPLOADED_FILES,
 } from '@plone/volto/constants/ActionTypes';
 
 const { settings } = config;
@@ -57,6 +58,7 @@ describe('Content reducer', () => {
         loading: false,
         error: null,
       },
+      uploadedFiles: 0,
     });
   });
 
@@ -579,4 +581,15 @@ describe('Content reducer', () => {
       },
     });
   });
+
+  it('should handle UPDATE_UPLOADED_FILES', () => {
+    expect(
+      content(undefined, {
+        type: UPDATE_UPLOADED_FILES,
+        uploadedFiles: 5,
+      }),
+    ).toMatchObject({
+      uploadedFiles: 5,
+    });
+  });
 });

package/src/reducers/form/form.js

@@ -4,7 +4,20 @@
  * @module reducers/form/form
  */
 
-const initialState = {};
+import {
+  SET_FORM_DATA,
+  SET_UI_STATE,
+} from '@plone/volto/constants/ActionTypes';
+
+const initialState = {
+  global: {},
+  ui: {
+    selected: null,
+    multiSelected: [],
+    gridSelected: null,
+    hovered: null,
+  },
+};
 
 /**
  * Form reducer.
@@ -12,6 +25,22 @@ const initialState = {};
  * @param {Object} state Current state.
  * @returns {Object} New state.
  */
-export default function form(state = initialState) {
-  return state;
+export default function form(state = initialState, action = {}) {
+  switch (action.type) {
+    case SET_FORM_DATA:
+      return {
+        ...state,
+        global: action.data,
+      };
+    case SET_UI_STATE:
+      return {
+        ...state,
+        ui: {
+          ...state.ui,
+          ...action.ui,
+        },
+      };
+    default:
+      return state;
+  }
 }

package/src/reducers/form/form.test.js

@@ -1,7 +1,33 @@
 import form from './form';
+import { SET_FORM_DATA } from '@plone/volto/constants/ActionTypes';
 
 describe('Form reducer', () => {
   it('should return the initial state', () => {
-    expect(form()).toEqual({});
+    expect(form()).toEqual({
+      global: {},
+      ui: {
+        gridSelected: null,
+        hovered: null,
+        multiSelected: [],
+        selected: null,
+      },
+    });
+  });
+
+  it('should handle SET_FORM_DATA', () => {
+    expect(
+      form(undefined, {
+        type: SET_FORM_DATA,
+        data: { foo: 'bar' },
+      }),
+    ).toEqual({
+      global: { foo: 'bar' },
+      ui: {
+        gridSelected: null,
+        hovered: null,
+        multiSelected: [],
+        selected: null,
+      },
+    });
   });
 });

package/src/reducers/navigation/navigation.js

@@ -31,9 +31,8 @@ const initialState = {
  */
 function getRecursiveItems(items) {
   return map(items, (item) => ({
-    title: item.title,
-    description: item.description,
     url: flattenToAppURL(item['@id']),
+    ...item,
     ...(item.items && { items: getRecursiveItems(item.items) }),
   }));
 }

package/src/reducers/navigation/navigation.test.js

@@ -49,6 +49,7 @@ describe('Navigation reducer', () => {
       error: null,
       items: [
         {
+          '@id': 'http://localhost:8080/Plone/front-page',
           title: 'Welcome to Plone!',
           description:
             'Congratulations! You have successfully installed Plone.',
@@ -91,17 +92,20 @@ describe('Navigation reducer', () => {
       error: null,
       items: [
         {
+          '@id': 'http://localhost:8080/Plone/front-page',
           title: 'Welcome to Plone!',
           description:
             'Congratulations! You have successfully installed Plone.',
           url: '/front-page',
         },
         {
+          '@id': 'http://localhost:8080/Plone/folder1',
           title: 'Folder1',
           description: 'Folder description',
           url: '/folder1',
           items: [
             {
+              '@id': 'http://localhost:8080/Plone/folderinfolder1',
               title: 'FolderInFolder1',
               description: 'Sub-folder description',
               url: '/folderinfolder1',
@@ -162,6 +166,7 @@ describe('Navigation reducer (NAVIGATION)GET_CONTENT', () => {
       error: null,
       items: [
         {
+          '@id': 'http://localhost:8080/Plone/front-page',
           title: 'Welcome to Plone!',
           description:
             'Congratulations! You have successfully installed Plone.',
@@ -192,6 +197,7 @@ describe('Navigation reducer (NAVIGATION)GET_CONTENT', () => {
       error: null,
       items: [
         {
+          '@id': 'http://localhost:8080/Plone/front-page',
           title: 'Welcome to Plone!',
           description:
             'Congratulations! You have successfully installed Plone.',

package/src/reducers/sidebar/sidebar.js

@@ -3,10 +3,19 @@
  * @module reducers/sidebar/sidebar
  */
 
-import { SET_SIDEBAR_TAB } from '@plone/volto/constants/ActionTypes';
+import { union } from 'lodash';
+
+import {
+  SET_METADATA_FIELDSETS,
+  SET_METADATA_FOCUS,
+  RESET_METADATA_FOCUS,
+  SET_SIDEBAR_TAB,
+} from '@plone/volto/constants/ActionTypes';
 
 const initialState = {
   tab: 0,
+  metadataFieldsets: [],
+  metadataFieldFocus: '',
 };
 
 /**
@@ -18,6 +27,22 @@ const initialState = {
  */
 export default function sidebar(state = initialState, action = {}) {
   switch (action.type) {
+    case SET_METADATA_FIELDSETS:
+      return {
+        ...state,
+        metadataFieldsets: action.fieldsets,
+      };
+    case SET_METADATA_FOCUS:
+      return {
+        ...state,
+        metadataFieldsets: union(state.metadataFieldsets, [action.fieldset]),
+        metadataFieldFocus: action.field,
+      };
+    case RESET_METADATA_FOCUS:
+      return {
+        ...state,
+        metadataFieldFocus: '',
+      };
     case SET_SIDEBAR_TAB:
       return {
         ...state,

package/src/reducers/sidebar/sidebar.test.js

@@ -1,13 +1,60 @@
 import sidebar from './sidebar';
-import { SET_SIDEBAR_TAB } from '@plone/volto/constants/ActionTypes';
+import {
+  SET_METADATA_FIELDSETS,
+  SET_METADATA_FOCUS,
+  RESET_METADATA_FOCUS,
+  SET_SIDEBAR_TAB,
+} from '@plone/volto/constants/ActionTypes';
 
 describe('Sidebar reducer', () => {
   it('should return the initial state', () => {
     expect(sidebar()).toEqual({
+      metadataFieldFocus: '',
+      metadataFieldsets: [],
       tab: 0,
     });
   });
 
+  it('should handle SET_METADATA_FIELDSETS', () => {
+    expect(
+      sidebar(undefined, {
+        type: SET_METADATA_FIELDSETS,
+        fieldsets: ['default'],
+      }),
+    ).toEqual({
+      metadataFieldFocus: '',
+      metadataFieldsets: ['default'],
+      tab: 0,
+    });
+  });
+
+  it('should handle SET_METADATA_FOCUS', () => {
+    expect(
+      sidebar(undefined, {
+        type: SET_METADATA_FOCUS,
+        fieldset: 'default',
+        field: 'title',
+      }),
+    ).toEqual({
+      metadataFieldFocus: 'title',
+      metadataFieldsets: ['default'],
+      tab: 0,
+    });
+  });
+
+  it('should handle RESET_METADATA_FOCUS', () => {
+    expect(
+      sidebar(
+        { metadataFieldFocus: 'title' },
+        {
+          type: RESET_METADATA_FOCUS,
+        },
+      ),
+    ).toEqual({
+      metadataFieldFocus: '',
+    });
+  });
+
   it('should handle SET_SIDEBAR_TAB', () => {
     expect(
       sidebar(undefined, {
@@ -15,6 +62,8 @@ describe('Sidebar reducer', () => {
         index: 1,
       }),
     ).toEqual({
+      metadataFieldFocus: '',
+      metadataFieldsets: [],
       tab: 1,
     });
   });

package/src/routes.js

@@ -6,19 +6,10 @@ import debug from 'debug';
 import { compact } from 'lodash';
 import {
   Add,
-  AddonsControlpanel,
   Aliases,
   ChangePassword,
   ContactForm,
-  Contents,
-  ContentType,
-  ContentTypeLayout,
-  ContentTypeSchema,
-  ContentTypes,
-  Controlpanel,
-  Controlpanels,
   CreateTranslation,
-  DatabaseInformation,
   Delete,
   Diff,
   Edit,
@@ -27,28 +18,39 @@ import {
   Login,
   Logout,
   ManageTranslations,
-  ModerateComments,
   NotFound,
   PasswordReset,
-  Relations,
   Register,
-  Rules,
   RequestPasswordReset,
   Search,
   Sharing,
   Sitemap,
-  AliasesControlpanel,
-  UndoControlpanel,
-  UsersControlpanel,
-  UserGroupMembershipControlPanel,
-  GroupsControlpanel,
+  PersonalInformation,
+} from '@plone/volto/components';
+import { Contents } from '@plone/volto/components/manage/Contents';
+import { Rules } from '@plone/volto/components/manage/Rules';
+import {
   RulesControlpanel,
   AddRuleControlpanel,
   EditRuleControlpanel,
   ConfigureRuleControlpanel,
+  UsersControlpanel,
+  UserGroupMembershipControlPanel,
+  GroupsControlpanel,
+  AddonsControlpanel,
+  AliasesControlpanel,
+  ContentType,
+  ContentTypeLayout,
+  ContentTypeSchema,
+  ContentTypes,
+  Controlpanel,
+  Controlpanels,
+  DatabaseInformation,
+  ModerateComments,
+  RelationsControlpanel,
+  UndoControlpanel,
   UpgradeControlPanel,
-  PersonalInformation,
-} from '@plone/volto/components';
+} from '@plone/volto/components/manage/Controlpanels';
 
 // Deliberatelly use of absolute path of these components, since we do not want them
 // in the components/index.js file.
@@ -228,7 +230,7 @@ export const defaultRoutes = [
   },
   {
     path: '/controlpanel/relations',
-    component: Relations,
+    component: RelationsControlpanel,
   },
   {
     path: '/controlpanel/:id',

package/src/server.jsx

@@ -36,7 +36,7 @@ import userSession from '@plone/volto/reducers/userSession/userSession';
 
 import ErrorPage from '@plone/volto/error';
 
-import languages from '@plone/volto/constants/Languages';
+import languages from '@plone/volto/constants/Languages.cjs';
 
 import configureStore from '@plone/volto/store';
 import { ReduxAsyncConnect, loadOnServer } from './helpers/AsyncConnect';
@@ -46,7 +46,9 @@ let locales = {};
 if (config.settings) {
   config.settings.supportedLanguages.forEach((lang) => {
     const langFileName = toGettextLang(lang);
-    import('@root/../locales/' + langFileName + '.json').then((locale) => {
+    import(
+      /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
+    ).then((locale) => {
       locales = { ...locales, [toReactIntlLang(lang)]: locale.default };
     });
   });
@@ -272,50 +274,48 @@ server.get('/*', (req, res) => {
         });
       }
 
+      const sendHtmlResponse = (
+        res,
+        statusCode,
+        extractor,
+        markup,
+        store,
+        req,
+        config,
+      ) => {
+        res.status(statusCode).send(
+          `<!doctype html>
+        ${renderToString(
+          <Html
+            extractor={extractor}
+            markup={markup}
+            store={store}
+            criticalCss={readCriticalCss(req)}
+            apiPath={res.locals.detectedHost || config.settings.apiPath}
+            publicURL={res.locals.detectedHost || config.settings.publicURL}
+          />,
+        )}
+      `,
+        );
+      };
+
       if (context.url) {
         res.redirect(flattenToAppURL(context.url));
       } else if (context.error_code) {
         res.set({
           'Cache-Control': 'no-cache',
         });
-
-        res.status(context.error_code).send(
-          `<!doctype html>
-              ${renderToString(
-                <Html
-                  extractor={extractor}
-                  markup={markup}
-                  store={store}
-                  extractScripts={
-                    config.settings.serverConfig.extractScripts?.errorPages ||
-                    process.env.NODE_ENV !== 'production'
-                  }
-                  criticalCss={readCriticalCss(req)}
-                  apiPath={res.locals.detectedHost || config.settings.apiPath}
-                  publicURL={
-                    res.locals.detectedHost || config.settings.publicURL
-                  }
-                />,
-              )}
-            `,
+        sendHtmlResponse(
+          res,
+          context.error_code,
+          extractor,
+          markup,
+          store,
+          req,
+          config,
         );
       } else {
-        res.status(200).send(
-          `<!doctype html>
-              ${renderToString(
-                <Html
-                  extractor={extractor}
-                  markup={markup}
-                  store={store}
-                  criticalCss={readCriticalCss(req)}
-                  apiPath={res.locals.detectedHost || config.settings.apiPath}
-                  publicURL={
-                    res.locals.detectedHost || config.settings.publicURL
-                  }
-                />,
-              )}
-            `,
-        );
+        sendHtmlResponse(res, 200, extractor, markup, store, req, config);
       }
     }, errorHandler)
     .catch(errorHandler);

package/src/start-client.jsx

@@ -1,7 +1,7 @@
 import '@plone/volto/config'; // This is the bootstrap for the global config - client side
 import '@root/theme';
 import React from 'react';
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { IntlProvider } from 'react-intl-redux';
 import { ConnectedRouter } from 'connected-react-router';
@@ -58,7 +58,8 @@ export default function client() {
   }
 
   loadableReady(() => {
-    hydrate(
+    hydrateRoot(
+      document.getElementById('main'),
       <CookiesProvider>
         <Provider store={store}>
           <IntlProvider onError={reactIntlErrorHandler}>
@@ -70,7 +71,6 @@ export default function client() {
           </IntlProvider>
         </Provider>
       </CookiesProvider>,
-      document.getElementById('main'),
     );
   });
 }