Configurable Container component from registry for some key route views.

news/4871.feature

@@ -0,0 +1 @@
+Configurable Container component from registry for some key route views. @sneridagh

src/components/manage/Contents/Contents.jsx

@@ -12,7 +12,7 @@ import { Link } from 'react-router-dom';
 import {
   Button,
   Confirm,
-  Container,
+  Container as SemanticContainer,
   Divider,
   Dropdown,
   Menu,
@@ -70,6 +70,7 @@ import {
 
 import { Helmet, getBaseUrl } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import config from '@plone/volto/registry';
 
 import backSVG from '@plone/volto/icons/back.svg';
 import cutSVG from '@plone/volto/icons/cut.svg';
@@ -1177,6 +1178,9 @@ class Contents extends Component {
       (this.props.orderRequest?.loading && !this.props.orderRequest?.error) ||
       (this.props.searchRequest?.loading && !this.props.searchRequest?.error);
 
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return this.props.token && this.props.objectActions?.length > 0 ? (
       <>
         {folderContentsAction ? (

src/components/manage/History/History.jsx

@@ -9,7 +9,13 @@ import { Helmet } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { Container, Dropdown, Icon, Segment, Table } from 'semantic-ui-react';
+import {
+  Container as SemanticContainer,
+  Dropdown,
+  Icon,
+  Segment,
+  Table,
+} from 'semantic-ui-react';
 import { concat, map, reverse, find } from 'lodash';
 import { Portal } from 'react-portal';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
@@ -24,6 +30,7 @@ import {
 } from '@plone/volto/components';
 import { getHistory, revertHistory, listActions } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -147,6 +154,9 @@ class History extends Component {
     });
     const entries = this.processHistoryEntries();
 
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return !historyAction ? (
       <>
         {this.props.token ? (

src/components/manage/Sharing/Sharing.jsx

@@ -14,7 +14,7 @@ import { Portal } from 'react-portal';
 import {
   Button,
   Checkbox,
-  Container,
+  Container as SemanticContainer,
   Form,
   Icon as IconOld,
   Input,
@@ -28,6 +28,7 @@ import { updateSharing, getSharing } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
 import { Icon, Toolbar, Toast } from '@plone/volto/components';
 import { toast } from 'react-toastify';
+import config from '@plone/volto/registry';
 
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -288,6 +289,9 @@ class SharingComponent extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return (
       <Container id="page-sharing">
         <Helmet title={this.props.intl.formatMessage(messages.sharing)} />

src/components/theme/View/NewsItemView.jsx

@@ -5,25 +5,29 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, Image } from 'semantic-ui-react';
+import { Container as SemanticContainer, Image } from 'semantic-ui-react';
 import {
   hasBlocksData,
   flattenToAppURL,
   flattenHTMLToAppURL,
 } from '@plone/volto/helpers';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import config from '@plone/volto/registry';
 
 /**
  * NewsItemView view component class.
  * @function NewsItemView
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const NewsItemView = ({ content }) =>
-  hasBlocksData(content) ? (
-    <div id="page-document" className="ui container view-wrapper newsitem-view">
+const NewsItemView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return hasBlocksData(content) ? (
+    <Container id="page-document" className="view-wrapper newsitem-view">
       <RenderBlocks content={content} />
-    </div>
+    </Container>
   ) : (
     <Container className="view-wrapper">
       {content.title && (
@@ -57,6 +61,7 @@ const NewsItemView = ({ content }) =>
       )}
     </Container>
   );
+};
 
 /**
  * Property types.