@eeacms/volto-eea-website-theme 3.7.0 → 3.9.0

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

@@ -0,0 +1,444 @@
+/**
+ * History component.
+ * @module components/manage/History/History
+ * Customized to enable complex versioning
+ * https://taskman.eionet.europa.eu/issues/289335?issue_count=4&issue_position=1&next_issue_id=285635
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import {
+  Container as SemanticContainer,
+  Dropdown,
+  Icon,
+  Message,
+  Segment,
+  Table,
+} from 'semantic-ui-react';
+import concat from 'lodash/concat';
+import map from 'lodash/map';
+import reverse from 'lodash/reverse';
+import find from 'lodash/find';
+import { createPortal } from 'react-dom';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { asyncConnect } from '@plone/volto/helpers/AsyncConnect';
+
+import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
+import IconNext from '@plone/volto/components/theme/Icon/Icon';
+import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
+import Forbidden from '@plone/volto/components/theme/Forbidden/Forbidden';
+import Unauthorized from '@plone/volto/components/theme/Unauthorized/Unauthorized';
+import {
+  getHistory,
+  revertHistory,
+} from '@plone/volto/actions/history/history';
+import { listActions } from '@plone/volto/actions/actions/actions';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import config from '@plone/volto/registry';
+
+import backSVG from '@plone/volto/icons/back.svg';
+
+const messages = defineMessages({
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  history: {
+    id: 'History',
+    defaultMessage: 'History',
+  },
+  newerVersionAvailable: {
+    id: 'Newer version available',
+    defaultMessage: 'Newer version available',
+  },
+  thereIsNewerVersionAt: {
+    id: 'There is a newer version at {link}',
+    defaultMessage: 'There is a newer version at {link}',
+  },
+  olderVersionAvailable: {
+    id: 'Older version available',
+    defaultMessage: 'Older version available',
+  },
+  thereIsOlderVersionAt: {
+    id: 'There is an older version at {link}',
+    defaultMessage: 'There is an older version at {link}',
+  },
+});
+
+/**
+ * History class.
+ * @class History
+ * @extends Component
+ */
+class History extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    getHistory: PropTypes.func.isRequired,
+    revertHistory: PropTypes.func.isRequired,
+    revertRequest: PropTypes.shape({
+      loaded: PropTypes.bool,
+      loading: PropTypes.bool,
+    }).isRequired,
+    pathname: PropTypes.string.isRequired,
+    entries: PropTypes.arrayOf(
+      PropTypes.shape({
+        transition_title: PropTypes.string,
+        type: PropTypes.string,
+        action: PropTypes.string,
+        state_title: PropTypes.string,
+        time: PropTypes.string,
+        comments: PropTypes.string,
+        actor: PropTypes.shape({ fullname: PropTypes.string }),
+      }),
+    ).isRequired,
+    title: PropTypes.string.isRequired,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs Workflow
+   */
+  constructor(props) {
+    super(props);
+    this.onRevert = this.onRevert.bind(this);
+    this.state = { isClient: false };
+  }
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.props.getHistory(getBaseUrl(this.props.pathname));
+    this.setState({ isClient: true });
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.revertRequest.loading && nextProps.revertRequest.loaded) {
+      this.props.getHistory(getBaseUrl(this.props.pathname));
+    }
+  }
+
+  /**
+   * On revert
+   * @method onRevert
+   * @param {object} event Event object
+   * @param {number} value Value
+   * @returns {undefined}
+   */
+  onRevert(event, { value }) {
+    this.props.revertHistory(getBaseUrl(this.props.pathname), value);
+  }
+
+  processHistoryEntries = () => {
+    // Getting the history entries from the props
+    // No clue why the reverse(concat()) is necessary
+    const entries = reverse(concat(this.props.entries));
+    let title = entries.length > 0 ? entries[0].state_title : '';
+    for (let x = 1; x < entries.length; x += 1) {
+      entries[x].prev_state_title = title;
+      title = entries[x].state_title || title;
+    }
+    // We reverse them again
+    reverse(entries);
+
+    // We identify the latest 'versioning' entry and mark it
+    const current_version = find(entries, (item) => item.type === 'versioning');
+    if (current_version) {
+      current_version.is_current = true;
+    }
+    return entries;
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const historyAction = find(this.props.objectActions, {
+      id: 'history',
+    });
+    const entries = this.processHistoryEntries();
+
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+    return !historyAction ? (
+      <>
+        {this.props.token ? (
+          <Forbidden
+            pathname={this.props.pathname}
+            staticContext={this.props.staticContext}
+          />
+        ) : (
+          <Unauthorized
+            pathname={this.props.pathname}
+            staticContext={this.props.staticContext}
+          />
+        )}
+      </>
+    ) : (
+      <Container id="page-history">
+        <Helmet title={this.props.intl.formatMessage(messages.history)} />
+        <Segment.Group raised>
+          <Segment className="primary">
+            <FormattedMessage
+              id="History of {title}"
+              defaultMessage="History of {title}"
+              values={{
+                title: <q>{this.props.title}</q>,
+              }}
+            />
+          </Segment>
+          <Segment secondary>
+            <FormattedMessage
+              id="You can view the history of your item below."
+              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: (
+                      <Link to={new URL(this.props.content.copied_to).pathname}>
+                        {new URL(this.props.content.copied_to).pathname
+                          .split('/')
+                          .pop() || 'newer version'}
+                      </Link>
+                    ),
+                  }}
+                />
+              </Message.Content>
+            </Message>
+          )}
+          <Table
+            selectable
+            compact
+            attached
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+              wordWrap: 'break-word',
+            }}
+          >
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell style={{ width: '5%' }}>
+                  <FormattedMessage
+                    id="History Version Number"
+                    defaultMessage="#"
+                  />
+                </Table.HeaderCell>
+                <Table.HeaderCell style={{ width: '25%' }}>
+                  <FormattedMessage id="What" defaultMessage="What" />
+                </Table.HeaderCell>
+                <Table.HeaderCell style={{ width: '15%' }}>
+                  <FormattedMessage id="Who" defaultMessage="Who" />
+                </Table.HeaderCell>
+                <Table.HeaderCell style={{ width: '15%' }}>
+                  <FormattedMessage id="When" defaultMessage="When" />
+                </Table.HeaderCell>
+                <Table.HeaderCell style={{ width: '25%' }}>
+                  <FormattedMessage
+                    id="Change Note"
+                    defaultMessage="Change Note"
+                  />
+                </Table.HeaderCell>
+                <Table.HeaderCell style={{ width: '15%' }} />
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {map(entries, (entry) => (
+                <Table.Row key={entry.time}>
+                  <Table.Cell>
+                    {('version' in entry && entry.version > 0 && (
+                      <Link
+                        className="item"
+                        to={`${getBaseUrl(this.props.pathname)}/diff?one=${
+                          entry.version - 1
+                        }&two=${entry.version}`}
+                      >
+                        {entry.version}
+                      </Link>
+                    )) || <span>{entry.version}</span>}
+                  </Table.Cell>
+                  <Table.Cell>
+                    {('version' in entry && entry.version > 0 && (
+                      <Link
+                        className="item"
+                        to={`${getBaseUrl(this.props.pathname)}/diff?one=${
+                          entry.version - 1
+                        }&two=${entry.version}`}
+                      >
+                        {entry.transition_title}
+                      </Link>
+                    )) || (
+                      <span>
+                        {entry.transition_title}
+                        {entry.type === 'workflow' &&
+                          ` (${
+                            entry.action ? `${entry.prev_state_title} → ` : ''
+                          }${entry.state_title})`}
+                      </span>
+                    )}
+                  </Table.Cell>
+                  <Table.Cell>{entry.actor.fullname}</Table.Cell>
+                  <Table.Cell>
+                    <FormattedDate date={entry.time} />
+                  </Table.Cell>
+                  <Table.Cell>{entry.comments}</Table.Cell>
+                  <Table.Cell>
+                    {entry.type === 'versioning' && (
+                      <Dropdown icon="ellipsis horizontal">
+                        <Dropdown.Menu className="left">
+                          {'version' in entry && entry.version > 0 && (
+                            <Link
+                              className="item"
+                              to={`${getBaseUrl(
+                                this.props.pathname,
+                              )}/diff?one=${entry.version - 1}&two=${
+                                entry.version
+                              }`}
+                            >
+                              <Icon name="copy" />{' '}
+                              <FormattedMessage
+                                id="View changes"
+                                defaultMessage="View changes"
+                              />
+                            </Link>
+                          )}
+                          {'version' in entry && (
+                            <Link
+                              className="item"
+                              to={`${getBaseUrl(this.props.pathname)}?version=${
+                                entry.version
+                              }`}
+                            >
+                              <Icon name="eye" />{' '}
+                              <FormattedMessage
+                                id="View this revision"
+                                defaultMessage="View this revision"
+                              />
+                            </Link>
+                          )}
+                          {'version' in entry &&
+                            entry.may_revert &&
+                            !entry.is_current && (
+                              <Dropdown.Item
+                                value={entry.version}
+                                onClick={this.onRevert}
+                              >
+                                <Icon name="undo" />{' '}
+                                <FormattedMessage
+                                  id="Revert to this revision"
+                                  defaultMessage="Revert to this revision"
+                                />
+                              </Dropdown.Item>
+                            )}
+                        </Dropdown.Menu>
+                      </Dropdown>
+                    )}
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </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: (
+                      <Link
+                        to={new URL(this.props.content.copied_from).pathname}
+                      >
+                        {new URL(this.props.content.copied_from).pathname
+                          .split('/')
+                          .pop() || 'older version'}
+                      </Link>
+                    ),
+                  }}
+                />
+              </Message.Content>
+            </Message>
+          )}
+        </Segment.Group>
+        {this.state.isClient &&
+          createPortal(
+            <Toolbar
+              pathname={this.props.pathname}
+              hideDefaultViewButtons
+              inner={
+                <Link
+                  to={`${getBaseUrl(this.props.pathname)}`}
+                  className="item"
+                >
+                  <IconNext
+                    name={backSVG}
+                    className="contents circled"
+                    size="30px"
+                    title={this.props.intl.formatMessage(messages.back)}
+                  />
+                </Link>
+              }
+            />,
+            document.getElementById('toolbar'),
+          )}
+      </Container>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  asyncConnect([
+    {
+      key: 'actions',
+      // Dispatch async/await to make the operation synchronous, otherwise it returns
+      // before the promise is resolved
+      promise: async ({ location, store: { dispatch } }) =>
+        await dispatch(listActions(getBaseUrl(location.pathname))),
+    },
+  ]),
+  connect(
+    (state, props) => ({
+      objectActions: state.actions.actions.object,
+      token: state.userSession.token,
+      entries: state.history.entries,
+      pathname: props.location.pathname,
+      title: state.content.data?.title,
+      content: state.content.data,
+      revertRequest: state.history.revert,
+    }),
+    { getHistory, revertHistory },
+  ),
+)(History);

package/src/customizations/volto/components/theme/Comments/Comments.jsx

@@ -21,6 +21,7 @@ import { Button, Comment, Container, Icon } from 'semantic-ui-react';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { formatRelativeDate } from '@plone/volto/helpers/Utils/Date';
 import config from '@plone/volto/registry';
+import './comments.less';
 // import { Button, Grid, Segment, Container } from 'semantic-ui-react';
 
 const messages = defineMessages({
@@ -341,7 +342,8 @@ class Comments extends Component {
           <Comment.Actions>
             {comment.can_reply && (
               <Comment.Action
-                as="a"
+                as="button"
+                type="button"
                 aria-label={this.props.intl.formatMessage(messages.reply)}
                 onClick={() => this.setReplyTo(comment.comment_id)}
               >
@@ -350,6 +352,8 @@ class Comments extends Component {
             )}
             {comment.is_editable && (
               <Comment.Action
+                as="button"
+                type="button"
                 onClick={() =>
                   this.onEdit({
                     id: flattenToAppURL(comment['@id']),
@@ -367,6 +371,8 @@ class Comments extends Component {
             )}
             {comment.is_deletable && (
               <Comment.Action
+                as="button"
+                type="button"
                 aria-label={this.props.intl.formatMessage(messages.delete)}
                 onClick={() => this.onDelete(flattenToAppURL(comment['@id']))}
                 color="red"
@@ -380,7 +386,8 @@ class Comments extends Component {
               </Comment.Action>
             )}
             <Comment.Action
-              as="a"
+              as="button"
+              type="button"
               onClick={() => this.hideReply(comment.comment_id)}
             >
               {allCommentsWithCildren[comment.comment_id].children.length >

package/src/customizations/volto/components/theme/Comments/Comments.test.jsx

@@ -362,11 +362,11 @@ describe('Comments', () => {
       </Provider>,
     );
 
-    const actions = container.querySelectorAll('.actions a');
+    const actions = container.querySelectorAll('.actions button');
 
-    fireEvent.click(container.querySelector('a[aria-label="Reply"]'));
-    fireEvent.click(container.querySelector('a[aria-label="Edit"]'));
-    fireEvent.click(container.querySelector('a[aria-label="Delete"]'));
+    fireEvent.click(container.querySelector('button[aria-label="Reply"]'));
+    fireEvent.click(container.querySelector('button[aria-label="Edit"]'));
+    fireEvent.click(container.querySelector('button[aria-label="Delete"]'));
     fireEvent.click(actions[actions.length - 1]);
     fireEvent.click(
       container.querySelector('#comment-add-id button[aria-label="Comment"]'),

package/src/customizations/volto/components/theme/Comments/comments.less

@@ -0,0 +1,16 @@
+.ui.comments .comment .actions button {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  margin: 0em 0.75em 0em 0em;
+  background: none;
+  color: #000000;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+
+.ui.comments .comment .actions button:focus {
+  outline: 1px solid #2185d0;
+  outline-offset: 1px;
+}

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -11,6 +11,7 @@ import { withRouter } from 'react-router-dom';
 import { UniversalLink } from '@plone/volto/components';
 import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
 import { getNavigation } from '@plone/volto/actions';
+import { getNavigationSettings } from '@eeacms/volto-eea-website-theme/actions';
 import { Header, Logo } from '@eeacms/volto-eea-design-system/ui';
 import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
 import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
@@ -58,6 +59,58 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
   const width = useSelector((state) => state.screen?.width);
   const dispatch = useDispatch();
   const previousToken = usePrevious(token);
+  const navigationSettings = useSelector(
+    (state) => state.navigationSettings?.settings || {},
+  );
+  const navigationLoaded = useSelector(
+    (state) => state.navigationSettings?.loaded,
+  );
+
+  // Combine navigation settings from backend with config fallback
+  const configLayouts = config.settings?.menuItemsLayouts || {};
+  const enhancedLayouts = { ...configLayouts };
+
+  // Map navigation settings to menu item URLs
+  if (items) {
+    items.forEach((menuItem) => {
+      // Check if we have navigation settings for any route that might match this menu item
+      Object.keys(navigationSettings).forEach((routeId) => {
+        const route = navigationSettings[routeId];
+        const backendSettings = {};
+
+        if (route.hideChildrenFromNavigation !== undefined) {
+          backendSettings.hideChildrenFromNavigation =
+            route.hideChildrenFromNavigation;
+        }
+
+        if (route.menuItemChildrenListColumns !== undefined) {
+          // Convert strings back to integers for header usage
+          backendSettings.menuItemChildrenListColumns = Array.isArray(
+            route.menuItemChildrenListColumns,
+          )
+            ? route.menuItemChildrenListColumns
+                .map((val) =>
+                  typeof val === 'string' ? parseInt(val, 10) : val,
+                )
+                .filter((val) => !isNaN(val))
+            : route.menuItemChildrenListColumns;
+        }
+
+        if (route.menuItemColumns !== undefined) {
+          // Use menuItemColumns directly as they're already in semantic UI format
+          backendSettings.menuItemColumns = route.menuItemColumns;
+        }
+
+        if (Object.keys(backendSettings).length > 0) {
+          // Override the config setting with backend data
+          enhancedLayouts[routeId] = {
+            ...enhancedLayouts[routeId],
+            ...backendSettings,
+          };
+        }
+      });
+    });
+  }
 
   React.useEffect(() => {
     const base_url = getBaseUrl(pathname);
@@ -72,7 +125,12 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
     if (token !== previousToken) {
       dispatch(getNavigation(base_url, settings.navDepth));
     }
-  }, [pathname, token, dispatch, previousToken]);
+
+    // Fetch navigation settings
+    if (!navigationLoaded) {
+      dispatch(getNavigationSettings(pathname));
+    }
+  }, [pathname, token, dispatch, previousToken, navigationLoaded]);
 
   return (
     <Header menuItems={items}>
@@ -174,6 +232,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
           </div>
         }
         menuItems={items}
+        menuItemsLayouts={enhancedLayouts}
         renderGlobalMenuItem={(item, { onClick }) => (
           <a
             href={item.url || '/'}