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

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,11 +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} />
-          )}
         {this.props.content.allow_discussion && (
           <Comments pathname={this.props.pathname} />
         )}

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

package/src/config/config.test.js

@@ -221,6 +221,7 @@ test('test navigation controlpanel fields', () => {
   const not_in_navigation = [
     'generate_tabs',
     'navigation_depth',
+    'nonfolderish_tabs',
     'sort_tabs_on',
     'sort_tabs_reversed',
     'sitemap_depth',

package/src/config/index.js

@@ -18,6 +18,7 @@ import {
 import { components } from './Components';
 import { loadables } from './Loadables';
 import { workflowMapping } from './Workflows';
+import slots from './slots';
 
 import { contentIcons } from './ContentIcons';
 import { styleClassNameConverters, styleClassNameExtenders } from './Style';
@@ -25,6 +26,7 @@ import {
   controlPanelsIcons,
   filterControlPanels,
   filterControlPanelsSchema,
+  unwantedControlPanelsFields,
 } from './ControlPanels';
 
 import applyAddonConfiguration, { addonsInfo } from 'load-volto-addons';
@@ -153,6 +155,7 @@ let config = {
     controlPanelsIcons,
     filterControlPanels,
     filterControlPanelsSchema,
+    unwantedControlPanelsFields,
     externalRoutes: [
       // URL to be considered as external
       // {
@@ -168,6 +171,7 @@ let config = {
     ],
     showSelfRegistration: false,
     contentMetadataTagsImageField: 'image',
+    contentPropertiesSchemaEnhancer: null,
     hasWorkingCopySupport: false,
     maxUndoLevels: 200, // undo history size for the main form
     addonsInfo: addonsInfo,
@@ -242,6 +246,18 @@ ConfigRegistry.components = config.components;
 ConfigRegistry.slots = config.slots;
 ConfigRegistry.utilities = config.utilities;
 
+// Register slots
+Object.entries(slots).forEach(([slotName, components]) => {
+  components.forEach(({ name, component, predicates = [] }) => {
+    ConfigRegistry.registerSlotComponent({
+      slot: slotName,
+      name,
+      component,
+      predicates,
+    });
+  });
+});
+
 registerValidators(ConfigRegistry);
 
 applyAddonConfiguration(ConfigRegistry);

package/src/config/slots.js

@@ -0,0 +1,12 @@
+import { Tags } from '@plone/volto/components';
+
+const slots = {
+  belowContent: [
+    {
+      name: 'tags',
+      component: Tags,
+    },
+  ],
+};
+
+export default slots;