@plone/volto 18.0.0-alpha.41 → 18.0.0-alpha.43

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

@@ -71,6 +71,7 @@ class Search extends Component {
 
   constructor(props) {
     super(props);
+    this.defaultPageSize = config.settings.defaultPageSize;
     this.state = { currentPage: 1, isClient: false, active: 'relevance' };
   }
 
@@ -109,19 +110,24 @@ class Search extends Component {
     const options = qs.parse(this.props.history.location.search);
     this.setState({ currentPage: 1 });
     options['use_site_search_settings'] = 1;
-    this.props.searchContent('', options);
+    this.props.searchContent('', {
+      b_size: this.defaultPageSize,
+      ...options,
+    });
   };
 
   handleQueryPaginationChange = (e, { activePage }) => {
-    const { settings } = config;
     window.scrollTo(0, 0);
     let options = qs.parse(this.props.history.location.search);
     options['use_site_search_settings'] = 1;
 
     this.setState({ currentPage: activePage }, () => {
       this.props.searchContent('', {
+        b_size: this.defaultPageSize,
         ...options,
-        b_start: (this.state.currentPage - 1) * settings.defaultPageSize,
+        b_start:
+          (this.state.currentPage - 1) *
+          (options.b_size || this.defaultPageSize),
       });
     });
   };
@@ -149,7 +155,8 @@ class Search extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { settings } = config;
+    const options = qs.parse(this.props.history.location.search);
+
     return (
       <Container id="page-search">
         <Helmet title={this.props.intl.formatMessage(messages.Search)} />
@@ -282,7 +289,8 @@ class Search extends Component {
                   <Pagination
                     activePage={this.state.currentPage}
                     totalPages={Math.ceil(
-                      this.props.search.items_total / settings.defaultPageSize,
+                      this.props.search.items_total /
+                        (options.b_size || this.defaultPageSize),
                     )}
                     onPageChange={this.handleQueryPaginationChange}
                     firstItem={null}

package/src/components/theme/Tags/Tags.jsx

@@ -3,19 +3,25 @@
  * @module components/theme/Tags/Tags
  */
 
-import React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { Container } from 'semantic-ui-react';
+import config from '@plone/registry';
 
 /**
- * Tags component class.
+ * Tags component.
  * @function Tags
- * @param {array} tags Array of tags.
- * @returns {string} Markup of the component.
+ * @param {Object} props Component properties.
+ * @param {Object} props.content Content object that may contain subjects.
+ * @param {Array} [props.content.subjects] Optional array of tags (subjects).
+ * @returns {JSX.Element|null} Markup of the component or null if no tags are available.
  */
-const Tags = ({ tags }) =>
-  tags && tags.length > 0 ? (
+const Tags = ({ content }) => {
+  const tags = content?.subjects || [];
+
+  if (!config.settings.showTags || !tags.length) return null;
+
+  return (
     <Container className="tags">
       {tags.map((tag) => (
         <Link className="ui label" to={`/search?Subject=${tag}`} key={tag}>
@@ -23,9 +29,8 @@ const Tags = ({ tags }) =>
         </Link>
       ))}
     </Container>
-  ) : (
-    <span />
   );
+};
 
 /**
  * Property types.
@@ -33,7 +38,9 @@ const Tags = ({ tags }) =>
  * @static
  */
 Tags.propTypes = {
-  tags: PropTypes.arrayOf(PropTypes.string),
+  content: PropTypes.shape({
+    subjects: PropTypes.arrayOf(PropTypes.string),
+  }),
 };
 
 /**
@@ -42,7 +49,9 @@ Tags.propTypes = {
  * @static
  */
 Tags.defaultProps = {
-  tags: null,
+  content: {
+    subjects: [],
+  },
 };
 
 export default Tags;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
@@ -9,17 +8,22 @@ import Tags from './Tags';
 const mockStore = configureStore();
 
 describe('Tags', () => {
-  it('renders without tags', () => {
-    const store = mockStore({
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
       intl: {
         locale: 'en',
         messages: {},
       },
     });
+  });
+
+  it('renders without tags', () => {
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <Tags />
+          <Tags content={{ subjects: [] }} />
         </MemoryRouter>
       </Provider>,
     );
@@ -28,16 +32,10 @@ describe('Tags', () => {
   });
 
   it('renders with tags', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <Tags tags={['Tag 1', 'Tag 2']} />
+          <Tags content={{ subjects: ['Tag 1', 'Tag 2'] }} />
         </MemoryRouter>
       </Provider>,
     );

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

@@ -1,9 +1,4 @@
-/**
- * Album view component.
- * @module components/theme/View/AlbumView
- */
-
-import React from 'react';
+import { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   Container as SemanticContainer,
@@ -18,178 +13,138 @@ import openSVG from '@plone/volto/icons/open.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import backSVG from '@plone/volto/icons/back.svg';
 
-/**
- * Album view component class.
- * @function AlbumView
- * @param {Object} content Content object.
- * @returns {string} Markup of the component.
- */
-class AlbumView extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      openIndex: undefined,
-    };
-
-    this.closeModal = this.closeModal.bind(this);
-    this.nextImage = this.nextImage.bind(this);
-    this.prevImage = this.prevImage.bind(this);
-  }
-
-  closeModal() {
-    this.setState({
-      openIndex: -1,
-    });
-  }
-
-  nextImage() {
-    const openIndex =
-      (this.state.openIndex + 1) % this.props.content.items.length;
-    this.setState({
-      openIndex,
-    });
-  }
-
-  prevImage() {
-    const openIndex =
-      (this.state.openIndex - 1) % this.props.content.items.length;
-    this.setState({
-      openIndex,
-    });
-  }
+const AlbumView = ({ content }) => {
+  const [openIndex, setOpenIndex] = useState(undefined);
 
-  render() {
-    const { content } = this.props;
-    const Container =
-      config.getComponent({ name: 'Container' }).component || SemanticContainer;
-    const PreviewImage = config.getComponent({
-      name: 'PreviewImage',
-    }).component;
+  const closeModal = () => {
+    setOpenIndex(-1);
+  };
 
-    return (
-      <Container className="view-wrapper">
-        <article id="content">
-          <header>
-            <h1 className="documentFirstHeading">{content.title}</h1>
-            {content.description && (
-              <p className="documentDescription">{content.description}</p>
-            )}
-          </header>
-          <section id="content-core">
-            <Grid doubling stackable columns={4}>
-              {content.items &&
-                content.items.map((item, index) => (
-                  <React.Fragment key={item.url}>
-                    {item.image_field && (
-                      <Modal
-                        className="gallery"
-                        onClose={this.closeModal}
-                        open={this.state.openIndex === index}
-                        trigger={
-                          <Grid.Column>
-                            <Segment className="imageborder">
+  const nextImage = () => {
+    let OpenIndex = (openIndex + 1) % content.items.length;
+    setOpenIndex(OpenIndex);
+  };
+  const prevImage = () => {
+    const OpenIndex = (openIndex - 1) % content.items.length;
+    setOpenIndex(OpenIndex);
+  };
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  const PreviewImage = config.getComponent({ name: 'PreviewImage' }).component;
+  return (
+    <Container className="view-wrapper">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
+        <section id="content-core">
+          <Grid doubling stackable columns={4}>
+            {content.items &&
+              content.items.map((item, index) => (
+                <Fragment key={item.url}>
+                  {item.image_field && (
+                    <Modal
+                      className="gallery"
+                      onClose={closeModal}
+                      open={openIndex === index}
+                      trigger={
+                        <Grid.Column>
+                          <Segment className="imageborder">
+                            <PreviewImage
+                              item={item}
+                              alt={item.image_caption || item.title}
+                              onClick={() => {
+                                setOpenIndex(index);
+                              }}
+                              className="ui middle aligned image"
+                              responsive={true}
+                              loading="lazy"
+                              title={item.title}
+                            />
+                          </Segment>
+                        </Grid.Column>
+                      }
+                      closeIcon
+                    >
+                      <Modal.Header>
+                        <Grid>
+                          <Grid.Row>
+                            <GridColumn width={10}>{item.title}</GridColumn>
+                            <GridColumn width={2} textAlign="right">
+                              <UniversalLink
+                                href={item.url}
+                                title={item['@type']}
+                                onClick={closeModal}
+                              >
+                                <Icon size="30px" fitted name={openSVG} />
+                              </UniversalLink>
+                            </GridColumn>
+                          </Grid.Row>
+                        </Grid>
+                      </Modal.Header>
+                      <Grid centered verticalAlign="middle">
+                        <Grid.Row>
+                          <Grid.Column width={2} textAlign="center">
+                            <Button
+                              className="gallery noborder"
+                              onClick={prevImage}
+                              style={{ margin: 0 }}
+                            >
+                              <Icon
+                                name={backSVG}
+                                className="circled"
+                                size="30px"
+                                style={{ margin: 0 }}
+                              />
+                            </Button>
+                          </Grid.Column>
+                          <Grid.Column width={8}>
+                            <Modal.Content image>
                               <PreviewImage
                                 item={item}
-                                alt={item.image_caption || item.title}
+                                alt={item.image_caption}
                                 onClick={() => {
-                                  this.setState({
-                                    openIndex: index,
-                                  });
+                                  setOpenIndex(index);
                                 }}
-                                className="ui middle aligned image"
+                                className="ui image"
                                 responsive={true}
-                                loading="lazy"
-                                title={item.title}
                               />
-                            </Segment>
+
+                              <Modal.Description>
+                                <p>{item.description}</p>
+                              </Modal.Description>
+                            </Modal.Content>
                           </Grid.Column>
-                        }
-                        closeIcon
-                      >
-                        <Modal.Header>
-                          <Grid>
-                            <Grid.Row>
-                              <GridColumn width={10}>{item.title}</GridColumn>
-                              <GridColumn width={2} textAlign="right">
-                                <UniversalLink
-                                  href={item.url}
-                                  title={item['@type']}
-                                  onClick={this.closeModal}
-                                >
-                                  <Icon size="30px" fitted name={openSVG} />
-                                </UniversalLink>
-                              </GridColumn>
-                            </Grid.Row>
-                          </Grid>
-                        </Modal.Header>
-                        <Grid centered verticalAlign="middle">
-                          <Grid.Row>
-                            <Grid.Column width={2} textAlign="center">
-                              <Button
-                                className="gallery noborder"
-                                onClick={this.nextImage}
+                          <Grid.Column width={2} textAlign="center">
+                            <Button
+                              onClick={nextImage}
+                              className="gallery noborder"
+                              style={{ margin: 0 }}
+                            >
+                              <Icon
+                                name={aheadSVG}
+                                className="circled"
+                                size="30px"
                                 style={{ margin: 0 }}
-                              >
-                                <Icon
-                                  name={backSVG}
-                                  className="circled"
-                                  size="30px"
-                                  style={{ margin: 0 }}
-                                />
-                              </Button>
-                            </Grid.Column>
-                            <Grid.Column width={8}>
-                              <Modal.Content image>
-                                <PreviewImage
-                                  item={item}
-                                  alt={item.image_caption}
-                                  onClick={() => {
-                                    this.setState({
-                                      openIndex: index,
-                                    });
-                                  }}
-                                  className="ui image"
-                                  responsive={true}
-                                />
-                                <Modal.Description>
-                                  <p>{item.description}</p>
-                                </Modal.Description>
-                              </Modal.Content>
-                            </Grid.Column>
-                            <Grid.Column width={2} textAlign="center">
-                              <Button
-                                onClick={this.nextImage}
-                                className="gallery noborder"
-                                style={{ margin: 0 }}
-                              >
-                                <Icon
-                                  name={aheadSVG}
-                                  className="circled"
-                                  size="30px"
-                                  style={{ margin: 0 }}
-                                />
-                              </Button>
-                            </Grid.Column>
-                          </Grid.Row>
-                        </Grid>
-                      </Modal>
-                    )}
-                  </React.Fragment>
-                ))}
-            </Grid>
-          </section>
-        </article>
-      </Container>
-    );
-  }
-}
+                              />
+                            </Button>
+                          </Grid.Column>
+                        </Grid.Row>
+                      </Grid>
+                    </Modal>
+                  )}
+                </Fragment>
+              ))}
+          </Grid>
+        </section>
+      </article>
+    </Container>
+  );
+};
 
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
 AlbumView.propTypes = {
   /**
    * Content of the object

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

@@ -4,6 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
+import { Redirect } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import config from '@plone/volto/registry';
 
@@ -19,6 +20,9 @@ const LinkView = ({ token, content }) => {
       }
     }
   }, [content, history, token]);
+  if (__SERVER__ && !token && content.remoteUrl) {
+    return <Redirect to={content.remoteUrl} />;
+  }
   const { title, description, remoteUrl } = content;
   const { openExternalLinkInNewTab } = config.settings;
   const Container =

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

@@ -7,6 +7,8 @@ import LinkView from './LinkView';
 
 const mockStore = configureStore();
 
+global.__SERVER__ = false; // eslint-disable-line no-underscore-dangle
+
 const store = mockStore({
   userSession: {
     token: null,

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

@@ -15,7 +15,6 @@ import qs from 'query-string';
 import {
   ContentMetadataTags,
   Comments,
-  Tags,
   Toolbar,
 } from '@plone/volto/components';
 import { listActions, getContent } from '@plone/volto/actions';
@@ -256,18 +255,6 @@ class View extends Component {
           history={this.props.history}
         />
         <SlotRenderer name="belowContent" content={this.props.content} />
-        {config.settings.showTags &&
-          this.props.content.subjects &&
-          this.props.content.subjects.length > 0 && (
-            <Tags tags={this.props.content.subjects} />
-          )}
-        {/* Add opt-in social sharing if required, disabled by default */}
-        {/* In the future this might be parameterized from the app config */}
-        {/* <SocialSharing
-          url={typeof window === 'undefined' ? '' : window.location.href}
-          title={this.props.content.title}
-          description={this.props.content.description || ''}
-        /> */}
         {this.props.content.allow_discussion && (
           <Comments pathname={this.props.pathname} />
         )}

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

@@ -30,9 +30,6 @@ jest.mock('../../manage/Toolbar/Toolbar', () =>
   jest.fn(() => <div id="Portal" />),
 );
 
-jest.mock('../SocialSharing/SocialSharing', () =>
-  jest.fn(() => <div id="SocialSharing" />),
-);
 jest.mock('../Comments/Comments', () => jest.fn(() => <div id="Comments" />));
 jest.mock('../Tags/Tags', () => jest.fn(() => <div id="Tags" />));
 jest.mock('../SlotRenderer/SlotRenderer', () =>

package/src/config/ControlPanels.js

@@ -19,6 +19,7 @@ import rulesSVG from '@plone/volto/icons/content-existing.svg';
 import undoControlPanelSVG from '@plone/volto/icons/undo-control-panel.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
 import relationsSVG from '@plone/volto/icons/ahead.svg';
+import config from '@plone/volto/registry';
 
 export const controlPanelsIcons = {
   default: settingsSVG,
@@ -53,62 +54,67 @@ export const filterControlPanels = (controlpanels = []) => {
   );
 };
 
+export const unwantedControlPanelsFields = {
+  language: ['display_flags', 'always_show_selector'],
+  search: ['enable_livesearch'],
+  site: [
+    'display_publication_date_in_byline',
+    'icon_visibility',
+    'thumb_visibility',
+    'no_thumbs_portlet',
+    'no_thumbs_lists',
+    'no_thumbs_summary',
+    'no_thumbs_tables',
+    'thumb_scale_portlet',
+    'thumb_scale_listing',
+    'thumb_scale_table',
+    'thumb_scale_summary',
+    'toolbar_position',
+    'toolbar_logo',
+    'default_page',
+    'site_favicon',
+    'site_favicon_mimetype',
+    'exposeDCMetaTags',
+    'enable_sitemap',
+    'robots_txt',
+    'webstats_js',
+  ],
+  editing: ['available_editors', 'default_editor', 'ext_editor'],
+  imaging: [
+    'highpixeldensity_scales',
+    'quality_2x',
+    'quality_3x',
+    'picture_variants',
+    'image_captioning',
+  ],
+  navigation: [
+    'generate_tabs',
+    'navigation_depth',
+    'nonfolderish_tabs',
+    'sort_tabs_on',
+    'sort_tabs_reversed',
+    'sitemap_depth',
+  ],
+};
+
 // Filters props.controlpanel.schema to only valid/relevant fields
 export const filterControlPanelsSchema = (controlpanel) => {
   const panelType = controlpanel['@id'].split('/').pop();
 
-  const unwantedSettings = {
-    language: ['display_flags', 'always_show_selector'],
-    search: ['enable_livesearch'],
-    site: [
-      'display_publication_date_in_byline',
-      'icon_visibility',
-      'thumb_visibility',
-      'no_thumbs_portlet',
-      'no_thumbs_lists',
-      'no_thumbs_summary',
-      'no_thumbs_tables',
-      'thumb_scale_portlet',
-      'thumb_scale_listing',
-      'thumb_scale_table',
-      'thumb_scale_summary',
-      'toolbar_position',
-      'toolbar_logo',
-      'default_page',
-      'site_favicon',
-      'site_favicon_mimetype',
-      'exposeDCMetaTags',
-      'enable_sitemap',
-      'robots_txt',
-      'webstats_js',
-    ],
-    editing: ['available_editors', 'default_editor', 'ext_editor'],
-    imaging: [
-      'highpixeldensity_scales',
-      'quality_2x',
-      'quality_3x',
-      'picture_variants',
-      'image_captioning',
-    ],
-    navigation: [
-      'generate_tabs',
-      'navigation_depth',
-      'sort_tabs_on',
-      'sort_tabs_reversed',
-      'sitemap_depth',
-    ],
-  };
+  const { unwantedControlPanelsFields } = config.settings;
 
   // Creates modified version of properties object
   const newPropertiesObj = Object.fromEntries(
     Object.entries(controlpanel.schema.properties).filter(
-      ([key, val]) => !(unwantedSettings[panelType] || []).includes(key),
+      ([key, _val]) =>
+        !(unwantedControlPanelsFields[panelType] || []).includes(key),
     ),
   );
   // Filters props.controlpanel.schema.fieldsets.fields to only valid/relevant fields
   const filterFields = (fields) => {
     return fields.filter(
-      (field) => !(unwantedSettings[panelType] || []).includes(field),
+      (field) =>
+        !(unwantedControlPanelsFields[panelType] || []).includes(field),
     );
   };
   // Creates modified version of fieldsets array