@plone/volto 19.0.0-alpha.9 → 19.1.0

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

@@ -0,0 +1,339 @@
+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 hasFiles = (e) => {
+  return e.dataTransfer.types && e.dataTransfer.types.includes('Files');
+};
+
+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) => {
+    if (!hasFiles(e)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e) => {
+    if (!hasFiles(e)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsDragOver(false);
+    }
+  };
+
+  const handleDragOver = (e) => {
+    if (!hasFiles(e)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const onDrop = async (e) => {
+    e.preventDefault();
+    if (!hasFiles(e)) {
+      return;
+    }
+    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/AddonsControlpanel.jsx

@@ -27,6 +27,7 @@ import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
+import Error from '@plone/volto/components/theme/Error/Error';
 import circleBottomSVG from '@plone/volto/icons/circle-bottom.svg';
 import circleTopSVG from '@plone/volto/icons/circle-top.svg';
 import backSVG from '@plone/volto/icons/back.svg';
@@ -148,6 +149,7 @@ const AddonsControlpanel = (props) => {
     shallowEqual,
   );
   const loadingAddons = useSelector((state) => state.addons.loading);
+  const addonsError = useSelector((state) => state.addons.error);
 
   useEffect(() => {
     dispatch(listAddons());
@@ -245,6 +247,11 @@ const AddonsControlpanel = (props) => {
     setactiveIndex(newIndex);
   };
 
+  // Error handling for unauthorized access
+  if (addonsError) {
+    return <Error error={addonsError} />;
+  }
+
   return (
     <Container id="page-addons" className="controlpanel-addons">
       <Helmet title={intl.formatMessage(messages.addOns)} />

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 
 import AddonsControlpanel from './AddonsControlpanel';
 
@@ -80,10 +81,12 @@ describe('AddonsControlpanel', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <div>
-          <AddonsControlpanel location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </div>
+        <CookiesProvider>
+          <div>
+            <AddonsControlpanel location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </div>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 
 import Aliases from './Aliases';
 import { MemoryRouter } from 'react-router';
@@ -10,11 +11,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" />),
@@ -99,10 +96,12 @@ describe('Aliases', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <Aliases location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <Aliases location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/Controlpanels/BlockType.tsx

@@ -0,0 +1,165 @@
+import { getBlockTypes } from '@plone/volto/actions/blockTypes/blockTypes';
+import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { getParentUrl, flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { formatMessageWithFallback } from '@plone/volto/helpers/I18n/I18n';
+import { useClient } from '@plone/volto/hooks';
+import config from '@plone/volto/registry';
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useParams } from 'react-router-dom';
+import Error from '@plone/volto/components/theme/Error/Error';
+import { Table } from '@plone/components';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+
+import backSVG from '@plone/volto/icons/back.svg';
+import type { Location } from 'history';
+import type { BlockTypeItem } from '@plone/types';
+
+const messages = defineMessages({
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  controlpanelTitle: {
+    id: 'controlpanel_block_type',
+    defaultMessage: 'Block: {title}',
+  },
+  item: {
+    id: 'Item',
+    defaultMessage: 'Item',
+  },
+  path: {
+    id: 'Path',
+    defaultMessage: 'Path',
+  },
+  occurrences: {
+    id: 'Occurrences',
+    defaultMessage: 'Occurrences',
+  },
+  loading: {
+    id: 'loading',
+    defaultMessage: 'Loading',
+  },
+});
+
+type RouteProps = {
+  history: History;
+  location: Location;
+};
+
+type BlockTypesState = {
+  error: {
+    status?: number;
+  } | null;
+  items: BlockTypeItem[];
+  loaded: boolean;
+  loading: boolean;
+};
+
+type SelectorState = {
+  blockTypes: BlockTypesState;
+};
+
+const BlockTypeControlpanel = (props: RouteProps) => {
+  const { location } = props;
+  const params = useParams<{ id: string }>();
+  const id = params.id;
+  const intl = useIntl();
+  const blockTypes = useSelector((state: SelectorState) => state.blockTypes);
+  const isClient = useClient();
+  const dispatch = useDispatch();
+  const pathname = location.pathname;
+  const block =
+    config.blocks.blocksConfig[id as keyof typeof config.blocks.blocksConfig];
+
+  useEffect(() => {
+    dispatch(getBlockTypes(id));
+  }, [dispatch, id]);
+
+  if (blockTypes.loading) {
+    return <div>{intl.formatMessage(messages.loading)}&hellip;</div>;
+  }
+
+  if (blockTypes?.error?.status) {
+    return <Error error={blockTypes.error} />;
+  }
+
+  const translatedTitle = formatMessageWithFallback(intl, block?.title) || id;
+
+  return (
+    blockTypes.loaded && (
+      <div
+        id="page-block_type"
+        className="ui container controlpanel-block-type"
+      >
+        <h1>
+          {intl.formatMessage(messages.controlpanelTitle, {
+            title: translatedTitle,
+          })}
+        </h1>
+        {blockTypes.items?.length > 0 ? (
+          <Table
+            className="react-aria-Table cmsui-table"
+            columns={[
+              {
+                id: 'title',
+                name: intl.formatMessage(messages.item),
+                isRowHeader: true,
+              },
+              {
+                id: 'path',
+                name: intl.formatMessage(messages.path),
+                isRowHeader: true,
+              },
+              {
+                id: 'occurrences',
+                name: intl.formatMessage(messages.occurrences),
+                isRowHeader: true,
+              },
+            ]}
+            rows={blockTypes.items.map((item) => ({
+              id: item['@id'],
+              textValue: item.title,
+              title: (
+                <UniversalLink href={item['@id']}>{item.title}</UniversalLink>
+              ),
+              path: flattenToAppURL(item['@id']) || '/',
+              occurrences: item.count,
+            }))}
+          />
+        ) : (
+          <FormattedMessage
+            id="no-blocks-found"
+            defaultMessage="No items found for type: {type}."
+            values={{
+              type: translatedTitle,
+            }}
+          />
+        )}
+        {isClient &&
+          createPortal(
+            <Toolbar
+              pathname={pathname}
+              hideDefaultViewButtons
+              inner={
+                <Link to={getParentUrl(pathname)} className="item">
+                  <Icon
+                    name={backSVG}
+                    className="contents circled"
+                    size="30px"
+                    title={intl.formatMessage(messages.back)}
+                  />
+                </Link>
+              }
+            />,
+            document.getElementById('toolbar') as HTMLElement,
+          )}
+      </div>
+    )
+  );
+};
+
+export default BlockTypeControlpanel;