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

package/src/components/theme/Logo/Logo.jsx

@@ -2,25 +2,18 @@
  * Logo component.
  * @module components/theme/Logo/Logo
  */
-
-import { defineMessages, useIntl } from 'react-intl';
+import { useEffect } from 'react';
 import { Image } from 'semantic-ui-react';
-import { useSelector } from 'react-redux';
-import config from '@plone/volto/registry';
-import { UniversalLink } from '@plone/volto/components';
-import { toBackendLang } from '@plone/volto/helpers';
+import { ConditionalLink } from '@plone/volto/components';
 import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
-
-const messages = defineMessages({
-  site: {
-    id: 'Site',
-    defaultMessage: 'Site',
-  },
-  plonesite: {
-    id: 'Plone Site',
-    defaultMessage: 'Plone Site',
-  },
-});
+import { useSelector, useDispatch } from 'react-redux';
+import { getNavroot } from '@plone/volto/actions';
+import {
+  flattenToAppURL,
+  hasApiExpander,
+  getBaseUrl,
+  toPublicURL,
+} from '@plone/volto/helpers';
 
 /**
  * Logo component class.
@@ -29,23 +22,36 @@ const messages = defineMessages({
  * @returns {string} Markup of the component.
  */
 const Logo = () => {
-  const { settings } = config;
-  const lang = useSelector((state) => state.intl.locale);
-  const intl = useIntl();
+  const pathname = useSelector((state) => state.router.location.pathname);
+  const site = useSelector((state) => state.site.data);
+  const navroot = useSelector((state) => state.navroot.data);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (pathname && !hasApiExpander('navroot', getBaseUrl(pathname))) {
+      dispatch(getNavroot(getBaseUrl(pathname)));
+    }
+  }, [dispatch, pathname]);
+
+  // remove trailing slash
+  const currentURL = toPublicURL(pathname).replace(/\/$/, '');
 
   return (
-    <UniversalLink
-      href={settings.isMultilingual ? `/${toBackendLang(lang)}` : '/'}
-      title={intl.formatMessage(messages.site)}
+    <ConditionalLink
+      href={navroot?.navroot?.['@id']}
+      title={navroot?.navroot?.title}
+      condition={currentURL !== navroot?.navroot?.['@id']}
     >
       <Image
-        src={LogoImage}
-        alt={intl.formatMessage(messages.plonesite)}
-        title={intl.formatMessage(messages.plonesite)}
-        width="158.2"
-        height="40.7"
+        src={
+          site['plone.site_logo']
+            ? flattenToAppURL(site['plone.site_logo'])
+            : LogoImage
+        }
+        alt={navroot?.navroot?.title}
+        title={navroot?.navroot?.title}
       />
-    </UniversalLink>
+    </ConditionalLink>
   );
 };
 

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

@@ -4,17 +4,151 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 
+import config from '@plone/volto/registry';
+
 import Logo from './Logo';
 
 const mockStore = configureStore();
 
+beforeAll(() => {
+  config.settings.publicURL = 'http://localhost:3000';
+});
+
 describe('Logo', () => {
-  it('renders a logo component', () => {
+  it('renders a logo component with default config', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      navroot: {
+        data: {
+          id: 'http://localhost:3000/@navroot',
+          navroot: {
+            '@id': 'http://localhost:3000',
+            title: 'Plone Site',
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/',
+        },
+      },
+      site: {
+        data: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Logo />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+  it('renders a logo component with a custom logo', () => {
     const store = mockStore({
       intl: {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          id: 'http://localhost:3000/@navroot',
+          navroot: {
+            '@id': 'http://localhost:3000',
+            title: 'Plone Site',
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/',
+        },
+      },
+      site: {
+        data: {
+          'plone.site_logo':
+            'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+        },
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Logo />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+  it('renders a logo component with default config in a non-root url', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      navroot: {
+        data: {
+          id: 'http://localhost:3000/@navroot',
+          navroot: {
+            '@id': 'http://localhost:3000',
+            title: 'Plone Site',
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/some-page',
+        },
+      },
+      site: {
+        data: {
+          'plone.site_logo':
+            'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+        },
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Logo />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+  it('renders a logo component with a custom logo in a non-root url', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      navroot: {
+        data: {
+          id: 'http://localhost:3000/@navroot',
+          navroot: {
+            '@id': 'http://localhost:3000',
+            title: 'Plone Site',
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/some-page',
+        },
+      },
+      site: {
+        data: {
+          'plone.site_logo':
+            'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

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

@@ -55,7 +55,7 @@ const Logout = ({ location }) => {
     }
   }, [history, returnUrl, intl, token]);
 
-  return <Login location={{ query: location.query }} />;
+  return <Login location={{ query: location.query }} isLogout={true} />;
 };
 
 export default Logout;

package/src/components/theme/Navigation/Navigation.jsx

@@ -1,14 +1,9 @@
-/**
- * Navigation components.
- * @module components/theme/Navigation/Navigation
- */
-
-import React, { Component } from 'react';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { defineMessages, injectIntl } from 'react-intl';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
 import { Menu } from 'semantic-ui-react';
+
 import cx from 'classnames';
 import { BodyClass, getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
@@ -27,176 +22,96 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Navigation container class.
- * @class Navigation
- * @extends Component
- */
-class Navigation extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getNavigation: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-    lang: PropTypes.string.isRequired,
-  };
-
-  static defaultProps = {
-    token: null,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Navigation
-   */
-  constructor(props) {
-    super(props);
-    this.toggleMobileMenu = this.toggleMobileMenu.bind(this);
-    this.closeMobileMenu = this.closeMobileMenu.bind(this);
-    this.state = {
-      isMobileMenuOpen: false,
-    };
-  }
+const Navigation = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { pathname, type } = props;
+  const [isMobileMenuOpen, setisMobileMenuOpen] = useState(false);
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const items = useSelector((state) => state.navigation.items, shallowEqual);
+  const lang = useSelector((state) => state.intl.locale);
 
-  componentDidMount() {
+  useEffect(() => {
     const { settings } = config;
-    if (!hasApiExpander('navigation', getBaseUrl(this.props.pathname))) {
-      this.props.getNavigation(
-        getBaseUrl(this.props.pathname),
-        settings.navDepth,
-      );
+    if (!hasApiExpander('navigation', getBaseUrl(pathname))) {
+      dispatch(getNavigation(getBaseUrl(pathname), settings.navDepth));
     }
-  }
+  }, [pathname, token, dispatch]);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { settings } = config;
-    if (
-      nextProps.pathname !== this.props.pathname ||
-      nextProps.token !== this.props.token
-    ) {
-      if (!hasApiExpander('navigation', getBaseUrl(this.props.pathname))) {
-        this.props.getNavigation(
-          getBaseUrl(nextProps.pathname),
-          settings.navDepth,
-        );
-      }
-    }
-  }
-
-  /**
-   * Toggle mobile menu's open state
-   * @method toggleMobileMenu
-   * @returns {undefined}
-   */
-  toggleMobileMenu() {
-    this.setState({ isMobileMenuOpen: !this.state.isMobileMenuOpen });
-  }
+  const toggleMobileMenu = () => {
+    setisMobileMenuOpen(!isMobileMenuOpen);
+  };
 
-  /**
-   * Close mobile menu
-   * @method closeMobileMenu
-   * @returns {undefined}
-   */
-  closeMobileMenu() {
-    if (!this.state.isMobileMenuOpen) {
+  const closeMobileMenu = () => {
+    if (!isMobileMenuOpen) {
       return;
     }
-    this.setState({ isMobileMenuOpen: false });
-  }
+    setisMobileMenuOpen(false);
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <nav className="navigation" id="navigation" aria-label="navigation">
-        <div className="hamburger-wrapper mobile tablet only">
-          <button
-            className={cx('hamburger hamburger--spin', {
-              'is-active': this.state.isMobileMenuOpen,
-            })}
-            aria-label={
-              this.state.isMobileMenuOpen
-                ? this.props.intl.formatMessage(messages.closeMobileMenu, {
-                    type: this.props.type,
-                  })
-                : this.props.intl.formatMessage(messages.openMobileMenu, {
-                    type: this.props.type,
-                  })
-            }
-            title={
-              this.state.isMobileMenuOpen
-                ? this.props.intl.formatMessage(messages.closeMobileMenu, {
-                    type: this.props.type,
-                  })
-                : this.props.intl.formatMessage(messages.openMobileMenu, {
-                    type: this.props.type,
-                  })
-            }
-            type="button"
-            onClick={this.toggleMobileMenu}
-          >
-            <span className="hamburger-box">
-              <span className="hamburger-inner" />
-            </span>
-          </button>
-        </div>
-        <Menu
-          stackable
-          pointing
-          secondary
-          className="computer large screen widescreen only"
-          onClick={this.closeMobileMenu}
+  return (
+    <nav className="navigation" id="navigation" aria-label="navigation">
+      <div className="hamburger-wrapper mobile tablet only">
+        <button
+          className={cx('hamburger hamburger--spin', {
+            'is-active': isMobileMenuOpen,
+          })}
+          aria-label={
+            isMobileMenuOpen
+              ? intl.formatMessage(messages.closeMobileMenu, {
+                  type: type,
+                })
+              : intl.formatMessage(messages.openMobileMenu, {
+                  type: type,
+                })
+          }
+          title={
+            isMobileMenuOpen
+              ? intl.formatMessage(messages.closeMobileMenu, {
+                  type: type,
+                })
+              : intl.formatMessage(messages.openMobileMenu, {
+                  type: type,
+                })
+          }
+          type="button"
+          onClick={toggleMobileMenu}
         >
-          <NavItems items={this.props.items} lang={this.props.lang} />
-        </Menu>
-        <CSSTransition
-          in={this.state.isMobileMenuOpen}
-          timeout={500}
-          classNames="mobile-menu"
-          unmountOnExit
-        >
-          <div key="mobile-menu-key" className="mobile-menu">
-            <BodyClass className="has-mobile-menu-open" />
-            <div className="mobile-menu-nav">
-              <Menu stackable pointing secondary onClick={this.closeMobileMenu}>
-                <NavItems items={this.props.items} lang={this.props.lang} />
-              </Menu>
-            </div>
+          <span className="hamburger-box">
+            <span className="hamburger-inner" />
+          </span>
+        </button>
+      </div>
+      <Menu
+        stackable
+        pointing
+        secondary
+        className="computer large screen widescreen only"
+        onClick={closeMobileMenu}
+      >
+        <NavItems items={items} lang={lang} />
+      </Menu>
+      <CSSTransition
+        in={isMobileMenuOpen}
+        timeout={500}
+        classNames="mobile-menu"
+        unmountOnExit
+      >
+        <div key="mobile-menu-key" className="mobile-menu">
+          <BodyClass className="has-mobile-menu-open" />
+          <div className="mobile-menu-nav">
+            <Menu stackable pointing secondary onClick={closeMobileMenu}>
+              <NavItems items={items} lang={lang} />
+            </Menu>
           </div>
-        </CSSTransition>
-      </nav>
-    );
-  }
-}
+        </div>
+      </CSSTransition>
+    </nav>
+  );
+};
+
+Navigation.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      token: state.userSession.token,
-      items: state.navigation.items,
-      lang: state.intl.locale,
-    }),
-    { getNavigation },
-  ),
-)(Navigation);
+export default Navigation;

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/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: '',