@eeacms/volto-eea-website-theme 3.2.0 → 3.4.0

package/.eslintrc.js

@@ -54,7 +54,7 @@ const defaultConfig = {
         allowReferrer: true,
       },
     ],
-  }
+  },
 };
 
 const config = addonExtenders.reduce(

package/CHANGELOG.md

@@ -4,7 +4,39 @@ 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).
 
-### [3.2.0](https://github.com/eea/volto-eea-website-theme/compare/3.1.0...3.2.0) - 11 November 2024
+### [3.4.0](https://github.com/eea/volto-eea-website-theme/compare/3.3.0...3.4.0) - 11 December 2024
+
+#### :bug: Bug Fixes
+
+- fix(UniversaLink): use download prop in calculating anchor for downloadable files refs#281622 [nileshgulia1 - [`239b492`](https://github.com/eea/volto-eea-website-theme/commit/239b4928d39a9584fdc9ce3ef3f012dee23f840e)]
+- fix(ContextNavigation): Add memoization for View that triggered fetch on Edit page modifications [David Ichim - [`48fdf60`](https://github.com/eea/volto-eea-website-theme/commit/48fdf6089e21aeefacf927310b9a41ea9cd0e2be)]
+- fix(context-navigation): contentTypes choice list when creating a new object [David Ichim - [`d1ccc75`](https://github.com/eea/volto-eea-website-theme/commit/d1ccc7523b681da6aef04f91447cc5190d1c8bbf)]
+- fix(number-widget): from Volto core to parse values to int avoiding passing wrong values to restapi code such as context navigation [David Ichim - [`0d67686`](https://github.com/eea/volto-eea-website-theme/commit/0d6768652201d2b1dbf8e478613049e654b7476e)]
+- fix(context-navigation): missing content types on layout or inside tabs [David Ichim - [`0ab2a04`](https://github.com/eea/volto-eea-website-theme/commit/0ab2a049f2c94aaf6256611309b1bd6b7ff8a610)]
+- fix(report-navigation): use report-navigation class instead of smart-toc [David Ichim - [`f4d7f56`](https://github.com/eea/volto-eea-website-theme/commit/f4d7f56ae4e0dbdc04425cc86cfbafb9d527dd85)]
+- fix(report-navigation): remove unnecessary context navigation header fallback [David Ichim - [`877e520`](https://github.com/eea/volto-eea-website-theme/commit/877e520f78b8624b5f887b421979ef753a4d3c9e)]
+
+#### :house: Internal changes
+
+- chore: fix eslint config lint warning and avoid warning for active property within report navigation block list items [David Ichim - [`9b3b03c`](https://github.com/eea/volto-eea-website-theme/commit/9b3b03c36626ee5d4bb7b64b6413217ee8903873)]
+
+#### :hammer_and_wrench: Others
+
+- Update package.json [Ichim David - [`b14f4c4`](https://github.com/eea/volto-eea-website-theme/commit/b14f4c46c6fc6c99ec70072f260616136c85f095)]
+### [3.3.0](https://github.com/eea/volto-eea-website-theme/compare/3.2.0...3.3.0) - 28 November 2024
+
+#### :bug: Bug Fixes
+
+- fix(tests): add unit tests for ReportNavigation [ana-oprea - [`55ac4c2`](https://github.com/eea/volto-eea-website-theme/commit/55ac4c2a1edf0c8abdb83a2c7e3c7d578464708a)]
+
+#### :house: Internal changes
+
+- chore: package.json [alin - [`4a8a4cb`](https://github.com/eea/volto-eea-website-theme/commit/4a8a4cb014db839b90eceed935c97b85785ddf71)]
+
+#### :hammer_and_wrench: Others
+
+- Update package.json [Ichim David - [`53be025`](https://github.com/eea/volto-eea-website-theme/commit/53be025c116dfc71a2de708075e4e77262eeecf8)]
+### [3.2.0](https://github.com/eea/volto-eea-website-theme/compare/3.1.0...3.2.0) - 14 November 2024
 
 #### :hammer_and_wrench: Others
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -24,8 +24,8 @@
     "url": "git@github.com:eea/volto-eea-website-theme.git"
   },
   "dependencies": {
-    "@eeacms/volto-block-toc": "*",
     "@eeacms/volto-block-style": "*",
+    "@eeacms/volto-block-toc": "*",
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-group-block": "*",
     "volto-subsites": "*"

package/src/components/manage/Blocks/ContextNavigation/ContextNavigationEdit.jsx

@@ -5,8 +5,21 @@ import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 
 import ContextNavigationView from './ContextNavigationView';
 
+import { useSelector, shallowEqual } from 'react-redux';
+
+function arePropsEqual(oldProps, newProps) {
+  return (
+    newProps.selected === oldProps.selected &&
+    newProps.data === oldProps.data &&
+    newProps.id === oldProps.id
+  );
+}
+
 const ContextNavigationFillEdit = (props) => {
-  const contentTypes = props.properties?.['@components']?.types;
+  const contentTypes = useSelector(
+    (state) => state.types?.types || [],
+    shallowEqual,
+  );
   const availableTypes = React.useMemo(
     () => contentTypes?.map((type) => [type.id, type.title || type.name]),
     [contentTypes],
@@ -42,4 +55,4 @@ const ContextNavigationFillEdit = (props) => {
   );
 };
 
-export default ContextNavigationFillEdit;
+export default React.memo(ContextNavigationFillEdit, arePropsEqual);

package/src/components/manage/Blocks/ContextNavigation/ContextNavigationView.jsx

@@ -2,13 +2,27 @@ import React from 'react';
 import { flattenToAppURL, withBlockExtensions } from '@plone/volto/helpers';
 import DefaultTemplate from './variations/Default';
 
-const ContextNavigationView = (props = {}) => {
+function arePropsEqual(prevProps, nextProps) {
+  // check if component should be re-rendered
+  return (
+    prevProps.mode === nextProps.mode &&
+    prevProps.id === nextProps.id &&
+    prevProps.path === nextProps.path &&
+    JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data)
+  );
+}
+
+const ContextNavigationView = React.memo((props = {}) => {
   const { variation, data = {} } = props;
-  const navProps = { ...data };
-  const root_path = data?.root_node?.[0]?.['@id'];
-  if (root_path) navProps['root_path'] = flattenToAppURL(root_path);
+  const navProps = React.useMemo(() => {
+    const props = { ...data };
+    const root_path = data?.root_node?.[0]?.['@id'];
+    if (root_path) props['root_path'] = flattenToAppURL(root_path);
+    return props;
+  }, [data]);
+
   const Renderer = variation?.view ?? DefaultTemplate;
   return <Renderer params={navProps} mode={props.mode} />;
-};
+}, arePropsEqual);
 
 export default withBlockExtensions(ContextNavigationView);

package/src/components/manage/Blocks/ContextNavigation/variations/ReportNavigation.jsx

@@ -0,0 +1,132 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import cx from 'classnames';
+import { compose } from 'redux';
+import { withRouter } from 'react-router';
+
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { UniversalLink, MaybeWrap } from '@plone/volto/components';
+import { withContentNavigation } from '@plone/volto/components/theme/Navigation/withContentNavigation';
+
+/**
+ * Handles click on summary links and closes parent details elements
+ * @param {Event} e - Click event
+ * @param {boolean} wrapWithDetails - Whether the element is wrapped in details
+ */
+function handleSummaryClick(e, wrapWithDetails) {
+  if (wrapWithDetails) {
+    e.preventDefault();
+
+    const currentDetails = e.target.closest('details');
+    // toggle the current details
+    if (currentDetails) {
+      currentDetails.open = !currentDetails.open;
+    }
+  }
+}
+
+/**
+ * Renders a navigation node as a list item with proper styling and links
+ * @param {Object} node - Navigation node object containing title, href, type etc
+ * @param {number} parentLevel - Parent level in navigation hierarchy
+ * @returns {React.Component} UL component with navigation node content
+ */
+function renderNode(node, parentLevel) {
+  const level = parentLevel + 1;
+  const hasChildItems = node.items?.length;
+  const nodeType = node.type;
+  const isDocument = nodeType === 'document';
+  let wrapWithDetails = isDocument && level > 2;
+  return (
+    <li
+      key={node['@id']}
+      className={`list-item level-${level} ${node.is_current ? 'active' : ''}`}
+    >
+      <MaybeWrap
+        condition={wrapWithDetails}
+        as="details"
+        className="context-navigation-detail"
+      >
+        {nodeType !== 'link' ? (
+          <MaybeWrap
+            condition={wrapWithDetails}
+            as="summary"
+            className="context-navigation-summary"
+          >
+            <RouterLink
+              to={flattenToAppURL(node.href)}
+              tabIndex={wrapWithDetails ? '-1' : 0}
+              title={node.description}
+              className={cx(`list-link contenttype-${nodeType}`, {
+                in_path: node.is_in_path,
+              })}
+              onClick={(e) =>
+                wrapWithDetails && handleSummaryClick(e, wrapWithDetails)
+              }
+            >
+              {node.title}
+              {nodeType === 'file' && node.getObjSize
+                ? ' [' + node.getObjSize + ']'
+                : ''}
+            </RouterLink>
+          </MaybeWrap>
+        ) : (
+          <UniversalLink href={flattenToAppURL(node.href)}>
+            {node.title}
+          </UniversalLink>
+        )}
+        {(hasChildItems && (
+          <ul className="list">
+            {node.items.map((node) => renderNode(node, level))}
+          </ul>
+        )) ||
+          ''}
+      </MaybeWrap>
+    </li>
+  );
+}
+/**
+ * A navigation slot implementation, similar to the classic Plone navigation
+ * portlet. It uses the same API, so the options are similar to
+ * INavigationPortlet
+ */
+export function ReportNavigation(props) {
+  const { navigation = {} } = props;
+  const { items = [] } = navigation;
+
+  return items.length ? (
+    <nav className="context-navigation report-navigation">
+      {navigation.title ? (
+        <div className="context-navigation-header">
+          <RouterLink to={flattenToAppURL(navigation.url || '')}>
+            {navigation.title}
+          </RouterLink>
+        </div>
+      ) : (
+        ''
+      )}
+      <ul className="list">{items.map((node) => renderNode(node, 0))}</ul>
+    </nav>
+  ) : (
+    ''
+  );
+}
+
+ReportNavigation.propTypes = {
+  /**
+   * Navigation tree returned from @contextnavigation restapi endpoint
+   */
+  navigation: PropTypes.shape({
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        url: PropTypes.string,
+      }),
+    ),
+    has_custom_name: PropTypes.bool,
+    title: PropTypes.string,
+  }),
+};
+
+export default compose(withRouter, withContentNavigation)(ReportNavigation);

package/src/components/manage/Blocks/ContextNavigation/variations/ReportNavigation.test.jsx

@@ -0,0 +1,131 @@
+import { render, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import ReportNavigation from './ReportNavigation';
+import configureStore from 'redux-mock-store';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockStore = configureStore();
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+jest.mock(
+  '@plone/volto/components/theme/Navigation/withContentNavigation',
+  () => ({
+    withContentNavigation: (Component) => (props) => (
+      <Component {...props} navigation={mockNavigation} />
+    ),
+  }),
+);
+
+// Mock navigation data
+const mockNavigation = {
+  items: [
+    {
+      '@id': '/item1',
+      title: 'Item 1',
+      href: '/item1',
+      type: 'document',
+      description: 'Item 1 description',
+      is_current: false,
+      is_in_path: false,
+      items: [
+        {
+          '@id': '/item1/subitem1',
+          title: 'Subitem 1',
+          href: '/item1/subitem1',
+          type: 'document',
+          is_current: false,
+          is_in_path: false,
+          items: [],
+        },
+      ],
+    },
+    {
+      '@id': '/item2',
+      title: 'Item 2',
+      href: '/item2',
+      type: 'document',
+      description: 'Item 2 description',
+      is_current: true,
+      is_in_path: true,
+      items: [],
+    },
+  ],
+  has_custom_name: true,
+  title: 'Custom Navigation',
+  url: '/custom-navigation',
+};
+
+describe('ReportNavigation', () => {
+  it('renders navigation items correctly', () => {
+    const history = createMemoryHistory();
+    const { getByText } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ReportNavigation />
+        </Router>
+      </Provider>,
+    );
+
+    // Check if the navigation header is rendered
+    expect(getByText('Custom Navigation')).toBeInTheDocument();
+
+    // Check if the navigation items are rendered
+    expect(getByText('Item 1')).toBeInTheDocument();
+    expect(getByText('Item 2')).toBeInTheDocument();
+    expect(getByText('Subitem 1')).toBeInTheDocument();
+  });
+
+  it('toggles details on summary click', () => {
+    const history = createMemoryHistory();
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ReportNavigation />
+        </Router>
+      </Provider>,
+    );
+
+    const detailsElement = container.querySelector('a[href="/item1"]');
+
+    // Simulate click on summary
+    fireEvent.click(detailsElement);
+  });
+
+  it('renders links with correct href attributes', () => {
+    const history = createMemoryHistory();
+    const { getByText } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ReportNavigation />
+        </Router>
+      </Provider>,
+    );
+
+    expect(getByText('Item 1').closest('a')).toHaveAttribute('href', '/item1');
+    expect(getByText('Subitem 1').closest('a')).toHaveAttribute(
+      'href',
+      '/item1/subitem1',
+    );
+  });
+
+  it('applies active class to the current navigation item', () => {
+    const history = createMemoryHistory();
+    const { getByText } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ReportNavigation />
+        </Router>
+      </Provider>,
+    );
+
+    const activeItem = getByText('Item 2');
+    expect(activeItem).toHaveClass('in_path');
+  });
+});

package/src/components/manage/Blocks/ContextNavigation/variations/index.js

@@ -1,5 +1,6 @@
 import Accordion from './Accordion';
 import Default from './Default';
+import ReportNavigation from './ReportNavigation';
 
 const contextBlockVariations = [
   {
@@ -13,6 +14,11 @@ const contextBlockVariations = [
     title: 'Accordion',
     view: Accordion,
   },
+  {
+    id: 'report_navigation',
+    title: 'Additional files',
+    view: ReportNavigation,
+  },
 ];
 
 export default contextBlockVariations;

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

@@ -68,7 +68,8 @@ const UniversalLink = ({
   }
 
   const isExternal = !isInternalURL(url);
-  const isDownload = !isExternal && url && url.includes('@@download');
+  const isDownload =
+    (!isExternal && url && url.includes('@@download')) || download;
 
   const isDisplayFile =
     (!isExternal && url.includes('@@display-file')) || false;

package/src/customizations/volto/components/manage/Widgets/NumberWidget.jsx

@@ -0,0 +1,102 @@
+/**
+ * NumberWidget component.
+ * @module components/manage/Widgets/PassswordWidget
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'semantic-ui-react';
+import { FormFieldWrapper } from '@plone/volto/components';
+import { injectIntl } from 'react-intl';
+
+/**
+ * NumberWidget component class.
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "Number",
+ *  type: 'number',
+ * }
+ * ```
+ */
+const NumberWidget = (props) => {
+  const {
+    id,
+    value,
+    onChange,
+    onBlur,
+    onClick,
+    isDisabled,
+    maximum,
+    minimum,
+    placeholder,
+    step,
+  } = props;
+  return (
+    <FormFieldWrapper {...props}>
+      <Input
+        id={`field-${id}`}
+        name={id}
+        type="number"
+        disabled={isDisabled}
+        min={minimum || null}
+        max={maximum || null}
+        step={step}
+        value={value ?? ''}
+        placeholder={placeholder}
+        onChange={({ target }) =>
+          onChange(
+            id,
+            target.value === '' ? undefined : window.parseInt(target.value),
+          )
+        }
+        onBlur={({ target }) =>
+          onBlur(
+            id,
+            target.value === '' ? undefined : window.parseInt(target.value),
+          )
+        }
+        onClick={() => onClick()}
+      />
+    </FormFieldWrapper>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+NumberWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func.isRequired,
+  wrapped: PropTypes.bool,
+  maximum: PropTypes.number,
+  minimum: PropTypes.number,
+  step: PropTypes.number,
+  placeholder: PropTypes.string,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+NumberWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+  onChange: () => {},
+  onBlur: () => {},
+  onClick: () => {},
+};
+
+export default injectIntl(NumberWidget);

package/src/customizations/volto/components/manage/Widgets/NumberWidget.test.jsx

@@ -0,0 +1,120 @@
+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 '@testing-library/jest-dom/extend-expect';
+
+import NumberWidget from './NumberWidget';
+
+const mockStore = configureStore();
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('NumberWidget', () => {
+  it('renders a number widget component', () => {
+    const onChange = jest.fn();
+    render(
+      <Provider store={store}>
+        <NumberWidget
+          id="my-field"
+          title="My field"
+          fieldSet="default"
+          onChange={onChange}
+        />
+      </Provider>,
+    );
+
+    expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+  });
+
+  describe('onChange behavior', () => {
+    it('converts string value to number on change', () => {
+      const onChange = jest.fn();
+      render(
+        <Provider store={store}>
+          <NumberWidget id="my-field" title="My field" onChange={onChange} />
+        </Provider>,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      fireEvent.change(input, { target: { value: '42' } });
+
+      expect(onChange).toHaveBeenCalledWith('my-field', 42);
+    });
+
+    it('handles empty value correctly', () => {
+      const onChange = jest.fn();
+      render(
+        <Provider store={store}>
+          <NumberWidget
+            id="my-field"
+            value="1"
+            title="My field"
+            onChange={onChange}
+          />
+        </Provider>,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      fireEvent.change(input, { target: { value: '' } });
+
+      expect(onChange).toHaveBeenCalledWith('my-field', undefined);
+    });
+  });
+
+  describe('onBlur behavior', () => {
+    it('calls onBlur with the current value', () => {
+      const onBlur = jest.fn();
+      render(
+        <Provider store={store}>
+          <NumberWidget
+            id="my-field"
+            title="My field"
+            onBlur={onBlur}
+            value="123"
+          />
+        </Provider>,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      fireEvent.blur(input);
+
+      expect(onBlur).toHaveBeenCalled();
+    });
+  });
+
+  describe('validation constraints', () => {
+    it('respects minimum and maximum values', () => {
+      render(
+        <Provider store={store}>
+          <NumberWidget
+            id="my-field"
+            title="My field"
+            minimum={1}
+            maximum={100}
+          />
+        </Provider>,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      expect(input).toHaveAttribute('min', '1');
+      expect(input).toHaveAttribute('max', '100');
+    });
+
+    it('handles step attribute', () => {
+      render(
+        <Provider store={store}>
+          <NumberWidget id="my-field" title="My field" step={0.5} />
+        </Provider>,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      expect(input).toHaveAttribute('step', '0.5');
+    });
+  });
+});

package/src/customizations/volto/components/manage/Widgets/README.md

@@ -1 +1,6 @@
-Customized ObjectBrowserWidget to preserve anchor links in the manually pasted internal URL.
+### Customizations
+
+- Customized ObjectBrowserWidget to preserve anchor links in the manually pasted internal URL.
+
+- Customized NumberWidget to parse the number input and convert it to a number.
+  [ichim-david refs #280463]

package/src/index.js

@@ -4,6 +4,8 @@ import { Icon } from '@plone/volto/components';
 import { default as TokenWidgetEdit } from '@plone/volto/components/manage/Widgets/TokenWidget';
 import SelectAutoCompleteWidget from '@plone/volto/components/manage/Widgets/SelectAutoComplete';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
+import TableBlockEdit from '@plone/volto-slate/blocks/Table/TableBlockEdit';
+import TableBlockView from '@plone/volto-slate/blocks/Table/TableBlockView';
 import { nanoid } from '@plone/volto-slate/utils';
 
 import InpageNavigation from '@eeacms/volto-eea-design-system/ui/InpageNavigation/InpageNavigation';
@@ -230,6 +232,15 @@ const applyConfig = (config) => {
   config.blocks.blocksConfig.description.restricted = false;
   config.blocks.requiredBlocks = [];
 
+  // 281166 fix paste of tables in edit mode where paste action deemed the type
+  // of slate type to be table which in Volto 17 is mapped to the Table block which is draftjs based
+  // with this fix we load the edit and view of the slateTable avoiding any draftjs loading and error
+  config.blocks.blocksConfig.table = {
+    ...config.blocks.blocksConfig.table,
+    view: TableBlockView,
+    edit: TableBlockEdit,
+  };
+
   // Date format for EU
   config.settings.dateLocale = 'en-gb';
 
@@ -566,7 +577,7 @@ const applyConfig = (config) => {
     GET_CONTENT: ['breadcrumbs'], // 'navigation', 'actions', 'types'],
   });
 
-  // Custom blocks: Title,Layout settings, Context navigation
+  // Custom blocks: Title, Layout settings, Context navigation
   return [
     installCustomTitle,
     installLayoutSettingsBlock,