@eeacms/volto-eea-website-theme 3.19.0 → 4.0.0

package/src/customizations/volto/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx

@@ -2,8 +2,9 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Segment } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Icon, BlockDataForm } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { LeadImageSchema } from './schema';
 import imageSVG from '@plone/volto/icons/image.svg';
 
@@ -48,6 +49,7 @@ const LeadImageSidebar = ({ properties, data, block, onChangeBlock, intl }) => {
         <>
           <Segment className="sidebar-metadata-container" secondary>
             {properties.image.filename}
+            {/* eslint-disable-next-line no-restricted-syntax */}
             <img
               src={
                 properties.image.data

package/src/customizations/volto/components/manage/Blocks/LeadImage/View.jsx

@@ -5,10 +5,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { UniversalLink } from '@plone/volto/components';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
-import { Copyright } from '@eeacms/volto-eea-design-system/ui';
+import Copyright from '@eeacms/volto-eea-design-system/ui/Copyright/Copyright';
 import { Icon } from 'semantic-ui-react';
 
 /**

package/src/customizations/volto/components/manage/Controlpanels/Groups/RenderGroups.jsx

@@ -8,7 +8,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import ploneSVG from '@plone/volto/icons/plone.svg';
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 
 /**
  * UsersControlpanelGroups class.

package/src/customizations/volto/components/manage/Controlpanels/Groups/RenderGroups.test.jsx

@@ -1,58 +1,124 @@
+/**
+ * RenderGroups — unit tests
+ *
+ * Volto 17 / 18 dual-support notes
+ * ---------------------------------
+ * The EEA change is a single-line tweak on line 80:
+ *   `{this.props.group.title || this.props.group.groupname}`
+ * instead of showing only `groupname`.
+ *
+ * V17 and V18 upstream are byte-for-byte identical, so this shadow is
+ * compatible with both versions without any rebase.
+ *
+ * The `@plone/volto/components` barrel is mocked to prevent the chain:
+ *   TranslationObject.jsx → store.js → @root/reducers
+ * that cannot be resolved in this Jest environment.  The previous snapshot
+ * test used `react-test-renderer` which produced a snapshot that contained
+ * the full icon SVG tree; the new tests use @testing-library/react and
+ * assert on the actual EEA-specific behavior instead.
+ */
+
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
 import RenderGroups from './RenderGroups';
 
+jest.mock('@plone/volto/components', () => ({
+  // RenderGroups.jsx uses only Icon from the barrel
+  Icon: () => null,
+}));
+
 const mockStore = configureStore();
 
-const testGroups = {
-  '@id': 'http://localhost:55001/plone/@groups/Administrators',
-  description: '',
-  email: '',
-  groupname: 'Administrators',
-  id: 'Administrators',
-  title: 'Administrators',
-  roles: ['Manager'],
-};
+const makeStore = () =>
+  mockStore({
+    intl: { locale: 'en', messages: {} },
+  });
 
 const testRoles = [
-  {
-    '@id': 'http://localhost:8080/Plone/@roles/Member',
-    '@type': 'role',
-    id: 'Member',
-  },
-  {
-    '@id': 'http://localhost:8080/Plone/@roles/Reader',
-    '@type': 'role',
-    id: 'Reader',
-  },
-  {
-    '@id': 'http://localhost:8080/Plone/@roles/Manager',
-    '@type': 'role',
-    id: 'Manager',
-  },
+  { '@id': 'http://localhost:8080/Plone/@roles/Member', id: 'Member' },
+  { '@id': 'http://localhost:8080/Plone/@roles/Reader', id: 'Reader' },
+  { '@id': 'http://localhost:8080/Plone/@roles/Manager', id: 'Manager' },
 ];
 
-describe('UsersControlpanelGroups', () => {
-  it('renders a UsersControlpanelGroups component', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-    const component = renderer.create(
-      <Provider store={store}>
-        <RenderGroups
-          group={testGroups}
-          roles={testRoles}
-          onDelete={() => {}}
-        />
+describe('RenderGroups — EEA: title || groupname display', () => {
+  it('shows the group title when available (EEA change)', () => {
+    const group = {
+      groupname: 'editors',
+      title: 'Site Editors',
+      roles: [],
+    };
+    render(
+      <Provider store={makeStore()}>
+        <RenderGroups group={group} roles={testRoles} onDelete={() => {}} />
+      </Provider>,
+    );
+    // EEA customization: title takes precedence over groupname
+    expect(screen.getByText('Site Editors')).toBeInTheDocument();
+  });
+
+  it('falls back to groupname when title is absent', () => {
+    const group = {
+      groupname: 'Administrators',
+      title: '',
+      roles: ['Manager'],
+    };
+    render(
+      <Provider store={makeStore()}>
+        <RenderGroups group={group} roles={testRoles} onDelete={() => {}} />
+      </Provider>,
+    );
+    expect(screen.getByText('Administrators')).toBeInTheDocument();
+  });
+
+  it('falls back to groupname when title is undefined', () => {
+    const group = {
+      groupname: 'Reviewers',
+      // no title key at all
+      roles: [],
+    };
+    render(
+      <Provider store={makeStore()}>
+        <RenderGroups group={group} roles={testRoles} onDelete={() => {}} />
+      </Provider>,
+    );
+    expect(screen.getByText('Reviewers')).toBeInTheDocument();
+  });
+
+  it('renders a checkbox for each role', () => {
+    const group = {
+      groupname: 'Administrators',
+      title: 'Administrators',
+      roles: ['Manager'],
+    };
+    const { container } = render(
+      <Provider store={makeStore()}>
+        <RenderGroups group={group} roles={testRoles} onDelete={() => {}} />
+      </Provider>,
+    );
+    // One checkbox per role
+    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+    expect(checkboxes).toHaveLength(testRoles.length);
+  });
+
+  it('checks the checkbox for roles the group already has', () => {
+    const group = {
+      groupname: 'managers',
+      title: 'Managers',
+      roles: ['Manager'],
+    };
+    const { container } = render(
+      <Provider store={makeStore()}>
+        <RenderGroups group={group} roles={testRoles} onDelete={() => {}} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+    // Member → unchecked, Reader → unchecked, Manager → checked
+    expect(checkboxes[0]).not.toBeChecked();
+    expect(checkboxes[1]).not.toBeChecked();
+    expect(checkboxes[2]).toBeChecked();
   });
 });

package/src/customizations/volto/components/manage/Diff/DiffField.jsx

@@ -4,7 +4,8 @@
  */
 
 import React from 'react';
-import { join, map } from 'lodash';
+import join from 'lodash/join';
+import map from 'lodash/map';
 import PropTypes from 'prop-types';
 import { Grid } from 'semantic-ui-react';
 import ReactDOMServer from 'react-dom/server';
@@ -13,9 +14,9 @@ import { createBrowserHistory } from 'history';
 import { ConnectedRouter } from 'connected-react-router';
 import { useSelector, useStore } from 'react-redux';
 import config from '@plone/volto/registry';
-import { Api } from '@plone/volto/helpers';
+import Api from '@plone/volto/helpers/Api/Api';
 import configureStore from '@plone/volto/store';
-import { RenderBlocks } from '@plone/volto/components';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 

package/src/customizations/volto/components/manage/Display/Display.jsx

@@ -5,14 +5,15 @@ import { compose } from 'redux';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import jwtDecode from 'jwt-decode';
+import { getSchema } from '@plone/volto/actions/schema/schema';
+import { getUser } from '@plone/volto/actions/users/users';
 import {
-  getSchema,
-  getUser,
   updateContent,
   getContent,
-} from '@plone/volto/actions';
-import { getLayoutFieldname } from '@plone/volto/helpers';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
+} from '@plone/volto/actions/content/content';
+import { getLayoutFieldname } from '@plone/volto/helpers/Content/Content';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { defineMessages, injectIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 
@@ -101,8 +102,8 @@ const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },

package/src/customizations/volto/components/manage/History/History.jsx

@@ -42,6 +42,14 @@ import config from '@plone/volto/registry';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
+const getPathname = (url) => {
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return typeof url === 'string' && url.startsWith('/') ? url : null;
+  }
+};
+
 const messages = defineMessages({
   back: {
     id: 'Back',
@@ -213,32 +221,31 @@ class History extends Component {
               defaultMessage="You can view the history of your item below."
             />
           </Segment>
-          {this.props.content?.copied_to && (
-            <Message info icon attached="top">
-              <Icon name="arrow right" />
-              <Message.Content>
-                <Message.Header>
-                  <FormattedMessage {...messages.newerVersionAvailable} />
-                </Message.Header>
-                <FormattedMessage
-                  {...messages.thereIsNewerVersionAt}
-                  values={{
-                    link: (
-                      <a
-                        href={`${
-                          new URL(this.props.content.copied_to).pathname
-                        }/historyview`}
-                      >
-                        {new URL(this.props.content.copied_to).pathname
-                          .split('/')
-                          .pop() || 'newer version'}
-                      </a>
-                    ),
-                  }}
-                />
-              </Message.Content>
-            </Message>
-          )}
+          {(() => {
+            const copiedToPath = getPathname(this.props.content?.copied_to);
+            return (
+              copiedToPath && (
+                <Message info icon attached="top">
+                  <Icon name="arrow right" />
+                  <Message.Content>
+                    <Message.Header>
+                      <FormattedMessage {...messages.newerVersionAvailable} />
+                    </Message.Header>
+                    <FormattedMessage
+                      {...messages.thereIsNewerVersionAt}
+                      values={{
+                        link: (
+                          <a href={`${copiedToPath}/historyview`}>
+                            {copiedToPath.split('/').pop() || 'newer version'}
+                          </a>
+                        ),
+                      }}
+                    />
+                  </Message.Content>
+                </Message>
+              )
+            );
+          })()}
           <Table
             selectable
             compact
@@ -371,32 +378,31 @@ class History extends Component {
               ))}
             </Table.Body>
           </Table>
-          {this.props.content?.copied_from && (
-            <Message warning icon attached="bottom">
-              <Icon name="arrow left" />
-              <Message.Content>
-                <Message.Header>
-                  <FormattedMessage {...messages.olderVersionAvailable} />
-                </Message.Header>
-                <FormattedMessage
-                  {...messages.thereIsOlderVersionAt}
-                  values={{
-                    link: (
-                      <a
-                        href={`${
-                          new URL(this.props.content.copied_from).pathname
-                        }/historyview`}
-                      >
-                        {new URL(this.props.content.copied_from).pathname
-                          .split('/')
-                          .pop() || 'older version'}
-                      </a>
-                    ),
-                  }}
-                />
-              </Message.Content>
-            </Message>
-          )}
+          {(() => {
+            const copiedFromPath = getPathname(this.props.content?.copied_from);
+            return (
+              copiedFromPath && (
+                <Message warning icon attached="bottom">
+                  <Icon name="arrow left" />
+                  <Message.Content>
+                    <Message.Header>
+                      <FormattedMessage {...messages.olderVersionAvailable} />
+                    </Message.Header>
+                    <FormattedMessage
+                      {...messages.thereIsOlderVersionAt}
+                      values={{
+                        link: (
+                          <a href={`${copiedFromPath}/historyview`}>
+                            {copiedFromPath.split('/').pop() || 'older version'}
+                          </a>
+                        ),
+                      }}
+                    />
+                  </Message.Content>
+                </Message>
+              )
+            );
+          })()}
         </Segment.Group>
         {this.state.isClient &&
           createPortal(

package/src/customizations/volto/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { Input, Segment, Breadcrumb } from 'semantic-ui-react';
 
-import { join } from 'lodash';
+import join from 'lodash/join';
 
 // These absolute imports (without using the corresponding centralized index.js) are required
 // to cut circular import problems, this file should never use them. This is because of
@@ -25,6 +25,11 @@ import linkSVG from '@plone/volto/icons/link.svg';
 import homeSVG from '@plone/volto/icons/home.svg';
 
 import ObjectBrowserNav from '@plone/volto/components/manage/Sidebar/ObjectBrowserNav';
+import {
+  isItemAlreadySelected,
+  isSelectableObjectBrowserItem,
+  shouldCloseAfterObjectBrowserSelection,
+} from './objectBrowserSelection';
 
 const messages = defineMessages({
   SearchInputPlaceholder: {
@@ -74,6 +79,7 @@ class ObjectBrowserBody extends Component {
     maximumSelectionSize: PropTypes.number,
     contextURL: PropTypes.string,
     searchableTypes: PropTypes.arrayOf(PropTypes.string),
+    onlyFolderishSelectable: PropTypes.bool,
   };
 
   /**
@@ -89,6 +95,7 @@ class ObjectBrowserBody extends Component {
     selectableTypes: [],
     searchableTypes: null,
     maximumSelectionSize: null,
+    onlyFolderishSelectable: false,
   };
 
   /**
@@ -106,27 +113,27 @@ class ObjectBrowserBody extends Component {
         this.props.mode === 'multiple'
           ? '/'
           : this.props.mode === 'image' && this.props.data?.url
-          ? getParentURL(this.props.data.url)
-          : '/',
+            ? getParentURL(this.props.data.url)
+            : '/',
       currentLinkFolder:
         this.props.mode === 'multiple'
           ? '/'
           : this.props.mode === 'link' && this.props.data?.href
-          ? getParentURL(this.props.data.href)
-          : '/',
+            ? getParentURL(this.props.data.href)
+            : '/',
       parentFolder: '',
       selectedImage:
         this.props.mode === 'multiple'
           ? ''
           : this.props.mode === 'image' && this.props.data?.url
-          ? flattenToAppURL(this.props.data.url)
-          : '',
+            ? flattenToAppURL(this.props.data.url)
+            : '',
       selectedHref:
         this.props.mode === 'multiple'
           ? ''
           : this.props.mode === 'link' && this.props.data?.href
-          ? flattenToAppURL(this.props.data.href)
-          : '',
+            ? flattenToAppURL(this.props.data.href)
+            : '',
       showSearchInput: false,
       // In image mode, the searchable types default to the image types which
       // can be overridden with the property if specified.
@@ -152,8 +159,8 @@ class ObjectBrowserBody extends Component {
       mode === 'multiple'
         ? ''
         : mode === 'image'
-        ? this.state.selectedImage
-        : this.state.selectedHref;
+          ? this.state.selectedImage
+          : this.state.selectedHref;
     if (currentSelected && isInternalURL(currentSelected)) {
       this.props.searchContent(
         getParentURL(currentSelected),
@@ -299,9 +306,15 @@ class ObjectBrowserBody extends Component {
   };
 
   isSelectable = (item) => {
-    return this.props.selectableTypes.length > 0
-      ? this.props.selectableTypes.indexOf(item['@type']) >= 0
-      : true;
+    return isSelectableObjectBrowserItem({
+      item,
+      selectableTypes: this.props.selectableTypes,
+      onlyFolderishSelectable: this.props.onlyFolderishSelectable,
+      maximumSelectionSize: this.props.maximumSelectionSize,
+      data: this.props.data,
+      mode: this.props.mode,
+      normalize: flattenToAppURL,
+    });
   };
 
   handleClickOnItem = (item) => {
@@ -318,15 +331,23 @@ class ObjectBrowserBody extends Component {
           !this.props.maximumSelectionSize ||
           this.props.mode === 'multiple' ||
           !this.props.data ||
-          this.props.data.length < this.props.maximumSelectionSize
+          this.props.data.length <= this.props.maximumSelectionSize
         ) {
-          this.onSelectItem(item);
-          let length = this.props.data ? this.props.data.length : 0;
+          const isDeselecting =
+            this.props.mode === 'multiple' &&
+            isItemAlreadySelected({
+              data: this.props.data,
+              item,
+              normalize: flattenToAppURL,
+            });
 
-          let stopSelecting =
-            this.props.mode !== 'multiple' ||
-            (this.props.maximumSelectionSize > 0 &&
-              length + 1 >= this.props.maximumSelectionSize);
+          this.onSelectItem(item);
+          const stopSelecting = shouldCloseAfterObjectBrowserSelection({
+            mode: this.props.mode,
+            maximumSelectionSize: this.props.maximumSelectionSize,
+            currentLength: this.props.data ? this.props.data.length : 0,
+            isDeselecting,
+          });
 
           if (stopSelecting) {
             this.props.closeObjectBrowser();

package/src/customizations/volto/components/manage/Sidebar/ObjectBrowserNav.jsx

@@ -3,7 +3,8 @@ import { Button, Segment, Popup } from 'semantic-ui-react';
 import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { flattenToAppURL, getContentIcon } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { getContentIcon } from '@plone/volto/helpers/Content/Content';
 import { Image } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 

package/src/customizations/volto/components/manage/Sidebar/SidebarPopup.jsx

@@ -1,9 +1,10 @@
-// Check this https://github.com/plone/volto/pull/5520
+// Backport of https://github.com/plone/volto/pull/5520 for Volto 17.
+// On Volto 18 this shadow is identical to upstream — keep while V17 is supported.
 import React from 'react';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import doesNodeContainClick from 'semantic-ui-react/dist/commonjs/lib/doesNodeContainClick';
 
 const DEFAULT_TIMEOUT = 500;
 
@@ -17,10 +18,24 @@ const SidebarPopup = (props) => {
     onClose();
   };
 
+  const handleEscapeKey = (e) => {
+    if (open && e.key === 'Escape') {
+      onClose();
+      e.stopPropagation();
+    }
+  };
+
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   React.useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside, false);
+    document.addEventListener('keyup', handleEscapeKey, false);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside, false);
+      document.removeEventListener('keyup', handleEscapeKey, false);
     };
   });
 
@@ -33,9 +48,13 @@ const SidebarPopup = (props) => {
           classNames="overlay-container"
           unmountOnExit
         >
-          <Portal node={document?.body}>
-            <div className="overlay-container"></div>
-          </Portal>
+          <>
+            {document?.body &&
+              createPortal(
+                <div className="overlay-container"></div>,
+                document?.body,
+              )}
+          </>
         </CSSTransition>
       )}
       <CSSTransition
@@ -44,24 +63,27 @@ const SidebarPopup = (props) => {
         classNames="sidebar-container"
         unmountOnExit
       >
-        <Portal>
-          <aside
-            id="test"
-            role="presentation"
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            onKeyDown={(e) => {
-              e.stopPropagation();
-            }}
-            ref={asideElement}
-            key="sidebarpopup"
-            className="sidebar-container"
-            style={{ overflowY: 'auto' }}
-          >
-            {children}
-          </aside>
-        </Portal>
+        <>
+          {isClient &&
+            createPortal(
+              <aside
+                role="presentation"
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                onKeyDown={(e) => {
+                  e.stopPropagation();
+                }}
+                ref={asideElement}
+                key="sidebarpopup"
+                className="sidebar-container"
+                style={{ overflowY: 'auto' }}
+              >
+                {children}
+              </aside>,
+              document.body,
+            )}
+        </>
       </CSSTransition>
     </>
   );