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

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
 import { useIntl, defineMessages } from 'react-intl';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import loadable from '@loadable/component';
 import { connect } from 'react-redux';
@@ -9,11 +9,15 @@ 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';
+import config from '@plone/volto/registry';
 
 import {
   flattenToAppURL,
   getBaseUrl,
+  getParentUrl,
   isInternalURL,
+  normalizeUrl,
+  removeProtocol,
 } from '@plone/volto/helpers/Url/Url';
 import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
@@ -28,6 +32,9 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
 import uploadSVG from '@plone/volto/icons/upload.svg';
+import Image from '../../theme/Image/Image';
+import { urlValidator } from '@plone/volto/helpers/FormValidation/validators';
+import { searchContent } from '@plone/volto/actions/search/search';
 
 const Dropzone = loadable(() => import('react-dropzone'));
 
@@ -70,6 +77,14 @@ const messages = defineMessages({
     id: 'imageUploadErrorMessage',
     defaultMessage: 'Please upload an image instead.',
   },
+  externalURLsNotAllowed: {
+    id: 'externalURLsNotAllowed',
+    defaultMessage: 'External URLs are not allowed in this field.',
+  },
+  internalImageNotFoundErrorMessage: {
+    id: 'internalImageNotFoundErrorMessage',
+    defaultMessage: 'No image was found in the internal path you provided.',
+  },
 });
 
 const UnconnectedImageInput = (props) => {
@@ -89,12 +104,15 @@ const UnconnectedImageInput = (props) => {
     placeholderLinkInput = '',
     onSelectItem,
   } = props;
-  const imageValue = value?.[0]?.['@id'] || value;
+  const imageValue = value?.[0]?.['@id'] || value?.['@id'] || value;
 
   const intl = useIntl();
   const linkEditor = useLinkEditor();
   const location = useLocation();
   const dispatch = useDispatch();
+  const isFolderish = useSelector(
+    (state) => state?.content?.data?.is_folderish,
+  );
   const contextUrl = location.pathname;
 
   const [uploading, setUploading] = React.useState(false);
@@ -109,21 +127,41 @@ const UnconnectedImageInput = (props) => {
   const imageId = content?.['@id'];
   const image = content?.image;
   let loading = false;
+  const isRelationChoice = props.factory === 'Relation Choice';
 
   useEffect(() => {
     if (uploading && loading && loaded) {
       setUploading(false);
-      onChange(id, imageId, {
-        image_field: 'image',
-        image_scales: { image: [image] },
-      });
+      if (isRelationChoice) {
+        onChange(id, content, {
+          image_field: 'image',
+          image_scales: { image: [image] },
+        });
+      } else {
+        onChange(id, imageId, {
+          image_field: 'image',
+          image_scales: { image: [image] },
+        });
+      }
     }
-  }, [loading, loaded, uploading, imageId, image, id, onChange]); // Explicitly list all dependencies
+  }, [
+    loading,
+    loaded,
+    uploading,
+    imageId,
+    image,
+    id,
+    content,
+    isRelationChoice,
+    onChange,
+  ]);
 
   loading = usePrevious(props.request?.loading);
 
   const handleUpload = React.useCallback(
     (eventOrFile) => {
+      let uploadUrl = getBaseUrl(contextUrl);
+      if (!isFolderish) uploadUrl = getParentUrl(uploadUrl);
       if (restrictFileUpload === true) return;
       eventOrFile.target && eventOrFile.stopPropagation();
 
@@ -139,7 +177,7 @@ const UnconnectedImageInput = (props) => {
         const fields = fileData.match(/^data:(.*);(.*),(.*)$/);
         dispatch(
           createContent(
-            getBaseUrl(contextUrl),
+            uploadUrl,
             {
               '@type': 'Image',
               title: file.name,
@@ -156,11 +194,12 @@ const UnconnectedImageInput = (props) => {
       });
     },
     [
+      contextUrl,
+      isFolderish,
       restrictFileUpload,
       intl.formatMessage,
       dispatch,
-      props,
-      contextUrl,
+      props.block,
       requestId,
     ],
   );
@@ -170,6 +209,83 @@ const UnconnectedImageInput = (props) => {
   }, [restrictFileUpload]);
   const onDragLeave = React.useCallback(() => setDragging(false), []);
 
+  const validateManualLink = React.useCallback(
+    (url) => {
+      if (!url.startsWith('/')) {
+        const error = urlValidator({
+          value: url,
+          formatMessage: intl.formatMessage,
+        });
+        // if (error && url !== '') {
+        //   this.setState({ errors: [error] });
+        // } else {
+        //   this.setState({ errors: [] });
+        // }
+        return !Boolean(error);
+      } else {
+        return isInternalURL(url);
+      }
+    },
+    [intl.formatMessage],
+  );
+
+  const onSubmitURL = React.useCallback(
+    (url) => {
+      if (validateManualLink(url)) {
+        if (isInternalURL(url)) {
+          // convert it into an internal on if possible
+          props
+            .searchContent(
+              '/',
+              {
+                portal_type: config.settings.imageObjects,
+                'path.query': flattenToAppURL(url),
+                'path.depth': '0',
+                sort_on: 'getObjPositionInParent',
+                metadata_fields: '_all',
+                b_size: 1000,
+              },
+              `${props.block}-${props.mode}`,
+            )
+            .then((resp) => {
+              if (resp.items?.length > 0) {
+                onChange(props.id, resp.items[0], {});
+              } else {
+                toast.error(
+                  <Toast
+                    error
+                    title={intl.formatMessage(messages.Error)}
+                    content={intl.formatMessage(
+                      messages.internalImageNotFoundErrorMessage,
+                    )}
+                  />,
+                );
+              }
+            });
+        } else {
+          if (isRelationChoice) {
+            toast.error(
+              <Toast
+                error
+                title={intl.formatMessage(messages.Error)}
+                content={intl.formatMessage(messages.imageUploadErrorMessage)}
+              />,
+            );
+          } else {
+            // if it's an external link, we save it as is
+            onChange(props.id, [
+              {
+                '@id': normalizeUrl(url),
+                title: removeProtocol(url),
+              },
+            ]);
+          }
+        }
+      }
+    },
+    [validateManualLink, props, intl, isRelationChoice, onChange],
+  );
+
   return imageValue ? (
     <div
       className="image-upload-widget-image"
@@ -178,15 +294,20 @@ const UnconnectedImageInput = (props) => {
       role="toolbar"
     >
       {selected && <ImageToolbar {...props} />}
-      <img
-        className={props.className}
-        src={
-          isInternalURL(imageValue)
-            ? `${flattenToAppURL(imageValue)}/@@images/image/${imageSize}`
-            : imageValue
-        }
-        alt=""
-      />
+      {/* If it's relation choice (preview_image_link) */}
+      {isRelationChoice ? (
+        <Image item={value} width="fit-content" height="auto" loading="lazy" />
+      ) : (
+        <Image
+          className={props.className}
+          src={
+            isInternalURL(imageValue)
+              ? `${flattenToAppURL(imageValue)}/@@images/image/${imageSize}`
+              : imageValue
+          }
+          alt=""
+        />
+      )}
     </div>
   ) : (
     <div
@@ -227,7 +348,7 @@ const UnconnectedImageInput = (props) => {
                   </Loader>
                 </Dimmer>
               )}
-              <img src={imageBlockSVG} alt="" className="placeholder" />
+              <Image src={imageBlockSVG} alt="" className="placeholder" />
               <p>{description || intl.formatMessage(messages.addImage)}</p>
               <div className="toolbar-wrapper">
                 <div className="toolbar-inner" ref={linkEditor.anchorNode}>
@@ -242,15 +363,24 @@ const UnconnectedImageInput = (props) => {
                           e.preventDefault();
                           openObjectBrowser({
                             mode: objectBrowserPickerType,
-                            onSelectItem: onSelectItem
-                              ? onSelectItem
-                              : (url, { title, image_field, image_scales }) => {
-                                  onChange(props.id, flattenToAppURL(url), {
-                                    title,
-                                    image_field,
-                                    image_scales,
-                                  });
-                                },
+                            onSelectItem: isRelationChoice
+                              ? (url, item) => {
+                                  // we save the whole item if it's a relation choice
+                                  onChange(props.id, item);
+                                }
+                              : onSelectItem
+                                ? onSelectItem
+                                : // else we save the url along with the image field and scales
+                                  (
+                                    url,
+                                    { title, image_field, image_scales },
+                                  ) => {
+                                    onChange(props.id, flattenToAppURL(url), {
+                                      title,
+                                      image_field,
+                                      image_scales,
+                                    });
+                                  },
                             currentPath: contextUrl,
                           });
                         }}
@@ -311,13 +441,14 @@ const UnconnectedImageInput = (props) => {
                       intl.formatMessage(messages.linkAnImage)
                     }
                     objectBrowserPickerType={objectBrowserPickerType}
-                    onChange={(_, e) =>
-                      onChange(
-                        props.id,
-                        isInternalURL(e) ? flattenToAppURL(e) : e,
-                        {},
-                      )
-                    }
+                    onChange={(_, e) => {
+                      onSubmitURL(e);
+                      // onChange(
+                      //   props.id,
+                      //   isInternalURL(e) ? flattenToAppURL(e) : e,
+                      //   {},
+                      // );
+                    }}
                     id={id}
                   />
                 )}
@@ -331,6 +462,8 @@ const UnconnectedImageInput = (props) => {
 };
 
 export const ImageInput = compose(
+  // This HOC goes first because it injects block in case that it's not present (not a block, but a DX field)
+  withObjectBrowser,
   connect(
     (state, ownProps) => {
       const requestId = `image-upload-${ownProps.id}`;
@@ -339,9 +472,9 @@ export const ImageInput = compose(
         content: state.content.subrequests[ownProps.block || requestId]?.data,
       };
     },
-    { createContent },
+    { createContent, searchContent },
   ),
-)(withObjectBrowser(UnconnectedImageInput));
+)(UnconnectedImageInput);
 
 const ImageUploadWidget = (props) => {
   const { fieldSet, id, title } = props;

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

@@ -100,6 +100,7 @@ export const InternalUrlWidget = (props) => {
         {value?.length > 0 ? (
           <Button.Group>
             <Button
+              type="button"
               basic
               className="cancel"
               aria-label="clearUrlBrowser"
@@ -115,6 +116,7 @@ export const InternalUrlWidget = (props) => {
         ) : (
           <Button.Group>
             <Button
+              type="button"
               basic
               icon
               aria-label="openUrlBrowser"

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

@@ -399,6 +399,7 @@ export class ObjectBrowserWidgetComponent extends Component {
           {this.state.manualLinkInput && isEmpty(items) && (
             <Button.Group>
               <Button
+                type="button"
                 basic
                 className="cancel"
                 onClick={(e) => {
@@ -409,6 +410,7 @@ export class ObjectBrowserWidgetComponent extends Component {
                 <Icon name={clearSVG} size="18px" color="#e40166" />
               </Button>
               <Button
+                type="button"
                 basic
                 primary
                 disabled={!this.state.validURL}
@@ -423,6 +425,7 @@ export class ObjectBrowserWidgetComponent extends Component {
           )}
           {!this.state.manualLinkInput && (
             <Button
+              type="button"
               aria-label={this.props.intl.formatMessage(
                 messages.openObjectBrowser,
               )}

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

@@ -82,10 +82,11 @@ describe('RegistryImageWidget', () => {
         const dropzone = container.querySelector('.file-widget-dropzone');
         const preview = container.querySelector('.image-preview');
         const filename = container.querySelector('.field-file-name');
+        const img = container.querySelector('img[src*="logo"]');
 
-        return dropzone && preview && filename;
+        return dropzone && preview && filename && img && img.complete;
       },
-      { timeout: 1000 },
+      { timeout: 2000 },
     );
 
     expect(container).toMatchSnapshot();

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

@@ -105,6 +105,7 @@ class SelectAutoComplete extends Component {
     error: [],
     choices: [],
     value: null,
+    isMulti: true,
   };
 
   /**
@@ -127,10 +128,16 @@ class SelectAutoComplete extends Component {
   componentDidMount() {
     const { id, lang, value, choices } = this.props;
     if (value && value?.length > 0) {
-      const tokensQuery = convertValueToVocabQuery(
-        normalizeValue(choices, value, this.props.intl),
-      );
-
+      let tokensQuery;
+      if (typeof value === 'string') {
+        tokensQuery = convertValueToVocabQuery(
+          normalizeValue(choices, [value], this.props.intl),
+        );
+      } else {
+        tokensQuery = convertValueToVocabQuery(
+          normalizeValue(choices, value, this.props.intl),
+        );
+      }
       this.props.getVocabularyTokenTitle({
         vocabNameOrURL: this.props.vocabBaseUrl,
         subrequest: `widget-${id}-${lang}`,
@@ -160,13 +167,22 @@ class SelectAutoComplete extends Component {
    * @returns {undefined}
    */
   handleChange(selectedOption) {
-    this.props.onChange(
-      this.props.id,
-      selectedOption ? selectedOption.map((item) => item.value) : null,
-    );
-    this.setState((state) => ({
-      termsPairsCache: [...state.termsPairsCache, ...selectedOption],
-    }));
+    if (!Array.isArray(selectedOption)) {
+      this.props.onChange(this.props.id, selectedOption?.value || null);
+      if (selectedOption) {
+        this.setState((state) => ({
+          termsPairsCache: [...state.termsPairsCache, selectedOption],
+        }));
+      }
+    } else {
+      this.props.onChange(
+        this.props.id,
+        selectedOption ? selectedOption.map((item) => item.value) : null,
+      );
+      this.setState((state) => ({
+        termsPairsCache: [...state.termsPairsCache, ...selectedOption],
+      }));
+    }
   }
 
   timeoutRef = React.createRef();
@@ -251,7 +267,8 @@ class SelectAutoComplete extends Component {
             this.props.intl.formatMessage(messages.select)
           }
           onChange={this.handleChange}
-          isMulti
+          isMulti={this.props.isMulti}
+          isClearable={!this.props.isMulti}
         />
       </FormFieldWrapper>
     );

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

@@ -128,6 +128,7 @@ class SelectWidget extends Component {
     isMulti: PropTypes.bool,
     placeholder: PropTypes.string,
     sort: PropTypes.bool,
+    isClearable: PropTypes.bool,
   };
 
   /**
@@ -156,6 +157,7 @@ class SelectWidget extends Component {
     noValueOption: true,
     customOptionStyling: null,
     sort: false,
+    isClearable: true,
   };
 
   /**
@@ -302,7 +304,7 @@ class SelectWidget extends Component {
                 : undefined,
             );
           }}
-          isClearable
+          isClearable={this.props.isClearable}
         />
       </FormFieldWrapper>
     );

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

@@ -105,6 +105,7 @@ export const UrlWidget = (props) => {
         {value?.length > 0 ? (
           <Button.Group>
             <Button
+              type="button"
               basic
               className="cancel"
               aria-label="clearUrlBrowser"
@@ -120,6 +121,7 @@ export const UrlWidget = (props) => {
         ) : (
           <Button.Group>
             <Button
+              type="button"
               basic
               icon
               aria-label="openUrlBrowser"

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.jsx

@@ -1,4 +1,3 @@
-import config from '@plone/volto/registry';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import { flattenToAppURL, toPublicURL } from '@plone/volto/helpers/Url/Url';
 
@@ -6,8 +5,7 @@ const AlternateHrefLangs = (props) => {
   const { content } = props;
   return (
     <Helmet>
-      {config.settings.isMultilingual &&
-        content['@components']?.translations?.items &&
+      {content['@components']?.translations?.items &&
         [
           ...content['@components']?.translations?.items,
           { '@id': content['@id'], language: content.language.token },

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.test.jsx

@@ -13,7 +13,6 @@ const mockStore = configureStore();
 describe('AlternateHrefLangs', () => {
   beforeEach(() => {});
   it('non multilingual site, renders nothing', () => {
-    config.settings.isMultilingual = false;
     const content = {
       '@id': '/',
       '@components': {},
@@ -38,7 +37,6 @@ describe('AlternateHrefLangs', () => {
 
   it('multilingual site, with some translations', () => {
     config.settings.publicURL = 'https://plone.org';
-    config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es', 'eu'];
 
     const content = {
@@ -85,7 +83,6 @@ describe('AlternateHrefLangs', () => {
 
   it('multilingual site, with all available translations', () => {
     config.settings.publicURL = 'https://plone.org';
-    config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es', 'eu'];
     const store = mockStore({
       intl: {
@@ -139,7 +136,6 @@ describe('AlternateHrefLangs', () => {
 
   it('multilingual site, with all available translations - with server URL', () => {
     config.settings.publicURL = 'https://plone.org';
-    config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es', 'eu'];
     const store = mockStore({
       intl: {

package/src/components/theme/App/App.jsx

@@ -235,7 +235,9 @@ export const fetchContent = async ({ store, location }) => {
 
   const visitor = ([id, data]) => {
     const blockType = data['@type'];
-    const { getAsyncData } = blocksConfig[blockType];
+    const block = blocksConfig[blockType];
+    if (!block) return;
+    const { getAsyncData } = block;
     if (getAsyncData) {
       const p = getAsyncData({
         store,

package/src/components/theme/App/App.test.jsx

@@ -51,6 +51,7 @@ describe('App', () => {
         locale: 'en',
         messages: {},
       },
+      site: { data: {} },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/Avatar/Avatar.jsx

@@ -5,6 +5,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getInitials } from '@plone/volto/helpers/Utils/Utils';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const defaultSize = 30;
 const defaultColor = 'Teal';
@@ -15,7 +16,7 @@ const Avatar = ({ src, title, text, size, color, className }) => {
   return (
     <div className={className} title={title}>
       {src ? (
-        <img src={src} alt={title}></img>
+        <Image src={src} alt={title} />
       ) : (
         <svg width={size} height={size}>
           <circle cx={radius} cy={radius} r={radius} fill={color} />

package/src/components/theme/FormattedDate/FormattedDate.stories.jsx

@@ -82,9 +82,27 @@ export default {
   ],
   argTypes: {
     locale: {
+      options: [
+        'ca',
+        'de',
+        'en',
+        'es',
+        'eu',
+        'fi',
+        'fr',
+        'hi',
+        'it',
+        'ja',
+        'nl',
+        'pt',
+        'pt-BR',
+        'ro',
+        'ru',
+        'sv',
+        'zh-CN',
+      ],
       control: {
-        type: 'select',
-        options: ['en', 'de', 'us'],
+        type: 'radio',
       },
     },
   },

package/src/components/theme/Image/Image.jsx

@@ -1,6 +1,10 @@
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { flattenToAppURL, flattenScales } from '@plone/volto/helpers/Url/Url';
+import {
+  flattenToAppURL,
+  flattenScales,
+  addSubpathPrefix,
+} from '@plone/volto/helpers/Url/Url';
 
 /**
  * Image component
@@ -30,7 +34,7 @@ export default function Image({
   attrs.className = cx(className, { responsive }) || undefined;
 
   if (!item && src) {
-    attrs.src = src;
+    attrs.src = addSubpathPrefix(src);
   } else {
     const isFromRealObject = !item.image_scales;
     const imageFieldWithDefault = imageField || item.image_field || 'image';
@@ -46,9 +50,11 @@ export default function Image({
 
     const isSvg = image['content-type'] === 'image/svg+xml';
     // In case `base_path` is present (`preview_image_link`) use it as base path
-    const basePath = image.base_path || item['@id'];
+    const basePath = addSubpathPrefix(
+      flattenToAppURL(image.base_path || item['@id']),
+    );
+    attrs.src = `${basePath}/${image.download}`;
 
-    attrs.src = `${flattenToAppURL(basePath)}/${image.download}`;
     attrs.width = image.width;
     attrs.height = image.height;
 
@@ -67,10 +73,7 @@ export default function Image({
       });
 
       attrs.srcSet = sortedScales
-        .map(
-          (scale) =>
-            `${flattenToAppURL(basePath)}/${scale.download} ${scale.width}w`,
-        )
+        .map((scale) => `${basePath}/${scale.download} ${scale.width}w`)
         .join(', ');
     }
   }