@plone/volto 18.6.0 → 18.8.0

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

@@ -60,22 +60,26 @@ const BrokenRelations = () => {
                 }).map((el, index) => (
                   <Table.Row key={index}>
                     <Table.Cell>
-                      <ConditionalLink
-                        to={`${el[0]}/edit`}
-                        openLinkInNewTab={true}
-                        condition={el[0].includes('http')}
-                      >
-                        {flattenToAppURL(el[0])}
-                      </ConditionalLink>
+                      {el[0] && (
+                        <ConditionalLink
+                          to={`${el[0]}/edit`}
+                          openLinkInNewTab={true}
+                          condition={el[0].includes('http')}
+                        >
+                          {flattenToAppURL(el[0])}
+                        </ConditionalLink>
+                      )}
                     </Table.Cell>
                     <Table.Cell>
-                      <ConditionalLink
-                        to={`${el[1]}/edit`}
-                        openLinkInNewTab={true}
-                        condition={el[1].includes('http')}
-                      >
-                        {flattenToAppURL(el[1])}
-                      </ConditionalLink>
+                      {el[1] && (
+                        <ConditionalLink
+                          to={`${el[1]}/edit`}
+                          openLinkInNewTab={true}
+                          condition={el[1].includes('http')}
+                        >
+                          {flattenToAppURL(el[1])}
+                        </ConditionalLink>
+                      )}
                     </Table.Cell>
                   </Table.Row>
                 ))}

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

@@ -47,53 +47,55 @@ const RelationsControlPanel = () => {
 
   return (
     <>
-      <div className="relations-control-panel">
-        <Helmet title={intl.formatMessage(messages.relations)} />
-        {can_edit ? (
-          <Segment.Group raised>
-            <Segment className="primary">
-              {brokenRelations && Object.keys(brokenRelations).length > 0 ? (
-                <React.Fragment>
-                  <Message warning>
-                    <FormattedMessage
-                      id="Some relations are broken. Please fix."
-                      defaultMessage="Some relations are broken. Please fix."
-                    />
-                  </Message>
-                  <Divider hidden />
-                </React.Fragment>
-              ) : null}
-              <h1>
+      <div className="ui container">
+        <div className="relations-control-panel">
+          <Helmet title={intl.formatMessage(messages.relations)} />
+          {can_edit ? (
+            <Segment.Group raised>
+              <Segment className="primary">
+                {brokenRelations && Object.keys(brokenRelations).length > 0 ? (
+                  <React.Fragment>
+                    <Message warning>
+                      <FormattedMessage
+                        id="Some relations are broken. Please fix."
+                        defaultMessage="Some relations are broken. Please fix."
+                      />
+                    </Message>
+                    <Divider hidden />
+                  </React.Fragment>
+                ) : null}
+                <h1>
+                  <FormattedMessage id="Relations" defaultMessage="Relations" />
+                </h1>
+                {relations_stats?.error ? (
+                  <React.Fragment>
+                    <Divider hidden />
+                    <Message warning>
+                      <FormattedMessage
+                        id="Please upgrade to plone.restapi >= 8.39.0."
+                        defaultMessage="Please upgrade to plone.restapi >= 8.39.0."
+                      />
+                    </Message>
+                  </React.Fragment>
+                ) : null}
+              </Segment>
+              <Segment>
+                <RelationsMatrix />
+              </Segment>
+            </Segment.Group>
+          ) : (
+            <Segment.Group>
+              <Segment>
                 <FormattedMessage id="Relations" defaultMessage="Relations" />
-              </h1>
-              {relations_stats?.error ? (
-                <React.Fragment>
-                  <Divider hidden />
-                  <Message warning>
-                    <FormattedMessage
-                      id="Please upgrade to plone.restapi >= 8.39.0."
-                      defaultMessage="Please upgrade to plone.restapi >= 8.39.0."
-                    />
-                  </Message>
-                </React.Fragment>
-              ) : null}
-            </Segment>
-            <Segment>
-              <RelationsMatrix />
-            </Segment>
-          </Segment.Group>
-        ) : (
-          <Segment.Group>
-            <Segment>
-              <FormattedMessage id="Relations" defaultMessage="Relations" />
-              <Divider hidden />
-              <FormattedMessage
-                id="You have not the required permission for this control panel."
-                defaultMessage="You have not the required permission for this control panel."
-              />
-            </Segment>
-          </Segment.Group>
-        )}
+                <Divider hidden />
+                <FormattedMessage
+                  id="You have not the required permission for this control panel."
+                  defaultMessage="You have not the required permission for this control panel."
+                />
+              </Segment>
+            </Segment.Group>
+          )}
+        </div>
       </div>
 
       {isClient &&

package/src/components/manage/Toolbar/More.jsx

@@ -191,6 +191,13 @@ const More = (props) => {
     id: 'redirection',
   });
 
+  const workingCopyCheckoutAction = find(actions.object_buttons, {
+    id: 'iterate_checkout',
+  });
+  const workingCopyCheckinAction = find(actions.object_buttons, {
+    id: 'iterate_checkin',
+  });
+
   const dateOptions = {
     year: 'numeric',
     month: 'long',
@@ -320,125 +327,114 @@ const More = (props) => {
           </>
         )}
       </Pluggable>
-      {config.settings.hasWorkingCopySupport &&
-        content['@type'] !== 'Plone Site' && (
-          <>
-            {!content.working_copy && (
-              <Plug pluggable="toolbar-more-manage-content" id="workingcopy">
-                <li>
-                  <button
-                    aria-label={intl.formatMessage(messages.CreateWorkingCopy)}
-                    onClick={() => {
-                      dispatch(createWorkingCopy(path)).then((response) => {
-                        history.push(flattenToAppURL(response['@id']));
-                        props.closeMenu();
-                      });
-                    }}
-                  >
-                    {intl.formatMessage(messages.CreateWorkingCopy)}
+      {workingCopyCheckoutAction && (
+        <Plug pluggable="toolbar-more-manage-content" id="workingcopy">
+          <li>
+            <button
+              aria-label={intl.formatMessage(messages.CreateWorkingCopy)}
+              onClick={() => {
+                dispatch(createWorkingCopy(path)).then((response) => {
+                  history.push(flattenToAppURL(response['@id']));
+                  props.closeMenu();
+                });
+              }}
+            >
+              {intl.formatMessage(messages.CreateWorkingCopy)}
 
-                    <Icon name={rightArrowSVG} size="24px" />
-                  </button>
-                </li>
-              </Plug>
-            )}
-            {content.working_copy && content.working_copy_of && (
-              <Plug pluggable="toolbar-more-manage-content" id="workingcopy">
-                <li>
-                  <button
-                    aria-label={intl.formatMessage(messages.applyWorkingCopy)}
-                    onClick={() => {
-                      dispatch(applyWorkingCopy(path)).then((response) => {
-                        history.push(
-                          flattenToAppURL(content.working_copy_of['@id']),
-                        );
-                        props.closeMenu();
-                        toast.info(
-                          <Toast
-                            info
-                            title={intl.formatMessage(
-                              messages.workingAppliedTitle,
-                            )}
-                            content={intl.formatMessage(
-                              messages.workingCopyAppliedBy,
-                              {
-                                creator: content.working_copy?.creator_name,
-                                date: (
-                                  <FormattedDate
-                                    date={content.working_copy?.created}
-                                    format={dateOptions}
-                                  />
-                                ),
-                              },
-                            )}
-                          />,
-                          {
-                            toastId: 'workingcopyapplyinfo',
-                            autoClose: 10000,
-                          },
-                        );
-                      });
-                    }}
-                  >
-                    {intl.formatMessage(messages.applyWorkingCopy)}
+              <Icon name={rightArrowSVG} size="24px" />
+            </button>
+          </li>
+        </Plug>
+      )}
+      {workingCopyCheckinAction && (
+        <Plug pluggable="toolbar-more-manage-content" id="workingcopy">
+          <li>
+            <button
+              aria-label={intl.formatMessage(messages.applyWorkingCopy)}
+              onClick={() => {
+                dispatch(applyWorkingCopy(path)).then((response) => {
+                  history.push(flattenToAppURL(content.working_copy_of['@id']));
+                  props.closeMenu();
+                  toast.info(
+                    <Toast
+                      info
+                      title={intl.formatMessage(messages.workingAppliedTitle)}
+                      content={intl.formatMessage(
+                        messages.workingCopyAppliedBy,
+                        {
+                          creator: content.working_copy?.creator_name,
+                          date: (
+                            <FormattedDate
+                              date={content.working_copy?.created}
+                              format={dateOptions}
+                            />
+                          ),
+                        },
+                      )}
+                    />,
+                    {
+                      toastId: 'workingcopyapplyinfo',
+                      autoClose: 10000,
+                    },
+                  );
+                });
+              }}
+            >
+              {intl.formatMessage(messages.applyWorkingCopy)}
 
-                    <Icon
-                      name={applySVG}
-                      size="24px"
-                      title={intl.formatMessage(messages.applyWorkingCopy)}
-                    />
-                  </button>
-                </li>
-                <li>
-                  <button
-                    aria-label={intl.formatMessage(messages.removeWorkingCopy)}
-                    onClick={() => {
-                      dispatch(removeWorkingCopy(path)).then((response) => {
-                        history.push(
-                          flattenToAppURL(content.working_copy_of['@id']),
-                        );
-                        props.closeMenu();
-                        toast.info(
-                          <Toast
-                            info
-                            title={intl.formatMessage(
-                              messages.workingCopyRemovedTitle,
-                            )}
-                          />,
-                          {
-                            toastId: 'workingcopyremovednotice',
-                            autoClose: 10000,
-                          },
-                        );
-                      });
-                    }}
-                  >
-                    {intl.formatMessage(messages.removeWorkingCopy)}
-                    <Icon
-                      name={removeSVG}
-                      size="24px"
-                      color="#e40166"
-                      title={intl.formatMessage(messages.removeWorkingCopy)}
-                    />
-                  </button>
-                </li>
-              </Plug>
-            )}
-            {content.working_copy && !content.working_copy_of && (
-              <Plug pluggable="toolbar-more-manage-content" id="workingcopy">
-                <li>
-                  <Link
-                    to={flattenToAppURL(content.working_copy['@id'])}
-                    onClick={() => props.closeMenu()}
-                  >
-                    {intl.formatMessage(messages.viewWorkingCopy)}
-                    <Icon name={rightArrowSVG} size="24px" />
-                  </Link>
-                </li>
-              </Plug>
-            )}
-          </>
-        )}
+              <Icon
+                name={applySVG}
+                size="24px"
+                title={intl.formatMessage(messages.applyWorkingCopy)}
+              />
+            </button>
+          </li>
+          <li>
+            <button
+              aria-label={intl.formatMessage(messages.removeWorkingCopy)}
+              onClick={() => {
+                dispatch(removeWorkingCopy(path)).then((response) => {
+                  history.push(flattenToAppURL(content.working_copy_of['@id']));
+                  props.closeMenu();
+                  toast.info(
+                    <Toast
+                      info
+                      title={intl.formatMessage(
+                        messages.workingCopyRemovedTitle,
+                      )}
+                    />,
+                    {
+                      toastId: 'workingcopyremovednotice',
+                      autoClose: 10000,
+                    },
+                  );
+                });
+              }}
+            >
+              {intl.formatMessage(messages.removeWorkingCopy)}
+              <Icon
+                name={removeSVG}
+                size="24px"
+                color="#e40166"
+                title={intl.formatMessage(messages.removeWorkingCopy)}
+              />
+            </button>
+          </li>
+        </Plug>
+      )}
+      {content.working_copy && !content.working_copy_of && (
+        <Plug pluggable="toolbar-more-manage-content" id="workingcopy">
+          <li>
+            <Link
+              to={flattenToAppURL(content.working_copy['@id'])}
+              onClick={() => props.closeMenu()}
+            >
+              {intl.formatMessage(messages.viewWorkingCopy)}
+              <Icon name={rightArrowSVG} size="24px" />
+            </Link>
+          </li>
+        </Plug>
+      )}
       {editAction && config.settings.isMultilingual && (
         <Plug pluggable="toolbar-more-manage-content" id="multilingual">
           <li>

package/src/components/manage/Toolbar/More.test.jsx

@@ -1,10 +1,8 @@
-import React from 'react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { PluggablesProvider } from '@plone/volto/components/manage/Pluggable';
 import { waitFor, render } from '@testing-library/react';
-import config from '@plone/volto/registry';
 
 import More from './More';
 
@@ -162,26 +160,4 @@ describe('Toolbar More component', () => {
     await waitFor(() => {});
     expect(container).toMatchSnapshot();
   });
-  it('renders a Toolbar More component with manage content (working copy)', async () => {
-    config.settings.hasWorkingCopySupport = true;
-
-    const { container } = render(
-      <PluggablesProvider>
-        <Provider store={store}>
-          <MemoryRouter>
-            <More
-              pathname="/blah"
-              loadComponent={() => {}}
-              theToolbar={{
-                current: { getBoundingClientRect: () => ({ width: '320' }) },
-              }}
-              closeMenu={() => {}}
-            />
-          </MemoryRouter>
-        </Provider>
-      </PluggablesProvider>,
-    );
-    await waitFor(() => {});
-    expect(container).toMatchSnapshot();
-  });
 });

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

@@ -16,10 +16,10 @@ import { Image, Label, Popup, Button } from 'semantic-ui-react';
 import {
   flattenToAppURL,
   isInternalURL,
-  isUrl,
   normalizeUrl,
   removeProtocol,
 } from '@plone/volto/helpers/Url/Url';
+import { urlValidator } from '@plone/volto/helpers/FormValidation/validators';
 import { searchContent } from '@plone/volto/actions/search/search';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -102,6 +102,7 @@ export class ObjectBrowserWidgetComponent extends Component {
   state = {
     manualLinkInput: '',
     validURL: false,
+    errors: [],
   };
 
   constructor(props) {
@@ -230,7 +231,16 @@ export class ObjectBrowserWidgetComponent extends Component {
 
   validateManualLink = (url) => {
     if (this.props.allowExternals) {
-      return isUrl(url);
+      const error = urlValidator({
+        value: url,
+        formatMessage: this.props.intl.formatMessage,
+      });
+      if (error && url !== '') {
+        this.setState({ errors: [error] });
+      } else {
+        this.setState({ errors: [] });
+      }
+      return !Boolean(error);
     } else {
       return isInternalURL(url);
     }
@@ -344,6 +354,8 @@ export class ObjectBrowserWidgetComponent extends Component {
     return (
       <FormFieldWrapper
         {...this.props}
+        // At the moment, OBW handles its own errors and validation
+        error={this.state.errors}
         className={description ? 'help text' : 'text'}
       >
         <div
@@ -372,6 +384,7 @@ export class ObjectBrowserWidgetComponent extends Component {
               items.length === 0 &&
               this.props.mode !== 'multiple' && (
                 <input
+                  onBlur={this.onSubmitManualLink}
                   onKeyDown={this.onKeyDownManualLink}
                   onChange={this.onManualLinkInput}
                   value={this.state.manualLinkInput}

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

@@ -3,7 +3,7 @@
  * @module components/manage/Widgets/RegistryImageWidget
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Image, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
@@ -76,12 +76,15 @@ const RegistryImageWidget = (props) => {
   const { id, value, onChange, isDisabled } = props;
   const intl = useIntl();
 
-  const fileName = value?.split(';')[0];
-  const imgsrc = fileName
-    ? `${toPublicURL('/')}@@site-logo/${atob(
-        fileName.replace('filenameb64:', ''),
-      )}`
-    : '';
+  // State to manage the preview image source
+  const [previewSrc, setPreviewSrc] = useState(() => {
+    const fileName = value?.split(';')[0];
+    return fileName
+      ? `${toPublicURL('/')}@@site-logo/${atob(
+          fileName.replace('filenameb64:', ''),
+        )}`
+      : '';
+  });
 
   /**
    * Drop handler
@@ -102,8 +105,7 @@ const RegistryImageWidget = (props) => {
     reader.onload = function () {
       const fields = reader.result.match(/^data:(.*);(.*),(.*)$/);
       if (imageMimetypes.includes(fields[1])) {
-        let imagePreview = document.getElementById(`field-${id}-image`);
-        imagePreview.src = reader.result;
+        setPreviewSrc(reader.result);
       }
     };
     reader.readAsDataURL(files[0]);
@@ -115,12 +117,12 @@ const RegistryImageWidget = (props) => {
         {({ getRootProps, getInputProps, isDragActive }) => (
           <div className="file-widget-dropzone" {...getRootProps()}>
             {isDragActive && <Dimmer active></Dimmer>}
-            {imgsrc ? (
+            {previewSrc ? (
               <Image
                 className="image-preview"
                 id={`field-${id}-image`}
                 size="small"
-                src={imgsrc}
+                src={previewSrc}
               />
             ) : (
               <div className="dropzone-placeholder">
@@ -139,7 +141,6 @@ const RegistryImageWidget = (props) => {
                 )}
               </div>
             )}
-
             <label className="label-file-widget-input">
               {value
                 ? intl.formatMessage(messages.replaceFile)
@@ -168,6 +169,7 @@ const RegistryImageWidget = (props) => {
             disabled={isDisabled}
             onClick={() => {
               onChange(id, '');
+              setPreviewSrc(''); // Clear the preview image
             }}
           >
             <Icon name={deleteSVG} size="20px" />
@@ -189,10 +191,7 @@ RegistryImageWidget.propTypes = {
   description: PropTypes.string,
   required: PropTypes.bool,
   error: PropTypes.arrayOf(PropTypes.string),
-  value: PropTypes.shape({
-    '@type': PropTypes.string,
-    title: PropTypes.string,
-  }),
+  value: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   wrapped: PropTypes.bool,
 };