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

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

@@ -19,6 +19,8 @@ const TextWidget = (props) => {
     placeholder,
     isDisabled,
     focus,
+    required,
+    error,
   } = props;
 
   const ref = useRef();
@@ -49,6 +51,8 @@ const TextWidget = (props) => {
         onClick={() => onClick()}
         minLength={minLength || null}
         maxLength={maxLength || null}
+        aria-required={required ? 'true' : undefined}
+        aria-invalid={error?.length > 0 ? 'true' : undefined}
       />
       {icon && iconAction && (
         <button className={`field-${id}-action-button`} onClick={iconAction}>

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

@@ -4,6 +4,7 @@ import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
+import { CookiesProvider } from 'react-cookie';
 
 import { __test__ as App } from './App';
 
@@ -55,16 +56,18 @@ describe('App', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter initialEntries={['/blog/edit']}>
-          <App
-            location={{ pathname: '/blog/edit' }}
-            route={{
-              routes: '',
-            }}
-          >
-            <div />
-          </App>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter initialEntries={['/blog/edit']}>
+            <App
+              location={{ pathname: '/blog/edit' }}
+              route={{
+                routes: '',
+              }}
+            >
+              <div />
+            </App>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
     const json = component.toJSON();

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

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import ContactForm from './ContactForm';
 
 vi.mock('../../manage/Toolbar/Toolbar', () => ({
@@ -29,10 +30,12 @@ describe('Contact form', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <ContactForm />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <ContactForm />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -57,10 +60,12 @@ describe('Contact form', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <ContactForm />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <ContactForm />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -3,6 +3,7 @@ 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 { CookiesProvider } from 'react-cookie';
 
 import MultilingualRedirector from './MultilingualRedirector';
 
@@ -21,9 +22,11 @@ describe('MultilingualRedirector', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
-          <MultilingualRedirector pathname={'/'} />
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <MultilingualRedirector pathname={'/'} />
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
     const json = component.toJSON();

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

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 
 import { __test__ as Search } from './Search';
 
@@ -32,10 +33,12 @@ describe('Search', () => {
     };
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <Search history={history} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <Search history={history} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -65,10 +68,12 @@ describe('Search', () => {
     };
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <Search history={history} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <Search history={history} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

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/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/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);
+  });
+});