@plone/volto 19.0.0-alpha.2 → 19.0.0-alpha.20

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

@@ -7,11 +7,7 @@ import ContentsTagsModal from './ContentsTagsModal';
 
 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');
 
 describe('ContentsTagsModal', () => {
   it('renders a contents tags modal component', () => {

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import { waitFor } from '@testing-library/react';
 import ContentsUploadModal from './ContentsUploadModal';
 
 const mockStore = configureStore();
@@ -21,19 +20,17 @@ describe('ContentsUploadModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { baseElement } = render(
       <Provider store={store}>
         <ContentsUploadModal
           pathname="/blog"
-          open={false}
+          open={true}
           onOk={() => {}}
           onCancel={() => {}}
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    await waitFor(() => {});
-    expect(json).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 
   it('renders a contents upload modal component that only allows images', async () => {
@@ -49,20 +46,18 @@ describe('ContentsUploadModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { baseElement } = render(
       <Provider store={store}>
         <ContentsUploadModal
           pathname="/blog"
-          open={false}
+          open={true}
           onOk={() => {}}
           onCancel={() => {}}
           accept={['image/*']}
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    await waitFor(() => {});
-    expect(json).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
   it('renders a contents upload modal component that only allows 10MB files', async () => {
     const store = mockStore({
@@ -77,20 +72,18 @@ describe('ContentsUploadModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { baseElement } = render(
       <Provider store={store}>
         <ContentsUploadModal
           pathname="/blog"
-          open={false}
+          open={true}
           onOk={() => {}}
           onCancel={() => {}}
           maxSize={1000000}
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    await waitFor(() => {});
-    expect(json).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
   it('renders a contents upload modal component that only allows 1 file', async () => {
     const store = mockStore({
@@ -105,19 +98,17 @@ describe('ContentsUploadModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { baseElement } = render(
       <Provider store={store}>
         <ContentsUploadModal
           pathname="/blog"
-          open={false}
+          open={true}
           onOk={() => {}}
           onCancel={() => {}}
           multiple={false}
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    await waitFor(() => {});
-    expect(json).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 });

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

@@ -7,11 +7,7 @@ import ContentsWorkflowModal from './ContentsWorkflowModal';
 
 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');
 
 describe('ContentsWorkflowModal', () => {
   it('renders a contents workflow modal component', () => {

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

@@ -0,0 +1,323 @@
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import {
+  Button,
+  Modal,
+  Table,
+  Input,
+  Dimmer,
+  Progress,
+} from 'semantic-ui-react';
+import cx from 'classnames';
+import filesize from 'filesize';
+import { readAsDataURL } from 'promise-file-reader';
+
+import { createContent } from '@plone/volto/actions/content/content';
+import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
+import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import uploadSVG from '@plone/volto/icons/upload.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import FormattedRelativeDate from '@plone/volto/components/theme/FormattedDate/FormattedRelativeDate';
+import Image from '@plone/volto/components/theme/Image/Image';
+
+const SUBREQUEST = 'batch-upload';
+
+const messages = defineMessages({
+  cancel: {
+    id: 'Cancel',
+    defaultMessage: 'Cancel',
+  },
+  upload: {
+    id: '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
+    defaultMessage:
+      '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
+  },
+  filesUploaded: {
+    id: 'Files uploaded: {uploadedFiles}',
+    defaultMessage: 'Files uploaded: {uploadedFiles}',
+  },
+  dropFiles: {
+    id: 'Drop files here to upload',
+    defaultMessage: 'Drop files here to upload',
+  },
+  releaseToAdd: {
+    id: 'Release to add file(s) to this folder',
+    defaultMessage: 'Release to add file(s) to this folder',
+  },
+  totalFilesToUpload: {
+    id: 'Total files to upload: {totalFiles}',
+    defaultMessage: 'Total files to upload: {totalFiles}',
+  },
+  uploadFiles: {
+    id: 'Upload Files ({count})',
+    defaultMessage: 'Upload Files ({count})',
+  },
+});
+
+const DropZoneContent = (props) => {
+  const { onOk, onCancel, pathname, children } = props;
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [droppedFiles, setDroppedFiles] = useState([]);
+  const [totalFiles, setTotalFiles] = useState(0);
+
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const request = useSelector(
+    (state) => state.content.subrequests?.[SUBREQUEST] || {},
+    shallowEqual,
+  );
+
+  const uploadedFiles = useSelector((state) => state.content.uploadedFiles);
+  const prevrequestloading = usePrevious(request.loading);
+
+  useEffect(() => {
+    if (prevrequestloading && request.loaded) {
+      onOk();
+      setDroppedFiles([]);
+    }
+  }, [prevrequestloading, request.loaded, onOk]);
+
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsDragOver(false);
+    }
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const onDrop = async (e) => {
+    setIsDragOver(false);
+    const newFiles = Array.from(e.dataTransfer.files);
+    const validFiles = [];
+    for (let i = 0; i < newFiles.length; i++) {
+      if (validateFileUploadSize(newFiles[i], intl.formatMessage)) {
+        await readAsDataURL(newFiles[i]).then((data) => {
+          const fields = data.match(/^data:(.*);(.*),(.*)$/);
+          newFiles[i].preview = fields[0];
+        });
+        validFiles.push(newFiles[i]);
+      }
+    }
+    setDroppedFiles((prev) => prev.concat(validFiles));
+    setTotalFiles((prev) => prev + validFiles.length);
+    setShowModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+    onCancel();
+    setDroppedFiles([]);
+    setTotalFiles(0);
+  };
+
+  const onSubmit = () => {
+    Promise.all(droppedFiles.map((file) => readAsDataURL(file))).then(
+      (dataUrls) => {
+        dispatch(
+          createContent(
+            pathname,
+            droppedFiles.map((file, index) => {
+              const fields = dataUrls[index].match(/^data:(.*);(.*),(.*)$/);
+              const image = fields[1].split('/')[0] === 'image';
+              return {
+                '@type': image ? 'Image' : 'File',
+                title: file.name,
+                [image ? 'image' : 'file']: {
+                  data: fields[3],
+                  encoding: fields[2],
+                  'content-type': fields[1],
+                  filename: file.name,
+                },
+              };
+            }),
+            SUBREQUEST,
+          ),
+        );
+      },
+    );
+    handleCloseModal();
+  };
+  const onRemoveFile = (index) => {
+    const updatedFiles = droppedFiles.filter((file, i) => i !== index);
+    setDroppedFiles(updatedFiles);
+    setTotalFiles(updatedFiles.length);
+  };
+
+  const onChangeFileName = (e, index) => {
+    let copyOfFiles = [...droppedFiles];
+    let originalFile = droppedFiles[index];
+    let newFile = new File([originalFile], e.target.value, {
+      type: originalFile.type,
+    });
+
+    newFile.preview = originalFile.preview;
+    newFile.path = e.target.value;
+    copyOfFiles[index] = newFile;
+    setDroppedFiles(copyOfFiles);
+  };
+
+  return (
+    <>
+      <div
+        className={cx('contents-dropzone', {
+          'drag-over': isDragOver,
+          'drag-inactive': !isDragOver,
+        })}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={onDrop}
+      >
+        {children}
+        {isDragOver && (
+          <div className="dropzone-overlay">
+            <div className="dropzone-content">
+              <Icon name={uploadSVG} size="48px" />
+              <h3>{intl.formatMessage(messages.dropFiles)}</h3>
+              <p>{intl.formatMessage(messages.releaseToAdd)}</p>
+            </div>
+          </div>
+        )}
+      </div>
+      <Modal
+        open={totalFiles > 0 && showModal}
+        onClose={handleCloseModal}
+        className="contents-upload-modal"
+      >
+        <Modal.Header>
+          {intl.formatMessage(messages.uploadFiles, {
+            count: droppedFiles.length,
+          })}
+        </Modal.Header>
+        <Dimmer active={request.loading}>
+          <div className="progress-container">
+            <Progress
+              className="progress-bar"
+              value={uploadedFiles}
+              total={totalFiles}
+            >
+              {intl.formatMessage(messages.filesUploaded, {
+                uploadedFiles,
+              })}
+              <br />
+              {intl.formatMessage(messages.totalFilesToUpload, {
+                totalFiles,
+              })}
+            </Progress>
+          </div>
+        </Dimmer>
+        <Modal.Content>
+          {droppedFiles.length > 0 && (
+            <Table compact singleLine>
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeaderCell width={8}>
+                    <FormattedMessage id="Filename" defaultMessage="Filename" />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell width={4}>
+                    <FormattedMessage
+                      id="Last modified"
+                      defaultMessage="Last modified"
+                    />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell width={4}>
+                    <FormattedMessage
+                      id="File size"
+                      defaultMessage="File size"
+                    />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell width={4}>
+                    <FormattedMessage id="Preview" defaultMessage="Preview" />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell />
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {droppedFiles.map((file, index) => (
+                  <Table.Row className="upload-row" key={index}>
+                    <Table.Cell>
+                      <Input
+                        className="file-name"
+                        value={file.name}
+                        onChange={(e) => onChangeFileName(e, index)}
+                      />
+                    </Table.Cell>
+                    <Table.Cell>
+                      {file.lastModifiedDate && (
+                        <FormattedRelativeDate date={file.lastModifiedDate} />
+                      )}
+                    </Table.Cell>
+                    <Table.Cell>{filesize(file.size, { round: 0 })}</Table.Cell>
+                    <Table.Cell>
+                      {file.type.split('/')[0] === 'image' && (
+                        <Image
+                          src={file.preview}
+                          height={60}
+                          className="ui image"
+                        />
+                      )}
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Icon
+                        name={clearSVG}
+                        size="24px"
+                        onClick={() => onRemoveFile(index)}
+                      />
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
+          )}
+        </Modal.Content>
+        <Modal.Actions>
+          {droppedFiles.length > 0 && (
+            <Button
+              basic
+              circular
+              primary
+              floated="right"
+              icon="arrow right"
+              aria-label={intl.formatMessage(messages.upload, {
+                count: droppedFiles.length,
+              })}
+              onClick={onSubmit}
+              title={intl.formatMessage(messages.upload, {
+                count: droppedFiles.length,
+              })}
+              size="big"
+            />
+          )}
+          <Button
+            basic
+            circular
+            secondary
+            icon="remove"
+            aria-label={intl.formatMessage(messages.cancel)}
+            title={intl.formatMessage(messages.cancel)}
+            floated="right"
+            size="big"
+            onClick={handleCloseModal}
+          />
+        </Modal.Actions>
+      </Modal>
+    </>
+  );
+};
+
+export default DropZoneContent;

package/src/components/manage/Contents/__mocks__/index.tsx

@@ -1,21 +1,5 @@
-/* TODO: When the Volto Team removes Jest configuration support from Volto core, update this file with the Vitest version of the mock.
-Then, in the tests, we need to replace:
+export const Contents = vi.fn(() => <div className="Contents" />);
 
-vi.mock('@plone/volto/components/manage/Contents', async () => {
-  return await import(
-    '@plone/volto/components/manage/Contents/__mocks__/index.vitest.tsx'
-  );
-});
-
-with the following:
-
-vi.mock('@plone/volto/components/manage/Contents');
-
-Finally, remove this comment.
-*/
-
-export const Contents = jest.fn(() => <div className="Contents" />);
-
-export const ContentsRenameModal = jest.fn(() => (
+export const ContentsRenameModal = vi.fn(() => (
   <div className="ContentsRenameModal" />
 ));

package/src/components/manage/Controlpanels/Aliases.test.jsx

@@ -10,11 +10,7 @@ import { MemoryRouter } from 'react-router';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-vi.mock('@plone/volto/components/manage/Widgets', async () => {
-  return await import(
-    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Widgets');
 
 vi.mock('../../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),

package/src/components/manage/Controlpanels/ContentType.jsx

@@ -182,7 +182,7 @@ class ContentType extends Component {
       return <Error error={this.state.error} />;
     }
 
-    if (this.props.controlpanel) {
+    if (this.props.controlpanel?.data) {
       let controlpanel = this.props.controlpanel;
       if (controlpanel?.data?.filter_content_types === false) {
         controlpanel.data.filter_content_types = { title: 'all', token: 'all' };

package/src/components/manage/Controlpanels/ContentType.test.jsx

@@ -8,11 +8,7 @@ import ContentType from './ContentType';
 
 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" />),
 }));

package/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx

@@ -494,8 +494,9 @@ class GroupsControlpanel extends Component {
                       messages.addGroupsFormGroupNameTitle,
                     ),
                     type: 'string',
-                    description:
-                      'A unique identifier for the group. Can not be changed after creation.',
+                    description: this.props.intl.formatMessage(
+                      messages.addGroupsFormGroupNameDescription,
+                    ),
                   },
                   email: {
                     title: this.props.intl.formatMessage(

package/src/components/manage/Controlpanels/Relations/Relations.jsx

@@ -47,7 +47,7 @@ const RelationsControlPanel = () => {
 
   return (
     <>
-      <div className="ui container">
+      <div className="">
         <div className="relations-control-panel">
           <Helmet title={intl.formatMessage(messages.relations)} />
           {can_edit ? (

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

@@ -9,11 +9,7 @@ import AddRule from './AddRule';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-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="Toolbar" />),

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

@@ -13,11 +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/components/manage/Form');
 
 describe('EditRule', () => {
   it('renders rules edit interface', () => {

package/src/components/manage/Controlpanels/UndoControlpanel.test.jsx

@@ -7,11 +7,7 @@ import UndoControlpanel from './UndoControlpanel';
 
 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" />),
 }));