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

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,11 +25,7 @@ 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 () => {
@@ -46,7 +45,8 @@ const CreateTranslation = (props) => {
 
   return (
     translationLocation &&
-    translationObject && (
+    translationObject.data &&
+    translationObject.loaded > 0 && (
       <Redirect
         to={{
           pathname: `${flattenToAppURL(translationLocation)}/add`,
@@ -54,7 +54,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

@@ -8,7 +8,6 @@ import { Link, useLocation } from 'react-router-dom';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
-import config from '@plone/volto/registry';
 
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import {
@@ -66,6 +65,9 @@ const ManageTranslations = (props) => {
   const pathname = useLocation().pathname;
   const content = useSelector((state) => state.content.data);
   const dispatch = useDispatch();
+  const availableLanguages = useSelector(
+    (state) => state.site.data['plone.available_languages'],
+  );
 
   const [isClient, setIsClient] = useState(false);
 
@@ -189,7 +191,7 @@ const ManageTranslations = (props) => {
               </Table.Row>
             </Table.Header>
             <Table.Body>
-              {config.settings.supportedLanguages.map((lang) => (
+              {availableLanguages.map((lang) => (
                 <Table.Row key={lang}>
                   <Table.Cell collapsing>
                     {lang === content.language.token ? (

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

@@ -8,11 +8,11 @@ import config from '@plone/volto/registry';
 import ManageTranslations from './ManageTranslations';
 
 beforeAll(() => {
-  config.settings.isMultilingual = true;
   config.settings.supportedLanguages = ['de', 'es'];
 });
-
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 const mockStore = configureStore();
 
@@ -33,6 +33,11 @@ describe('ManageTranslations', () => {
           language: 'en',
         },
       },
+      site: {
+        data: {
+          'plone.available_languages': ['de', 'es'],
+        },
+      },
     });
     const { container } = render(
       <Provider store={store}>

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

@@ -63,7 +63,7 @@ const TranslationObject = ({
     {
       ...window.__data,
       intl: {
-        defaultLocale: config.settings.defaultLanguage,
+        defaultLocale: translationObject.language.token,
         locale: translationObject.language.token,
         messages: locales[translationObject.language.token],
       },

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

@@ -9,8 +9,15 @@ import ChangePassword from './ChangePassword';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components/manage/Form');
-jest.mock('../Toolbar/Toolbar', () => jest.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('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('ChangePassword', () => {
   it('renders a change password component', () => {

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

@@ -18,7 +18,9 @@ const userSchema = {
   loading: false,
 };
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('PersonalInformation', () => {
   it('renders a personal information component', async () => {

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

@@ -8,14 +8,27 @@ import PersonalPreferences from './PersonalPreferences';
 
 const mockStore = configureStore();
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('@plone/volto/components/manage/Form');
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+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();
+});
 
 describe('PersonalPreferences', () => {
   it('renders a personal preferences component', () => {

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

@@ -9,9 +9,12 @@ import Rules from './Rules';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
-
-jest.mock('../Toolbar/More', () => jest.fn(() => <div className="More" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
+vi.mock('../Toolbar/More', () => ({
+  default: vi.fn(() => <div className="More" />),
+}));
 
 describe('Rules', () => {
   it('renders rules object control', () => {

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

@@ -10,7 +10,9 @@ import Sharing from './Sharing';
 
 const mockStore = configureStore();
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('Sharing', () => {
   it('renders a sharing component', () => {

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

@@ -3,6 +3,7 @@ import { Button, Segment, Popup } from 'semantic-ui-react';
 import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Image from '@plone/volto/components/theme/Image/Image';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { getContentIcon } from '@plone/volto/helpers/Content/Content';
 import config from '@plone/volto/registry';
@@ -69,7 +70,7 @@ const ObjectBrowserNav = ({
                 }
               >
                 {item['@type'] === 'Image' ? (
-                  <img
+                  <Image
                     src={`${item['@id']}/@@images/image/preview`}
                     alt={item.title}
                     style={{

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

@@ -110,11 +110,11 @@ describe('ObjectBrowserNav', () => {
   const baseProps = {
     currentSearchResults,
     isSelectable: () => true,
-    handleClickOnItem: jest.fn(),
-    handleDoubleClickOnItem: jest.fn(),
+    handleClickOnItem: vi.fn(),
+    handleDoubleClickOnItem: vi.fn(),
     mode: 'link',
     view: 'list',
-    navigateTo: jest.fn(),
+    navigateTo: vi.fn(),
   };
 
   it('renders a view image component', () => {

package/src/components/manage/Sidebar/SidebarPortal.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+
+import SidebarPortal from './SidebarPortal';
+
+describe('SidebarPortal', () => {
+  let portalRoot: HTMLDivElement | null;
+
+  beforeEach(() => {
+    portalRoot = document.createElement('div');
+    portalRoot.setAttribute('id', 'sidebar-properties');
+    document.body.appendChild(portalRoot);
+  });
+
+  afterEach(() => {
+    cleanup();
+    portalRoot?.remove();
+    portalRoot = null;
+  });
+
+  test('renders the sidebar portal when the block is selected', async () => {
+    render(
+      <SidebarPortal selected={true}>
+        <p>Tested!</p>
+      </SidebarPortal>,
+    );
+
+    expect(await screen.findByText('Tested!')).toBeInTheDocument();
+  });
+
+  test('does not render the sidebar portal when the block is not selected', () => {
+    render(
+      <SidebarPortal selected={false}>
+        <p>Tested, but you should not see this!</p>
+      </SidebarPortal>,
+    );
+
+    expect(
+      screen.queryByText('Tested, but you should not see this!'),
+    ).not.toBeInTheDocument();
+  });
+});

package/src/components/manage/Sidebar/SidebarPortal.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+type SidebarPortalProps = {
+  children?: React.ReactNode;
+  selected: boolean;
+  tab?: string;
+};
+
+const SidebarPortal = ({
+  children,
+  selected,
+  tab = 'sidebar-properties',
+}: SidebarPortalProps) => {
+  const [isClient, setIsClient] = React.useState(false);
+
+  React.useEffect(() => setIsClient(true), []);
+
+  if (!isClient || !selected) {
+    return null;
+  }
+
+  const target = document.getElementById(tab);
+
+  if (!target) {
+    return null;
+  }
+
+  return createPortal(
+    <div role="form" style={{ height: '100%' }}>
+      <div
+        style={{ height: '100%' }}
+        role="presentation"
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onKeyDown={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {children}
+      </div>
+    </div>,
+    target,
+  );
+};
+
+export default SidebarPortal;

package/src/components/manage/TemplateChooser/TemplateChooser.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Button, Grid, Message } from 'semantic-ui-react';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const TemplateChooser = ({ templates, onSelectTemplate }) => {
   const intl = useIntl();
@@ -15,7 +16,7 @@ const TemplateChooser = ({ templates, onSelectTemplate }) => {
                 className="template-chooser-item"
                 onClick={() => onSelectTemplate(index)}
               >
-                <img src={template.image} alt="" />
+                <Image src={template.image} alt="" />
                 <div className="template-chooser-title">
                   {intl.formatMessage({
                     id: template.id,

package/src/components/manage/Toolbar/More.jsx

@@ -114,6 +114,9 @@ const More = (props) => {
 
   const content = useSelector((state) => state.content?.data, shallowEqual);
   const workingCopy = useSelector((state) => state.workingCopy, shallowEqual);
+  const isMultilingual = useSelector(
+    (state) => state.site.data.features?.multilingual,
+  );
 
   const actions = useSelector((state) => state.actions.actions, shallowEqual);
 
@@ -435,7 +438,7 @@ const More = (props) => {
           </li>
         </Plug>
       )}
-      {editAction && config.settings.isMultilingual && (
+      {editAction && isMultilingual && (
         <Plug pluggable="toolbar-more-manage-content" id="multilingual">
           <li>
             <Link to={`${path}/manage-translations`}>

package/src/components/manage/Toolbar/More.test.jsx

@@ -6,13 +6,12 @@ import { waitFor, render } from '@testing-library/react';
 
 import More from './More';
 
-jest.mock('../../manage/Display/Display', () =>
-  jest.fn(() => <div id="display-select" />),
-);
-
-jest.mock('../../manage/Workflow/Workflow', () =>
-  jest.fn(() => <div id="state-select" />),
-);
+vi.mock('../../manage/Display/Display', () => ({
+  default: vi.fn(() => <div id="display-select" />),
+}));
+vi.mock('../../manage/Workflow/Workflow', () => ({
+  default: vi.fn(() => <div id="state-select" />),
+}));
 
 const mockStore = configureStore();
 
@@ -136,6 +135,9 @@ const store = mockStore({
       is_folderish: true,
     },
   },
+  site: {
+    data: {},
+  },
   workflow: { history: [], transition: { loaded: true } },
 });
 

package/src/components/manage/Toolbar/PersonalTools.jsx

@@ -7,6 +7,7 @@ import cx from 'classnames';
 import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 
 import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Image from '@plone/volto/components/theme/Image/Image';
 import { getUser } from '@plone/volto/actions/users/users';
 import { Pluggable } from '@plone/volto/components/manage/Pluggable';
 import { expandToBackendURL, getBaseUrl } from '@plone/volto/helpers/Url/Url';
@@ -96,7 +97,7 @@ const PersonalTools = (props) => {
       </header>
       <div className={cx('avatar', { default: !user.portrait })}>
         {user.portrait ? (
-          <img
+          <Image
             src={expandToBackendURL(user.portrait)}
             alt={intl.formatMessage(messages.userAvatar)}
           />

package/src/components/manage/Toolbar/Toolbar.jsx

@@ -537,10 +537,9 @@ class Toolbar extends Component {
                         </Link>
                       )}
                     {this.props.content &&
-                      ((this.props.content.is_folderish &&
-                        this.props.types.length > 0) ||
-                        (config.settings.isMultilingual &&
-                          this.props.content['@components']?.translations)) && (
+                      this.props.content.is_folderish &&
+                      (this.props.types.length > 0 ||
+                        this.props.content['@components']?.translations) && (
                         <button
                           className="add"
                           aria-label={this.props.intl.formatMessage(

package/src/components/manage/Toolbar/Types.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import filter from 'lodash/filter';
 import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
@@ -10,12 +11,12 @@ import { FormattedMessage } from 'react-intl';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
 import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
-import config from '@plone/volto/registry';
 
 const Types = ({ types, pathname, content, currentLanguage }) => {
-  const { settings } = config;
-  return types.length > 0 ||
-    (settings.isMultilingual && content['@components'].translations) ? (
+  const availableLanguages = useSelector(
+    (state) => state.site?.data?.['plone.available_languages'] || [],
+  );
+  return types.length > 0 || content?.['@components']?.translations ? (
     <div className="menu-more pastanaga-menu">
       {types.length > 0 && (
         <>
@@ -53,11 +54,10 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
           </div>
         </>
       )}
-      {settings.isMultilingual &&
-        content['@components'].translations &&
+      {content['@components'].translations &&
         (() => {
           const translationsLeft = filter(
-            settings.supportedLanguages,
+            availableLanguages,
             (lang) =>
               !Boolean(
                 content['@components'].translations &&