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

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { asyncConnect } from '@plone/volto/helpers/AsyncConnect';
+import { expandToBackendURL } from '@plone/volto/helpers/Url/Url';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
-import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 import { Link } from 'react-router-dom';
 import config from '@plone/volto/registry';
 
@@ -20,6 +20,9 @@ const messages = defineMessages({
 });
 
 export function getSitemapPath(pathname = '', lang) {
+  /* This function is deprecated
+   * We keep it for backwards compatibility.
+   */
   const prefix = pathname.replace(/\/sitemap$/gm, '').replace(/^\//, '');
   const path = prefix || lang || '';
   return path;
@@ -32,18 +35,12 @@ export function getSitemapPath(pathname = '', lang) {
  * @returns {JSX.Element} - Rendered component.
  */
 function Sitemap(props) {
-  const {
-    location: { pathname },
-    lang,
-    getNavigation,
-    isMultilingual,
-  } = props;
-
+  const { getNavigation, navroot } = props;
   useEffect(() => {
-    const language = isMultilingual ? `${toBackendLang(lang)}` : null;
-    const path = getSitemapPath(pathname, language);
-    getNavigation(path, 4);
-  }, [pathname, lang, getNavigation, isMultilingual]);
+    const { settings } = config;
+    const path = `${expandToBackendURL(navroot?.navroot?.['@id'])}`;
+    getNavigation(path, settings.siteMapDepth);
+  }, [navroot, getNavigation]);
 
   const renderItems = (items) => {
     return (
@@ -64,12 +61,13 @@ function Sitemap(props) {
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
+  const items = useSelector((state) => state.navigation.items);
   return (
     <div id="page-sitemap">
       <Helmet title={props.intl.formatMessage(messages.Sitemap)} />
       <Container className="view-wrapper">
         <h1>{props.intl.formatMessage(messages.Sitemap)} </h1>
-        {props.items && renderItems(props.items)}
+        {items && renderItems(items)}
       </Container>
     </div>
   );
@@ -77,18 +75,15 @@ function Sitemap(props) {
 
 Sitemap.propTypes = {
   getNavigation: PropTypes.func.isRequired,
-  location: PropTypes.object.isRequired,
+  navroot: PropTypes.object.isRequired,
   intl: PropTypes.object.isRequired,
-  lang: PropTypes.string.isRequired,
-  items: PropTypes.array.isRequired,
 };
 
 export const __test__ = compose(
   injectIntl,
   connect(
     (state) => ({
-      items: state.navigation.items,
-      lang: state.intl.locale,
+      navroot: state.navroot?.data,
     }),
     { getNavigation },
   ),
@@ -98,25 +93,22 @@ export default compose(
   injectIntl,
   connect(
     (state) => ({
-      items: state.navigation.items,
-      lang: state.intl.locale,
-      isMultilingual: state.site.data.features?.multilingual,
+      navroot: state.navroot?.data,
     }),
     { getNavigation },
   ),
   asyncConnect([
     {
       key: 'navigation',
-      promise: ({ location, store: { dispatch, getState } }) => {
+      promise: ({ store: { dispatch, getState } }) => {
         if (!__SERVER__) return;
-        const state = getState();
-        const path = getSitemapPath(
-          location.pathname,
-          state.site.data.features?.multilingual
-            ? toBackendLang(getState().intl.locale)
-            : null,
+        const navroot = getState().navroot.data?.navroot?.['@id'];
+        return dispatch(
+          getNavigation(
+            expandToBackendURL(navroot),
+            config.settings.siteMapDepth,
+          ),
         );
-        return dispatch(getNavigation(path, 4));
       },
     },
   ]),

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

@@ -43,6 +43,15 @@ describe('Sitemap', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@id': `http://localhost:8080/Plone/`,
+            '@type': 'Plone Site',
+            title: 'Plone Site',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -93,6 +102,15 @@ describe('Sitemap in a multilingual site', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@id': `http://localhost:8080/Plone/en`,
+            '@type': 'LRF',
+            title: 'English',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/Unauthorized/Unauthorized.jsx

@@ -1,5 +1,5 @@
 import { FormattedMessage } from 'react-intl';
-import { Link } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
@@ -11,6 +11,24 @@ const Unauthorized = () => {
   const error_message = useSelector((state) => state.apierror?.message);
   let location = useLocation();
 
+  if (!token) {
+    return (
+      <Redirect
+        to={{
+          pathname: `${location.pathname.replace(/\/$/, '')}/login`,
+          search: `?return_url=${encodeURIComponent(location.pathname)}`,
+          state: {
+            // This is needed to cover the use case of being logged in in
+            // another backend (eg. in development), having a token for
+            // localhost and try to use it, the login route has to know that
+            // it's the same as it comes from a logout
+            isLogout: true,
+          },
+        }}
+      />
+    );
+  }
+
   return (
     <Container className="view-wrapper">
       <BodyClass className="view-unauthorized" />
@@ -19,35 +37,10 @@ const Unauthorized = () => {
       </h1>
       <h3>{error_message}</h3>
       <p className="description">
-        {token ? (
-          <FormattedMessage
-            id="You are trying to access a protected resource."
-            defaultMessage="You are trying to access a protected resource."
-          />
-        ) : (
-          <FormattedMessage
-            id="You are trying to access a protected resource, please {login} first."
-            defaultMessage="You are trying to access a protected resource, please {login} first."
-            values={{
-              login: (
-                <Link
-                  to={{
-                    pathname: `${location.pathname.replace(/\/$/, '')}/login`,
-                    state: {
-                      // This is needed to cover the use case of being logged in in
-                      // another backend (eg. in development), having a token for
-                      // localhost and try to use it, the login route has to know that
-                      // it's the same as it comes from a logout
-                      isLogout: true,
-                    },
-                  }}
-                >
-                  <FormattedMessage id="log in" defaultMessage="log in" />
-                </Link>
-              ),
-            }}
-          />
-        )}
+        <FormattedMessage
+          id="You are trying to access a protected resource."
+          defaultMessage="You are trying to access a protected resource."
+        />
       </p>
       <p>
         <FormattedMessage

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

@@ -2,14 +2,14 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, StaticRouter } from 'react-router-dom';
 
 import Unauthorized from './Unauthorized';
 
 const mockStore = configureStore();
 
 describe('Unauthorized', () => {
-  it('renders an unauthorized component', () => {
+  it('redirects to login', () => {
     const store = mockStore({
       userSession: {
         token: null,
@@ -22,15 +22,17 @@ describe('Unauthorized', () => {
         message: 'You are not authorized to access this resource',
       },
     });
+    const context = {};
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
+        <StaticRouter context={context} location="/private">
           <Unauthorized />
-        </MemoryRouter>
+        </StaticRouter>
       </Provider>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
+    expect(context.url).toEqual('/private/login?return_url=%2Fprivate');
   });
 
   it('renders an unauthorized component for authenticated user', () => {

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

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 
 import View from './View';
 import config from '@plone/volto/registry';
@@ -158,10 +159,12 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -181,10 +184,12 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -204,10 +209,12 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -227,10 +234,12 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -258,20 +267,24 @@ describe('View', () => {
     });
     const { rerender } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
     expect(instanceCount).toBe(1);
     store.getState().content.data['@id'] = '/b';
     rerender(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
     expect(instanceCount).toBe(2);

package/src/config/index.js

@@ -117,6 +117,7 @@ let config = {
     defaultPageSize: 25,
     supportedLanguages: Object.keys(languages),
     navDepth: 1,
+    siteMapDepth: 4,
     expressMiddleware: serverConfig.expressMiddleware, // BBB
     defaultBlockType: 'slate',
     verticalFormTabs: false,

package/src/helpers/Api/Api.js

@@ -102,7 +102,7 @@ class Api {
             request.attach.apply(request, attachment);
           });
 
-          request.end((err, response) => {
+          request.end((err, response = {}) => {
             if (
               checkUrl &&
               request.url &&
@@ -126,7 +126,7 @@ class Api {
             if ([301, 302].includes(err?.status)) {
               return reject({
                 code: err.status,
-                url: err.response.headers.location,
+                url: err.response?.headers?.location,
               });
             }
 

package/src/helpers/I18n/I18n.test.ts

@@ -0,0 +1,44 @@
+import { createIntl, createIntlCache } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+import { formatMessageWithFallback } from './I18n';
+
+const buildIntl = (
+  locale: string,
+  messages: Record<string, string>,
+): IntlShape => createIntl({ locale, messages }, createIntlCache());
+
+describe('formatMessageWithFallback', () => {
+  it('returns the translated string when the locale catalog has an entry', () => {
+    const intl = buildIntl('pt-BR', { Image: 'Imagem' });
+    expect(formatMessageWithFallback(intl, 'Image')).toBe('Imagem');
+  });
+
+  it('falls back to the input message when no translation is registered', () => {
+    const intl = buildIntl('pt-BR', {});
+    expect(formatMessageWithFallback(intl, 'Image')).toBe('Image');
+  });
+
+  it('returns undefined unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, undefined)).toBeUndefined();
+  });
+
+  it('returns null unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, null)).toBeNull();
+  });
+
+  it('returns an empty string unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, '')).toBe('');
+  });
+
+  it('does not call intl.formatMessage when the message is falsy', () => {
+    const intl = buildIntl('en', {});
+    const spy = vi.spyOn(intl, 'formatMessage');
+    formatMessageWithFallback(intl, undefined);
+    formatMessageWithFallback(intl, null);
+    formatMessageWithFallback(intl, '');
+    expect(spy).not.toHaveBeenCalled();
+  });
+});

package/src/helpers/I18n/I18n.ts

@@ -0,0 +1,31 @@
+/**
+ * I18n helpers.
+ * @module helpers/I18n/I18n
+ */
+
+import type { IntlShape } from 'react-intl';
+
+/**
+ * Format a `react-intl` message using a plain string as both the id and the
+ * default fallback. Useful when a UI value (e.g. a block title configured as
+ * a plain string) should be looked up in the locale catalog when available,
+ * and rendered as-is otherwise.
+ *
+ * Returns the input untouched when it is falsy, so the result can be used
+ * directly in `||` fallback chains.
+ *
+ * @param intl react-intl `intl` instance, typically from `useIntl()`.
+ * @param message The string to translate; used as both `id` and
+ *   `defaultMessage`.
+ * @returns Translated text, or `message` unchanged if falsy / no translation.
+ */
+export function formatMessageWithFallback<T extends string | undefined | null>(
+  intl: IntlShape,
+  message: T,
+): T extends string ? string : T {
+  if (!message) return message as T extends string ? string : T;
+  return intl.formatMessage({
+    id: message,
+    defaultMessage: message,
+  }) as T extends string ? string : T;
+}

package/src/helpers/Robots/Robots.js

@@ -24,7 +24,7 @@ export const generateRobots = (req) =>
       request.set('Authorization', `Bearer ${authToken}`);
     }
     request.use(addHeadersFactory(req));
-    request.end((error, { text, body }) => {
+    request.end((error, { text, body } = {}) => {
       if (error) {
         resolve(text || error);
       } else {

package/src/helpers/Robots/Robots.test.js

@@ -0,0 +1,34 @@
+import { generateRobots } from './Robots';
+
+const request = {
+  set: vi.fn(() => request),
+  use: vi.fn(() => request),
+  end: vi.fn(),
+};
+
+vi.mock('superagent', () => ({
+  default: {
+    get: vi.fn(() => request),
+  },
+}));
+
+vi.mock('@plone/volto/helpers/Proxy/Proxy', () => ({
+  addHeadersFactory: vi.fn(() => vi.fn()),
+}));
+
+describe('generateRobots', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('resolves the original error when superagent does not provide a response', async () => {
+    const error = new Error('network error');
+    request.end.mockImplementationOnce((callback) => callback(error));
+
+    await expect(
+      generateRobots({
+        universalCookies: { get: vi.fn(() => null) },
+      }),
+    ).resolves.toBe(error);
+  });
+});

package/src/helpers/index.js

@@ -112,6 +112,7 @@ export {
   normalizeString,
 } from '@plone/volto/helpers/Utils/Utils';
 export { messages } from './MessageLabels/MessageLabels';
+export { formatMessageWithFallback } from './I18n/I18n';
 export {
   withBlockSchemaEnhancer,
   withVariationSchemaEnhancer,

package/theme/themes/pastanaga/collections/form.overrides

@@ -31,6 +31,27 @@
   line-height: initial;
 }
 
+// Restore visible focus for keyboard navigation — overrides Semantic UI's `outline: none` on form inputs
+.ui.form input:not([type]),
+.ui.form input[type='date'],
+.ui.form input[type='datetime-local'],
+.ui.form input[type='email'],
+.ui.form input[type='number'],
+.ui.form input[type='password'],
+.ui.form input[type='search'],
+.ui.form input[type='tel'],
+.ui.form input[type='time'],
+.ui.form input[type='text'],
+.ui.form input[type='file'],
+.ui.form input[type='url'],
+.ui.form textarea {
+  padding-left: 5px;
+
+  &:focus-visible {
+    outline: revert;
+  }
+}
+
 .ui.form .ui.input input:not([type]),
 .ui.form .ui.input input[type='date'],
 .ui.form .ui.input input[type='datetime-local'],

package/theme/themes/pastanaga/elements/button.overrides

@@ -27,7 +27,8 @@
 }
 
 #main,
-.slate-inline-toolbar.slate-toolbar {
+.slate-inline-toolbar.slate-toolbar,
+.contenttype-plone-site .ui.page.modals {
   .ui.basic.buttons .button,
   .ui.basic.button {
     -webkit-box-shadow: 0px 0px 0px @basicBorderSize transparent inset !important;
@@ -42,11 +43,16 @@
   cursor: pointer;
   text-align: initial;
 
-  &:focus {
+  &:focus:not(:focus-visible) {
     outline: none;
   }
 }
 
+.ui.basic.buttons .button:focus-visible,
+.ui.basic.button:focus-visible {
+  outline: revert;
+}
+
 .ui.basic.primary.button,
 .ui.basic.secondary.button {
   box-shadow: none !important;
@@ -69,7 +75,7 @@
   cursor: pointer;
   text-align: initial;
 
-  &:focus {
+  &:focus:not(:focus-visible) {
     outline: none;
   }
 }
@@ -85,3 +91,24 @@
     margin: 0;
   }
 }
+
+.modals {
+  .modal {
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.5em;
+
+      .ui.basic.button {
+        display: flex;
+        justify-content: center;
+        padding: 0.3em;
+        margin: 0;
+
+        svg {
+          margin: 0;
+        }
+      }
+    }
+  }
+}

package/types/components/manage/Controlpanels/Relations/RelationsMatrix.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

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

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

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

@@ -0,0 +1 @@
+export {};

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").LoadableComponent<unknown>;
+export declare const UsersControlpanel: 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>;

package/types/components/manage/Multilingual/ManageTranslations.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Sidebar/ObjectBrowser.d.ts

@@ -31,7 +31,7 @@ declare function withObjectBrowser(WrappedComponent: any): {
          *     }),
          *   });
          */
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Sidebar/ObjectBrowserBody.test.d.ts

@@ -0,0 +1 @@
+export {};