@plone/volto 19.0.0-alpha.5 → 19.0.0-alpha.7

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/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/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/PreviewImage/PreviewImage.jsx

@@ -25,7 +25,7 @@ function PreviewImage({ item, alt, image_field, showDefault = true, ...rest }) {
     return image;
   } else {
     return (
-      <img
+      <Image
         src={
           config.getComponent({
             name: 'DefaultImage',

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const niceBytes = (bytes) => {
   bytes = Number(bytes);
@@ -18,7 +19,7 @@ const niceBytes = (bytes) => {
 const ImageWidget = ({ value, className }) =>
   value ? (
     <span className={cx(className, 'image', 'widget')}>
-      <img
+      <Image
         src={
           value.data
             ? `data:${value['content-type']};base64,${value.data}`

package/src/helpers/Content/withClientSideContent.jsx

@@ -0,0 +1,35 @@
+/*
+This is a HOC for use with the volto Edit component.
+It makes sure that we fetch the content from the API on the client side
+when the Edit component is mounted, if there is an internalApiPath
+that is different from the public API path. Otherwise we might end up
+saving backend API paths back to the server.
+
+It's admittedly a bit of a workaround.
+Ideally the volto SSR should produce correct URLs
+so that we don't have to do this on the client side.
+But, that requires refactoring that won't happen quickly...
+*/
+
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import config from '@plone/volto/registry';
+import { getContent } from '@plone/volto/actions/content/content';
+
+export default function withClientSideContent(WrappedComponent) {
+  function WithClientSideContent(props) {
+    const { internalApiPath } = config.settings;
+    const dispatch = useDispatch();
+    const content = useSelector((state) => state.content);
+    const id = content.data?.['@id'];
+    useEffect(() => {
+      if (internalApiPath && id?.startsWith(internalApiPath)) {
+        dispatch(getContent(id.substring(internalApiPath.length)));
+      }
+    }, [internalApiPath, dispatch, id]);
+    return <WrappedComponent {...props} />;
+  }
+
+  return hoistNonReactStatics(WithClientSideContent, WrappedComponent);
+}

package/src/helpers/Html/Html.jsx

@@ -11,7 +11,6 @@ import join from 'lodash/join';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import { runtimeConfig } from '@plone/volto/runtime_config';
 import config from '@plone/volto/registry';
-import { bulkFlattenToAppURL } from '../Url/bulkFlattenToAppURL';
 
 const CRITICAL_CSS_TEMPLATE = `function alter() {
   document.querySelectorAll("head link[rel='prefetch']").forEach(function(el) { el.rel = 'stylesheet'});
@@ -190,14 +189,7 @@ class Html extends Component {
           <script
             dangerouslySetInnerHTML={{
               __html: `window.__data=${serialize(
-                loadReducers({
-                  ...store.getState(),
-                  // Flatten the content URLs in initial request in SSR
-                  // it normalizes the URLs in case the INTERNAL_API_PATH is set
-                  // and prevents unwanted leaks of INTERNAL_API_PATH in the client
-                  // (only in the first request)
-                  content: bulkFlattenToAppURL(store.getState().content),
-                }),
+                loadReducers(store.getState()),
               )};`,
             }}
             charSet="UTF-8"

package/src/helpers/MessageLabels/MessageLabels.js

@@ -152,6 +152,11 @@ export const messages = defineMessages({
     id: 'Groupname',
     defaultMessage: 'Groupname',
   },
+  addGroupsFormGroupNameDescription: {
+    id: 'A unique identifier for the group. Cannot be changed after creation. No spaces allowed.',
+    defaultMessage:
+      'A unique identifier for the group. Cannot be changed after creation. No spaces allowed.',
+  },
   addGroupsFormDescriptionTitle: {
     id: 'Description',
     defaultMessage: 'Description',

package/src/middleware/api.js

@@ -348,7 +348,7 @@ const apiMiddlewareFactory =
           }
 
           // Only SSR can set ECONNREFUSED
-          if (error.code === 'ECONNREFUSED') {
+          if (error?.code === 'ECONNREFUSED') {
             next({
               ...rest,
               error,
@@ -359,7 +359,7 @@ const apiMiddlewareFactory =
           }
 
           // Response error is marked crossDomain if CORS error happen
-          else if (error.crossDomain) {
+          else if (error?.crossDomain) {
             next({
               ...rest,
               error,
@@ -410,7 +410,7 @@ const apiMiddlewareFactory =
                 ...rest,
                 error,
                 statusCode: error.response,
-                message: error.response.body.message,
+                message: error.response?.body?.message,
                 connectionRefused: false,
                 type: SET_APIERROR,
               });

package/src/routes.js

@@ -52,6 +52,8 @@ import {
   UpgradeControlPanel,
 } from '@plone/volto/components/manage/Controlpanels';
 
+import withClientSideContent from '@plone/volto/helpers/Content/withClientSideContent';
+
 import App from '@plone/volto/components/theme/App/App';
 import View from '@plone/volto/components/theme/View/View';
 
@@ -244,7 +246,7 @@ export const defaultRoutes = [
   },
   {
     path: ['/edit', '/**/edit'],
-    component: Edit,
+    component: withClientSideContent(Edit),
   },
   {
     path: ['/contents', '/**/contents'],

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

@@ -107,6 +107,18 @@
       top: auto;
       bottom: 100%;
     }
+
+    .search-feedback {
+      position: absolute;
+      overflow: hidden;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      border: 0;
+      margin: -1px;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+    }
   }
 
   .ui.table .icon-align,

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

@@ -443,6 +443,10 @@ fieldset.invisible {
   padding: 0;
   border: none;
   margin: 0;
+  // Reset visibility, this 'invisible' is not meant to hide the fieldset
+  // This prevents issues when used along other CSS framworks that might
+  // have this utility class defined (e.g. TailwindCSS)
+  visibility: initial;
 }
 
 .vertical-form {

package/types/components/manage/Controlpanels/Users/RenderUsers.d.ts

@@ -1,2 +1,18 @@
-declare const _default: any;
-export default _default;
+export default RenderUsers;
+/**
+ * RenderUsers functional component.
+ * @function RenderUsers
+ */
+declare function RenderUsers(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace RenderUsers {
+    namespace propTypes {
+        let user: any;
+        let roles: any;
+        let onDelete: any;
+        let isUserManager: any;
+        let listUsers: any;
+        let updateUser: any;
+        let inheritedRole: any;
+        let userschema: any;
+    }
+}

package/types/components/manage/Controlpanels/index.d.ts

@@ -5,7 +5,7 @@ export declare const AddRuleControlpanel: import("@loadable/component").Loadable
 export declare const EditRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const ConfigureRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const UsersControlpanel: import("@loadable/component").LoadableClassComponent<any>;
-export declare const RenderUsers: import("@loadable/component").LoadableClassComponent<any>;
+export declare const RenderUsers: import("@loadable/component").LoadableComponent<any>;
 export declare const UserGroupMembershipControlPanel: import("@loadable/component").LoadableComponent<unknown>;
 export declare const GroupsControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const RenderGroups: import("@loadable/component").LoadableComponent<any>;

package/types/helpers/Content/withClientSideContent.d.ts

@@ -0,0 +1 @@
+export default function withClientSideContent(WrappedComponent: any): any;