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

package/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.test.jsx

@@ -8,6 +8,12 @@ const mockStore = configureStore();
 
 const data = { '@type': 'toc', variation: 'default' };
 
+const properties = {
+  title: 'Table of Contents',
+  hide_title: false,
+  ordered: true,
+};
+
 const tocEntries = [
   {
     level: 2,
@@ -35,7 +41,11 @@ test('renders a default toc renderer component', () => {
   const component = renderer.create(
     <Provider store={store}>
       <MemoryRouter>
-        <DefaultTocRenderer data={data} tocEntries={tocEntries} />
+        <DefaultTocRenderer
+          properties={properties}
+          data={data}
+          tocEntries={tocEntries}
+        />
       </MemoryRouter>
     </Provider>,
   );

package/src/components/manage/Blocks/Video/Edit.jsx

@@ -12,6 +12,7 @@ import aheadSVG from '@plone/volto/icons/ahead.svg';
 import videoBlockSVG from '@plone/volto/components/manage/Blocks/Video/block-video.svg';
 import Body from '@plone/volto/components/manage/Blocks/Video/Body';
 import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   VideoFormDescription: {
@@ -82,7 +83,7 @@ const Edit = (props) => {
       ) : (
         <Message>
           <center>
-            <img src={videoBlockSVG} alt="" />
+            <Image src={videoBlockSVG} alt="" />
             <div className="toolbar-inner">
               <Input
                 onKeyDown={onKeyDownVariantMenuForm}

package/src/components/manage/Blocks/Video/VideoSidebar.test.jsx

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

package/src/components/manage/ConditionalLink/ConditionalLink.test.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import '@testing-library/jest-dom';
+
+import ConditionalLink from './ConditionalLink';
+
+const mockStore = configureStore();
+const store = mockStore({
+  userSession: {
+    token: null,
+  },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('ConditionalLink', () => {
+  it('renders a link when condition is true', () => {
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ConditionalLink to="/test" condition={true}>
+            Link Text
+          </ConditionalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const link = screen.getByText('Link Text');
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', '/test');
+  });
+
+  it('renders a link when condition is true', () => {
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ConditionalLink href="/test" condition={true}>
+            Link Text
+          </ConditionalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const link = screen.getByText('Link Text');
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', '/test');
+  });
+
+  it('renders a span when condition is false', () => {
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ConditionalLink to="/test" condition={false}>
+            Link Text
+          </ConditionalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const span = screen.getByText('Link Text');
+    expect(span.tagName).toBe('DIV');
+  });
+
+  it('passes additional props when rendering a link', () => {
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ConditionalLink
+            to="/test"
+            condition={true}
+            className="custom-class"
+            data-test="test-id"
+          >
+            Link Text
+          </ConditionalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const link = screen.getByText('Link Text');
+    expect(link).toHaveClass('custom-class');
+    expect(link).toHaveAttribute('data-test', 'test-id');
+  });
+
+  it('renders a component if no external (href) link is passed', () => {
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ConditionalLink
+            condition={true}
+            item={{
+              '@id': 'http://localhost:3000/en/welcome-to-volto',
+            }}
+          >
+            <h1>Title</h1>
+          </ConditionalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const title = screen.getByText('Title');
+    expect(title.tagName).toBe('H1');
+  });
+});

package/src/components/manage/ConditionalLink/ConditionalLink.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import type { UniversalLinkProps } from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+
+type ConditionalLinkProps = {
+  condition?: boolean;
+  to?: string; // Alias for href
+  children: React.ReactNode;
+} & Omit<UniversalLinkProps, 'href' | 'item'> & {
+    href?: string;
+    item?: UniversalLinkProps['item'];
+  };
+
+const ConditionalLink = React.forwardRef<
+  HTMLAnchorElement | HTMLDivElement,
+  ConditionalLinkProps
+>(function ConditionalLink(
+  { condition = true, to, href, item, children, ...rest },
+  ref,
+) {
+  if (!condition) {
+    return <>{children}</>;
+  }
+
+  // Normalize: prefer explicit href over "to"
+  const finalHref = href ?? to;
+
+  // Rebuild props safely to satisfy UniversalLinkProps union
+  const universalLinkProps: UniversalLinkProps = finalHref
+    ? { ...rest, href: finalHref, children }
+    : { ...rest, item: item!, children }; // assume item is defined if href isn't
+
+  return <UniversalLink ref={ref} {...universalLinkProps} />;
+});
+
+export default React.memo(ConditionalLink);

package/src/components/manage/Contents/Contents.jsx

@@ -264,6 +264,10 @@ const messages = defineMessages({
     id: 'All',
     defaultMessage: 'All',
   },
+  resultCount: {
+    id: 'resultCount',
+    defaultMessage: 'Result count',
+  },
 });
 
 /**
@@ -1161,6 +1165,9 @@ class Contents extends Component {
                     onOk={this.onDeleteOk}
                     items={this.state.items}
                     itemsToDelete={this.state.itemsToDelete}
+                    hasMultiplePages={
+                      Math.ceil(this.props.total / this.state.pageSize) > 1
+                    }
                   />
                   <ContentsUploadModal
                     open={this.state.showUpload}
@@ -1215,8 +1222,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.upload}
                                 className="upload"
+                                aria-controls="contents-table-wrapper"
                                 aria-label={this.props.intl.formatMessage(
-                                  messages.upload,
+                                  messages.filter,
                                 )}
                               >
                                 <Icon
@@ -1548,7 +1556,20 @@ class Contents extends Component {
                           </Dropdown.Menu>
                         </Dropdown>
                       </Segment>
-                      <div className="contents-table-wrapper">
+                      <div
+                        id="contents-table-wrapper"
+                        className="contents-table-wrapper"
+                        role="region"
+                      >
+                        <span
+                          aria-live="polite"
+                          className="search-feedback"
+                          role="status"
+                        >
+                          {`${this.props.intl.formatMessage(
+                            messages.resultCount,
+                          )}: ${this.props.total || 0}`}
+                        </span>
                         <Table selectable compact singleLine attached>
                           <Table.Header>
                             <Table.Row>

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

@@ -8,20 +8,29 @@ import { __test__ as Contents } from './Contents';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+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();
+});
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('../../theme/Pagination/Pagination', () =>
-  jest.fn(() => <div className="Pagination" />),
-);
-jest.mock('./ContentsUploadModal', () =>
-  jest.fn(() => <div className="UploadModal" />),
-);
+vi.mock('../../theme/Pagination/Pagination', () => ({
+  default: vi.fn(() => <div className="Pagination" />),
+}));
+vi.mock('./ContentsUploadModal', () => ({
+  default: vi.fn(() => <div className="UploadModal" />),
+}));
 
 describe('Contents', () => {
   it('renders a folder contents view component', () => {
@@ -87,7 +96,21 @@ describe('Contents', () => {
       },
       intl: {
         locale: 'en',
-        messages: {},
+        messages: {
+          ID: 'ID',
+          Title: 'Title',
+          'Publication date': 'Publication date',
+          'Created on': 'Created on',
+          'Last modified': 'Last modified',
+          Type: 'Type',
+        },
+      },
+      navroot: {
+        data: {
+          navroot: {
+            '@type': 'Plone Site',
+          },
+        },
       },
     });
     const { container } = render(

package/src/components/manage/Contents/ContentsBreadcrumbs.Multilingual.test.jsx

@@ -3,14 +3,9 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
 
 import ContentsBreadcrumbs from './ContentsBreadcrumbs';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-});
-
 const mockStore = configureStore();
 
 describe('ContentsBreadcrumbs Multilingual', () => {
@@ -24,6 +19,15 @@ describe('ContentsBreadcrumbs Multilingual', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@type': 'LRF',
+            '@id': '/en',
+            title: 'English',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -49,6 +53,15 @@ describe('ContentsBreadcrumbs Multilingual', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@type': 'LRF',
+            '@id': '/en',
+            title: 'English',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/manage/Contents/ContentsBreadcrumbs.jsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import { Breadcrumb } from 'semantic-ui-react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
-import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
+import { useSelector } from 'react-redux';
 import ContentsBreadcrumbsRootItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsRootItem';
 import ContentsBreadcrumbsHomeItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsHomeItem';
 
-import config from '@plone/volto/registry';
-
 const messages = defineMessages({
   home: {
     id: 'Home',
@@ -20,15 +18,22 @@ const messages = defineMessages({
 });
 
 const ContentsBreadcrumbs = (props) => {
-  const { settings } = config;
   const { items } = props;
   const intl = useIntl();
-  const pathname = useLocation().pathname;
-  const lang = pathname.split('/')[1];
+  const navroot = useSelector((state) => state.navroot.data.navroot);
+  const navrootIsPortal = navroot?.['@type'] === 'Plone Site';
 
   return (
     <Breadcrumb>
-      {settings.isMultilingual && (
+      {navrootIsPortal ? (
+        <Link
+          to="/contents"
+          className="section"
+          title={intl.formatMessage(messages.home)}
+        >
+          <ContentsBreadcrumbsHomeItem />
+        </Link>
+      ) : (
         <>
           <Link
             to="/contents"
@@ -38,26 +43,15 @@ const ContentsBreadcrumbs = (props) => {
             <ContentsBreadcrumbsRootItem />
           </Link>
           <Breadcrumb.Divider />
+          <Link
+            to={`${navroot?.['@id']}/contents`}
+            className="section"
+            title={navroot?.title}
+          >
+            {navroot?.title}
+          </Link>
         </>
       )}
-      {settings.isMultilingual && pathname?.split('/')?.length > 2 && (
-        <Link
-          to={`/${lang}/contents`}
-          className="section"
-          title={intl.formatMessage(messages.home)}
-        >
-          {langmap?.[lang]?.nativeName ?? lang}
-        </Link>
-      )}
-      {!settings.isMultilingual && (
-        <Link
-          to="/contents"
-          className="section"
-          title={intl.formatMessage(messages.home)}
-        >
-          <ContentsBreadcrumbsHomeItem />
-        </Link>
-      )}
       {items.map((breadcrumb, index, breadcrumbs) => [
         <Breadcrumb.Divider key={`divider-${breadcrumb.url}`} />,
         index < breadcrumbs.length - 1 ? (

package/src/components/manage/Contents/ContentsBreadcrumbs.test.jsx

@@ -19,6 +19,13 @@ describe('ContentsBreadcrumbs', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@type': 'Plone Site',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -44,6 +51,13 @@ describe('ContentsBreadcrumbs', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@type': 'Plone Site',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>