@plone/volto 19.0.0-alpha.9 → 19.1.0

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/ManageTranslations.test.jsx

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import config from '@plone/volto/registry';
 
 import ManageTranslations from './ManageTranslations';
@@ -41,18 +42,20 @@ describe('ManageTranslations', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <ManageTranslations
-            location={{
-              pathname: '/blog-post',
-              state: {
-                language: 'es',
-                translationOf: '/en/page-en',
-              },
-            }}
-          />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <ManageTranslations
+              location={{
+                pathname: '/blog-post',
+                state: {
+                  language: 'es',
+                  translationOf: '/en/page-en',
+                },
+              }}
+            />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -4,16 +4,13 @@ import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import jwt from 'jsonwebtoken';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 
 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" />),
@@ -44,10 +41,12 @@ describe('ChangePassword', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <ChangePassword location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <ChangePassword location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import { render } from '@testing-library/react';
 
 import PersonalPreferences from './PersonalPreferences';
@@ -12,23 +13,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', () => {
@@ -53,12 +38,14 @@ describe('PersonalPreferences', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <PersonalPreferences
-            location={{ pathname: '/blog' }}
-            closeMenu={() => {}}
-          />
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <PersonalPreferences
+              location={{ pathname: '/blog' }}
+              closeMenu={() => {}}
+            />
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
     expect(container).toMatchSnapshot();

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
@@ -69,8 +70,10 @@ describe('Rules', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <Rules location={{ pathname: '/blog/rules' }} />
-        <div id="toolbar"></div>
+        <CookiesProvider>
+          <Rules location={{ pathname: '/blog/rules' }} />
+          <div id="toolbar"></div>
+        </CookiesProvider>
       </Provider>,
     );
 

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/Sharing/Sharing.test.jsx

@@ -4,6 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import jwt from 'jsonwebtoken';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import { PluggablesProvider } from '@plone/volto/components/manage/Pluggable';
 
 import Sharing from './Sharing';
@@ -60,12 +61,14 @@ describe('Sharing', () => {
 
     const { container } = render(
       <Provider store={store}>
-        <PluggablesProvider>
-          <MemoryRouter>
-            <Sharing location={{ pathname: '/blog' }} />
-            <div id="toolbar"></div>
-          </MemoryRouter>
-        </PluggablesProvider>
+        <CookiesProvider>
+          <PluggablesProvider>
+            <MemoryRouter>
+              <Sharing location={{ pathname: '/blog' }} />
+              <div id="toolbar"></div>
+            </MemoryRouter>
+          </PluggablesProvider>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -58,6 +58,8 @@ const withObjectBrowser = (WrappedComponent) =>
       selectableTypes,
       maximumSelectionSize,
       currentPath,
+      initialPath,
+      onlyFolderishSelectable,
     } = {}) =>
       this.setState(() => ({
         isObjectBrowserOpen: true,
@@ -70,6 +72,8 @@ const withObjectBrowser = (WrappedComponent) =>
         selectableTypes,
         maximumSelectionSize,
         currentPath,
+        initialPath,
+        onlyFolderishSelectable,
       }));
 
     closeObjectBrowser = () => this.setState({ isObjectBrowserOpen: false });
@@ -80,6 +84,10 @@ const withObjectBrowser = (WrappedComponent) =>
         this.props.pathname ||
         this.props.location?.pathname;
 
+      let initialPath = this.state?.initialPath
+        ? getBaseUrl(this.state.initialPath)
+        : null;
+
       return (
         <>
           <WrappedComponent
@@ -103,6 +111,7 @@ const withObjectBrowser = (WrappedComponent) =>
                     : this.props.data
                 }
                 contextURL={getBaseUrl(contextURL)}
+                initialPath={initialPath}
                 closeObjectBrowser={this.closeObjectBrowser}
                 mode={this.state.mode}
                 onSelectItem={this.state.onSelectItem}
@@ -110,6 +119,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

@@ -84,8 +84,10 @@ class ObjectBrowserBody extends Component {
     onSelectItem: PropTypes.func,
     dataName: PropTypes.string,
     maximumSelectionSize: PropTypes.number,
+    initialPath: PropTypes.string,
     contextURL: PropTypes.string,
     searchableTypes: PropTypes.arrayOf(PropTypes.string),
+    onlyFolderishSelectable: PropTypes.bool,
   };
 
   /**
@@ -101,6 +103,7 @@ class ObjectBrowserBody extends Component {
     selectableTypes: [],
     searchableTypes: null,
     maximumSelectionSize: null,
+    onlyFolderishSelectable: false,
   };
 
   /**
@@ -111,18 +114,21 @@ class ObjectBrowserBody extends Component {
    */
   constructor(props) {
     super(props);
+    const defaultMultiplePath = props.initialPath || '/';
     this.state = {
       currentFolder:
-        this.props.mode === 'multiple' ? '/' : this.props.contextURL || '/',
+        this.props.mode === 'multiple'
+          ? defaultMultiplePath
+          : this.props.contextURL || '/',
       currentImageFolder:
         this.props.mode === 'multiple'
-          ? '/'
+          ? defaultMultiplePath
           : this.props.mode === 'image' && this.props.data?.url
             ? getParentURL(this.props.data.url)
             : '/',
       currentLinkFolder:
         this.props.mode === 'multiple'
-          ? '/'
+          ? defaultMultiplePath
           : this.props.mode === 'link' && this.props.data?.href
             ? getParentURL(this.props.data.href)
             : '/',
@@ -142,10 +148,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 +339,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 &&

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import ObjectBrowserBody from './ObjectBrowserBody';
+
+const mockStore = configureStore();
+
+const baseState = {
+  search: { subrequests: {} },
+  intl: { locale: 'en', messages: {} },
+};
+
+const baseProps = {
+  block: 'test-block',
+  data: {},
+  closeObjectBrowser: () => {},
+  onChangeBlock: () => {},
+};
+
+const getInitialSearchPath = (actions) => {
+  const action = actions.find((a) => a.type === 'SEARCH_CONTENT');
+  return action?.request?.path?.split('/@search')[0];
+};
+
+describe('ObjectBrowserBody', () => {
+  it('uses initialPath as the default folder when mode=multiple', () => {
+    const store = mockStore(baseState);
+    render(
+      <Provider store={store}>
+        <ObjectBrowserBody
+          {...baseProps}
+          mode="multiple"
+          initialPath="/company/team"
+        />
+      </Provider>,
+    );
+
+    expect(getInitialSearchPath(store.getActions())).toBe('/company/team');
+  });
+
+  it('defaults to root when mode=multiple and initialPath is not provided', () => {
+    const store = mockStore(baseState);
+    render(
+      <Provider store={store}>
+        <ObjectBrowserBody {...baseProps} mode="multiple" />
+      </Provider>,
+    );
+
+    expect(getInitialSearchPath(store.getActions())).toBe('/');
+  });
+});

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

@@ -155,6 +155,7 @@ const Sidebar = (props) => {
                 key: 'documentTab',
                 as: 'button',
                 className: 'ui button',
+                type: 'button',
                 content: type || intl.formatMessage(messages.document),
               },
               pane: (
@@ -170,6 +171,7 @@ const Sidebar = (props) => {
                 key: 'blockTab',
                 as: 'button',
                 className: 'ui button',
+                type: 'button',
                 content: intl.formatMessage(messages.block),
               },
               pane: (

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

@@ -2,6 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 
 import Sidebar from './Sidebar';
 
@@ -22,7 +23,9 @@ test('renders a sidebar component', () => {
   });
   const component = renderer.create(
     <Provider store={store}>
-      <Sidebar />
+      <CookiesProvider>
+        <Sidebar />
+      </CookiesProvider>
     </Provider>,
   );
   const json = component.toJSON();