@plone/volto 19.0.0-alpha.36 → 19.0.0-alpha.37

package/src/components/manage/BlockChooser/BlockChooser.jsx

@@ -10,6 +10,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import AnimateHeight from 'react-animate-height';
 import config from '@plone/volto/registry';
+import { formatMessageWithFallback } from '@plone/volto/helpers/I18n/I18n';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 import BlockChooserSearch from './BlockChooserSearch';
@@ -98,16 +99,10 @@ const BlockChooser = ({
   }
   const [filterValue, setFilterValue] = React.useState('');
 
-  const getFormatMessage = (message) =>
-    intl.formatMessage({
-      id: message,
-      defaultMessage: message,
-    });
-
   function blocksAvailableFilter(blocks) {
     return blocks.filter(
       (block) =>
-        getFormatMessage(block.title)
+        formatMessageWithFallback(intl, block.title)
           .toLowerCase()
           .includes(filterValue.toLowerCase()) ||
         block.title.toLowerCase().includes(filterValue.toLowerCase()) ||
@@ -117,7 +112,7 @@ const BlockChooser = ({
   function filterVariations(block) {
     return block.variations?.filter(
       (variation) =>
-        getFormatMessage(variation.title)
+        formatMessageWithFallback(intl, variation.title)
           .toLowerCase()
           .includes(filterValue.toLowerCase()) &&
         !variation.title.toLowerCase().includes('default'),
@@ -145,9 +140,11 @@ const BlockChooser = ({
           }}
         >
           <Icon name={block.icon} size="36px" />
-          {getFormatMessage(block.title)}
+          {formatMessageWithFallback(intl, block.title)}
           {filterValue && variations?.[0]?.title && (
-            <small>{getFormatMessage(variations[0].title)}</small>
+            <small>
+              {formatMessageWithFallback(intl, variations[0].title)}
+            </small>
           )}
         </Button>
       </Button.Group>

package/src/components/manage/Blocks/Block/Edit.jsx

@@ -149,15 +149,6 @@ export class Edit extends Component {
                 this.props.setUIState({ hovered: this.props.id });
               }
             }}
-            onFocus={(e) => {
-              // TODO: This `onFocus` steals somehow the focus from the slate block
-              // we have to investigate why this is happening
-              // Apparently, I can't see any difference in the behavior
-              // If any, we can fix it in successive iterations
-              // if (this.props.hovered !== this.props.id) {
-              //   this.props.setUIState({ hovered: this.props.id });
-              // }
-            }}
             onMouseLeave={(e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -172,6 +163,24 @@ export class Edit extends Component {
                   e,
                 );
             }}
+            // onFocus={(e) => {
+            //   // TODO: This `onFocus` steals somehow the focus from the slate block
+            //   // we have to investigate why this is happening
+            //   // Apparently, I can't see any difference in the behavior
+            //   // If any, we can fix it in successive iterations
+            //   // if (this.props.hovered !== this.props.id) {
+            //   //   this.props.setUIState({ hovered: this.props.id });
+            //   // }
+            // }}
+            onFocus={(e) => {
+              const isMultipleSelection = e.shiftKey || e.ctrlKey || e.metaKey;
+              !this.props.selected &&
+                this.props.onSelectBlock(
+                  this.props.id,
+                  this.props.selected ? false : isMultipleSelection,
+                  e,
+                );
+            }}
             onKeyDown={
               !(blockHasOwnFocusManagement || disableNewBlocks)
                 ? (e) =>
@@ -218,6 +227,7 @@ export class Edit extends Component {
               e.stopPropagation();
               this.props.setUIState({ hovered: this.props.id });
             }}
+            // Mantenha apenas este onFocus ou remova se não for necessário
             onFocus={(e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -245,7 +255,6 @@ export class Edit extends Component {
             className={cx(`block ${type}`, { selected: this.props.selected })}
             style={{ outline: 'none' }}
             ref={this.blockNode}
-            // The tabIndex is required for the keyboard navigation
             tabIndex={-1}
           >
             {this.props.intl.formatMessage(messages.unknownBlock, {

package/src/components/manage/Blocks/Block/Order/Item.jsx

@@ -5,7 +5,9 @@ import includes from 'lodash/includes';
 import cx from 'classnames';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { setUIState } from '@plone/volto/actions/form/form';
+import { formatMessageWithFallback } from '@plone/volto/helpers/I18n/I18n';
 import config from '@plone/volto/registry';
+import { useIntl } from 'react-intl';
 
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
@@ -34,6 +36,7 @@ export const Item = forwardRef(
     },
     ref,
   ) => {
+    const intl = useIntl();
     const selected = useSelector((state) => state.form.ui.selected);
     const hovered = useSelector((state) => state.form.ui.hovered);
     const multiSelected = useSelector((state) => state.form.ui.multiSelected);
@@ -49,7 +52,11 @@ export const Item = forwardRef(
         ? data.required
         : includes(config.blocks.requiredBlocks, data?.['@type']);
     const fixed = !!data?.fixed;
-
+    const configTitle = config.blocks.blocksConfig[data?.['@type']]?.title;
+    const blockTitle =
+      data?.plaintext ||
+      formatMessageWithFallback(intl, configTitle) ||
+      data?.title;
     return (
       <li
         className={classNames(
@@ -122,9 +129,7 @@ export const Item = forwardRef(
                 style={{ verticalAlign: 'middle' }}
               />
             )}{' '}
-            {data?.plaintext ||
-              config.blocks.blocksConfig[data?.['@type']]?.title ||
-              data?.title}
+            {blockTitle}
           </span>
           {!clone && onRemove && !required && (
             <button

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

@@ -113,6 +113,7 @@ const DropZoneContent = (props) => {
   };
 
   const onDrop = async (e) => {
+    e.preventDefault();
     if (!hasFiles(e)) {
       return;
     }

package/src/components/manage/Controlpanels/BlockType.tsx

@@ -2,6 +2,7 @@ import { getBlockTypes } from '@plone/volto/actions/blockTypes/blockTypes';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { getParentUrl, flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { formatMessageWithFallback } from '@plone/volto/helpers/I18n/I18n';
 import { useClient } from '@plone/volto/hooks';
 import config from '@plone/volto/registry';
 import { useEffect } from 'react';
@@ -86,9 +87,7 @@ const BlockTypeControlpanel = (props: RouteProps) => {
     return <Error error={blockTypes.error} />;
   }
 
-  const translatedTitle = block?.title
-    ? intl.formatMessage({ id: block.title, defaultMessage: block.title })
-    : id;
+  const translatedTitle = formatMessageWithFallback(intl, block?.title) || id;
 
   return (
     blockTypes.loaded && (

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

@@ -227,6 +227,7 @@ class ContentTypes extends Component {
       addTypeError: undefined,
       addTypeSetFormDataCallback: undefined,
     });
+    this._addTypeTrigger?.focus();
     toast.success(
       <Toast
         success
@@ -369,10 +370,13 @@ class ContentTypes extends Component {
           />
           <ModalForm
             open={this.state.showAddType}
-            className="modal"
+            className="modal add-content-type"
             onSubmit={this.onAddTypeSubmit}
             submitError={this.state.addTypeError}
-            onCancel={() => this.setState({ showAddType: false })}
+            onCancel={() => {
+              this.setState({ showAddType: false });
+              this._addTypeTrigger?.focus();
+            }}
             title={this.props.intl.formatMessage(messages.addTypeFormTitle)}
             loading={this.props.cpanelRequest.post.loading}
             schema={{
@@ -474,6 +478,9 @@ class ContentTypes extends Component {
                     aria-label={this.props.intl.formatMessage(messages.add)}
                     tabIndex={0}
                     id="toolbar-add"
+                    ref={(el) => {
+                      this._addTypeTrigger = el;
+                    }}
                     onClick={() => {
                       this.setState({ showAddType: true });
                     }}

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

@@ -13,6 +13,7 @@ import { listRoles } from '@plone/volto/actions/roles/roles';
 import { listGroups, updateGroup } from '@plone/volto/actions/groups/groups';
 import { getControlpanel } from '@plone/volto/actions/controlpanels/controlpanels';
 import { getUserSchema } from '@plone/volto/actions/userschema/userschema';
+import { asyncConnect } from '@plone/volto/helpers/AsyncConnect';
 import jwtDecode from 'jwt-decode';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
@@ -57,7 +58,8 @@ import {
  * UsersControlpanel functional component.
  * @function UsersControlpanel
  */
-const UsersControlpanel = () => {
+const UsersControlpanel = (props) => {
+  const { staticContext } = props;
   const intl = useIntl();
   const dispatch = useDispatch();
 
@@ -143,7 +145,10 @@ const UsersControlpanel = () => {
       await listUsersAction();
       setEntries(users);
     }
-    await getUserSchemaAction();
+    // Only fetch user schema if it hasn't been loaded yet (e.g. by asyncConnect SSR)
+    if (!userschema?.loaded) {
+      await getUserSchemaAction();
+    }
     await getUserAction(userId);
   }, [
     getControlpanelAction,
@@ -152,6 +157,7 @@ const UsersControlpanel = () => {
     listGroupsAction,
     listUsersAction,
     users,
+    userschema,
     getUserSchemaAction,
     getUserAction,
     userId,
@@ -451,6 +457,8 @@ const UsersControlpanel = () => {
 
   useEffect(() => {
     setIsClient(true);
+    // Skip fetching if the store already has an error.
+    if (loadRolesRequest?.error) return;
     fetchData();
     checkLoginUsingEmailStatus();
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -471,8 +479,14 @@ const UsersControlpanel = () => {
     }
   }, [loadRolesRequest?.error, loadRolesRequest?.loading]);
 
-  if (error) {
-    return <Error error={error} />;
+  const effectiveError =
+    error ||
+    (loadRolesRequest?.error && !loadRolesRequest?.loading
+      ? loadRolesRequest.error
+      : null);
+
+  if (effectiveError) {
+    return <Error error={effectiveError} staticContext={staticContext} />;
   }
 
   const usernameToDelete = userToDelete ? userToDelete.username : '';
@@ -729,4 +743,43 @@ const UsersControlpanel = () => {
   );
 };
 
-export default UsersControlpanel;
+export default asyncConnect([
+  {
+    key: 'controlpanels',
+    promise: ({ store: { dispatch, getState } }) => {
+      return dispatch(getControlpanel('usergroup')).then(() => {
+        const state = getState();
+        const many_users = state.controlpanels?.controlpanel?.data?.many_users;
+        if (!many_users) {
+          dispatch(listUsers());
+          dispatch(listGroups());
+        }
+      });
+    },
+  },
+  {
+    key: 'roles',
+    promise: ({ store: { dispatch } }) => {
+      return dispatch(listRoles());
+    },
+  },
+  {
+    key: 'userschema',
+    promise: ({ store: { dispatch } }) => {
+      return dispatch(getUserSchema());
+    },
+  },
+  {
+    key: 'user',
+    promise: ({ store: { dispatch, getState } }) => {
+      const state = getState();
+      const token = state.userSession.token;
+      if (token) {
+        const userId = jwtDecode(token).sub;
+        if (userId) {
+          return dispatch(getUser(userId));
+        }
+      }
+    },
+  },
+])(UsersControlpanel);