@plone/volto 18.28.2 → 18.29.1

package/src/components/manage/Controlpanels/Users/UsersControlpanel.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, act } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
 import jwt from 'jsonwebtoken';
 
 import UsersControlpanel from './UsersControlpanel';
@@ -41,10 +42,10 @@ describe('UsersControlpanel', () => {
     const { container } = await act(async () => {
       return render(
         <Provider store={store}>
-          <>
-            <UsersControlpanel location={{ pathname: '/blog' }} />
+          <MemoryRouter initialEntries={['/controlpanel/users']}>
+            <UsersControlpanel />
             <div id="toolbar"></div>
-          </>
+          </MemoryRouter>
         </Provider>,
       );
     });

package/src/components/manage/Form/InlineForm.jsx

@@ -158,7 +158,7 @@ const InlineForm = (props) => {
                 onChangeField(id, value, itemInfo);
               }}
               key={field}
-              error={errors?.[block]?.[field] || {}}
+              error={errors?.[block]?.[field] || []}
               block={block}
             />
           ))}
@@ -199,7 +199,7 @@ const InlineForm = (props) => {
                         onChangeField(id, value);
                       }}
                       key={field}
-                      error={errors?.[block]?.[field] || {}}
+                      error={errors?.[block]?.[field] || []}
                       block={block}
                     />
                   ))}

package/src/components/manage/Multilingual/CreateTranslation.jsx

@@ -12,9 +12,12 @@ const CreateTranslation = (props) => {
   const dispatch = useDispatch();
   const { language, translationOf } = props.location.state;
   const [translationLocation, setTranslationLocation] = React.useState(null);
-  const [translationObject, setTranslationObject] = React.useState(null);
   const languageFrom = useSelector((state) => state.intl.locale);
 
+  const translationObject = useSelector(
+    (state) => state.content.subrequests['translationObject'],
+  );
+
   React.useEffect(() => {
     // Only on mount, we dispatch the locator query
     dispatch(getTranslationLocator(translationOf, language)).then((resp) => {
@@ -22,11 +25,7 @@ const CreateTranslation = (props) => {
     });
 
     //and we load the translationObject
-    dispatch(getContent(translationOf, null, 'translationObject')).then(
-      (resp) => {
-        setTranslationObject(resp);
-      },
-    );
+    dispatch(getContent(translationOf, null, 'translationObject'));
 
     // On unmount we dispatch the language change
     return () => {
@@ -46,7 +45,8 @@ const CreateTranslation = (props) => {
 
   return (
     translationLocation &&
-    translationObject && (
+    translationObject.data &&
+    translationObject.loaded > 0 && (
       <Redirect
         to={{
           pathname: `${flattenToAppURL(translationLocation)}/add`,
@@ -54,7 +54,7 @@ const CreateTranslation = (props) => {
           state: {
             translationOf: props.location.state.translationOf,
             language: props.location.state.language,
-            translationObject: translationObject,
+            translationObject: translationObject.data,
             languageFrom,
           },
         }}

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';
@@ -14,6 +14,7 @@ import config from '@plone/volto/registry';
 import {
   flattenToAppURL,
   getBaseUrl,
+  getParentUrl,
   isInternalURL,
   normalizeUrl,
   removeProtocol,
@@ -109,6 +110,9 @@ const UnconnectedImageInput = (props) => {
   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);
@@ -156,6 +160,8 @@ const UnconnectedImageInput = (props) => {
 
   const handleUpload = React.useCallback(
     (eventOrFile) => {
+      let uploadUrl = getBaseUrl(contextUrl);
+      if (!isFolderish) uploadUrl = getParentUrl(uploadUrl);
       if (restrictFileUpload === true) return;
       eventOrFile.target && eventOrFile.stopPropagation();
 
@@ -171,7 +177,7 @@ const UnconnectedImageInput = (props) => {
         const fields = fileData.match(/^data:(.*);(.*),(.*)$/);
         dispatch(
           createContent(
-            getBaseUrl(contextUrl),
+            uploadUrl,
             {
               '@type': 'Image',
               title: file.name,
@@ -188,11 +194,12 @@ const UnconnectedImageInput = (props) => {
       });
     },
     [
+      contextUrl,
+      isFolderish,
       restrictFileUpload,
       intl.formatMessage,
       dispatch,
-      props,
-      contextUrl,
+      props.block,
       requestId,
     ],
   );

package/src/components/theme/LanguageSelector/{LanguageSelector.jsx → LanguageSelector.tsx}

@@ -1,15 +1,7 @@
-/**
- * Language selector component.
- * @module components/LanguageSelector/LanguageSelector
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
 import { useSelector } from 'react-redux';
 import cx from 'classnames';
-import find from 'lodash/find';
 import map from 'lodash/map';
 
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
@@ -19,7 +11,12 @@ import { toReactIntlLang } from '@plone/volto/helpers/Utils/Utils';
 
 import config from '@plone/volto/registry';
 
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, useIntl, type IntlShape } from 'react-intl';
+import type {
+  Content,
+  GetSiteResponse,
+  GetTranslationResponse,
+} from '@plone/types';
 
 const messages = defineMessages({
   switchLanguageTo: {
@@ -28,33 +25,53 @@ const messages = defineMessages({
   },
 });
 
-const LanguageSelector = (props) => {
+type FormState = {
+  content: {
+    data: Content;
+  };
+  intl: IntlShape;
+  site: {
+    data: GetSiteResponse;
+  };
+};
+
+const LanguageSelector = ({
+  onClickAction = () => {},
+}: {
+  onClickAction?: () => void;
+}) => {
   const intl = useIntl();
-  const currentLang = useSelector((state) => state.intl.locale);
-  const translations = useSelector(
-    (state) => state.content.data?.['@components']?.translations?.items,
+  const currentLang = useSelector<FormState, IntlShape['locale']>(
+    (state) => state.intl.locale,
   );
+  const translations = useSelector<
+    FormState,
+    GetTranslationResponse['items'] | undefined
+  >((state) => state.content.data?.['@components']?.translations?.items);
 
   const { settings } = config;
 
   return settings.isMultilingual ? (
     <div className="language-selector">
-      {map(settings.supportedLanguages, (lang) => {
-        const translation = find(translations, { language: lang });
+      {map(settings.supportedLanguages || [], (lang) => {
+        const langKey = lang as keyof typeof langmap;
+        const translation = translations?.find(
+          (t: { language: string }) => t.language === lang,
+        );
         return (
           <Link
             aria-label={`${intl.formatMessage(
               messages.switchLanguageTo,
-            )} ${langmap[lang].nativeName.toLowerCase()}`}
+            )} ${langmap[langKey].nativeName.toLowerCase()}`}
             className={cx({ selected: toReactIntlLang(lang) === currentLang })}
             to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
-            title={langmap[lang].nativeName}
+            title={langmap[langKey].nativeName}
             onClick={() => {
-              props.onClickAction();
+              onClickAction();
             }}
             key={`language-selector-${lang}`}
           >
-            {langmap[lang].nativeName}
+            {langmap[langKey].nativeName}
           </Link>
         );
       })}
@@ -66,12 +83,4 @@ const LanguageSelector = (props) => {
   );
 };
 
-LanguageSelector.propTypes = {
-  onClickAction: PropTypes.func,
-};
-
-LanguageSelector.defaultProps = {
-  onClickAction: () => {},
-};
-
 export default LanguageSelector;

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

@@ -246,7 +246,7 @@ class View extends Component {
         />
         <SlotRenderer name="aboveContent" content={this.props.content} />
         <RenderedView
-          key={this.props.content['@id']}
+          key={flattenToAppURL(this.props.content['@id'])}
           content={this.props.content}
           location={this.props.location}
           token={this.props.token}

package/src/helpers/Content/Content.js

@@ -11,6 +11,7 @@ import keys from 'lodash/keys';
 import endsWith from 'lodash/endsWith';
 import find from 'lodash/find';
 import config from '@plone/volto/registry';
+import omit from 'lodash/omit';
 
 /**
  * Nest content.
@@ -85,3 +86,25 @@ export function getLanguageIndependentFields(schema) {
       properties[field]['multilingual_options']?.['language_independent'],
   );
 }
+
+/**
+ * Flattens static behaviors into the parent object with dot-notation keys.
+ * @function flattenStaticBehaviors
+ * @param {Object} result The result object containing static behaviors.
+ * @returns {Object} Result object with flattened static behaviors.
+ */
+export function flattenStaticBehaviors(result) {
+  if (!result['@static_behaviors']) {
+    return result;
+  }
+
+  let flattened = Object.assign({}, result);
+  map(result['@static_behaviors'], (behavior) => {
+    flattened = {
+      ...omit(flattened, behavior),
+      ...mapKeys(flattened[behavior], (value, key) => `${behavior}.${key}`),
+    };
+  });
+
+  return flattened;
+}

package/src/helpers/Content/Content.test.js

@@ -2,6 +2,7 @@ import {
   nestContent,
   getContentIcon,
   getLanguageIndependentFields,
+  flattenStaticBehaviors,
 } from './Content';
 import contentExistingSVG from '@plone/volto/icons/content-existing.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
@@ -96,4 +97,42 @@ describe('Content', () => {
       expect(getLanguageIndependentFields(schema)).toStrictEqual(['lif']);
     });
   });
+
+  describe('flattenStaticBehaviors', () => {
+    it('returns object unchanged when no @static_behaviors', () => {
+      const input = {
+        title: 'Example',
+        creator: 'admin',
+      };
+      expect(flattenStaticBehaviors(input)).toEqual(input);
+    });
+
+    it('flattens static behaviors into dot-notation keys', () => {
+      const input = {
+        title: 'Example',
+        '@static_behaviors': [
+          'guillotina_cms.interfaces.blocks.IBlocks',
+          'guillotina_cms.interfaces.dublin_core.IDublinCore',
+        ],
+        'guillotina_cms.interfaces.blocks.IBlocks': {
+          blocks: 'blocks',
+          blocks_layout: 'blocks_layout',
+        },
+        'guillotina_cms.interfaces.dublin_core.IDublinCore': {
+          creator: 'creator',
+        },
+      };
+      expect(flattenStaticBehaviors(input)).toEqual({
+        title: 'Example',
+        '@static_behaviors': [
+          'guillotina_cms.interfaces.blocks.IBlocks',
+          'guillotina_cms.interfaces.dublin_core.IDublinCore',
+        ],
+        'guillotina_cms.interfaces.blocks.IBlocks.blocks': 'blocks',
+        'guillotina_cms.interfaces.blocks.IBlocks.blocks_layout':
+          'blocks_layout',
+        'guillotina_cms.interfaces.dublin_core.IDublinCore.creator': 'creator',
+      });
+    });
+  });
 });

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/hooks/user/useUser.js

@@ -12,7 +12,7 @@ const useUser = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!user?.id && users?.get.loading === false) {
+    if (userId && !user?.id && users?.get.loading === false) {
       dispatch(getUser(userId));
     }
   }, [dispatch, userId, user, users?.get.loading]);

package/src/reducers/content/content.js

@@ -3,11 +3,10 @@
  * @module reducers/content/content
  */
 
-import map from 'lodash/map';
-import mapKeys from 'lodash/mapKeys';
 import omit from 'lodash/omit';
 
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { flattenStaticBehaviors } from '@plone/volto/helpers/Content/Content';
 
 import {
   CREATE_CONTENT,
@@ -131,14 +130,7 @@ export default function content(state = initialState, action = {}) {
             },
           };
     case `${CREATE_CONTENT}_SUCCESS`:
-      if (result['@static_behaviors']) {
-        map(result['@static_behaviors'], (behavior) => {
-          result = {
-            ...omit(result, behavior),
-            ...mapKeys(result[behavior], (value, key) => `${behavior}.${key}`),
-          };
-        });
-      }
+      result = flattenStaticBehaviors(result);
       const data = action.subrequest
         ? Array.isArray(result)
           ? result.map((item) => ({
@@ -188,14 +180,7 @@ export default function content(state = initialState, action = {}) {
             },
           };
     case `${GET_CONTENT}_SUCCESS`:
-      if (result['@static_behaviors']) {
-        map(result['@static_behaviors'], (behavior) => {
-          result = {
-            ...omit(result, behavior),
-            ...mapKeys(result[behavior], (value, key) => `${behavior}.${key}`),
-          };
-        });
-      }
+      result = flattenStaticBehaviors(result);
 
       const transforms = config.getUtilities({
         type: 'transform',

package/src/reducers/diff/diff.js

@@ -4,6 +4,7 @@
  */
 
 import { GET_DIFF } from '@plone/volto/constants/ActionTypes';
+import { flattenStaticBehaviors } from '@plone/volto/helpers/Content/Content';
 
 const initialState = {
   error: null,
@@ -29,10 +30,13 @@ export default function diff(state = initialState, action = {}) {
         loading: true,
       };
     case `${GET_DIFF}_SUCCESS`:
+      const first_result = flattenStaticBehaviors(action.result[0]);
+      const second_result = flattenStaticBehaviors(action.result[1]);
+
       return {
         ...state,
         error: null,
-        data: action.result,
+        data: [first_result, second_result],
         loaded: true,
         loading: false,
       };

package/src/reducers/diff/diff.test.js

@@ -1,5 +1,5 @@
-import diff from './diff';
 import { GET_DIFF } from '@plone/volto/constants/ActionTypes';
+import diff from './diff';
 
 describe('Diff reducer', () => {
   it('should return the initial state', () => {
@@ -24,15 +24,71 @@ describe('Diff reducer', () => {
     });
   });
 
-  it('should handle GET_DIFF_SUCCESS', () => {
+  it('should handle GET_DIFF_SUCCESS with array result with static behaviors', () => {
+    expect(
+      diff(undefined, {
+        type: `${GET_DIFF}_SUCCESS`,
+        result: [
+          {
+            '@static_behaviors': [
+              'guillotina.behaviors.dublincore.IDublinCore',
+            ],
+            'guillotina.behaviors.dublincore.IDublinCore': {
+              title: 'test page',
+            },
+          },
+          {
+            '@static_behaviors': [
+              'guillotina.behaviors.dublincore.IDublinCore',
+            ],
+            'guillotina.behaviors.dublincore.IDublinCore': {
+              title: 'test second page',
+            },
+          },
+        ],
+      }),
+    ).toEqual({
+      error: null,
+      data: [
+        {
+          '@static_behaviors': ['guillotina.behaviors.dublincore.IDublinCore'],
+
+          'guillotina.behaviors.dublincore.IDublinCore.title': 'test page',
+        },
+        {
+          '@static_behaviors': ['guillotina.behaviors.dublincore.IDublinCore'],
+          'guillotina.behaviors.dublincore.IDublinCore.title':
+            'test second page',
+        },
+      ],
+      loaded: true,
+      loading: false,
+    });
+  });
+
+  it('should handle GET_DIFF_SUCCESS with array result without static behaviors', () => {
+    const data = [
+      {
+        title: 'test page',
+        'guillotina.behaviors.dublincore.IDublinCore': {
+          title: 'test page',
+        },
+      },
+      {
+        title: 'test second page',
+        'guillotina.behaviors.dublincore.IDublinCore': {
+          title: 'test second page',
+        },
+      },
+    ];
     expect(
       diff(undefined, {
         type: `${GET_DIFF}_SUCCESS`,
-        result: 'result',
+        result: data,
       }),
     ).toEqual({
       error: null,
-      data: 'result',
+      data: data,
       loaded: true,
       loading: false,
     });

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

@@ -440,6 +440,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/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "target": "es2022",
+    "lib": ["es2022", "dom", "dom.iterable"],
     "types": ["vitest/globals", "jest"],
-    "module": "commonjs",
+    "module": "preserve",
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -11,7 +11,6 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "strictPropertyInitialization": false,
-    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

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

@@ -1,2 +1,6 @@
-declare const _default: any;
-export default _default;
+export default UsersControlpanel;
+/**
+ * UsersControlpanel functional component.
+ * @function UsersControlpanel
+ */
+declare function UsersControlpanel(): import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ export declare const RulesControlpanel: import("@loadable/component").LoadableCl
 export declare const AddRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 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 UsersControlpanel: import("@loadable/component").LoadableComponent<unknown>;
 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>;

package/types/components/theme/LanguageSelector/LanguageSelector.d.ts

@@ -1,11 +1,4 @@
+declare const LanguageSelector: ({ onClickAction, }: {
+    onClickAction?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
 export default LanguageSelector;
-declare function LanguageSelector(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace LanguageSelector {
-    namespace propTypes {
-        let onClickAction: any;
-    }
-    namespace defaultProps {
-        export function onClickAction_1(): void;
-        export { onClickAction_1 as onClickAction };
-    }
-}

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

@@ -29,3 +29,10 @@ export function getContentIcon(type: string, isFolderish: boolean): any;
  * @returns {array} List of language independent fields
  */
 export function getLanguageIndependentFields(schema: string): any[];
+/**
+ * Flattens static behaviors into the parent object with dot-notation keys.
+ * @function flattenStaticBehaviors
+ * @param {Object} result The result object containing static behaviors.
+ * @returns {Object} Result object with flattened static behaviors.
+ */
+export function flattenStaticBehaviors(result: any): any;