@plone/volto 18.11.0 → 19.0.0-alpha.0

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

@@ -0,0 +1,137 @@
+import { injectIntl } from 'react-intl';
+import ContentsDeleteModalComponent from './ContentsDeleteModal';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlContentsDeleteModal = injectIntl(ContentsDeleteModalComponent);
+
+function StoryComponent(args) {
+  const { locale = 'en' } = args; // Default to 'en' if locale is not provided
+  const messages =
+    {
+      [locale]: require(`@plone/volto/../locales/${locale}.json`),
+    }[locale] || {};
+
+  return (
+    <Wrapper
+      customStore={{
+        linkIntegrity: {
+          result: args.linkIntegrityResult,
+          loading: args.loading,
+        },
+        intl: {
+          locale,
+          messages,
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <div>{locale}</div>
+      <IntlContentsDeleteModal {...args} />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  locale: 'en',
+  open: true,
+  items: [
+    { '@id': '/news', UID: '123', title: 'News' },
+    { '@id': '/blog', UID: '456', title: 'Blog' },
+    { '@id': '/extra', UID: '789', title: 'Extra' },
+  ],
+  itemsToDelete: [{ UID: '456' }],
+  linkIntegrityResult: [
+    {
+      '@id': '/blog',
+      title: 'Blog',
+      items_total: 2,
+      breaches: [{ uid: '123', title: 'News', '@id': '/news' }],
+    },
+  ],
+  loading: false,
+  onOk: () => {},
+  onCancel: () => {},
+};
+
+export const DeleteMoreThanOne = StoryComponent.bind({});
+DeleteMoreThanOne.args = {
+  ...Default.args,
+  itemsToDelete: [{ UID: '456' }, { UID: '789' }],
+};
+
+export const NoContainedItems = StoryComponent.bind({});
+NoContainedItems.args = {
+  ...Default.args,
+  linkIntegrityResult: [
+    {
+      '@id': '/blog',
+      title: 'Blog',
+      items_total: 0,
+      breaches: [{ uid: '123', title: 'News', '@id': '/news' }],
+    },
+  ],
+};
+
+export const MultipleLinkIntegrityResults = StoryComponent.bind({});
+MultipleLinkIntegrityResults.args = {
+  ...Default.args,
+  itemsToDelete: [{ UID: '456' }, { UID: '789' }],
+  linkIntegrityResult: [
+    {
+      '@id': '/blog',
+      title: 'Blog',
+      items_total: 1,
+      breaches: [{ uid: '123', title: 'News', '@id': '/news' }],
+    },
+    {
+      '@id': '/extra',
+      title: 'Extra',
+      items_total: 0,
+      breaches: [{ uid: '123', title: 'News', '@id': '/news' }],
+    },
+  ],
+};
+
+export const MultipleBreaches = StoryComponent.bind({});
+MultipleBreaches.args = {
+  ...Default.args,
+  itemsToDelete: [{ UID: '789' }],
+  linkIntegrityResult: [
+    {
+      '@id': '/extra',
+      title: 'Extra',
+      items_total: 0,
+      breaches: [
+        { uid: '123', title: 'News', '@id': '/news' },
+        { uid: '456', title: 'Blog', '@id': '/blog' },
+      ],
+    },
+  ],
+};
+
+export const WithoutLinkIntegrityBreaches = StoryComponent.bind({});
+WithoutLinkIntegrityBreaches.args = {
+  ...Default.args,
+  linkIntegrityResult: [],
+};
+
+export default {
+  title: 'Public components/Contents/Contents Delete Modal',
+  component: Default,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    locale: {
+      options: ['en', 'fr', 'de', 'it', 'eu'],
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+};

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

@@ -6,7 +6,6 @@ import {
   Dimmer,
   Header,
   Icon,
-  Image,
   Modal,
   Table,
   Segment,
@@ -24,6 +23,7 @@ import FormattedRelativeDate from '@plone/volto/components/theme/FormattedDate/F
 import { createContent } from '@plone/volto/actions/content/content';
 import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const Dropzone = loadable(() => import('react-dropzone'));
 
@@ -259,7 +259,11 @@ const ContentsUploadModal = (props) => {
                     <Table.Cell>{filesize(file.size, { round: 0 })}</Table.Cell>
                     <Table.Cell>
                       {file.type.split('/')[0] === 'image' && (
-                        <Image src={file.preview} height={60} />
+                        <Image
+                          src={file.preview}
+                          height={60}
+                          className="ui image"
+                        />
                       )}
                     </Table.Cell>
                     <Table.Cell>

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

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Image, Dimmer } from 'semantic-ui-react';
+import { Button, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
@@ -13,6 +13,7 @@ import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import Image from '@plone/volto/components/theme/Image/Image';
 import loadable from '@loadable/component';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
@@ -172,9 +173,8 @@ const FileWidget = (props) => {
             {isDragActive && <Dimmer active></Dimmer>}
             {fileType ? (
               <Image
-                className="image-preview"
+                className="image-preview small ui image"
                 id={`field-${id}-image`}
-                size="small"
                 src={imgsrc}
               />
             ) : (

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import { Provider } from 'react-intl-redux';
 import { render, waitFor } from '@testing-library/react';
-import configureStore from 'redux-mock-store';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
 import config from '@plone/volto/registry';
 
 import IdWidget from './IdWidget';
 
-const mockStore = configureStore();
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
 
 describe('IdWidget', () => {
   test('renders an empty id widget component', async () => {

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

@@ -6,6 +6,7 @@ import { useLocation } from 'react-router-dom';
 import loadable from '@loadable/component';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
+import { toast } from 'react-toastify';
 import useLinkEditor from '@plone/volto/components/manage/AnchorPlugin/useLinkEditor';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 
@@ -20,6 +21,7 @@ import { createContent } from '@plone/volto/actions/content/content';
 import { readAsDataURL } from 'promise-file-reader';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
 
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -60,6 +62,14 @@ const messages = defineMessages({
     id: 'Uploading image',
     defaultMessage: 'Uploading image',
   },
+  Error: {
+    id: 'Error',
+    defaultMessage: 'Error',
+  },
+  imageUploadErrorMessage: {
+    id: 'imageUploadErrorMessage',
+    defaultMessage: 'Please upload an image instead.',
+  },
 });
 
 const UnconnectedImageInput = (props) => {
@@ -184,7 +194,21 @@ const UnconnectedImageInput = (props) => {
     >
       <Dropzone
         noClick
-        onDrop={handleUpload}
+        accept="image/*"
+        onDrop={(acceptedFiles) => {
+          if (acceptedFiles.length > 0) {
+            handleUpload(acceptedFiles);
+          } else {
+            setDragging(false);
+            toast.error(
+              <Toast
+                error
+                title={intl.formatMessage(messages.Error)}
+                content={intl.formatMessage(messages.imageUploadErrorMessage)}
+              />,
+            );
+          }
+        }}
         onDragEnter={onDragEnter}
         onDragLeave={onDragLeave}
         className="dropzone"
@@ -192,7 +216,7 @@ const UnconnectedImageInput = (props) => {
         {({ getRootProps, getInputProps }) => (
           <div {...getRootProps()}>
             <Message>
-              {dragging && <Dimmer active></Dimmer>}
+              {dragging && <Dimmer active />}
               {uploading && (
                 <Dimmer active>
                   <Loader indeterminate>
@@ -253,6 +277,7 @@ const UnconnectedImageInput = (props) => {
                           ref: imageUploadInputRef,
                           onChange: handleUpload,
                           style: { display: 'none' },
+                          accept: 'image/*',
                         })}
                       />
                     </Button.Group>

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

@@ -12,7 +12,7 @@ import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
 import remove from 'lodash/remove';
 import { connect } from 'react-redux';
-import { Image, Label, Popup, Button } from 'semantic-ui-react';
+import { Label, Popup, Button } from 'semantic-ui-react';
 import {
   flattenToAppURL,
   isInternalURL,
@@ -33,6 +33,7 @@ import homeSVG from '@plone/volto/icons/home.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import blankSVG from '@plone/volto/icons/blank.svg';
 import { withRouter } from 'react-router';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   placeholder: {
@@ -131,7 +132,7 @@ export class ObjectBrowserWidgetComponent extends Component {
             <div className="item-title">
               {includes(config.settings.imageObjects, item['@type']) ? (
                 <Image
-                  size="small"
+                  className="small ui image"
                   src={`${item['@id']}/@@images/image/thumb`}
                 />
               ) : (

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

@@ -5,7 +5,7 @@
 
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Image, Dimmer } from 'semantic-ui-react';
+import { Button, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
@@ -15,6 +15,7 @@ import loadable from '@loadable/component';
 import { defineMessages, useIntl } from 'react-intl';
 import { toPublicURL } from '@plone/volto/helpers/Url/Url';
 import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const imageMimetypes = [
   'image/png',
@@ -119,9 +120,8 @@ const RegistryImageWidget = (props) => {
             {isDragActive && <Dimmer active></Dimmer>}
             {previewSrc ? (
               <Image
-                className="image-preview"
+                className="image-preview small ui image"
                 id={`field-${id}-image`}
-                size="small"
                 src={previewSrc}
               />
             ) : (

package/src/components/theme/Logo/Logo.jsx

@@ -4,13 +4,13 @@
  */
 import { defineMessages, useIntl } from 'react-intl';
 import { useEffect } from 'react';
-import { Image } from 'semantic-ui-react';
 import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
 import { getNavroot } from '@plone/volto/actions/navroot/navroot';
 import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 /**
  * Logo component class.
@@ -47,6 +47,7 @@ const Logo = () => {
   return (
     <Link to={navRootPath} aria-label={intl.formatMessage(messages.home)}>
       <Image
+        className="ui image"
         src={
           site['plone.site_logo']
             ? flattenToAppURL(site['plone.site_logo'])

package/src/components/theme/Navigation/ContextNavigation.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { List, Image } from 'semantic-ui-react';
+import { List } from 'semantic-ui-react';
 import { Link as RouterLink } from 'react-router-dom';
 import cx from 'classnames';
 import { compose } from 'redux';
@@ -13,6 +13,7 @@ import UniversalLink from '@plone/volto/components/manage/UniversalLink/Universa
 import { withContentNavigation } from './withContentNavigation';
 
 import leftIcon from '@plone/volto/icons/left-key.svg';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   navigation: {
@@ -38,7 +39,11 @@ function renderNode(node, parentLevel) {
               in_path: node.is_in_path,
             })}
           >
-            {node.thumb ? <Image src={flattenToAppURL(node.thumb)} /> : ''}
+            {node.thumb ? (
+              <Image src={flattenToAppURL(node.thumb)} className="ui image" />
+            ) : (
+              ''
+            )}
             {node.title}
             {node.is_current ? (
               <List.Content className="active-indicator">

package/src/components/theme/View/LinkView.jsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers/Url/Url';
@@ -8,10 +9,15 @@ import { Redirect } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import config from '@plone/volto/registry';
 
-const LinkView = ({ token, content }) => {
+const LinkView = ({ content }) => {
   const history = useHistory();
+  const userCanEdit = useSelector(
+    (state) =>
+      !!state.actions.actions.object.find((action) => action.id === 'edit'),
+  );
+
   useEffect(() => {
-    if (!token) {
+    if (!userCanEdit) {
       const { remoteUrl } = content;
       if (isInternalURL(remoteUrl)) {
         history.replace(flattenToAppURL(remoteUrl));
@@ -19,8 +25,8 @@ const LinkView = ({ token, content }) => {
         window.location.href = flattenToAppURL(remoteUrl);
       }
     }
-  }, [content, history, token]);
-  if (__SERVER__ && !token && content.remoteUrl) {
+  }, [content, history, userCanEdit]);
+  if (__SERVER__ && !userCanEdit && content.remoteUrl) {
     return <Redirect to={content.remoteUrl} />;
   }
   const { title, description, remoteUrl } = content;

package/src/components/theme/View/LinkView.test.jsx

@@ -17,6 +17,15 @@ const store = mockStore({
     locale: 'en',
     messages: {},
   },
+  actions: {
+    actions: {
+      object: [
+        {
+          id: 'edit',
+        },
+      ],
+    },
+  },
 });
 
 test('renders a link view component', () => {
@@ -24,7 +33,6 @@ test('renders a link view component', () => {
     <Provider store={store}>
       <MemoryRouter>
         <LinkView
-          token="1234"
           content={{
             title: 'Hello World!',
             description: 'Hi',

package/src/config/Blocks.jsx

@@ -527,7 +527,7 @@ blocksConfig.gridBlock.blocksConfig.teaser.schemaEnhancer =
 blocksConfig.gridBlock.blocksConfig.image.schemaEnhancer =
   gridImageDisableSizeAndPositionHandlersSchema;
 
-const requiredBlocks = ['title'];
+const requiredBlocks = [];
 
 const initialBlocks = {};
 const initialBlocksFocus = {}; //{Document:'title'}

package/src/helpers/Blocks/Blocks.js

@@ -140,7 +140,7 @@ export function deleteBlock(formData, blockId, intl) {
       newFormData,
       config.settings.defaultBlockType,
       0,
-      {},
+      null,
       intl,
     );
   }

package/theme/themes/pastanaga/extras/main.less

@@ -17,6 +17,9 @@
 
 body {
   display: flex;
+  // react-aria-components popovers have problems with the default declaration
+  // in Semantic UI that forces `overflow-x: hidden` on the body.
+  overflow-x: initial;
 
   @media only screen and (max-width: @largestMobileScreen) {
     flex-direction: column;

package/types/components/manage/Contents/ContentsDeleteModal.stories.d.ts

@@ -0,0 +1,20 @@
+export const Default: any;
+export const DeleteMoreThanOne: any;
+export const NoContainedItems: any;
+export const MultipleLinkIntegrityResults: any;
+export const MultipleBreaches: any;
+export const WithoutLinkIntegrityBreaches: any;
+declare namespace _default {
+    export let title: string;
+    export { Default as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export namespace argTypes {
+        namespace locale {
+            let options: string[];
+            namespace control {
+                let type: string;
+            }
+        }
+    }
+}
+export default _default;

package/types/components/theme/View/LinkView.d.ts

@@ -1,6 +1,5 @@
 export default LinkView;
-declare function LinkView({ token, content }: {
-    token: any;
+declare function LinkView({ content }: {
     content: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace LinkView {

package/types/config/Blocks.d.ts

@@ -3,7 +3,7 @@ export const groupBlocksOrder: {
     id: string;
     title: string;
 }[];
-export const requiredBlocks: string[];
+export const requiredBlocks: any[];
 export namespace blocksConfig {
     namespace gridBlock {
         namespace blocksConfig {