@plone/volto 18.0.0-alpha.4 → 18.0.0-alpha.40

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

@@ -13,10 +13,11 @@ import {
   Header,
   Icon,
   Image,
-  Loader,
   Modal,
   Table,
   Segment,
+  Input,
+  Progress,
 } from 'semantic-ui-react';
 import loadable from '@loadable/component';
 import { concat, filter, map } from 'lodash';
@@ -39,6 +40,14 @@ const messages = defineMessages({
     defaultMessage:
       '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
   },
+  filesUploaded: {
+    id: 'Files uploaded: {uploadedFiles}',
+    defaultMessage: 'Files uploaded: {uploadedFiles}',
+  },
+  totalFilesToUpload: {
+    id: 'Total files to upload: {totalFiles}',
+    defaultMessage: 'Total files to upload: {totalFiles}',
+  },
 });
 
 const SUBREQUEST = 'batch-upload';
@@ -64,6 +73,14 @@ class ContentsUploadModal extends Component {
     open: PropTypes.bool.isRequired,
     onOk: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
+    uploadedFiles: PropTypes.number,
+    multiple: PropTypes.bool,
+    minSize: PropTypes.number,
+    maxSize: PropTypes.number,
+    accept: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
   };
 
   /**
@@ -80,9 +97,9 @@ class ContentsUploadModal extends Component {
     this.onSubmit = this.onSubmit.bind(this);
     this.state = {
       files: [],
+      totalFiles: 0,
     };
   }
-
   /**
    * Component will receive props
    * @method componentWillReceiveProps
@@ -112,6 +129,7 @@ class ContentsUploadModal extends Component {
           index !== parseInt(event.target.getAttribute('value'), 10),
       ),
     });
+    this.setState((prevState) => ({ totalFiles: prevState.totalFiles - 1 }));
   }
 
   /**
@@ -134,6 +152,8 @@ class ContentsUploadModal extends Component {
     this.setState({
       files: concat(this.state.files, validFiles),
     });
+
+    this.setState({ totalFiles: validFiles.length });
   };
 
   /**
@@ -146,10 +166,30 @@ class ContentsUploadModal extends Component {
     this.setState({
       files: [],
     });
+    this.setState({ totalFiles: 0 });
+  }
+  /**
+   * Name change handler
+   * @method onChangeFileName
+   * @returns {undefined}
+   */
+
+  onChangeFileName(e, index) {
+    let copyOfFiles = [...this.state.files];
+    let originalFile = this.state.files[index];
+    let newFile = new File([originalFile], e.target.value, {
+      type: originalFile.type,
+    });
+    newFile.preview = originalFile.preview;
+    newFile.path = e.target.value;
+    copyOfFiles[index] = newFile;
+    this.setState({
+      files: copyOfFiles,
+    });
   }
 
   /**
-   * Submit handler
+   * Submit handlers
    * @method onSubmit
    * @returns {undefined}
    */
@@ -184,26 +224,52 @@ class ContentsUploadModal extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const {
+      multiple = true,
+      minSize = null,
+      maxSize = null,
+      accept = null,
+      disabled = false,
+    } = this.props;
+
+    const dropzoneOptions = {
+      multiple,
+      minSize,
+      maxSize,
+      accept,
+      disabled,
+    };
+
     return (
       this.props.open && (
-        <Modal open={this.props.open}>
+        <Modal className="contents-upload-modal" open={this.props.open}>
           <Header>
             <FormattedMessage id="Upload files" defaultMessage="Upload files" />
           </Header>
+
           <Dimmer active={this.props.request.loading}>
-            <Loader>
-              <FormattedMessage
-                id="Uploading files"
-                defaultMessage="Uploading files"
-              />
-            </Loader>
+            <div className="progress-container">
+              <Progress
+                className="progress-bar"
+                value={this.props.uploadedFiles}
+                total={this.state.totalFiles}
+              >
+                {this.props.intl.formatMessage(messages.filesUploaded, {
+                  uploadedFiles: this.props.uploadedFiles,
+                })}
+                <br />
+                {this.props.intl.formatMessage(messages.totalFilesToUpload, {
+                  totalFiles: this.state.totalFiles,
+                })}
+              </Progress>
+            </div>
           </Dimmer>
           <Modal.Content>
             <Dropzone
               onDrop={this.onDrop}
               className="dropzone"
               noDragEventsBubbling={true}
-              multiple={true}
+              {...dropzoneOptions}
             >
               {({ getRootProps, getInputProps }) => (
                 <div {...getRootProps({ className: 'dashed' })}>
@@ -268,8 +334,14 @@ class ContentsUploadModal extends Component {
                 </Table.Header>
                 <Table.Body>
                   {map(this.state.files, (file, index) => (
-                    <Table.Row className="upload-row" key={file.name}>
-                      <Table.Cell>{file.name}</Table.Cell>
+                    <Table.Row className="upload-row" key={index}>
+                      <Table.Cell>
+                        <Input
+                          className="file-name"
+                          value={file.name}
+                          onChange={(e) => this.onChangeFileName(e, index)}
+                        />
+                      </Table.Cell>
                       <Table.Cell>
                         {file.lastModifiedDate && (
                           <FormattedRelativeDate date={file.lastModifiedDate} />
@@ -338,6 +410,7 @@ export default compose(
   connect(
     (state) => ({
       request: state.content.subrequests?.[SUBREQUEST] || {},
+      uploadedFiles: state.content.uploadedFiles,
     }),
     { createContent },
   ),

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

@@ -35,4 +35,89 @@ describe('ContentsUploadModal', () => {
     await waitFor(() => {});
     expect(json).toMatchSnapshot();
   });
+
+  it('renders a contents upload modal component that only allows images', async () => {
+    const store = mockStore({
+      content: {
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <ContentsUploadModal
+          pathname="/blog"
+          open={false}
+          onOk={() => {}}
+          onCancel={() => {}}
+          accept={['image/*']}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    await waitFor(() => {});
+    expect(json).toMatchSnapshot();
+  });
+  it('renders a contents upload modal component that only allows 10MB files', async () => {
+    const store = mockStore({
+      content: {
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <ContentsUploadModal
+          pathname="/blog"
+          open={false}
+          onOk={() => {}}
+          onCancel={() => {}}
+          maxSize={1000000}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    await waitFor(() => {});
+    expect(json).toMatchSnapshot();
+  });
+  it('renders a contents upload modal component that only allows 1 file', async () => {
+    const store = mockStore({
+      content: {
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <ContentsUploadModal
+          pathname="/blog"
+          open={false}
+          onOk={() => {}}
+          onCancel={() => {}}
+          multiple={false}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    await waitFor(() => {});
+    expect(json).toMatchSnapshot();
+  });
 });

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

@@ -6,7 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { usePrevious } from '@plone/volto/helpers';
 import { getWorkflow, transitionWorkflow } from '@plone/volto/actions';
-import { ModalForm } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   default: {

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

@@ -7,7 +7,7 @@ import ContentsWorkflowModal from './ContentsWorkflowModal';
 
 const mockStore = configureStore();
 
-jest.mock('../Form/ModalForm', () => jest.fn(() => <div id="modalform" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('ContentsWorkflowModal', () => {
   it('renders a contents workflow modal component', () => {

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

@@ -0,0 +1,5 @@
+export const Contents = jest.fn(() => <div className="Contents" />);
+
+export const ContentsRenameModal = jest.fn(() => (
+  <div className="ContentsRenameModal" />
+));

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

@@ -0,0 +1,64 @@
+import loadable from '@loadable/component';
+
+export const Contents = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/Contents'
+    ),
+);
+
+export const ContentsRenameModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsRenameModal'
+    ),
+);
+
+export const ContentsBreadcrumbs = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsBreadcrumbs'
+    ),
+);
+
+export const ContentsIndexHeader = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsIndexHeader'
+    ),
+);
+
+export const ContentsItem = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsItem'
+    ),
+);
+
+export const ContentsUploadModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsUploadModal'
+    ),
+);
+
+export const ContentsPropertiesModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsPropertiesModal'
+    ),
+);
+
+export const ContentsWorkflowModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsWorkflowModal'
+    ),
+);
+
+export const ContentsTagsModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsTagsModal'
+    ),
+);

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

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import {
   Accordion,
   Button,
@@ -550,8 +550,8 @@ class AddonsControlpanel extends Component {
           )}
         </Segment.Group>
 
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -568,9 +568,9 @@ class AddonsControlpanel extends Component {
                   </Link>
                 </>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

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

@@ -1,5 +1,5 @@
 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';
 
@@ -7,9 +7,7 @@ import AddonsControlpanel from './AddonsControlpanel';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('AddonsControlpanel', () => {
   it('renders an addon control component', () => {
@@ -57,12 +55,13 @@ describe('AddonsControlpanel', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <AddonsControlpanel location={{ pathname: '/blog' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -10,7 +10,7 @@ import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { getBaseUrl, getParentUrl, Helmet } from '@plone/volto/helpers';
 import { removeAliases, addAliases, getAliases } from '@plone/volto/actions';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import {
   Container,
   Button,
@@ -26,7 +26,7 @@ import {
   Menu,
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import DatetimeWidget from '@plone/volto/components/manage/Widgets/DatetimeWidget';
+import { DatetimeWidget } from '@plone/volto/components/manage/Widgets';
 import { Icon, Toolbar } from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';
@@ -652,8 +652,8 @@ class Aliases extends Component {
             </Segment.Group>
           </article>
         </Container>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -667,9 +667,9 @@ class Aliases extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-intl-redux';
@@ -10,9 +10,8 @@ import { MemoryRouter } from 'react-router';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('@plone/volto/components/manage/Widgets');
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('Aliases', () => {
   it('renders an aliases control component', () => {
@@ -59,14 +58,15 @@ describe('Aliases', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Aliases location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -8,12 +8,13 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { getParentUrl } from '@plone/volto/helpers';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Button, Header } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 import { last, nth, join } from 'lodash';
-import { Error, Form, Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Error, Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { getControlpanel, updateControlpanel } from '@plone/volto/actions';
 
 import saveSVG from '@plone/volto/icons/save.svg';
@@ -210,8 +211,8 @@ class ContentType extends Component {
             hideActions
             loading={this.props.cpanelRequest.update.loading}
           />
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
+          {this.state.isClient &&
+            createPortal(
               <Toolbar
                 pathname={this.props.pathname}
                 hideDefaultViewButtons
@@ -248,9 +249,9 @@ class ContentType extends Component {
                     </Button>
                   </>
                 }
-              />
-            </Portal>
-          )}
+              />,
+              document.getElementById('toolbar'),
+            )}
         </div>
       );
     }

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

@@ -1,17 +1,15 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter, Route } from 'react-router-dom';
+import { render } from '@testing-library/react';
 
 import ContentType from './ContentType';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
-jest.mock('../Form/Form', () => jest.fn(() => <div id="form" />));
+jest.mock('@plone/volto/components/manage/Form');
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('ContentType', () => {
   it('renders dexterity content-type component', () => {
@@ -35,7 +33,8 @@ describe('ContentType', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter
           initialEntries={['/controlpanel/dexterity-types/Document']}
@@ -44,10 +43,11 @@ describe('ContentType', () => {
             path={'/controlpanel/dexterity-types/:id'}
             component={ContentType}
           />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });