@eeacms/volto-eea-website-theme 4.3.4 → 4.3.5

package/CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [4.3.5](https://github.com/eea/volto-eea-website-theme/compare/4.3.4...4.3.5) - 28 May 2026
+
+#### :bug: Bug Fixes
+
+- fix: Cannot read properties of null title - refs #304017 [Alin Voinea - [`7bb0a9f`](https://github.com/eea/volto-eea-website-theme/commit/7bb0a9fa97bfb993f8a35514175d372860206900)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`dc7ea42`](https://github.com/eea/volto-eea-website-theme/commit/dc7ea426f540957ffa08bd45ddac3a78b31f278c)]
+
 ### [4.3.4](https://github.com/eea/volto-eea-website-theme/compare/4.3.3...4.3.4) - 28 May 2026
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "4.3.4",
+  "version": "4.3.5",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -0,0 +1,564 @@
+/**
+ * Sharing container.
+ * @module components/manage/Sharing/Sharing
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Plug, Pluggable } from '@plone/volto/components/manage/Pluggable';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { Link, withRouter } from 'react-router-dom';
+import find from 'lodash/find';
+import isEqual from 'lodash/isEqual';
+import map from 'lodash/map';
+import { createPortal } from 'react-dom';
+import {
+  Button,
+  Checkbox,
+  Container as SemanticContainer,
+  Form,
+  Icon as IconOld,
+  Input,
+  Segment,
+  Table,
+} from 'semantic-ui-react';
+import jwtDecode from 'jwt-decode';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+import {
+  updateSharing,
+  getSharing,
+} from '@plone/volto/actions/sharing/sharing';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
+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';
+import backSVG from '@plone/volto/icons/back.svg';
+
+const messages = defineMessages({
+  searchForUserOrGroup: {
+    id: 'Search for user or group',
+    defaultMessage: 'Search for user or group',
+  },
+  search: {
+    id: 'Search',
+    defaultMessage: 'Search',
+  },
+  inherit: {
+    id: 'Inherit permissions from higher levels',
+    defaultMessage: 'Inherit permissions from higher levels',
+  },
+  save: {
+    id: 'Save',
+    defaultMessage: 'Save',
+  },
+  cancel: {
+    id: 'Cancel',
+    defaultMessage: 'Cancel',
+  },
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  sharing: {
+    id: 'Sharing',
+    defaultMessage: 'Sharing',
+  },
+  user: {
+    id: 'User',
+    defaultMessage: 'User',
+  },
+  group: {
+    id: 'Group',
+    defaultMessage: 'Group',
+  },
+  globalRole: {
+    id: 'Global role',
+    defaultMessage: 'Global role',
+  },
+  inheritedValue: {
+    id: 'Inherited value',
+    defaultMessage: 'Inherited value',
+  },
+  permissionsUpdated: {
+    id: 'Permissions updated',
+    defaultMessage: 'Permissions updated',
+  },
+  permissionsUpdatedSuccessfully: {
+    id: 'Permissions have been updated successfully',
+    defaultMessage: 'Permissions have been updated successfully',
+  },
+  assignNewRoles: {
+    id: 'Assign the {role} role to {entry}',
+    defaultMessage: 'Assign the {role} role to {entry}',
+  },
+});
+
+/**
+ * SharingComponent class.
+ * @class SharingComponent
+ * @extends Component
+ */
+class SharingComponent extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    updateSharing: PropTypes.func.isRequired,
+    getSharing: PropTypes.func.isRequired,
+    updateRequest: PropTypes.shape({
+      loading: PropTypes.bool,
+      loaded: PropTypes.bool,
+    }).isRequired,
+    pathname: PropTypes.string.isRequired,
+    entries: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string,
+        login: PropTypes.string,
+        roles: PropTypes.object,
+        title: PropTypes.string,
+        type: PropTypes.string,
+      }),
+    ).isRequired,
+    available_roles: PropTypes.arrayOf(PropTypes.object).isRequired,
+    inherit: PropTypes.bool,
+    title: PropTypes.string.isRequired,
+    login: PropTypes.string,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    inherit: null,
+    login: '',
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs Sharing
+   */
+  constructor(props) {
+    super(props);
+    this.onCancel = this.onCancel.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onChangeSearch = this.onChangeSearch.bind(this);
+    this.onSearch = this.onSearch.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.onToggleInherit = this.onToggleInherit.bind(this);
+    this.state = {
+      search: '',
+      isLoading: false,
+      inherit: props.inherit,
+      entries: props.entries,
+      isClient: false,
+    };
+  }
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.props.getSharing(getBaseUrl(this.props.pathname), this.state.search);
+    this.setState({ isClient: true });
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.updateRequest.loading && nextProps.updateRequest.loaded) {
+      this.props.getSharing(getBaseUrl(this.props.pathname), this.state.search);
+      toast.success(
+        <Toast
+          success
+          title={this.props.intl.formatMessage(messages.permissionsUpdated)}
+          content={this.props.intl.formatMessage(
+            messages.permissionsUpdatedSuccessfully,
+          )}
+        />,
+      );
+    }
+    this.setState({
+      inherit:
+        this.props.inherit === null ? nextProps.inherit : this.state.inherit,
+      entries: map(nextProps.entries, (entry) => {
+        const values = find(this.state.entries, { id: entry.id });
+        return {
+          ...entry,
+          roles: values ? values.roles : entry.roles,
+        };
+      }),
+    });
+  }
+
+  /**
+   * Submit handler
+   * @method onSubmit
+   * @param {object} event Event object.
+   * @returns {undefined}
+   */
+  onSubmit(event) {
+    const data = { entries: [] };
+    event.preventDefault();
+    if (this.props.inherit !== this.state.inherit) {
+      data.inherit = this.state.inherit;
+    }
+    for (let i = 0; i < this.props.entries.length; i += 1) {
+      if (!isEqual(this.props.entries[i].roles, this.state.entries[i].roles)) {
+        data.entries.push({
+          id: this.state.entries[i].id,
+          type: this.state.entries[i].type,
+          roles: this.state.entries[i].roles,
+        });
+      }
+    }
+    this.props.updateSharing(getBaseUrl(this.props.pathname), data);
+  }
+
+  /**
+   * Search handler
+   * @method onSearch
+   * @param {object} event Event object.
+   * @returns {undefined}
+   */
+  onSearch(event) {
+    event.preventDefault();
+    this.setState({ isLoading: true });
+    this.props
+      .getSharing(getBaseUrl(this.props.pathname), this.state.search)
+      .then(() => {
+        this.setState({ isLoading: false });
+      })
+      .catch((error) => {
+        this.setState({ isLoading: false });
+        // eslint-disable-next-line no-console
+        console.error('Error searching users or groups', error);
+      });
+  }
+
+  /**
+   * On change search handler
+   * @method onChangeSearch
+   * @param {object} event Event object.
+   * @returns {undefined}
+   */
+  onChangeSearch(event) {
+    this.setState({
+      search: event.target.value,
+    });
+  }
+
+  /**
+   * On toggle inherit handler
+   * @method onToggleInherit
+   * @returns {undefined}
+   */
+  onToggleInherit() {
+    this.setState((state) => ({
+      inherit: !state.inherit,
+    }));
+  }
+
+  /**
+   * On change handler
+   * @method onChange
+   * @param {object} event Event object
+   * @param {string} value Entry value
+   * @returns {undefined}
+   */
+  onChange(event, { value }) {
+    const [principal, role] = value.split(':');
+    this.setState({
+      entries: map(this.state.entries, (entry) => ({
+        ...entry,
+        roles:
+          entry.id === principal
+            ? {
+                ...entry.roles,
+                [role]: !entry.roles[role],
+              }
+            : entry.roles,
+      })),
+    });
+  }
+
+  /**
+   * Cancel handler
+   * @method onCancel
+   * @returns {undefined}
+   */
+  onCancel() {
+    this.props.history.push(getBaseUrl(this.props.pathname));
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @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)} />
+        <Segment.Group raised>
+          <Pluggable
+            name="sharing-component"
+            params={{ isLoading: this.state.isLoading }}
+          />
+          <Plug pluggable="sharing-component" id="sharing-component-title">
+            <Segment className="primary">
+              <FormattedMessage
+                id="Sharing for {title}"
+                defaultMessage="Sharing for {title}"
+                values={{ title: <q>{this.props.title}</q> }}
+              />
+            </Segment>
+          </Plug>
+          <Plug
+            pluggable="sharing-component"
+            id="sharing-component-description"
+          >
+            <Segment secondary>
+              <FormattedMessage
+                id="You can control who can view and edit your item using the list below."
+                defaultMessage="You can control who can view and edit your item using the list below."
+              />
+            </Segment>
+          </Plug>
+          <Plug pluggable="sharing-component" id="sharing-component-search">
+            {({ isLoading }) => {
+              return (
+                <Segment>
+                  <Form onSubmit={this.onSearch}>
+                    <Form.Field>
+                      <Input
+                        name="SearchableText"
+                        action={{
+                          icon: 'search',
+                          loading: isLoading,
+                          disabled: isLoading,
+                          'aria-label': this.props.intl.formatMessage(
+                            messages.search,
+                          ),
+                        }}
+                        placeholder={this.props.intl.formatMessage(
+                          messages.searchForUserOrGroup,
+                        )}
+                        onChange={this.onChangeSearch}
+                        id="sharing-component-search"
+                      />
+                    </Form.Field>
+                  </Form>
+                </Segment>
+              );
+            }}
+          </Plug>
+          <Plug
+            pluggable="sharing-component"
+            id="sharing-component-form"
+            dependencies={[this.state.entries, this.props.available_roles]}
+          >
+            <Form onSubmit={this.onSubmit}>
+              <Table celled padded striped attached>
+                <Table.Header>
+                  <Table.Row>
+                    <Table.HeaderCell>
+                      <FormattedMessage id="Name" defaultMessage="Name" />
+                    </Table.HeaderCell>
+                    {this.props.available_roles?.map((role) => (
+                      <Table.HeaderCell key={role.id}>
+                        {role.title}
+                      </Table.HeaderCell>
+                    ))}
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  {this.state.entries?.map((entry) => (
+                    <Table.Row key={entry.id}>
+                      <Table.Cell>
+                        <IconOld
+                          name={entry.type === 'user' ? 'user' : 'users'}
+                          title={
+                            entry.type === 'user'
+                              ? this.props.intl.formatMessage(messages.user)
+                              : this.props.intl.formatMessage(messages.group)
+                          }
+                        />{' '}
+                        {entry.title}
+                        {entry.login && ` (${entry.login})`}
+                      </Table.Cell>
+                      {this.props.available_roles?.map((role) => (
+                        <Table.Cell key={role.id}>
+                          {entry.roles[role.id] === 'global' && (
+                            <IconOld
+                              name="check circle outline"
+                              title={this.props.intl.formatMessage(
+                                messages.globalRole,
+                              )}
+                              color="blue"
+                            />
+                          )}
+                          {entry.roles[role.id] === 'acquired' && (
+                            <IconOld
+                              name="check circle outline"
+                              color="green"
+                              title={this.props.intl.formatMessage(
+                                messages.inheritedValue,
+                              )}
+                            />
+                          )}
+                          {typeof entry.roles[role.id] === 'boolean' && (
+                            <Checkbox
+                              name={this.props.intl.formatMessage(
+                                messages.assignNewRoles,
+                                {
+                                  entry: entry.title,
+                                  role: role.id,
+                                },
+                              )}
+                              aria-label={this.props.intl.formatMessage(
+                                messages.assignNewRoles,
+                                {
+                                  entry: entry.title,
+                                  role: role.id,
+                                },
+                              )}
+                              onChange={this.onChange}
+                              value={`${entry.id}:${role.id}`}
+                              checked={entry.roles[role.id]}
+                              disabled={entry.login === this.props.login}
+                            />
+                          )}
+                        </Table.Cell>
+                      ))}
+                    </Table.Row>
+                  ))}
+                </Table.Body>
+              </Table>
+              <Segment attached>
+                <Form.Field>
+                  <Checkbox
+                    id="inherit-permissions-checkbox"
+                    name="inherit-permissions-checkbox"
+                    defaultChecked={this.state.inherit}
+                    onChange={this.onToggleInherit}
+                    label={
+                      <label htmlFor="inherit-permissions-checkbox">
+                        {this.props.intl.formatMessage(messages.inherit)}
+                      </label>
+                    }
+                  />
+                </Form.Field>
+                <p className="help">
+                  <FormattedMessage
+                    id="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
+                    defaultMessage="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, inherited values are explicitly labeled as 'Inherited value' and receive a green check mark {inherited}. Similarly, roles managed by the site administrator are labeled as 'Global role' and receive a blue check mark {global}."
+                    values={{
+                      inherited: (
+                        <IconOld
+                          aria-hidden="true"
+                          name="check circle outline"
+                          color="green"
+                        />
+                      ),
+                      global: (
+                        <IconOld
+                          aria-hidden="true"
+                          name="check circle outline"
+                          color="blue"
+                        />
+                      ),
+                    }}
+                  />
+                </p>
+              </Segment>
+              <Segment className="right aligned actions" attached clearing>
+                <Button
+                  basic
+                  secondary
+                  aria-label={this.props.intl.formatMessage(messages.cancel)}
+                  title={this.props.intl.formatMessage(messages.cancel)}
+                  onClick={this.onCancel}
+                >
+                  <Icon className="circled" name={clearSVG} size="30px" />
+                </Button>
+                <Button
+                  basic
+                  primary
+                  type="submit"
+                  aria-label={this.props.intl.formatMessage(messages.save)}
+                  title={this.props.intl.formatMessage(messages.save)}
+                  loading={this.props.updateRequest.loading}
+                  onClick={this.onSubmit}
+                >
+                  <Icon className="circled" name={aheadSVG} size="30px" />
+                </Button>
+              </Segment>
+            </Form>
+          </Plug>
+        </Segment.Group>
+        {this.state.isClient &&
+          createPortal(
+            <Toolbar
+              pathname={this.props.pathname}
+              hideDefaultViewButtons
+              inner={
+                <Link
+                  to={`${getBaseUrl(this.props.pathname)}`}
+                  className="item"
+                >
+                  <Icon
+                    name={backSVG}
+                    className="contents circled"
+                    size="30px"
+                    title={this.props.intl.formatMessage(messages.back)}
+                  />
+                </Link>
+              }
+            />,
+            document.getElementById('toolbar'),
+          )}
+      </Container>
+    );
+  }
+}
+
+export default compose(
+  withRouter,
+  injectIntl,
+  connect(
+    (state, props) => ({
+      entries: state.sharing.data.entries,
+      inherit: state.sharing.data.inherit,
+      available_roles: state.sharing.data.available_roles,
+      updateRequest: state.sharing.update,
+      pathname: props.location.pathname,
+      title: state.content.data?.title || '',
+      login: state.userSession.token
+        ? jwtDecode(state.userSession.token).sub
+        : '',
+    }),
+    { updateSharing, getSharing },
+  ),
+)(SharingComponent);

package/src/customizations/volto/components/manage/Sharing/Sharing.jsx.diff

@@ -0,0 +1,11 @@
+--- node_modules/@plone/volto/src/components/manage/Sharing/Sharing.jsx	2026-05-27 09:41:17
++++ src/addons/volto-eea-website-theme/src/customizations/volto/components/manage/Sharing/Sharing.jsx	2026-05-28 15:16:25
+@@ -554,7 +554,7 @@
+       available_roles: state.sharing.data.available_roles,
+       updateRequest: state.sharing.update,
+       pathname: props.location.pathname,
+-      title: state.content.data.title,
++      title: state.content.data?.title || "",
+       login: state.userSession.token
+         ? jwtDecode(state.userSession.token).sub
+         : '',

package/src/customizations/volto/components/manage/Sharing/Sharing.jsx.md

@@ -0,0 +1,25 @@
+# Sharing.jsx customization
+
+This customization shadows Volto core's
+`src/components/manage/Sharing/Sharing.jsx` from `@plone/volto`.
+
+## Changes
+
+- **Null-safe access to `state.content.data.title`**: The original code
+  accesses `state.content.data.title` directly, which throws a `TypeError:
+Cannot read properties of null (reading 'title')` when `state.content.data`
+  is `null` (e.g., when the content hasn't loaded yet, or when SSR renders a
+  page where the content API returned an error/null).
+
+  Fix: `state.content.data.title` → `state.content.data?.title || ""`
+
+## Sentry issue
+
+- [440198](https://sentry.eea.europa.eu/organizations/eea/issues/440198/) —
+  `TypeError: Cannot read properties of null (reading 'title')` — 1,253 events
+
+## When upgrading Volto
+
+Compare the new core `Sharing.jsx` `mapStateToProps` with this override.
+If upstream adds more `state.content.data.*` references, apply optional
+chaining to those as well.