@plone/volto 17.0.0-alpha.24 → 17.0.0-alpha.25

package/src/components/theme/Logout/Logout.jsx

@@ -1,19 +1,11 @@
-/**
- * Login container.
- * @module components/theme/Logout/Logout
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { defineMessages, injectIntl } from 'react-intl';
+import { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
-
-import { Login } from '@plone/volto/components';
+import { Login, Toast } from '@plone/volto/components';
 import { logout, purgeMessages } from '@plone/volto/actions';
 import { toast } from 'react-toastify';
-import { Toast } from '@plone/volto/components';
 
 const messages = defineMessages({
   loggedOut: {
@@ -26,83 +18,44 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Logout class.
- * @class Logout
- * @extends Component
- */
-class Logout extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    logout: PropTypes.func.isRequired,
-    purgeMessages: PropTypes.func.isRequired,
-    query: PropTypes.shape({
-      return_url: PropTypes.string,
-    }),
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    query: null,
-  };
-
-  componentDidMount() {
-    this.props.logout();
-    this.props.purgeMessages();
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.token) {
-      this.props.history.replace(this.props.returnUrl || '/');
+const Logout = ({ location }) => {
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const history = useHistory();
+  const dispatch = useDispatch();
+  const intl = useIntl();
+
+  const returnUrl = useMemo(
+    () =>
+      qs.parse(location.search).return_url ||
+      location.pathname
+        .replace(/\/login\/?$/, '')
+        .replace(/\/logout\/?$/, '') ||
+      '/',
+    [location],
+  );
+
+  useEffect(() => {
+    dispatch(logout());
+    dispatch(purgeMessages());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (!token) {
+      history.replace(returnUrl || '/');
       if (!toast.isActive('loggedOut')) {
         toast.info(
           <Toast
             info
-            title={this.props.intl.formatMessage(messages.loggedOut)}
-            content={this.props.intl.formatMessage(messages.loggedOutContent)}
+            title={intl.formatMessage(messages.loggedOut)}
+            content={intl.formatMessage(messages.loggedOutContent)}
           />,
           { autoClose: false, toastId: 'loggedOut' },
         );
       }
     }
-  }
+  }, [history, returnUrl, intl, token]);
+
+  return <Login location={{ query: location.query }} />;
+};
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return <Login location={{ query: this.props.location.query }} />;
-  }
-}
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      query: qs.parse(props.location.search),
-      token: state.userSession.token,
-      returnUrl:
-        qs.parse(props.location.search).return_url ||
-        props.location.pathname
-          .replace(/\/login\/?$/, '')
-          .replace(/\/logout\/?$/, '') ||
-        '/',
-    }),
-    { logout, purgeMessages },
-  ),
-)(Logout);
+export default Logout;

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

@@ -1,71 +1,41 @@
-/**
- * Search tags components.
- * @module components/theme/Search/SearchTags
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useEffect } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { getVocabulary } from '@plone/volto/actions';
 
 const vocabulary = 'plone.app.vocabularies.Keywords';
 
-/**
- * Search tags container class.
- * @class SearchTags
- * @extends Component
- */
-class SearchTags extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getVocabulary: PropTypes.func.isRequired,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        label: PropTypes.string,
-      }),
-    ).isRequired,
-  };
-
-  componentDidMount() {
-    this.props.getVocabulary({ vocabNameOrURL: vocabulary });
-  }
+const SearchTags = () => {
+  const dispatch = useDispatch();
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return this.props.items && this.props.items.length > 0 ? (
-      <div>
-        {this.props.items.map((item) => (
-          <Link
-            className="ui label"
-            to={`/search?Subject=${item.label}`}
-            key={item.label}
-          >
-            {item.label}
-          </Link>
-        ))}
-      </div>
-    ) : (
-      <span />
-    );
-  }
-}
+  useEffect(() => {
+    dispatch(getVocabulary({ vocabNameOrURL: vocabulary }));
+  }, [dispatch]);
 
-export default connect(
-  (state) => ({
-    items:
+  const items = useSelector(
+    (state) =>
       state.vocabularies[vocabulary] && state.vocabularies[vocabulary].items
         ? state.vocabularies[vocabulary].items
         : [],
-  }),
-  { getVocabulary },
-)(SearchTags);
+    shallowEqual,
+  );
+
+  return items && items.length > 0 ? (
+    <div>
+      {items.map((item) => (
+        <Link
+          className="ui label"
+          to={`/search?Subject=${item.label}`}
+          key={item.label}
+        >
+          {item.label}
+        </Link>
+      ))}
+    </div>
+  ) : (
+    <span />
+  );
+};
+
+export default SearchTags;

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

@@ -22,6 +22,13 @@ const messages = defineMessages({
     defaultMessage: 'Sitemap',
   },
 });
+
+export function getSitemapPath(pathname = '', lang) {
+  const prefix = pathname.replace(/\/sitemap$/gm, '').replace(/^\//, '');
+  const path = prefix || lang || '';
+  return path;
+}
+
 /**
  * Sitemap class.
  * @class Sitemap
@@ -39,11 +46,13 @@ class Sitemap extends Component {
 
   componentDidMount() {
     const { settings } = config;
-    if (settings.isMultilingual) {
-      this.props.getNavigation(`${toBackendLang(this.props.lang)}`, 4);
-    } else {
-      this.props.getNavigation('', 4);
-    }
+
+    const lang = settings.isMultilingual
+      ? `${toBackendLang(this.props.lang)}`
+      : null;
+
+    const path = getSitemapPath(this.props.location.pathname, lang);
+    this.props.getNavigation(path, 4);
   }
 
   /**
@@ -105,15 +114,17 @@ export default compose(
     {
       key: 'navigation',
       promise: ({ location, store: { dispatch, getState } }) => {
+        if (!__SERVER__) return;
         const { settings } = config;
-        const lang = getState().intl.locale;
-        if (settings.isMultilingual) {
-          return (
-            __SERVER__ && dispatch(getNavigation(`${toBackendLang(lang)}`, 4))
-          );
-        } else {
-          return __SERVER__ && dispatch(getNavigation('', 4));
-        }
+
+        const path = getSitemapPath(
+          location.pathname,
+          settings.isMultilingual
+            ? toBackendLang(getState().intl.locale)
+            : null,
+        );
+
+        return dispatch(getNavigation(path, 4));
       },
     },
   ]),

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

@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 
-import { __test__ as Sitemap } from './Sitemap';
+import { __test__ as Sitemap, getSitemapPath } from './Sitemap';
 
 const mockStore = configureStore();
 
@@ -46,7 +46,7 @@ describe('Sitemap', () => {
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <Sitemap />
+          <Sitemap location={{ pathname: '/page-1' }} />
         </MemoryRouter>
       </Provider>,
     );
@@ -54,3 +54,24 @@ describe('Sitemap', () => {
     expect(json).toMatchSnapshot();
   });
 });
+
+describe('getSitemapPath', () => {
+  it('accepts empty path', () => {
+    expect(getSitemapPath('', null)).toBe('');
+  });
+
+  it('accepts a path', () => {
+    expect(getSitemapPath('/page-1/sitemap', null)).toBe('page-1');
+  });
+  it('accepts a path', () => {
+    expect(getSitemapPath('/page-1/sitemap', null)).toBe('page-1');
+  });
+
+  it('uses a language as default root', () => {
+    expect(getSitemapPath('/', 'de')).toBe('de');
+  });
+
+  it('accepts language-rooted paths', () => {
+    expect(getSitemapPath('/de/mission', 'de')).toBe('de/mission');
+  });
+});

package/src/constants/ActionTypes.js

@@ -39,6 +39,7 @@ export const GET_QUERYSTRING_RESULTS = 'GET_QUERYSTRING_RESULTS';
 export const CREATE_RELATIONS = 'CREATE_RELATIONS';
 export const DELETE_RELATIONS = 'DELETE_RELATIONS';
 export const LIST_RELATIONS = 'LIST_RELATIONS';
+export const STATS_RELATIONS = 'STATS_RELATIONS';
 export const REBUILD_RELATIONS = 'REBUILD_RELATIONS';
 export const GET_SCHEMA = 'GET_SCHEMA';
 export const POST_SCHEMA = 'POST_SCHEMA';

package/src/reducers/relations/relations.js

@@ -7,23 +7,29 @@ import {
   CREATE_RELATIONS,
   DELETE_RELATIONS,
   LIST_RELATIONS,
+  STATS_RELATIONS,
   REBUILD_RELATIONS,
 } from '@plone/volto/constants/ActionTypes';
 
 const initialState = {
-  relations: null,
-  stats: null,
-  create: {
+  relations: {
     error: null,
     loaded: false,
     loading: false,
+    data: null,
   },
-  delete: {
+  stats: {
+    error: null,
+    loaded: false,
+    loading: false,
+    data: null,
+  },
+  create: {
     error: null,
     loaded: false,
     loading: false,
   },
-  list: {
+  delete: {
     error: null,
     loaded: false,
     loading: false,
@@ -55,17 +61,6 @@ function getRequestKey(actionType) {
  */
 export default function relations(state = initialState, action = {}) {
   switch (action.type) {
-    case `${CREATE_RELATIONS}_PENDING`:
-    case `${DELETE_RELATIONS}_PENDING`:
-    case `${REBUILD_RELATIONS}_PENDING`:
-      return {
-        ...state,
-        [getRequestKey(action.type)]: {
-          loading: true,
-          loaded: false,
-          error: null,
-        },
-      };
     case `${LIST_RELATIONS}_PENDING`:
       return action.subrequest
         ? {
@@ -73,10 +68,7 @@ export default function relations(state = initialState, action = {}) {
             subrequests: {
               ...state.subrequests,
               [action.subrequest]: {
-                ...(state.subrequests[action.subrequest] || {
-                  relations: null,
-                  stats: null,
-                }),
+                data: null,
                 loaded: false,
                 loading: true,
                 error: null,
@@ -85,7 +77,8 @@ export default function relations(state = initialState, action = {}) {
           }
         : {
             ...state,
-            [getRequestKey(action.type)]: {
+            relations: {
+              data: null,
               loading: true,
               loaded: false,
               error: null,
@@ -98,39 +91,22 @@ export default function relations(state = initialState, action = {}) {
             subrequests: {
               ...state.subrequests,
               [action.subrequest]: {
+                data: action.result.relations,
                 loading: false,
                 loaded: true,
                 error: null,
-                relations: action.result.relations
-                  ? action.result.relations
-                  : [],
-                stats: null,
               },
             },
           }
         : {
             ...state,
-            relations: action.result.relations
-              ? action.result.relations
-              : state.relations,
-            stats: action.result.stats ? action.result : state.stats,
-            [getRequestKey(action.type)]: {
+            relations: {
+              data: action.result.relations,
               loading: false,
               loaded: true,
               error: null,
             },
           };
-    case `${CREATE_RELATIONS}_SUCCESS`:
-    case `${DELETE_RELATIONS}_SUCCESS`:
-    case `${REBUILD_RELATIONS}_SUCCESS`:
-      return {
-        ...state,
-        [getRequestKey(action.type)]: {
-          loading: false,
-          loaded: true,
-          error: null,
-        },
-      };
     case `${LIST_RELATIONS}_FAIL`:
       return action.subrequest
         ? {
@@ -138,8 +114,7 @@ export default function relations(state = initialState, action = {}) {
             subrequests: {
               ...state.subrequests,
               [action.subrequest]: {
-                relations: null,
-                stats: null,
+                data: null,
                 loading: false,
                 loaded: false,
                 error: action.error,
@@ -148,14 +123,67 @@ export default function relations(state = initialState, action = {}) {
           }
         : {
             ...state,
-            relations: null,
-            stats: null,
-            [getRequestKey(action.type)]: {
+            relations: {
+              data: null,
               loading: false,
               loaded: false,
               error: action.error,
             },
           };
+
+    case `${STATS_RELATIONS}_PENDING`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: true,
+          loaded: false,
+          error: null,
+          data: null,
+        },
+      };
+    case `${STATS_RELATIONS}_SUCCESS`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: false,
+          loaded: true,
+          error: null,
+          data: action.result,
+        },
+      };
+    case `${STATS_RELATIONS}_FAIL`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: false,
+          loaded: false,
+          error: action.error,
+          data: null,
+        },
+      };
+
+    case `${CREATE_RELATIONS}_PENDING`:
+    case `${DELETE_RELATIONS}_PENDING`:
+    case `${REBUILD_RELATIONS}_PENDING`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: true,
+          loaded: false,
+          error: null,
+        },
+      };
+    case `${CREATE_RELATIONS}_SUCCESS`:
+    case `${DELETE_RELATIONS}_SUCCESS`:
+    case `${REBUILD_RELATIONS}_SUCCESS`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: false,
+          loaded: true,
+          error: null,
+        },
+      };
     case `${CREATE_RELATIONS}_FAIL`:
     case `${DELETE_RELATIONS}_FAIL`:
     case `${REBUILD_RELATIONS}_FAIL`:

package/src/server.jsx

@@ -263,6 +263,15 @@ server.get('/*', (req, res) => {
       const readCriticalCss =
         config.settings.serverConfig.readCriticalCss || defaultReadCriticalCss;
 
+      // If we are showing an "old browser" warning,
+      // make sure it doesn't get cached in a shared cache
+      const browserdetect = store.getState().browserdetect;
+      if (config.settings.notSupportedBrowsers.includes(browserdetect?.name)) {
+        res.set({
+          'Cache-Control': 'private',
+        });
+      }
+
       if (context.url) {
         res.redirect(flattenToAppURL(context.url));
       } else if (context.error_code) {

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

@@ -49,6 +49,52 @@
   }
 }
 
+.ui.form .fields.error .field textarea,
+.ui.form .fields.error .field select,
+.ui.form .fields.error .field input:not([type]),
+.ui.form .fields.error .field input[type='date'],
+.ui.form .fields.error .field input[type='datetime-local'],
+.ui.form .fields.error .field input[type='email'],
+.ui.form .fields.error .field input[type='number'],
+.ui.form .fields.error .field input[type='password'],
+.ui.form .fields.error .field input[type='search'],
+.ui.form .fields.error .field input[type='tel'],
+.ui.form .fields.error .field input[type='time'],
+.ui.form .fields.error .field input[type='text'],
+.ui.form .fields.error .field input[type='file'],
+.ui.form .fields.error .field input[type='url'],
+.ui.form .field.error textarea,
+.ui.form .field.error select,
+.ui.form .field.error input:not([type]),
+.ui.form .field.error input[type='date'],
+.ui.form .field.error input[type='datetime-local'],
+.ui.form .field.error input[type='email'],
+.ui.form .field.error input[type='number'],
+.ui.form .field.error input[type='password'],
+.ui.form .field.error input[type='search'],
+.ui.form .field.error input[type='tel'],
+.ui.form .field.error input[type='time'],
+.ui.form .field.error input[type='text'],
+.ui.form .field.error input[type='file'],
+.ui.form .field.error input[type='url'],
+.ui.form .field.error textarea:focus,
+.ui.form .field.error select:focus,
+.ui.form .field.error input:not([type]):focus,
+.ui.form .field.error input[type='date']:focus,
+.ui.form .field.error input[type='datetime-local']:focus,
+.ui.form .field.error input[type='email']:focus,
+.ui.form .field.error input[type='number']:focus,
+.ui.form .field.error input[type='password']:focus,
+.ui.form .field.error input[type='search']:focus,
+.ui.form .field.error input[type='tel']:focus,
+.ui.form .field.error input[type='time']:focus,
+.ui.form .field.error input[type='text']:focus,
+.ui.form .field.error input[type='file']:focus,
+.ui.form .field.error input[type='url']:focus {
+  border-color: #d01157;
+  background: none;
+}
+
 .ui.form .field > .selection.dropdown {
   height: 60px;
 }

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

@@ -6,6 +6,12 @@
   font-weight: @inputFontWeight;
 }
 
+/* This aligns the height of the field name label to the other side in case
+of an error is present, it overrides a default from SemanticUI grid definitions. */
+.ui.grid > .stretched.row > .column > .wrapper {
+  flex-grow: 0;
+}
+
 .inline.field {
   .wrapper {
     display: flex;

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

@@ -6,3 +6,13 @@
     margin: 0em 0em 0em 0.75em;
   }
 }
+
+.ui.form {
+  .ui.basic.red.label.form-error-label {
+    padding-left: 0;
+    border: none;
+    margin-top: 0;
+    color: #d01157 !important;
+    font-weight: normal;
+  }
+}