Related Items in slot

plone · Aug 26, 2024 · cc17763 · cc17763
1 parent 06b5457
commit cc17763
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 45 deletions.
diff --git a/packages/volto/src/components/theme/RelatedItems/RelatedItems.jsx b/packages/volto/src/components/theme/RelatedItems/RelatedItems.jsx
@@ -7,6 +7,7 @@ import { UniversalLink } from '@plone/volto/components';
 import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Container } from 'semantic-ui-react';
+import config from '@plone/registry';
 
 const messages = defineMessages({
   relatedItems: {
@@ -21,8 +22,13 @@ const messages = defineMessages({
  * @param {array} relatedItems Array of related items.
  * @returns {JSX.Element} Markup of the component.
  */
-const RelatedItems = ({ relatedItems, intl }) => {
-  if (!relatedItems || relatedItems.length === 0) {
+const RelatedItems = ({ content, intl }) => {
+  const relatedItems = content?.relatedItems;
+  if (
+    !config.settings.showRelatedItems ||
+    !relatedItems ||
+    relatedItems.length === 0
+  ) {
     return null;
   }
 

diff --git a/packages/volto/src/components/theme/RelatedItems/RelatedItems.test.jsx b/packages/volto/src/components/theme/RelatedItems/RelatedItems.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';
@@ -7,19 +6,24 @@ import { MemoryRouter } from 'react-router-dom';
 import RelatedItems from './RelatedItems';
 
 const mockStore = configureStore();
+let store;
 
 describe('Related Items', () => {
-  it('renders without related items', () => {
-    const store = mockStore({
+  beforeEach(() => {
+    store = mockStore({
       intl: {
         locale: 'en',
         messages: {},
       },
     });
+  });
+
+  it('renders without related items', () => {
+    const content = {};
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <RelatedItems />
+          <RelatedItems content={content} />
         </MemoryRouter>
       </Provider>,
     );
@@ -28,28 +32,25 @@ describe('Related Items', () => {
   });
 
   it('renders with related items', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-    const relatedItems = [
-      {
-        '@id': '/test-1',
-        title: 'Title 1',
-        description: 'Description 1',
-      },
-      {
-        '@id': '/test-2',
-        title: 'Title 2',
-        description: 'Description 2',
-      },
-    ];
+    const content = {
+      relatedItems: [
+        {
+          '@id': '/test-1',
+          title: 'Title 1',
+          description: 'Description 1',
+        },
+        {
+          '@id': '/test-2',
+          title: 'Title 2',
+          description: 'Description 2',
+        },
+      ],
+    };
+
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <RelatedItems relatedItems={relatedItems} />
+          <RelatedItems content={content} />
         </MemoryRouter>
       </Provider>,
     );
@@ -58,24 +59,21 @@ describe('Related Items', () => {
   });
 
   it('renders with related items has null', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-    const relatedItems = [
-      {
-        '@id': '/test-1',
-        title: 'Title 1',
-        description: 'Description 1',
-      },
-      null,
-    ];
+    const content = {
+      relatedItems: [
+        {
+          '@id': '/test-1',
+          title: 'Title 1',
+          description: 'Description 1',
+        },
+        null,
+      ],
+    };
+
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <RelatedItems relatedItems={relatedItems} />
+          <RelatedItems content={content} />
         </MemoryRouter>
       </Provider>,
     );

diff --git a/packages/volto/src/components/theme/View/View.jsx b/packages/volto/src/components/theme/View/View.jsx
@@ -15,7 +15,6 @@ import qs from 'query-string';
 import {
   ContentMetadataTags,
   Comments,
-  RelatedItems,
   Toolbar,
 } from '@plone/volto/components';
 import { listActions, getContent } from '@plone/volto/actions';
@@ -256,9 +255,6 @@ class View extends Component {
           history={this.props.history}
         />
         <SlotRenderer name="belowContent" content={this.props.content} />
-        {config.settings.showRelatedItems && (
-          <RelatedItems relatedItems={this.props.content.relatedItems} />
-        )}
         {this.props.content.allow_discussion && (
           <Comments pathname={this.props.pathname} />
         )}

diff --git a/packages/volto/src/config/slots.js b/packages/volto/src/config/slots.js
@@ -1,11 +1,15 @@
-import { Tags } from '@plone/volto/components';
+import { Tags, RelatedItems } from '@plone/volto/components';
 
 const slots = {
   belowContent: [
     {
       name: 'tags',
       component: Tags,
     },
+    {
+      name: 'relatedItems',
+      component: RelatedItems,
+    },
   ],
 };
 

diff --git a/packages/volto/test-setup-config.jsx b/packages/volto/test-setup-config.jsx
@@ -33,6 +33,7 @@ config.set('settings', {
   supportedLanguages: ['en'],
   defaultPageSize: 25,
   showTags: true,
+  showRelatedItems: true,
   isMultilingual: false,
   nonContentRoutes,
   contentIcons: contentIcons,