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

package/src/components/theme/Widgets/SimpleArrayWidget.test.jsx

@@ -0,0 +1,283 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import SimpleArrayWidget from './SimpleArrayWidget';
+
+// Add jest-dom matchers
+import '@testing-library/jest-dom';
+
+const mockStore = configureStore();
+
+describe('SimpleArrayWidget', () => {
+  let store;
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {
+          Add: 'Add',
+          Remove: 'Remove',
+        },
+      },
+    });
+    mockOnChange.mockClear();
+  });
+
+  const defaultProps = {
+    id: 'test-field',
+    title: 'Test Field',
+    description: 'Test description',
+    value: [],
+    onChange: mockOnChange,
+    items: {
+      minimum: 1,
+      maximum: 5,
+    },
+  };
+
+  it('renders without crashing', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...defaultProps} />
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+
+  it('displays the title', () => {
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...defaultProps} />
+      </Provider>,
+    );
+
+    expect(screen.getByText('Test Field')).toBeInTheDocument();
+  });
+
+  it('shows Add button when no input is shown', () => {
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...defaultProps} />
+      </Provider>,
+    );
+
+    expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument();
+  });
+
+  it('shows input field when Add button is clicked', () => {
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...defaultProps} />
+      </Provider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /add/i }));
+
+    expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+    expect(screen.getByTitle('Add')).toBeInTheDocument();
+    expect(screen.getByTitle('Cancel')).toBeInTheDocument();
+  });
+
+  it('adds a valid number to the array', () => {
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...defaultProps} />
+      </Provider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /add/i }));
+
+    const input = screen.getByRole('spinbutton');
+    fireEvent.change(input, { target: { value: '3' } });
+    fireEvent.click(screen.getByTitle('Add'));
+
+    expect(mockOnChange).toHaveBeenCalledWith('test-field', [3]);
+  });
+
+  it('does not add invalid numbers', () => {
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...defaultProps} />
+      </Provider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /add/i }));
+
+    const input = screen.getByRole('spinbutton');
+    fireEvent.change(input, { target: { value: '10' } }); // Above maximum
+    fireEvent.click(screen.getByTitle('Add'));
+
+    expect(mockOnChange).not.toHaveBeenCalled();
+  });
+
+  it('cancels input when cancel button is clicked', () => {
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...defaultProps} />
+      </Provider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /add/i }));
+
+    const input = screen.getByRole('spinbutton');
+    fireEvent.change(input, { target: { value: '2' } });
+    fireEvent.click(screen.getByTitle('Cancel'));
+
+    // Input should be hidden after cancel
+    expect(screen.queryByRole('spinbutton')).not.toBeInTheDocument();
+    expect(mockOnChange).not.toHaveBeenCalled();
+  });
+
+  it('displays existing values as labels', () => {
+    const props = {
+      ...defaultProps,
+      value: [1, 3, 5],
+    };
+
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...props} />
+      </Provider>,
+    );
+
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('removes value when × is clicked', () => {
+    const props = {
+      ...defaultProps,
+      value: [1, 3, 5],
+    };
+
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...props} />
+      </Provider>,
+    );
+
+    const removeButtons = screen.getAllByText('×');
+    fireEvent.click(removeButtons[1]); // Remove second item (value 3)
+
+    expect(mockOnChange).toHaveBeenCalledWith('test-field', [1, 5]);
+  });
+
+  it('passes null when removing last item', () => {
+    const props = {
+      ...defaultProps,
+      value: [1],
+    };
+
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...props} />
+      </Provider>,
+    );
+
+    const removeButton = screen.getByText('×');
+    fireEvent.click(removeButton);
+
+    expect(mockOnChange).toHaveBeenCalledWith('test-field', null);
+  });
+
+  it('handles non-array value gracefully', () => {
+    const props = {
+      ...defaultProps,
+      value: null,
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...props} />
+      </Provider>,
+    );
+
+    expect(container).toBeTruthy();
+    expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument();
+  });
+
+  it('displays numbers correctly', () => {
+    const props = {
+      ...defaultProps,
+      value: [1, 2, 3],
+    };
+
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...props} />
+      </Provider>,
+    );
+
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+  });
+
+  it('uses default min/max values when not provided', () => {
+    const props = {
+      ...defaultProps,
+      items: undefined,
+    };
+
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...props} />
+      </Provider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /add/i }));
+
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveAttribute('min', '1');
+    expect(input).toHaveAttribute('max', '10');
+    expect(input).toHaveAttribute('placeholder', '1-10');
+  });
+
+  it('uses custom min/max values when provided', () => {
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...defaultProps} />
+      </Provider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /add/i }));
+
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveAttribute('min', '1');
+    expect(input).toHaveAttribute('max', '5');
+    expect(input).toHaveAttribute('placeholder', '1-5');
+  });
+
+  it('disables add button when input is empty', () => {
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...defaultProps} />
+      </Provider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /add/i }));
+
+    const addButton = screen.getByTitle('Add');
+    expect(addButton).toBeDisabled();
+  });
+
+  it('does not add empty or whitespace-only values', () => {
+    render(
+      <Provider store={store}>
+        <SimpleArrayWidget {...defaultProps} />
+      </Provider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /add/i }));
+
+    const input = screen.getByRole('spinbutton');
+    fireEvent.change(input, { target: { value: '   ' } });
+    fireEvent.click(screen.getByTitle('Add'));
+
+    expect(mockOnChange).not.toHaveBeenCalled();
+  });
+});

package/src/constants/ActionTypes.js

@@ -4,3 +4,5 @@
  */
 
 export const SET_ISPRINT = 'SET_ISPRINT';
+export const SET_PRINT_LOADING = 'SET_PRINT_LOADING';
+export const GET_NAVIGATION_SETTINGS = 'GET_NAVIGATION_SETTINGS';

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

@@ -0,0 +1,207 @@
+--- History.jsx.original	2025-08-11 09:00:00.000000000 +0000
++++ History.jsx.modified	2025-08-11 09:30:00.000000000 +0000
+@@ -1,6 +1,8 @@
+ /**
+  * 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';
+@@ -13,9 +15,11 @@
+   Container as SemanticContainer,
+   Dropdown,
+   Icon,
++  Message,
+   Segment,
+   Table,
+ } from 'semantic-ui-react';
+-import { concat, map, reverse, find } from 'lodash';
++import concat from 'lodash/concat';
++import map from 'lodash/map';
++import reverse from 'lodash/reverse';
++import find from 'lodash/find';
+-import { Portal } from 'react-portal';
++import { createPortal } from 'react-dom';
+ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+-import { asyncConnect } from '@plone/volto/helpers';
++import { asyncConnect } from '@plone/volto/helpers/AsyncConnect';
+ 
+-import {
+-  FormattedDate,
+-  Icon as IconNext,
+-  Toolbar,
+-  Forbidden,
+-  Unauthorized,
+-} from '@plone/volto/components';
+-import { getHistory, revertHistory, listActions } from '@plone/volto/actions';
++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';
+ import config from '@plone/volto/registry';
+ 
+@@ -34,6 +38,22 @@
+   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}',
++  },
+ });
+ 
+ /**
+@@ -138,6 +158,25 @@
+             />
+           </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 singleLine attached>
++          <Table
++            selectable
++            compact
++            attached
++            style={{
++              tableLayout: 'fixed',
++              width: '100%',
++              wordWrap: 'break-word',
++            }}
++          >
+             <Table.Header>
+               <Table.Row>
+-                <Table.HeaderCell width={1}>
++                <Table.HeaderCell style={{ width: '5%' }}>
+                   <FormattedMessage
+                     id="History Version Number"
+                     defaultMessage="#"
+                   />
+                 </Table.HeaderCell>
+-                <Table.HeaderCell width={4}>
++                <Table.HeaderCell style={{ width: '25%' }}>
+                   <FormattedMessage id="What" defaultMessage="What" />
+                 </Table.HeaderCell>
+-                <Table.HeaderCell width={4}>
++                <Table.HeaderCell style={{ width: '15%' }}>
+                   <FormattedMessage id="Who" defaultMessage="Who" />
+                 </Table.HeaderCell>
+-                <Table.HeaderCell width={4}>
++                <Table.HeaderCell style={{ width: '15%' }}>
+                   <FormattedMessage id="When" defaultMessage="When" />
+                 </Table.HeaderCell>
+-                <Table.HeaderCell width={4}>
++                <Table.HeaderCell style={{ width: '25%' }}>
+                   <FormattedMessage
+                     id="Change Note"
+                     defaultMessage="Change Note"
+                   />
+                 </Table.HeaderCell>
+-                <Table.HeaderCell />
++                <Table.HeaderCell style={{ width: '15%' }} />
+               </Table.Row>
+             </Table.Header>
+@@ -280,14 +319,33 @@
+             </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 && (
+-          <Portal node={document.getElementById('toolbar')}>
++        {this.state.isClient &&
++          createPortal(
+             <Toolbar
+               pathname={this.props.pathname}
+               hideDefaultViewButtons
+@@ -302,8 +360,9 @@
+                 </Link>
+               }
+-            />
+-          </Portal>
+-        )}
++            />,
++            document.getElementById('toolbar'),
++          )}
+       </Container>
+     );
+   }
+@@ -314,7 +373,7 @@
+   asyncConnect([
+     {
+       key: 'actions',
+-      // Dispatch async/await to make the operation syncronous, otherwise it returns
++      // 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))),
+@@ -327,6 +386,7 @@
+       entries: state.history.entries,
+       pathname: props.location.pathname,
+       title: state.content.data?.title,
++      content: state.content.data,
+       revertRequest: state.history.revert,
+     }),
+     { getHistory, revertHistory },