Move Tags component to the slot belowContent

Also remove showTags setting.

packages/types/news/6269.feature

@@ -0,0 +1 @@
+Remove `showTags` setting. @wesleybl

packages/types/src/config/Settings.d.ts

@@ -75,7 +75,6 @@ export interface SettingsConfig {
   maxFileUploadSize: number | null;
   serverConfig: unknown;
   storeExtenders: unknown[];
-  showTags: boolean;
   controlpanels: unknown[];
   controlPanelsIcons: Record<string, React.ComponentType>;
   filterControlPanels: unknown;

packages/volto/news/6269.feature

@@ -0,0 +1 @@
+Move Tags component to the slot `belowContent`. Also remove `showTags` setting. @wesleybl

packages/volto/src/components/theme/Tags/Tags.jsx

@@ -3,37 +3,43 @@
  * @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';
 
 /**
- * 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 (!tags.length) return null;
+
+  return (
     <Container className="tags">
       {tags.map((tag) => (
         <Link className="ui label" to={`/search?Subject=${tag}`} key={tag}>
           {tag}
         </Link>
       ))}
     </Container>
-  ) : (
-    <span />
   );
+};
 
 /**
  * Property types.
  * @property {Object} propTypes Property types.
  * @static
  */
 Tags.propTypes = {
-  tags: PropTypes.arrayOf(PropTypes.string),
+  content: PropTypes.shape({
+    subjects: PropTypes.arrayOf(PropTypes.string),
+  }),
 };
 
 /**
@@ -42,7 +48,9 @@ Tags.propTypes = {
  * @static
  */
 Tags.defaultProps = {
-  tags: null,
+  content: {
+    subjects: [],
+  },
 };
 
 export default Tags;

packages/volto/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>,
     );

packages/volto/src/components/theme/Tags/__snapshots__/Tags.test.jsx.snap

@@ -21,4 +21,4 @@ exports[`Tags renders with tags 1`] = `
 </div>
 `;
 
-exports[`Tags renders without tags 1`] = `<span />`;
+exports[`Tags renders without tags 1`] = `null`;

packages/volto/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} />
         )}

packages/volto/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';
@@ -149,7 +150,6 @@ let config = {
     maxFileUploadSize: null,
     serverConfig,
     storeExtenders: [],
-    showTags: true,
     controlpanels: [],
     controlPanelsIcons,
     filterControlPanels,
@@ -245,6 +245,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);

packages/volto/src/config/slots.js

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