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

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

@@ -13,6 +13,7 @@ test('renders a TemplateChooser component', () => {
       locale: 'en',
       messages: { templateid: 'Template default translation' },
     },
+    site: { data: { 'plone.image_scales': { preview: {}, listing: {} } } },
   });
 
   const component = renderer.create(

package/src/components/manage/Toast/Toast.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 
 import successSVG from '@plone/volto/icons/ready.svg';
@@ -7,7 +8,28 @@ import infoSVG from '@plone/volto/icons/info.svg';
 import errorSVG from '@plone/volto/icons/error.svg';
 import warningSVG from '@plone/volto/icons/warning.svg';
 
+const messages = defineMessages({
+  success: {
+    id: 'toast_type_success',
+    defaultMessage: 'Success',
+  },
+  error: {
+    id: 'toast_type_error',
+    defaultMessage: 'Error',
+  },
+  warning: {
+    id: 'toast_type_warning',
+    defaultMessage: 'Warning',
+  },
+  info: {
+    id: 'toast_type_info',
+    defaultMessage: 'Information',
+  },
+});
+
 const Toast = (props) => {
+  const intl = useIntl();
+
   function getIcon(props) {
     if (props.info) {
       return infoSVG;
@@ -22,12 +44,22 @@ const Toast = (props) => {
     }
   }
 
+  function getTypeLabel(props) {
+    if (props.error) return intl.formatMessage(messages.error);
+    if (props.warning) return intl.formatMessage(messages.warning);
+    if (props.info) return intl.formatMessage(messages.info);
+    if (props.success) return intl.formatMessage(messages.success);
+    return null;
+  }
+
   const { title, content } = props;
+  const typeLabel = getTypeLabel(props);
 
   return (
     <>
       <Icon name={getIcon(props)} size="18px" />
       <div className="toast-inner-content">
+        {typeLabel && <span className="visually-hidden">{typeLabel}</span>}
         {title && <h4>{title}</h4>}
         <div>{content}</div>
       </div>

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

@@ -1,14 +1,18 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { IntlProvider } from 'react-intl';
 import Toast from './Toast';
 
 test('renders a Toast info component', () => {
   const component = renderer.create(
-    <Toast
-      info
-      title="I'm a title"
-      content="This is the content, lorem ipsum"
-    />,
+    <IntlProvider locale="en">
+      <Toast
+        info
+        title="I'm a title"
+        content="This is the content, lorem ipsum"
+      />
+      ,
+    </IntlProvider>,
   );
   const json = component.toJSON();
   expect(json).toMatchSnapshot();

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

@@ -23,6 +23,11 @@ describe('Toolbar Personal Tools component', () => {
       userSession: {
         token: jwt.sign({ sub: 'admin' }, 'secret'),
       },
+      site: {
+        data: {
+          'plone.image_scales': { preview: {}, listing: {} },
+        },
+      },
       content: {
         data: {
           '@type': 'Folder',
@@ -74,6 +79,11 @@ describe('Toolbar Personal Tools component', () => {
       userSession: {
         token: jwt.sign({ sub: 'admin' }, 'secret'),
       },
+      site: {
+        data: {
+          'plone.image_scales': { preview: {}, listing: {} },
+        },
+      },
       content: {
         data: {
           '@type': 'Folder',
@@ -126,6 +136,11 @@ describe('Toolbar Personal Tools component', () => {
       userSession: {
         token: jwt.sign({ sub: 'admin' }, 'secret'),
       },
+      site: {
+        data: {
+          'plone.image_scales': { preview: {}, listing: {} },
+        },
+      },
       content: {
         data: {
           '@type': 'Folder',

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

@@ -68,6 +68,10 @@ const messages = defineMessages({
     id: 'Shrink toolbar',
     defaultMessage: 'Shrink toolbar',
   },
+  expandToolbar: {
+    id: 'Expand toolbar',
+    defaultMessage: 'Expand toolbar',
+  },
   personalInformation: {
     id: 'Personal Information',
     defaultMessage: 'Personal Information',
@@ -455,6 +459,7 @@ class Toolbar extends Component {
             </div>
           </div>
           <div
+            id="toolbar-body"
             className={this.state.expanded ? 'toolbar expanded' : 'toolbar'}
             ref={this.toolbarRef}
           >
@@ -616,15 +621,20 @@ class Toolbar extends Component {
             </div>
             <div className="toolbar-handler">
               <button
-                aria-label={this.props.intl.formatMessage(
-                  messages.shrinkToolbar,
-                )}
                 className={cx('toolbar-handler-button', {
                   [this.props.content?.review_state]:
                     this.props.content?.review_state,
                 })}
                 onClick={this.handleShrink}
-              />
+                aria-expanded={expanded}
+                aria-controls="toolbar-body"
+              >
+                <span aria-live="assertive" className="visually-hidden">
+                  {expanded
+                    ? this.props.intl.formatMessage(messages.shrinkToolbar)
+                    : this.props.intl.formatMessage(messages.expandToolbar)}
+                </span>
+              </button>
             </div>
           </div>
           <div className="pusher" />

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import thunk from 'redux-thunk';
+
+import Types from './Types';
+
+const mockStore = configureStore([thunk]);
+
+describe('Types Defensive', () => {
+  it('does not crash when a language is missing from langmap', () => {
+    const store = mockStore({
+      site: {
+        data: {
+          'plone.available_languages': ['en', 'fr_HT'], // fr_HT is missing from langmap
+        },
+      },
+      types: { types: [{ title: 'Document' }] },
+      content: {
+        data: {
+          '@id': '/test',
+          '@type': 'Document',
+          language: { token: 'en' },
+          '@components': {
+            translations: { items: [] },
+          },
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      userSession: {
+        token: 'thetoken',
+      },
+    });
+
+    // This should not throw TypeError: Cannot read properties of undefined (reading 'nativeName')
+    const component = renderer.create(
+      <Provider store={store}>
+        <Types pathname="/test" active />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toBeDefined();
+  });
+});

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

@@ -54,14 +54,14 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
           </div>
         </>
       )}
-      {content['@components'].translations &&
+      {content?.['@components']?.translations &&
         (() => {
           const translationsLeft = filter(
             availableLanguages,
             (lang) =>
               !Boolean(
-                content['@components'].translations &&
-                  find(content['@components'].translations.items, {
+                content?.['@components']?.translations &&
+                  find(content?.['@components']?.translations?.items, {
                     language: lang,
                   }),
               ) && toBackendLang(currentLanguage) !== lang,
@@ -95,7 +95,9 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
                             id="Translate to {lang}"
                             defaultMessage="Translate to {lang}"
                             values={{
-                              lang: langmap[lang].nativeName.toLowerCase(),
+                              lang: (
+                                langmap[lang]?.nativeName || lang
+                              ).toLowerCase(),
                             }}
                           />
                         </Link>

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

@@ -89,6 +89,22 @@ describe('UniversalLink', () => {
     );
   });
 
+  it('check UniversalLink append http when user has not entered the protocol', () => {
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink href="www.github.com" title="Volto GitHub repository">
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('Volto GitHub repository').getAttribute('href')).toBe(
+      'http://www.github.com',
+    );
+  });
+
   it('check UniversalLink set target attribute for ext links', () => {
     const { getByTitle } = render(
       <Provider store={store}>

package/src/components/manage/UniversalLink/UniversalLink.tsx

@@ -122,6 +122,7 @@ const UniversalLink = React.memo(
         onClick,
         onKeyDown,
         item,
+        href,
         ...rest
       } = props;
       __test.renderCounter();
@@ -148,6 +149,7 @@ const UniversalLink = React.memo(
           target={openLinkInNewTab ?? false ? '_blank' : undefined}
           title={title}
           className={className}
+          onClick={onClick}
           smooth={smooth ?? config.settings.hashLinkSmoothScroll}
           // @ts-ignore
           ref={ref}

package/src/components/manage/Widgets/AlignWidget.stories.jsx

@@ -7,6 +7,15 @@ export const Align = WidgetStory.bind({
   widget: AlignWidget,
 });
 
+export const AlignDefaultLeft = WidgetStory.bind({
+  props: {
+    id: 'align-default-left',
+    title: 'Align (default left)',
+    default: 'left',
+  },
+  widget: AlignWidget,
+});
+
 export default {
   title: 'Edit Widgets/Align',
   component: AlignWidget,

package/src/components/manage/Widgets/AlignWidget.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+
+import AlignWidget from './AlignWidget';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+
+const mockStore = configureStore();
+
+const renderAlignWidget = (
+  props: Partial<ButtonsWidgetProps> = {},
+): {
+  onChange: ButtonsWidgetProps['onChange'];
+  asFragment: () => DocumentFragment;
+  getByRole: ReturnType<typeof render>['getByRole'];
+} => {
+  const { onChange: providedOnChange, ...restProps } = props;
+  const onChange = providedOnChange ?? vi.fn();
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const widgetProps: ButtonsWidgetProps = {
+    id: 'align',
+    title: 'Alignment',
+    fieldSet: 'default',
+    onChange,
+    value: undefined,
+    default: undefined,
+    disabled: false,
+    isDisabled: false,
+    ...restProps,
+  };
+
+  const rendered = render(
+    <Provider store={store}>
+      <AlignWidget {...widgetProps} />
+    </Provider>,
+  );
+
+  return {
+    onChange,
+    asFragment: rendered.asFragment,
+    getByRole: rendered.getByRole,
+  };
+};
+
+describe('AlignWidget', () => {
+  it('renders with default actions', () => {
+    const { asFragment } = renderAlignWidget();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders with custom actions', () => {
+    const { asFragment } = renderAlignWidget({
+      actions: ['additional'],
+      actionsInfoMap: {
+        additional: [imageFullSVG, 'Additional action title'],
+      },
+    });
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('selects the defaultAction when value is missing', () => {
+    const { getByRole } = renderAlignWidget({
+      defaultAction: 'left',
+    });
+
+    expect(getByRole('radio', { name: 'Left' })).toBeChecked();
+  });
+
+  it('selects the default when value is missing', () => {
+    const { getByRole } = renderAlignWidget({
+      default: 'left',
+    });
+
+    expect(getByRole('radio', { name: 'Left' })).toBeChecked();
+  });
+
+  it('does not override provided value with default', () => {
+    const { onChange } = renderAlignWidget({
+      default: 'left',
+      value: 'center',
+    });
+
+    expect(onChange).not.toHaveBeenCalledWith('align', 'left');
+  });
+});

package/src/components/manage/Widgets/{AlignWidget.jsx → AlignWidget.tsx}

@@ -1,12 +1,16 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import ButtonsWidget from './ButtonsWidget';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './ButtonsWidget';
 import imageLeftSVG from '@plone/volto/icons/image-left.svg';
 import imageRightSVG from '@plone/volto/icons/image-right.svg';
 import imageFitSVG from '@plone/volto/icons/image-fit.svg';
 import imageNarrowSVG from '@plone/volto/icons/image-narrow.svg';
 import imageWideSVG from '@plone/volto/icons/image-wide.svg';
 import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import type { IntlShape } from 'react-intl';
 
 const messages = defineMessages({
   left: {
@@ -35,20 +39,32 @@ const messages = defineMessages({
   },
 });
 
-export const defaultActionsInfo = ({ intl }) => ({
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
   left: [imageLeftSVG, intl.formatMessage(messages.left)],
-  right: [imageRightSVG, intl.formatMessage(messages.right)],
   center: [imageFitSVG, intl.formatMessage(messages.center)],
+  right: [imageRightSVG, intl.formatMessage(messages.right)],
   narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
   wide: [imageWideSVG, intl.formatMessage(messages.wide)],
   full: [imageFullSVG, intl.formatMessage(messages.full)],
 });
 
-const AlignWidget = (props) => {
+type AlignWidgetProps = ButtonsWidgetProps & {
+  defaultAction?: string;
+};
+
+const AlignWidget = (props: AlignWidgetProps) => {
   const intl = useIntl();
 
-  const { actions = ['left', 'right', 'center', 'full'], actionsInfoMap } =
-    props;
+  const {
+    actions = ['left', 'center', 'right', 'full'],
+    actionsInfoMap,
+    default: defaultValue,
+    defaultAction,
+  } = props;
 
   const actionsInfo = {
     ...defaultActionsInfo({ intl }),
@@ -60,7 +76,7 @@ const AlignWidget = (props) => {
       {...props}
       actions={actions}
       actionsInfoMap={actionsInfo}
-      defaultAction={props.defaultAction || 'center'}
+      default={defaultValue ?? defaultAction ?? 'center'}
     />
   );
 };

package/src/components/manage/Widgets/ArrayWidget.test.jsx

@@ -8,12 +8,7 @@ import ArrayWidget from './ArrayWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 // Mock react-sortable-hoc to prevent the container error
 vi.mock('react-sortable-hoc', () => ({
   ...vi.importActual('react-sortable-hoc'),