@plone/volto 17.0.0-alpha.9 → 17.0.0

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

@@ -1,15 +1,11 @@
-/**
- * Search widget component.
- * @module components/theme/SearchWidget/SearchWidget
- */
-
-import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 import { Form, Input } from 'semantic-ui-react';
-import { compose } from 'redux';
-import { PropTypes } from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
+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';
 
@@ -24,96 +20,52 @@ const messages = defineMessages({
   },
 });
 
-/**
- * SearchWidget component class.
- * @class SearchWidget
- * @extends Component
- */
-class SearchWidget extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    pathname: PropTypes.string,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.onChangeText = this.onChangeText.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = {
-      text: '',
-    };
-  }
-
-  /**
-   * On change text
-   * @method onChangeText
-   * @param {object} event Event object.
-   * @param {string} value Text value.
-   * @returns {undefined}
-   */
-  onChangeText(event, { value }) {
-    this.setState({
-      text: value,
-    });
-  }
+const SearchWidget = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {event} event Event object.
-   * @returns {undefined}
-   */
-  onSubmit(event) {
+  const [text, setText] = useState('');
+  const history = useHistory();
+  const onChangeText = (event, { value }) => {
+    setText(value);
+  };
+  const pathname = props.pathname;
+  const onSubmit = (event) => {
     const path =
-      this.props.pathname?.length > 0
-        ? `&path=${encodeURIComponent(this.props.pathname)}`
-        : '';
-    this.props.history.push(
-      `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
-    );
+      pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : '';
+
+    history.push(`./search?SearchableText=${encodeURIComponent(text)}${path}`);
     // reset input value
-    this.setState({
-      text: '',
-    });
+    setText('');
     event.preventDefault();
-  }
+  };
+
+  const navroot = useSelector((state) => state.navroot?.data);
+  useEffect(() => {
+    if (!hasApiExpander('navroot', getBaseUrl(pathname))) {
+      dispatch(getNavroot(getBaseUrl(pathname)));
+    }
+  }, [dispatch, pathname]);
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Form action="/search" onSubmit={this.onSubmit}>
-        <Form.Field className="searchbox">
-          <Input
-            aria-label={this.props.intl.formatMessage(messages.search)}
-            onChange={this.onChangeText}
-            name="SearchableText"
-            value={this.state.text}
-            transparent
-            autoComplete="off"
-            placeholder={this.props.intl.formatMessage(messages.searchSite)}
-            title={this.props.intl.formatMessage(messages.search)}
-          />
-          <button aria-label={this.props.intl.formatMessage(messages.search)}>
-            <Icon name={zoomSVG} size="18px" />
-          </button>
-        </Form.Field>
-      </Form>
-    );
-  }
-}
+  return (
+    <Form action={`${navroot?.navroot?.['@id']}/search`} onSubmit={onSubmit}>
+      <Form.Field className="searchbox">
+        <Input
+          aria-label={intl.formatMessage(messages.search)}
+          onChange={onChangeText}
+          name="SearchableText"
+          value={text}
+          transparent
+          autoComplete="off"
+          placeholder={intl.formatMessage(messages.searchSite)}
+          title={intl.formatMessage(messages.search)}
+        />
+        <button aria-label={intl.formatMessage(messages.search)}>
+          <Icon name={zoomSVG} size="18px" />
+        </button>
+      </Form.Field>
+    </Form>
+  );
+};
 
-export default compose(withRouter, injectIntl)(SearchWidget);
+export default SearchWidget;

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/TsTest/TsTest.test.tsx

@@ -0,0 +1,11 @@
+import renderer from 'react-test-renderer';
+import TsTest from './TsTest';
+
+describe('Ts test component', () => {
+  test('Renders', () => {
+    const component = renderer.create(<TsTest text="Test a TS component" />);
+    const json = component.toJSON();
+
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/components/theme/TsTest/TsTest.tsx

@@ -0,0 +1,15 @@
+/**
+ * TEST COMPONENT: React TSX component
+ * Ensure successful implementation of TSX and validate the functionality with Jest tests
+ * Dependencies: jest (version 26.6.3), ts-jest (version ^26.4.2)
+ */
+
+type TestProps = {
+  text: string;
+};
+
+const TsTest = ({ text }: TestProps) => {
+  return <div>{text}</div>;
+};
+
+export default TsTest;

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

@@ -3,11 +3,16 @@
  * @module components/theme/View/AlbumView
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, GridColumn, Segment } from 'semantic-ui-react';
+import {
+  Container as SemanticContainer,
+  GridColumn,
+  Segment,
+} from 'semantic-ui-react';
 import { Button, Modal, Grid } from 'semantic-ui-react';
-import { Icon, UniversalLink, PreviewImage } from '@plone/volto/components';
+import { Icon, UniversalLink } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 import openSVG from '@plone/volto/icons/open.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -19,7 +24,7 @@ import backSVG from '@plone/volto/icons/back.svg';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-class AlbumView extends Component {
+class AlbumView extends React.Component {
   constructor(props) {
     super(props);
 
@@ -56,6 +61,12 @@ class AlbumView extends Component {
 
   render() {
     const { content } = this.props;
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+    const PreviewImage = config.getComponent({
+      name: 'PreviewImage',
+    }).component;
+
     return (
       <Container className="view-wrapper">
         <article id="content">
@@ -80,17 +91,16 @@ class AlbumView extends Component {
                             <Segment className="imageborder">
                               <PreviewImage
                                 item={item}
-                                alt={
-                                  item.image_caption
-                                    ? item.image_caption
-                                    : item.title
-                                }
+                                alt={item.image_caption || item.title}
                                 onClick={() => {
                                   this.setState({
                                     openIndex: index,
                                   });
                                 }}
                                 className="ui middle aligned image"
+                                responsive={true}
+                                loading="lazy"
+                                title={item.title}
                               />
                             </Segment>
                           </Grid.Column>
@@ -133,20 +143,15 @@ class AlbumView extends Component {
                               <Modal.Content image>
                                 <PreviewImage
                                   item={item}
-                                  alt={
-                                    item.image_caption
-                                      ? item.image_caption
-                                      : item.title
-                                  }
+                                  alt={item.image_caption}
                                   onClick={() => {
                                     this.setState({
                                       openIndex: index,
                                     });
                                   }}
-                                  size="large"
                                   className="ui image"
+                                  responsive={true}
                                 />
-
                                 <Modal.Description>
                                   <p>{item.description}</p>
                                 </Modal.Description>

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

@@ -6,32 +6,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
-import { Image, Grid } from 'semantic-ui-react';
+import { Grid } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import { EventDetails } from '@plone/volto/components';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
 
-const EventTextfieldView = ({ content }) => (
-  <React.Fragment>
-    {content.title && <h1 className="documentFirstHeading">{content.title}</h1>}
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content.image && (
-      <Image
-        className="document-image"
-        src={content.image.scales.thumb.download}
-        floated="right"
-      />
-    )}
-    {content.text && (
-      <div
-        dangerouslySetInnerHTML={{
-          __html: flattenHTMLToAppURL(content.text.data),
-        }}
-      />
-    )}
-  </React.Fragment>
-);
+const EventTextfieldView = ({ content }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
+
+  return (
+    <React.Fragment>
+      {content.title && (
+        <h1 className="documentFirstHeading">{content.title}</h1>
+      )}
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.image && (
+        <Image
+          className="document-image ui right floated image"
+          item={content}
+          imageField="image"
+          alt=""
+        />
+      )}
+      {content.text && (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: flattenHTMLToAppURL(content.text.data),
+          }}
+        />
+      )}
+    </React.Fragment>
+  );
+};
 
 /**
  * EventView view component class.
@@ -41,9 +50,11 @@ const EventTextfieldView = ({ content }) => (
  */
 const EventView = (props) => {
   const { content } = props;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
   return (
-    <div id="page-document" className="ui container view-wrapper event-view">
+    <Container id="page-document" className="view-wrapper event-view">
       <Grid>
         <Grid.Column width={7} className="mobile hidden">
           {hasBlocksData(content) ? (
@@ -83,7 +94,7 @@ const EventView = (props) => {
           )}
         </Grid.Column>
       </Grid>
-    </div>
+    </Container>
   );
 };
 

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

@@ -5,9 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'semantic-ui-react';
-
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * File view component class.
@@ -15,22 +15,27 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const FileView = ({ content }) => (
-  <Container className="view-wrapper">
-    <h1 className="documentFirstHeading">
-      {content.title}
-      {content.subtitle && ` - ${content.subtitle}`}
-    </h1>
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content.file?.download && (
-      <a href={flattenToAppURL(content.file.download)}>
-        {content.file.filename}
-      </a>
-    )}
-  </Container>
-);
+const FileView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.file?.download && (
+        <a href={flattenToAppURL(content.file.download)}>
+          {content.file.filename}
+        </a>
+      )}
+    </Container>
+  );
+};
 
 /**
  * Property types.

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

@@ -5,11 +5,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import prettybytes from 'pretty-bytes';
-
 import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * Image view component class.
@@ -17,37 +17,45 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const ImageView = ({ content }) => (
-  <Container className="view-wrapper">
-    <h1 className="documentFirstHeading">
-      {content.title}
-      {content.subtitle && ` - ${content.subtitle}`}
-    </h1>
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content?.image?.download && (
-      <a href={flattenToAppURL(content.image.download)}>
-        <img
-          alt={content.title}
-          src={flattenToAppURL(content.image.scales.preview.download)}
-        />
-        <figcaption>
-          <FormattedMessage
-            id="Size: {size}"
-            defaultMessage="Size: {size}"
-            values={{ size: prettybytes(content.image.size) }}
-          />
-          &nbsp; &mdash; &nbsp;
-          <FormattedMessage
-            id="Click to download full sized image"
-            defaultMessage="Click to download full sized image"
+const ImageView = ({ content }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content?.image?.download && (
+        <a href={flattenToAppURL(content.image.download)}>
+          <Image
+            item={content}
+            imageField="image"
+            alt={content.title}
+            responsive={true}
           />
-        </figcaption>
-      </a>
-    )}
-  </Container>
-);
+          <figcaption>
+            <FormattedMessage
+              id="Size: {size}"
+              defaultMessage="Size: {size}"
+              values={{ size: prettybytes(content.image.size) }}
+            />
+            &nbsp; &mdash; &nbsp;
+            <FormattedMessage
+              id="Click to download full sized image"
+              defaultMessage="Click to download full sized image"
+            />
+          </figcaption>
+        </a>
+      )}
+    </Container>
+  );
+};
 
 /**
  * Property types.

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

@@ -23,9 +23,13 @@ test('renders an image view component', () => {
           image: {
             size: 123123,
             download: 'file:///preview.jpg',
+            width: 400,
+            height: 400,
             scales: {
               preview: {
                 download: 'file:///preview.jpg',
+                width: 400,
+                height: 400,
               },
             },
           },