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

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

@@ -0,0 +1,214 @@
+import React from 'react';
+import { HashLink as Link } from 'react-router-hash-link';
+import { useSelector } from 'react-redux';
+import {
+  flattenToAppURL,
+  isInternalURL,
+  URLUtils,
+} from '@plone/volto/helpers/Url/Url';
+import config from '@plone/volto/registry';
+import cx from 'classnames';
+import type { ObjectBrowserItem } from '@plone/types';
+
+type BaseProps = {
+  openLinkInNewTab?: boolean;
+  download?: boolean;
+  children: React.ReactNode;
+  className?: string;
+  title?: string;
+  smooth?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+};
+
+type HrefOnly = {
+  href: string;
+  item?: never;
+} & BaseProps;
+
+type ItemOnly = {
+  href?: never;
+  item: Partial<ObjectBrowserItem> & { remoteUrl?: string };
+} & BaseProps;
+
+export type UniversalLinkProps = HrefOnly | ItemOnly;
+export interface AppState {
+  content: {
+    data?: {
+      '@components'?: {
+        translations?: {
+          items?: { language: string; '@id': string }[];
+        };
+      };
+    };
+  };
+  navroot: {
+    data: {
+      navroot: {
+        id: string;
+      };
+    };
+  };
+  intl: {
+    locale: string;
+  };
+  userSession: {
+    token: string | null;
+  };
+}
+
+export const __test = {
+  renderCounter: () => {},
+};
+
+export function getUrl(
+  props: UniversalLinkProps,
+  token: string | null,
+  item: UniversalLinkProps['item'],
+  children: React.ReactNode,
+): string {
+  if ('href' in props && typeof props.href === 'string') {
+    return props.href;
+  }
+
+  if (!item || item['@id'] === '') return config.settings.publicURL;
+  if (!item['@id']) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'Invalid item passed to UniversalLink',
+      item,
+      props,
+      children,
+    );
+    return '#';
+  }
+
+  let url = flattenToAppURL(item['@id']);
+  const remoteUrl = item.remoteUrl || item.getRemoteUrl;
+
+  if (!token && remoteUrl) {
+    url = remoteUrl;
+  }
+
+  if (
+    !token &&
+    item['@type'] &&
+    config.settings.downloadableObjects.includes(item['@type'])
+  ) {
+    url = `${url}/@@download/file`;
+  }
+
+  if (
+    !token &&
+    item['@type'] &&
+    config.settings.viewableInBrowserObjects.includes(item['@type'])
+  ) {
+    url = `${url}/@@display-file/file`;
+  }
+
+  return url;
+}
+
+const UniversalLink = React.memo(
+  React.forwardRef<HTMLAnchorElement | HTMLDivElement, UniversalLinkProps>(
+    function UniversalLink(props, ref) {
+      const {
+        openLinkInNewTab,
+        download,
+        children,
+        className,
+        title,
+        smooth,
+        onClick,
+        onKeyDown,
+        item,
+        ...rest
+      } = props;
+      __test.renderCounter();
+
+      const token = useSelector<AppState, string | null>(
+        (state) => state.userSession?.token,
+      );
+
+      let url = getUrl(props, token, item, children);
+
+      const isExternal = !isInternalURL(url);
+
+      const isDownload =
+        (!isExternal && url.includes('@@download')) || download;
+      const isDisplayFile =
+        (!isExternal && url.includes('@@display-file')) || false;
+
+      const checkedURL = URLUtils.checkAndNormalizeUrl(url);
+
+      url = checkedURL.url;
+      let tag = (
+        <Link
+          to={flattenToAppURL(url)}
+          target={openLinkInNewTab ?? false ? '_blank' : undefined}
+          title={title}
+          className={className}
+          smooth={smooth ?? config.settings.hashLinkSmoothScroll}
+          // @ts-ignore
+          ref={ref}
+          {...rest}
+        >
+          {children}
+        </Link>
+      );
+
+      if (isExternal) {
+        const isTelephoneOrMail = checkedURL.isMail || checkedURL.isTelephone;
+        const getClassName = cx({ external: !isTelephoneOrMail }, className);
+
+        tag = (
+          <a
+            href={url}
+            title={title}
+            target={
+              !isTelephoneOrMail && !(openLinkInNewTab === false)
+                ? '_blank'
+                : undefined
+            }
+            rel="noopener noreferrer"
+            {...rest}
+            className={getClassName}
+            ref={ref as React.Ref<HTMLAnchorElement>}
+          >
+            {children}
+          </a>
+        );
+      } else if (isDownload) {
+        tag = (
+          <a
+            href={flattenToAppURL(url)}
+            download
+            title={title}
+            {...rest}
+            className={className}
+            ref={ref as React.Ref<HTMLAnchorElement>}
+          >
+            {children}
+          </a>
+        );
+      } else if (isDisplayFile) {
+        tag = (
+          <a
+            title={title}
+            target="_blank"
+            rel="noopener noreferrer"
+            {...rest}
+            href={flattenToAppURL(url)}
+            className={className}
+            ref={ref as React.Ref<HTMLAnchorElement>}
+          >
+            {children}
+          </a>
+        );
+      }
+      return tag;
+    },
+  ),
+);
+
+export default UniversalLink;

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

@@ -8,11 +8,25 @@ import ArrayWidget from './ArrayWidget';
 
 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'
+  );
+});
+
+// Mock react-sortable-hoc to prevent the container error
+vi.mock('react-sortable-hoc', () => ({
+  ...vi.importActual('react-sortable-hoc'),
+  SortableContainer: (component) => component,
+  SortableElement: (component) => component,
+}));
+
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
 test('renders an array widget component', async () => {
   const store = mockStore({
@@ -27,6 +41,7 @@ test('renders an array widget component', async () => {
       },
     },
   });
+
   const component = renderer.create(
     <Provider store={store}>
       <ArrayWidget
@@ -38,6 +53,7 @@ test('renders an array widget component', async () => {
       />
     </Provider>,
   );
+
   await waitFor(() => {});
   expect(component.toJSON()).toMatchSnapshot();
 });
@@ -83,5 +99,6 @@ test("No 'No value' option when default value is 0", async () => {
     container.querySelector('.react-select__dropdown-indicator'),
     { button: 0 },
   );
+
   expect(container).toMatchSnapshot();
 });

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

@@ -7,11 +7,18 @@ import CheckboxGroupWidget from './CheckboxGroupWidget';
 
 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();
+});
 
 test('renders a checkbox group widget component', async () => {
   const store = mockStore({

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

@@ -6,11 +6,18 @@ import { waitFor, render, screen } from '@testing-library/react';
 
 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();
+});
 
 test('renders a datetime widget component', async () => {
   const store = mockStore({
@@ -19,6 +26,7 @@ test('renders a datetime widget component', async () => {
       messages: {},
     },
   });
+
   const isoDate = new Date('2019-10-21').toISOString();
   const { container } = render(
     <Provider store={store}>
@@ -28,20 +36,24 @@ test('renders a datetime widget component', async () => {
         fieldSet="default"
         onChange={() => {}}
         value={isoDate}
+        showTime={true}
       />
     </Provider>,
   );
+
   await waitFor(() => screen.getByText(/My field/));
+  await waitFor(() => screen.getByPlaceholderText('Time'));
   expect(container).toMatchSnapshot();
 });
 
-test('datetime widget converts UTC date and adapt to local datetime', async () => {
+test('datetime widget converts UTC date and adapts to local datetime', async () => {
   const store = mockStore({
     intl: {
       locale: 'en',
       messages: {},
     },
   });
+
   const date = '2020-02-10T15:01:00.000Z';
   const { container } = render(
     <Provider store={store}>
@@ -50,9 +62,12 @@ test('datetime widget converts UTC date and adapt to local datetime', async () =
         title="My field"
         onChange={() => {}}
         value={date}
+        showTime={true}
       />
     </Provider>,
   );
+
   await waitFor(() => screen.getByText(/My field/));
+  await waitFor(() => screen.getByPlaceholderText('Time'));
   expect(container).toMatchSnapshot();
 });

package/src/components/manage/Widgets/ImageWidget.jsx

@@ -131,7 +131,10 @@ const UnconnectedImageInput = (props) => {
       const file = eventOrFile.target
         ? eventOrFile.target.files[0]
         : eventOrFile[0];
-      if (!validateFileUploadSize(file, intl.formatMessage)) return;
+      if (!validateFileUploadSize(file, intl.formatMessage)) {
+        setUploading(false);
+        return;
+      }
       readAsDataURL(file).then((fileData) => {
         const fields = fileData.match(/^data:(.*);(.*),(.*)$/);
         dispatch(
@@ -196,10 +199,10 @@ const UnconnectedImageInput = (props) => {
         noClick
         accept="image/*"
         onDrop={(acceptedFiles) => {
+          setDragging(false);
           if (acceptedFiles.length > 0) {
             handleUpload(acceptedFiles);
           } else {
-            setDragging(false);
             toast.error(
               <Toast
                 error

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

@@ -16,13 +16,14 @@ test('renders a number widget component', () => {
   });
   const component = renderer.create(
     <Provider store={store}>
-      <NumberWidget
-        id="my-field"
-        title="My field"
-        fieldSet="default"
-        onChange={() => {}}
-      />
-      ,
+      <>
+        <NumberWidget
+          id="my-field"
+          title="My field"
+          fieldSet="default"
+          onChange={() => {}}
+        />
+      </>
     </Provider>,
   );
   const json = component.toJSON();

package/src/components/manage/Widgets/ObjectListWidget.jsx

@@ -14,6 +14,7 @@ import deleteSVG from '@plone/volto/icons/delete.svg';
 import addSVG from '@plone/volto/icons/add.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import { v4 as uuid } from 'uuid';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   labelRemoveItem: {
@@ -71,11 +72,20 @@ const ObjectListWidget = (props) => {
     block,
     fieldSet,
     id,
-    schema,
     value = [],
     onChange,
     schemaExtender,
+    schemaName,
   } = props;
+
+  // This allows to use a `schemaName` prop defined as source of the schema
+  // if not present, it will use the schema defined in the schema prop
+  const schema =
+    config.getUtility({
+      type: 'schema',
+      name: schemaName,
+    }).method || props.schema;
+
   const [localActiveObject, setLocalActiveObject] = React.useState(
     props.activeObject ?? value.length - 1,
   );

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

@@ -4,20 +4,30 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import ObjectListWidget from './ObjectListWidget';
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-jest.mock('@plone/volto/components/manage/Form');
+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/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
 let mockSerial = 0;
 const mockStore = configureStore();
 
-jest.mock('uuid', () => {
+vi.mock('uuid', () => {
   return {
-    v4: jest.fn().mockImplementation(() => `id-${mockSerial++}`),
+    v4: vi.fn().mockImplementation(() => `id-${mockSerial++}`),
   };
 });
 

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

@@ -5,7 +5,11 @@ import { Provider } from 'react-intl-redux';
 import { render, fireEvent } from '@testing-library/react';
 import ObjectWidget from './ObjectWidget';
 
-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/Widgets/RadioGroupWidget.test.jsx

@@ -7,11 +7,18 @@ import RadioGroupWidget from './RadioGroupWidget';
 
 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();
+});
 
 test('renders a radio group widget component', async () => {
   const store = mockStore({

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

@@ -3,14 +3,20 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { waitFor } from '@testing-library/react';
-
 import RecurrenceWidget from './RecurrenceWidget';
 
-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();
+});
 
 const mockStore = configureStore();