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

package/src/components/manage/Display/Display.test.jsx

@@ -8,17 +8,8 @@ import Display from './Display';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Widgets', async () => {
-  return await import(
-    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
-  );
-});
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/components/manage/Widgets');
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Edit/Edit.test.jsx

@@ -8,11 +8,7 @@ import { __test__ as Edit } from './Edit';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 vi.mock('../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));

package/src/components/manage/Form/BlockDataForm.test.jsx

@@ -5,11 +5,7 @@ import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 

package/src/components/manage/Form/Form.jsx

@@ -191,8 +191,8 @@ class Form extends Component {
     // Adding fallback in case the fields are empty, so we are sure that the edit form
     // shows at least the default blocks
     if (
-      formData.hasOwnProperty(blocksFieldname) &&
-      formData.hasOwnProperty(blocksLayoutFieldname)
+      formData?.hasOwnProperty(blocksFieldname) &&
+      formData?.hasOwnProperty(blocksLayoutFieldname)
     ) {
       if (
         !formData[blocksLayoutFieldname] ||
@@ -216,7 +216,7 @@ class Form extends Component {
 
     let selectedBlock = null;
     if (
-      formData.hasOwnProperty(blocksLayoutFieldname) &&
+      formData?.hasOwnProperty(blocksLayoutFieldname) &&
       formData[blocksLayoutFieldname].items.length > 0
     ) {
       if (config.blocks?.initialBlocksFocus === null) {

package/src/components/manage/Form/Form.test.jsx

@@ -9,11 +9,7 @@ const mockStore = configureStore();
 const errorMessage =
   "[{'message': 'The specified email is not valid.', 'field': 'contact_email', 'error': 'ValidationError'}";
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 describe('Form', () => {
   it('renders a form component', () => {

package/src/components/manage/Form/InlineForm.jsx

@@ -158,7 +158,7 @@ const InlineForm = (props) => {
                 onChangeField(id, value, itemInfo);
               }}
               key={field}
-              error={errors?.[block]?.[field] || {}}
+              error={errors?.[block]?.[field] || []}
               block={block}
             />
           ))}
@@ -199,7 +199,7 @@ const InlineForm = (props) => {
                         onChangeField(id, value);
                       }}
                       key={field}
-                      error={errors?.[block]?.[field] || {}}
+                      error={errors?.[block]?.[field] || []}
                       block={block}
                     />
                   ))}

package/src/components/manage/Form/InlineForm.test.jsx

@@ -6,11 +6,7 @@ import config from '@plone/volto/registry';
 
 import InlineForm from './InlineForm';
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 

package/src/components/manage/Form/ModalForm.jsx

@@ -245,15 +245,17 @@ class ModalForm extends Component {
     const { schema, onCancel, description } = this.props;
     const currentFieldset = schema.fieldsets[this.state.currentTab];
 
-    const fields = map(currentFieldset.fields, (field) => ({
-      ...schema.properties[field],
-      id: field,
-      value: this.state.formData[field],
-      required: schema.required.indexOf(field) !== -1,
-      onChange: this.onChangeField,
-      onBlur: this.onBlurField,
-      onClick: this.onClickInput,
-    }));
+    const fields = currentFieldset
+      ? map(currentFieldset.fields, (field) => ({
+          ...schema.properties[field],
+          id: field,
+          value: this.state.formData[field],
+          required: schema.required.indexOf(field) !== -1,
+          onChange: this.onChangeField,
+          onBlur: this.onBlurField,
+          onClick: this.onClickInput,
+        }))
+      : [];
 
     const state_errors = keys(this.state.errors).length > 0;
     return (
@@ -288,7 +290,7 @@ class ModalForm extends Component {
               )}
               <div>{this.props.submitError}</div>
             </Message>
-            {schema.fieldsets.length > 1 && (
+            {schema.fieldsets?.length > 1 && (
               <Menu tabular stackable>
                 {map(schema.fieldsets, (item, index) => (
                   <Menu.Item

package/src/components/manage/Form/ModalForm.test.jsx

@@ -8,11 +8,7 @@ import ModalForm from './ModalForm';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 describe('ModalForm', () => {
   it('renders a modal form component', () => {
@@ -93,4 +89,30 @@ describe('ModalForm', () => {
     const loadingMessage = getByText(/renaming items.../i);
     expect(loadingMessage).toBeInTheDocument();
   });
+
+  it('renders with empty fieldsets array', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <ModalForm
+          schema={{
+            fieldsets: [],
+            properties: {},
+            required: [],
+          }}
+          onSubmit={() => {}}
+          onCancel={() => {}}
+          open={false}
+          title="Action without form"
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });

package/src/components/manage/Form/__mocks__/index.tsx

@@ -1,25 +1,7 @@
-/* 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/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
-
-
-with the following:
-
-vi.mock('@plone/volto/components/manage/Form');
-
-Finally, remove this comment.
-*/
-
 import type { JSONSchema } from '@plone/types';
 import type { Ref } from 'react';
-const { forwardRef } = jest.requireActual('react');
+import { forwardRef } from 'react';
 
-// Field descriptions can contain react elements and those are not JSON stringifiable
 const cleanupSchema = (schema: JSONSchema | null): JSONSchema | null => {
   if (!schema || !schema.properties) return schema;
   return {
@@ -40,38 +22,38 @@ const cleanupSchema = (schema: JSONSchema | null): JSONSchema | null => {
   };
 };
 
-export const Field = jest.fn((props) => (
+export const Field = vi.fn((props) => (
   <div className="Field" id={props.id}>
     {props.title}
   </div>
 ));
 
-export const InlineForm = jest.fn((props) => (
+export const InlineForm = vi.fn((props) => (
   <div
     id="InlineForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
   />
 ));
 
-export const ModalForm = jest.fn((props) => (
+export const ModalForm = vi.fn((props) => (
   <div
     id="ModalForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
   />
 ));
 
-export const UndoToolbar = jest.fn(() => <div id="UndoToolbar" />);
+export const UndoToolbar = vi.fn(() => <div id="UndoToolbar" />);
 
-export const BlocksToolbar = jest.fn(() => <div id="BlocksToolbar" />);
+export const BlocksToolbar = vi.fn(() => <div id="BlocksToolbar" />);
 
-export const BlockDataForm = jest.fn((props) => (
+export const BlockDataForm = vi.fn((props) => (
   <div
     id="BlockDataForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
   />
 ));
 
-export const BlocksForm = jest.fn((props) => (
+export const BlocksForm = vi.fn((props) => (
   <div
     id="BlocksForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
@@ -88,4 +70,4 @@ const MockForm = forwardRef(
   ),
 );
 
-export const Form = jest.fn((props) => <MockForm {...props} />);
+export const Form = vi.fn((props) => <MockForm {...props} />);

package/src/components/manage/Multilingual/CompareLanguages.jsx

@@ -56,33 +56,33 @@ const CompareLanguagesMenu = ({
                 {comparingLanguage === t.language ? (
                   <button
                     aria-label={`${intl.formatMessage(messages.stop_compare)} ${
-                      langmap[t.language].nativeName
+                      langmap[t.language]?.nativeName || t.language
                     }`}
                     title={`${intl.formatMessage(messages.stop_compare)} ${
-                      langmap[t.language].nativeName
+                      langmap[t.language]?.nativeName || t.language
                     }`}
                     onClick={() => {
                       setComparingLanguage(null);
                       closeMenu();
                     }}
                   >
-                    {langmap[t.language].nativeName}
+                    {langmap[t.language]?.nativeName || t.language}
                     <Icon name={clearSVG} size="30px" />
                   </button>
                 ) : (
                   <button
                     aria-label={`${intl.formatMessage(
                       messages.compare_to,
-                    )} ${langmap[t.language].nativeName.toLowerCase()}`}
+                    )} ${(langmap[t.language]?.nativeName || t.language).toLowerCase()}`}
                     title={`${intl.formatMessage(
                       messages.compare_to,
-                    )} ${langmap[t.language].nativeName.toLowerCase()}`}
+                    )} ${(langmap[t.language]?.nativeName || t.language).toLowerCase()}`}
                     onClick={() => {
                       setComparingLanguage(t.language);
                       closeMenu();
                     }}
                   >
-                    {langmap[t.language].nativeName}
+                    {langmap[t.language]?.nativeName || t.language}
                   </button>
                 )}
               </li>

package/src/components/manage/Multilingual/CreateTranslation.jsx

@@ -12,9 +12,12 @@ const CreateTranslation = (props) => {
   const dispatch = useDispatch();
   const { language, translationOf } = props.location.state;
   const [translationLocation, setTranslationLocation] = React.useState(null);
-  const [translationObject, setTranslationObject] = React.useState(null);
   const languageFrom = useSelector((state) => state.intl.locale);
 
+  const translationObject = useSelector(
+    (state) => state.content.subrequests['translationObject'],
+  );
+
   React.useEffect(() => {
     // Only on mount, we dispatch the locator query
     dispatch(getTranslationLocator(translationOf, language)).then((resp) => {
@@ -22,22 +25,21 @@ const CreateTranslation = (props) => {
     });
 
     //and we load the translationObject
-    dispatch(getContent(translationOf, null, 'translationObject')).then(
-      (resp) => {
-        setTranslationObject(resp);
-      },
-    );
+    dispatch(getContent(translationOf, null, 'translationObject'));
 
     // On unmount we dispatch the language change
     return () => {
       // We change the interface language
       if (config.settings.supportedLanguages.includes(language)) {
         const langFileName = toGettextLang(language);
-        import(
-          /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-        ).then((locale) => {
-          dispatch(changeLanguage(language, locale.default));
-        });
+        import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+          .then((locale) => {
+            dispatch(changeLanguage(language, locale.default));
+          })
+          .catch(() => {
+            // If locale file doesn't exist, still switch language with empty locale
+            dispatch(changeLanguage(language, {}));
+          });
       }
     };
     // On mount only
@@ -46,7 +48,8 @@ const CreateTranslation = (props) => {
 
   return (
     translationLocation &&
-    translationObject && (
+    translationObject.data &&
+    translationObject.loaded > 0 && (
       <Redirect
         to={{
           pathname: `${flattenToAppURL(translationLocation)}/add`,
@@ -54,7 +57,7 @@ const CreateTranslation = (props) => {
           state: {
             translationOf: props.location.state.translationOf,
             language: props.location.state.language,
-            translationObject: translationObject,
+            translationObject: translationObject.data,
             languageFrom,
           },
         }}

package/src/components/manage/Multilingual/ManageTranslations.jsx

@@ -178,7 +178,7 @@ const ManageTranslations = (props) => {
           <FormattedMessage
             id="Manage translations for {title}"
             defaultMessage="Manage translations for {title}"
-            values={{ title: <q>{content.title}</q> }}
+            values={{ title: <q>{content?.title || ''}</q> }}
           />
         </Segment>
         {content && (
@@ -195,9 +195,9 @@ const ManageTranslations = (props) => {
                 <Table.Row key={lang}>
                   <Table.Cell collapsing>
                     {lang === content.language.token ? (
-                      <strong>{langmap[lang].nativeName}</strong>
+                      <strong>{langmap[lang]?.nativeName || lang}</strong>
                     ) : (
-                      langmap[lang].nativeName
+                      langmap[lang]?.nativeName || lang
                     )}
                   </Table.Cell>
                   <Table.Cell>
@@ -235,7 +235,7 @@ const ManageTranslations = (props) => {
                         <Button
                           aria-label={`${intl.formatMessage(
                             messages.unlink,
-                          )} ${langmap[lang].nativeName.toLowerCase()}`}
+                          )} ${(langmap[lang]?.nativeName || lang).toLowerCase()}`}
                           basic
                           icon
                           disabled={lang === content.language.token}
@@ -256,7 +256,7 @@ const ManageTranslations = (props) => {
                         <Button
                           aria-label={`${intl.formatMessage(
                             messages.link,
-                          )} ${langmap[lang].nativeName.toLowerCase()}`}
+                          )} ${(langmap[lang]?.nativeName || lang).toLowerCase()}`}
                           basic
                           icon
                           disabled={lang === content.language.token}

package/src/components/manage/Multilingual/TranslationObject.jsx

@@ -48,12 +48,15 @@ const TranslationObject = ({
       let lang =
         config.settings.supportedLanguages[Object.keys(locales).length];
       const langFileName = toGettextLang(lang);
-      import(
-        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-      ).then((locale) => {
-        setLocales({ ...locales, [toReactIntlLang(lang)]: locale.default });
-        setLoadingLocale(false);
-      });
+      import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+        .then((locale) => {
+          setLocales({ ...locales, [toReactIntlLang(lang)]: locale.default });
+          setLoadingLocale(false);
+        })
+        .catch(() => {
+          setLocales({ ...locales, [toReactIntlLang(lang)]: {} });
+          setLoadingLocale(false);
+        });
     }
   }, [loadingLocale, locales]);
 
@@ -83,7 +86,7 @@ const TranslationObject = ({
             active={activeMenu === 'language'}
             onClick={handleMenuClick}
           >
-            {langmap[lang].nativeName}
+            {langmap[lang]?.nativeName || lang}
           </Menu.Item>
           {visual && (
             <Menu.Item
@@ -107,7 +110,7 @@ const TranslationObject = ({
             hideActions
             pathname={flattenToAppURL(translationObject['@id'])}
             visual={visual}
-            title={langmap[lang].nativeName}
+            title={langmap[lang]?.nativeName || lang}
             loading={false}
             isFormSelected={isFormSelected}
             onSelectForm={onSelectForm}

package/src/components/manage/Preferences/ChangePassword.test.jsx

@@ -9,11 +9,7 @@ import ChangePassword from './ChangePassword';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 vi.mock('../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),

package/src/components/manage/Preferences/PersonalPreferences.jsx

@@ -53,11 +53,14 @@ const PersonalPreferences = (props) => {
     let language = data.language || 'en';
     if (config.settings.supportedLanguages.includes(language)) {
       const langFileName = toGettextLang(language);
-      import(
-        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-      ).then((locale) => {
-        dispatch(changeLanguage(language, locale.default));
-      });
+      import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+        .then((locale) => {
+          dispatch(changeLanguage(language, locale.default));
+        })
+        .catch(() => {
+          // If locale file doesn't exist, still switch language with empty locale
+          dispatch(changeLanguage(language, {}));
+        });
     }
     toast.success(<Toast success title={intl.formatMessage(messages.saved)} />);
     closeMenu();

package/src/components/manage/Preferences/PersonalPreferences.test.jsx

@@ -12,23 +12,7 @@ vi.mock('../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
-beforeAll(async () => {
-  const { __setLoadables } = await import(
-    '@plone/volto/helpers/Loadable/Loadable'
-  );
-  await __setLoadables();
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 describe('PersonalPreferences', () => {
   it('renders a personal preferences component', () => {

package/src/components/manage/Sharing/Sharing.jsx

@@ -473,23 +473,39 @@ class SharingComponent extends Component {
                 <p className="help">
                   <FormattedMessage
                     id="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
-                    defaultMessage="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
+                    defaultMessage="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, inherited values are explicitly labeled as 'Inherited value' and receive a green check mark {inherited}. Similarly, roles managed by the site administrator are labeled as 'Global role' and receive a blue check mark {global}."
                     values={{
                       inherited: (
-                        <IconOld name="check circle outline" color="green" />
+                        <IconOld
+                          aria-hidden="true"
+                          name="check circle outline"
+                          color="green"
+                        />
                       ),
                       global: (
-                        <IconOld name="check circle outline" color="blue" />
+                        <IconOld
+                          aria-hidden="true"
+                          name="check circle outline"
+                          color="blue"
+                        />
                       ),
                     }}
                   />
                 </p>
               </Segment>
-              <Segment className="actions" attached clearing>
+              <Segment className="right aligned actions" attached clearing>
+                <Button
+                  basic
+                  secondary
+                  aria-label={this.props.intl.formatMessage(messages.cancel)}
+                  title={this.props.intl.formatMessage(messages.cancel)}
+                  onClick={this.onCancel}
+                >
+                  <Icon className="circled" name={clearSVG} size="30px" />
+                </Button>
                 <Button
                   basic
                   primary
-                  floated="right"
                   type="submit"
                   aria-label={this.props.intl.formatMessage(messages.save)}
                   title={this.props.intl.formatMessage(messages.save)}
@@ -498,16 +514,6 @@ class SharingComponent extends Component {
                 >
                   <Icon className="circled" name={aheadSVG} size="30px" />
                 </Button>
-                <Button
-                  basic
-                  secondary
-                  aria-label={this.props.intl.formatMessage(messages.cancel)}
-                  title={this.props.intl.formatMessage(messages.cancel)}
-                  floated="right"
-                  onClick={this.onCancel}
-                >
-                  <Icon className="circled" name={clearSVG} size="30px" />
-                </Button>
               </Segment>
             </Form>
           </Plug>

package/src/components/manage/Sidebar/ObjectBrowser.jsx

@@ -58,6 +58,7 @@ const withObjectBrowser = (WrappedComponent) =>
       selectableTypes,
       maximumSelectionSize,
       currentPath,
+      onlyFolderishSelectable,
     } = {}) =>
       this.setState(() => ({
         isObjectBrowserOpen: true,
@@ -70,6 +71,7 @@ const withObjectBrowser = (WrappedComponent) =>
         selectableTypes,
         maximumSelectionSize,
         currentPath,
+        onlyFolderishSelectable,
       }));
 
     closeObjectBrowser = () => this.setState({ isObjectBrowserOpen: false });
@@ -110,6 +112,7 @@ const withObjectBrowser = (WrappedComponent) =>
                 searchableTypes={this.state.searchableTypes}
                 selectableTypes={this.state.selectableTypes}
                 maximumSelectionSize={this.state.maximumSelectionSize}
+                onlyFolderishSelectable={this.state.onlyFolderishSelectable}
               />
             </SidebarPopup>
           </>

package/src/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -86,6 +86,7 @@ class ObjectBrowserBody extends Component {
     maximumSelectionSize: PropTypes.number,
     contextURL: PropTypes.string,
     searchableTypes: PropTypes.arrayOf(PropTypes.string),
+    onlyFolderishSelectable: PropTypes.bool,
   };
 
   /**
@@ -101,6 +102,7 @@ class ObjectBrowserBody extends Component {
     selectableTypes: [],
     searchableTypes: null,
     maximumSelectionSize: null,
+    onlyFolderishSelectable: false,
   };
 
   /**
@@ -142,10 +144,14 @@ class ObjectBrowserBody extends Component {
       showSearchInput: false,
       // In image mode, the searchable types default to the image types which
       // can be overridden with the property if specified.
+      // If selectableTypes are passed, the searchableTypes are the selectableTypes
       searchableTypes:
         this.props.mode === 'image'
           ? this.props.searchableTypes || config.settings.imageObjects
-          : this.props.searchableTypes,
+          : [
+              ...(this.props.searchableTypes ?? []),
+              ...(this.props.selectableTypes ?? []),
+            ],
       view: this.props.mode === 'image' ? 'icons' : 'list',
     };
     this.searchInputRef = React.createRef();
@@ -329,7 +335,17 @@ class ObjectBrowserBody extends Component {
   };
 
   isSelectable = (item) => {
-    const { maximumSelectionSize, data, mode, selectableTypes } = this.props;
+    const {
+      maximumSelectionSize,
+      data,
+      mode,
+      selectableTypes,
+      onlyFolderishSelectable,
+    } = this.props;
+
+    if (onlyFolderishSelectable && !item.is_folderish) {
+      return false;
+    }
     if (
       maximumSelectionSize &&
       data &&