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

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/SearchWidget/SearchWidget.jsx

@@ -1,8 +1,11 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Form, Input } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
 
+import { getNavroot } from '@plone/volto/actions';
+import { hasApiExpander, getBaseUrl } from '@plone/volto/helpers';
 import { Icon } from '@plone/volto/components';
 import zoomSVG from '@plone/volto/icons/zoom.svg';
 
@@ -19,6 +22,8 @@ const messages = defineMessages({
 
 const SearchWidget = (props) => {
   const intl = useIntl();
+  const dispatch = useDispatch();
+
   const [text, setText] = useState('');
   const history = useHistory();
   const onChangeText = (event, { value }) => {
@@ -29,14 +34,21 @@ const SearchWidget = (props) => {
     const path =
       pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : '';
 
-    history.push(`/search?SearchableText=${encodeURIComponent(text)}${path}`);
+    history.push(`./search?SearchableText=${encodeURIComponent(text)}${path}`);
     // reset input value
     setText('');
     event.preventDefault();
   };
 
+  const navroot = useSelector((state) => state.navroot?.data);
+  useEffect(() => {
+    if (!hasApiExpander('navroot', getBaseUrl(pathname))) {
+      dispatch(getNavroot(getBaseUrl(pathname)));
+    }
+  }, [dispatch, pathname]);
+
   return (
-    <Form action="/search" onSubmit={onSubmit}>
+    <Form action={`${navroot?.navroot?.['@id']}/search`} onSubmit={onSubmit}>
       <Form.Field className="searchbox">
         <Input
           aria-label={intl.formatMessage(messages.search)}

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

@@ -15,6 +15,14 @@ describe('SearchWidget', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          '@id': 'http://localhost:3000/@navroot',
+          navroot: {
+            '@id': 'http://localhost:3000',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

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/components/theme/View/View.jsx

@@ -123,6 +123,7 @@ class View extends Component {
     if (!hasApiExpander('actions', getBaseUrl(this.props.pathname))) {
       this.props.listActions(getBaseUrl(this.props.pathname));
     }
+
     this.props.getContent(
       getBaseUrl(this.props.pathname),
       this.props.versionId,
@@ -142,6 +143,7 @@ class View extends Component {
       if (!hasApiExpander('actions', getBaseUrl(nextProps.pathname))) {
         this.props.listActions(getBaseUrl(nextProps.pathname));
       }
+
       this.props.getContent(
         getBaseUrl(nextProps.pathname),
         this.props.versionId,

package/src/config/ControlPanels.js

@@ -75,7 +75,6 @@ export const filterControlPanelsSchema = (controlpanel) => {
       'toolbar_position',
       'toolbar_logo',
       'default_page',
-      'site_logo',
       'site_favicon',
       'site_favicon_mimetype',
       'exposeDCMetaTags',

package/src/config/Widgets.jsx

@@ -24,6 +24,7 @@ import InternalUrlWidget from '@plone/volto/components/manage/Widgets/InternalUr
 import EmailWidget from '@plone/volto/components/manage/Widgets/EmailWidget';
 import NumberWidget from '@plone/volto/components/manage/Widgets/NumberWidget';
 import ImageSizeWidget from '@plone/volto/components/manage/Widgets/ImageSizeWidget';
+import RegistryImageWidget from '@plone/volto/components/manage/Widgets/RegistryImageWidget';
 
 import ReferenceWidget from '@plone/volto/components/manage/Widgets/ReferenceWidget';
 import ObjectBrowserWidget from '@plone/volto/components/manage/Widgets/ObjectBrowserWidget';
@@ -72,6 +73,7 @@ export const widgetMapping = {
     recurrence: RecurrenceWidget,
     remoteUrl: UrlWidget,
     id: IdWidget,
+    site_logo: RegistryImageWidget,
   },
   widget: {
     richtext: WysiwygWidget,

package/src/config/index.js

@@ -37,6 +37,8 @@ import applyAddonConfiguration, { addonsInfo } from 'load-volto-addons';
 
 import ConfigRegistry from '@plone/volto/registry';
 
+import { getSiteAsyncPropExtender } from '@plone/volto/helpers';
+
 const host = process.env.HOST || 'localhost';
 const port = process.env.PORT || '3000';
 
@@ -83,7 +85,13 @@ let config = {
       // https://6.docs.plone.org/volto/configuration/settings-reference.html#term-apiExpanders
       // {
       //   match: '',
-      //   GET_CONTENT: ['breadcrumbs', 'navigation', 'actions', 'types'],
+      //   GET_CONTENT: [
+      //     'breadcrumbs',
+      //     'navigation',
+      //     'actions',
+      //     'types',
+      //     'navroot',
+      //   ],
       // },
     ],
     // Internal proxy to bypass CORS *while developing*. NOT intended for production use.
@@ -128,7 +136,7 @@ let config = {
     useEmailAsLogin: false,
     persistentReducers: ['blocksClipboard'],
     initialReducersBlacklist: [], // reducers in this list won't be hydrated in windows.__data
-    asyncPropsExtenders: [], // per route asyncConnect customizers
+    asyncPropsExtenders: [getSiteAsyncPropExtender], // per route asyncConnect customizers
     contentIcons: contentIcons,
     loadables,
     lazyBundles: {
@@ -188,6 +196,10 @@ let config = {
     blockSettingsTabFieldsetsInitialStateOpen: true,
     excludeLinksAndReferencesMenuItem: false,
     containerBlockTypes: ['gridBlock'],
+    siteTitleFormat: {
+      includeSiteTitle: false,
+      titleAndSiteTitleSeparator: '-',
+    },
   },
   experimental: {
     addBlockButton: {
@@ -223,7 +235,7 @@ config.settings.apiExpanders = [
   ...config.settings.apiExpanders,
   {
     match: '',
-    GET_CONTENT: ['breadcrumbs', 'actions', 'types'],
+    GET_CONTENT: ['breadcrumbs', 'actions', 'types', 'navroot'],
   },
   {
     match: '',

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';
@@ -137,3 +138,6 @@ export const REMOVE_ALIASES = 'REMOVE_ALIASES';
 export const GET_USERSCHEMA = 'GET_USERSCHEMA';
 export const GET_UPGRADE = 'GET_UPGRADE';
 export const POST_UPGRADE = 'POST_UPGRADE';
+export const RESET_LOGIN_REQUEST = 'RESET_LOGIN_REQUEST';
+export const GET_SITE = 'GET_SITE';
+export const GET_NAVROOT = 'GET_NAVROOT';

package/src/express-middleware/images.js

@@ -28,6 +28,7 @@ export default function imagesMiddleware() {
 
   middleware.all(['**/@@images/*'], imageMiddlewareFn);
   middleware.all(['/@portrait/*'], imageMiddlewareFn);
+  middleware.all(['/@@site-logo/*'], imageMiddlewareFn);
   middleware.id = 'imageResourcesProcessor';
   return middleware;
 }

package/src/helpers/MessageLabels/MessageLabels.js

@@ -172,6 +172,28 @@ export const messages = defineMessages({
     id: 'Roles',
     defaultMessage: 'Roles',
   },
+  addUserFormPasswordAndSendPasswordTogetherNotAllowed: {
+    id:
+      'It is not allowed to define both the password and to request sending the password reset message by e-mail. You need to select one of them.',
+    defaultMessage:
+      'It is not allowed to define both the password and to request sending the password reset message by e-mail. You need to select one of them.',
+  },
+  userSearchNoResults: {
+    id: 'There are no users with the searched criteria',
+    defaultMessage: 'There are no users with the searched criteria',
+  },
+  groupSearchNoResults: {
+    id: 'There are no groups with the searched criteria',
+    defaultMessage: 'There are no groups with the searched criteria',
+  },
+  updateUserFormTitle: {
+    id: 'Update User',
+    defaultMessage: 'Update User',
+  },
+  updateUserSuccess: {
+    id: 'User updated successfuly',
+    defaultMessage: 'User updated successfuly',
+  },
   updateRoles: {
     id: 'User roles updated',
     defaultMessage: 'User roles updated',
@@ -234,19 +256,19 @@ export const messages = defineMessages({
   },
   copyBlocks: {
     id: 'Copy blocks',
-    defaultMesages: 'Copy blocks',
+    defaultMessage: 'Copy blocks',
   },
   cutBlocks: {
     id: 'Cut blocks',
-    defaultMesages: 'Cut blocks',
+    defaultMessage: 'Cut blocks',
   },
   pasteBlocks: {
     id: 'Paste blocks',
-    defaultMesages: 'Paste blocks',
+    defaultMessage: 'Paste blocks',
   },
   deleteBlocks: {
     id: 'Delete blocks',
-    defaultMesages: 'Delete blocks',
+    defaultMessage: 'Delete blocks',
   },
   showAllUserButton: {
     id: 'Show All',

package/src/helpers/Site/index.js

@@ -0,0 +1,21 @@
+import { GET_SITE } from '@plone/volto/constants/ActionTypes';
+import { getSite } from '@plone/volto/actions';
+
+const getSiteAsyncPropExtender = {
+  path: '/',
+  extend: (dispatchActions) => {
+    if (
+      dispatchActions.filter((asyncAction) => asyncAction.key === GET_SITE)
+        .length === 0
+    ) {
+      dispatchActions.push({
+        key: GET_SITE,
+        promise: ({ location, store: { dispatch } }) =>
+          __SERVER__ && dispatch(getSite()),
+      });
+    }
+    return dispatchActions;
+  },
+};
+
+export { getSiteAsyncPropExtender };

package/src/helpers/index.js

@@ -121,3 +121,4 @@ export {
   getCurrentStateMapping,
   getWorkflowOptions,
 } from './Workflows/Workflows';
+export { getSiteAsyncPropExtender } from './Site';

package/src/reducers/index.js

@@ -50,6 +50,8 @@ import workingCopy from './workingcopy/workingcopy';
 import transactions from './transactions/transactions';
 import upgrade from './upgrade/upgrade';
 import userschema from './userschema/userschema';
+import site from './site/site';
+import navroot from './navroot/navroot';
 
 /**
  * Root reducer.
@@ -105,6 +107,8 @@ const reducers = {
   workingCopy,
   transactions,
   userschema,
+  site,
+  navroot,
 };
 
 export default reducers;

package/src/reducers/navroot/navroot.js

@@ -0,0 +1,79 @@
+/**
+ * Navroot reducer.
+ * @module reducers/navroot/navroot
+ */
+import {
+  flattenToAppURL,
+  getBaseUrl,
+  hasApiExpander,
+} from '@plone/volto/helpers';
+
+import { GET_NAVROOT, GET_CONTENT } from '@plone/volto/constants/ActionTypes';
+
+const initialState = {
+  error: null,
+  loaded: false,
+  loading: false,
+  data: {},
+};
+
+/**
+ * navroot reducer.
+ * @function navroot
+ * @param {Object} state Current state.
+ * @param {Object} action Action to be handled.
+ * @returns {Object} New state.
+ */
+export default function navroot(state = initialState, action = {}) {
+  let hasExpander;
+  switch (action.type) {
+    case `${GET_NAVROOT}_PENDING`:
+      return {
+        ...state,
+        error: null,
+        loaded: false,
+        loading: true,
+        data: {},
+      };
+    case `${GET_CONTENT}_SUCCESS`:
+      hasExpander = hasApiExpander(
+        'navroot',
+        getBaseUrl(flattenToAppURL(action.result['@id'])),
+      );
+      if (hasExpander && !action.subrequest) {
+        return {
+          ...state,
+          error: null,
+          data: action.result['@components'].navroot,
+          loaded: true,
+          loading: false,
+        };
+      }
+      return state;
+    case `${GET_NAVROOT}_SUCCESS`:
+      hasExpander = hasApiExpander(
+        'navroot',
+        getBaseUrl(flattenToAppURL(action.result['@id'])),
+      );
+      if (!hasExpander) {
+        return {
+          ...state,
+          error: null,
+          loaded: true,
+          loading: false,
+          data: action.result,
+        };
+      }
+      return state;
+    case `${GET_NAVROOT}_FAIL`:
+      return {
+        ...state,
+        error: action.result,
+        loaded: false,
+        loading: false,
+        data: {},
+      };
+    default:
+      return state;
+  }
+}

package/src/reducers/navroot/navroot.test.js

@@ -0,0 +1,110 @@
+import { GET_CONTENT, GET_NAVROOT } from '@plone/volto/constants/ActionTypes';
+import config from '@plone/volto/registry';
+import navroot from './navroot';
+
+const { settings } = config;
+
+describe('Navroot reducer', () => {
+  it('should return the initial state', () => {
+    expect(navroot()).toEqual({
+      error: null,
+      data: {},
+      loaded: false,
+      loading: false,
+    });
+  });
+
+  it('should handle GET_NAVROOT_PENDING', () => {
+    expect(
+      navroot(undefined, {
+        type: `${GET_NAVROOT}_PENDING`,
+      }),
+    ).toEqual({
+      error: null,
+      data: {},
+      loaded: false,
+      loading: true,
+    });
+  });
+
+  it('should handle GET_NAVROOT_SUCCESS', () => {
+    expect(
+      navroot(undefined, {
+        type: `${GET_NAVROOT}_SUCCESS`,
+        result: {
+          title: 'Welcome to Plone!',
+          description:
+            'Congratulations! You have successfully installed Plone.',
+          '@id': `${settings.apiPath}/front-page`,
+        },
+      }),
+    ).toEqual({
+      error: null,
+      data: {
+        '@id': `${settings.apiPath}/front-page`,
+        title: 'Welcome to Plone!',
+        description: 'Congratulations! You have successfully installed Plone.',
+      },
+
+      loaded: true,
+      loading: false,
+    });
+  });
+
+  it('should handle GET_NAVROOT_FAIL', () => {
+    expect(
+      navroot(undefined, {
+        type: `${GET_NAVROOT}_FAIL`,
+        error: 'failed',
+      }),
+    ).toEqual({
+      error: undefined,
+      data: {},
+      loaded: false,
+      loading: false,
+    });
+  });
+});
+
+describe('Navroot reducer (NAVROOT)GET_CONTENT', () => {
+  beforeEach(() => {
+    config.settings.apiExpanders = [
+      {
+        match: '',
+        GET_CONTENT: ['navroot'],
+      },
+    ];
+  });
+
+  it('should handle (NAVROOT)GET_CONTENT_SUCCESS', () => {
+    expect(
+      navroot(undefined, {
+        type: `${GET_CONTENT}_SUCCESS`,
+        result: {
+          '@components': {
+            navroot: {
+              navroot: {
+                title: 'Welcome to Plone!',
+                description:
+                  'Congratulations! You have successfully installed Plone.',
+                '@id': `${settings.apiPath}/front-page`,
+              },
+            },
+          },
+        },
+      }),
+    ).toEqual({
+      error: null,
+      data: {
+        navroot: {
+          '@id': `${settings.apiPath}/front-page`,
+          title: 'Welcome to Plone!',
+          description:
+            'Congratulations! You have successfully installed Plone.',
+        },
+      },
+      loaded: true,
+      loading: false,
+    });
+  });
+});