@eeacms/volto-bise-policy 1.3.6 → 1.3.8

package/CHANGELOG.md

@@ -4,6 +4,40 @@ 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).
 
+### [1.3.8](https://github.com/eea/volto-bise-policy/compare/1.3.7...1.3.8) - 26 August 2026
+
+#### :rocket: New Features
+
+- feat: add NRR widget views and update HTML structure [laszlocseh - [`3ba2075`](https://github.com/eea/volto-bise-policy/commit/3ba207547d4f56790b5a10a23b6aefabb9bb3b70)]
+
+#### :nail_care: Enhancements
+
+- refactor(NRRWidgets): refactor shared components and parse helper [laszlocseh - [`8a0bbfa`](https://github.com/eea/volto-bise-policy/commit/8a0bbfaac42647a244b180b393ff3dea61a8a5c5)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`0d9e222`](https://github.com/eea/volto-bise-policy/commit/0d9e222a45bad204e1d22ca7f1939ab6c1166549)]
+
+#### :hammer_and_wrench: Others
+
+- test(EUNISObjectListWidget): mock uuid module [laszlocseh - [`4053526`](https://github.com/eea/volto-bise-policy/commit/405352685a516f18e1c4f04d36f069dfcc584f36)]
+- test(EUNISObjectListWidget): mock volto helpers to fix jest resolution [laszlocseh - [`92910f0`](https://github.com/eea/volto-bise-policy/commit/92910f09ebb1fa7ebed4caf1442db7935cb58684)]
+- test: add unit tests for EUNIS and NRR widgets [laszlocseh - [`862db64`](https://github.com/eea/volto-bise-policy/commit/862db648d7a3546e3f7c7c5d812d35497116adb4)]
+### [1.3.7](https://github.com/eea/volto-bise-policy/compare/1.3.6...1.3.7) - 20 August 2026
+
+#### :rocket: New Features
+
+- feat: add Country Profile variation with CountryFlag banner [Claudia Ifrim - [`baff0b6`](https://github.com/eea/volto-bise-policy/commit/baff0b6d00b7c159b3520b89bcaaa3ba400d8d5b)]
+
+#### :bug: Bug Fixes
+
+- fix: expand siblings on GET_CONTENT [Claudia Ifrim - [`5e10b2d`](https://github.com/eea/volto-bise-policy/commit/5e10b2d05293f39e9f49673377fd72bb19791435)]
+- fix: preserve extra item fields and store data on direct GET_NAVIGATION calls [Claudia Ifrim - [`d3352d8`](https://github.com/eea/volto-bise-policy/commit/d3352d897102c69155b0740c8f44096b89011630)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`8a103af`](https://github.com/eea/volto-bise-policy/commit/8a103af9cf9905de5eeb3ea660a2b076cfa14002)]
+
 ### [1.3.6](https://github.com/eea/volto-bise-policy/compare/1.3.5...1.3.6) - 19 August 2026
 
 #### :rocket: New Features
@@ -51,6 +85,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
+- chore: [JENKINSFILE] sanitize sonarqube command [valentinab25 - [`8e2dc1a`](https://github.com/eea/volto-bise-policy/commit/8e2dc1a14f3230f197f009a76bf87587724b6e3a)]
 
 #### :hammer_and_wrench: Others
 
@@ -154,6 +189,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
+- chore: [JENKINSFILE] add package version in sonarqube [valentinab25 - [`4c2d75b`](https://github.com/eea/volto-bise-policy/commit/4c2d75bbf6dca47929c6613749169b40ed483985)]
+- chore: [JENKINSFILE] use sonarqube branches [EEA Jenkins - [`f99c622`](https://github.com/eea/volto-bise-policy/commit/f99c622726cfd711704f50218a2f1fe833974ec3)]
 
 #### :hammer_and_wrench: Others
 
@@ -416,6 +453,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore: customize root theme to use volto-spotlight - refs #259794 [ana-oprea - [`347f96e`](https://github.com/eea/volto-bise-policy/commit/347f96e335139f9656abd34c308c531b05de85e7)]
 - chore: change the theme and alias to volto-spotlight and add volto-spotlight to package.json - refs #259794 [ana-oprea - [`52732a1`](https://github.com/eea/volto-bise-policy/commit/52732a17b3247a04ffae0a3f5118e173afa98157)]
 - chore: change theme to eea-volto-theme, change config.alias - refs #259794 [ana-oprea - [`c2d08ea`](https://github.com/eea/volto-bise-policy/commit/c2d08ea08a7f0e5f6f7d32149e60ea3f3e901923)]
+- chore: [JENKINS] Refactor automated testing [valentinab25 - [`a3c9488`](https://github.com/eea/volto-bise-policy/commit/a3c9488c5d09ba97fe5976675524d436080a2460)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`fddc30f`](https://github.com/eea/volto-bise-policy/commit/fddc30f11a1d8ec290edaca2d924282f5e113bc6)]
 - chore:volto 16 in tests, update docs, fix stylelint overrides [valentinab25 - [`005ce74`](https://github.com/eea/volto-bise-policy/commit/005ce742dbd014fde27e417059251233365766dd)]
 
@@ -428,9 +466,17 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`c1277ba`](https://github.com/eea/volto-bise-policy/commit/c1277bacf840ee9feccbfd6a2c85f0b25a9a9125)]
 - test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`c944153`](https://github.com/eea/volto-bise-policy/commit/c944153710fd53c5d48863cf363464273e25f52e)]
 - test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`d648d52`](https://github.com/eea/volto-bise-policy/commit/d648d525a2fc5076577fe0f75ff9782bf0d1d4e9)]
+- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`2a7affe`](https://github.com/eea/volto-bise-policy/commit/2a7affe33d737704bdba117c4a5c8c6748ef7a47)]
+- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`5929642`](https://github.com/eea/volto-bise-policy/commit/59296420105d0e8c1f1547aa0cd17a019e478c2b)]
+- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`b1142f1`](https://github.com/eea/volto-bise-policy/commit/b1142f1da3667a9f56720f65bebce897a5dd8005)]
 - test: cypress should not wait for navigation, actions, types - refs #259794 [ana-oprea - [`188637c`](https://github.com/eea/volto-bise-policy/commit/188637c78a0cae71b5ee48022507d559dfaceb3e)]
+- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`fa4e473`](https://github.com/eea/volto-bise-policy/commit/fa4e473018386ec3f09d7300d655c8cccdc19a0e)]
+- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`1d9135b`](https://github.com/eea/volto-bise-policy/commit/1d9135bb878b3c7a1b828085b99b9d27d78ce60e)]
 - remove cypress tests as it doesn t work on bise [Dobricean Ioan Dorian - [`ba7e2de`](https://github.com/eea/volto-bise-policy/commit/ba7e2defea2dcfd01537c3abb41fa9515ff0a3e3)]
 - add mega menu layout settings as #259794 said [dobri1408 - [`b9a3683`](https://github.com/eea/volto-bise-policy/commit/b9a3683e7d85f8c88ad8feac975c47c434f62c4a)]
+- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`9181908`](https://github.com/eea/volto-bise-policy/commit/9181908c7f4b51bdf83a34f8c7f25827de9b1cc6)]
+- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`099d796`](https://github.com/eea/volto-bise-policy/commit/099d79669471e6924bf1e0bc51a79d54379c3a1a)]
+- test: [JENKINS] Improve cypress time [valentinab25 - [`6d5d8e2`](https://github.com/eea/volto-bise-policy/commit/6d5d8e29b04ddb92628245570055067ca3dcbb6c)]
 - test: fix comment [valentinab25 - [`4f27d5a`](https://github.com/eea/volto-bise-policy/commit/4f27d5af2e8895c7af4f1157521ca42682b96e23)]
 - test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`4c2fcb0`](https://github.com/eea/volto-bise-policy/commit/4c2fcb01065e1ef962317ba7be788fd1df079618)]
 - test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`89afaa1`](https://github.com/eea/volto-bise-policy/commit/89afaa15892930452027ef8c8593fc6d193cda70)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-bise-policy",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "description": "@eeacms/volto-bise-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Widgets/EUNISObjectListWidget.test.jsx

@@ -0,0 +1,391 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+
+import {
+  EUNISMSFDView,
+  EUNISCodeView,
+  EUNISHDView,
+  EUNISEuropeanRedListView,
+  EUNISLinksToFinerEUNISHabitatsView,
+  EUNISCountryCodeView,
+  EUNISRegionalSeaConventionValueView,
+  EUNISEuropeanRedListWidget,
+  EUNISMSFDWidget,
+  EUNISHDWidget,
+  EUNISLinksToFinerEUNISHabitatsWidget,
+  EUNISRegionalSeaConventionValueWidget,
+  EUNISCountryCodeWidget,
+} from './EUNISObjectListWidget';
+
+// Mock the heavy @plone/volto building blocks used by BaseObjectListWidget so
+// that we can render the widget without mounting react-beautiful-dnd, the
+// ObjectWidget editor or the full FormFieldWrapper machinery.
+jest.mock('@plone/volto/components/manage/DragDropList/DragDropList', () => ({
+  __esModule: true,
+  default: ({ childList, onMoveItem, children }) => (
+    <div data-testid="dragdrop-list">
+      {childList.map((childEntry, index) =>
+        children({
+          child: childEntry[1],
+          childId: childEntry[0],
+          index,
+          draginfo: {
+            innerRef: jest.fn(),
+            draggableProps: {},
+            dragHandleProps: {},
+          },
+        }),
+      )}
+    </div>
+  ),
+}));
+
+jest.mock('@plone/volto/components/manage/Widgets/FormFieldWrapper', () => ({
+  __esModule: true,
+  default: ({ children }) => <div data-testid="form-wrapper">{children}</div>,
+}));
+
+jest.mock('@plone/volto/components/manage/Widgets/ObjectWidget', () => ({
+  __esModule: true,
+  default: () => <div data-testid="object-widget" />,
+}));
+
+jest.mock('@plone/volto/components/theme/Icon/Icon', () => ({
+  __esModule: true,
+  default: () => <span data-testid="icon" />,
+}));
+
+// Mock the volto helpers too: the real `Blocks.js` requires `uuid`, which
+// cannot always be resolved from within node_modules in the jest environment
+// (and the repository already mocks @plone/volto/helpers in other suites).
+// The schemas used here have no `default`s, so `applySchemaDefaults` is
+// faithfully reproduced by returning the input data.
+jest.mock('@plone/volto/helpers/Blocks/Blocks', () => ({
+  __esModule: true,
+  applySchemaDefaults: jest.fn(({ data }) => data),
+}));
+
+jest.mock('@plone/volto/helpers/Utils/Utils', () => ({
+  __esModule: true,
+  reorderArray: jest.fn((array) => array),
+}));
+
+// `uuid` is imported (and used) by the widget module directly. In some jest
+// environments it cannot be resolved from the add-on source, so use a virtual
+// mock to bypass module resolution entirely and return unique, deterministic ids
+// (same pattern as volto-freshwater-policy's NWRMObjectListWidget test).
+jest.mock(
+  'uuid',
+  () => {
+    let value = 0;
+    return {
+      v4: jest.fn(() => `uuid-${value++}`),
+    };
+  },
+  { virtual: true },
+);
+
+// EUNISCodeView reads the current content data from the Redux store. Expose a
+// mutable slice so each test can control what useSelector returns.
+let mockContentData = {};
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: (selector) => selector({ content: { data: mockContentData } }),
+}));
+
+const renderView = (Component, props) => render(<Component {...props} />);
+
+describe('EUNISMSFDView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = renderView(EUNISMSFDView, { value: '' });
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders nothing on invalid JSON', () => {
+    const { container } = renderView(EUNISMSFDView, { value: 'not json' });
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders relation and value for each item', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', relation: '=', value: 'V1' },
+      { '@id': '/2', relation: '#', value: 'V2' },
+    ]);
+
+    const { container } = renderView(EUNISMSFDView, { value });
+
+    const view = container.querySelector('.eunis-widget-view');
+    expect(view).toBeInTheDocument();
+
+    const items = view.querySelectorAll('.eunis-widget-item');
+    expect(items).toHaveLength(2);
+    expect(items[0].textContent).toContain('=');
+    expect(items[0].textContent).toContain('V1');
+    expect(items[1].textContent).toContain('#');
+    expect(items[1].textContent).toContain('V2');
+  });
+
+  it('supports an object value with a value array', () => {
+    const value = { value: [{ '@id': '/1', relation: '=', value: 'V' }] };
+    const { container } = renderView(EUNISMSFDView, { value });
+    expect(container.querySelector('.eunis-widget-view')).toBeInTheDocument();
+  });
+});
+
+describe('EUNISHDView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = renderView(EUNISHDView, { value: [] });
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders the item.link href when present', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', relation: '=', value: 'V', link: 'http://x/1' },
+    ]);
+
+    const { container } = renderView(EUNISHDView, { value });
+
+    const a = container.querySelector('.eunis-widget-item a');
+    expect(a).toHaveAttribute('href', 'http://x/1');
+    expect(a).toHaveTextContent('V');
+    expect(
+      container.querySelector('.eunis-widget-item span'),
+    ).toHaveTextContent('=');
+  });
+
+  it('renders the Annex I URL when no link is present', () => {
+    const value = JSON.stringify([{ '@id': '/1', relation: '>', value: 'A1' }]);
+
+    const { container } = renderView(EUNISHDView, { value });
+
+    const a = container.querySelector('.eunis-widget-item a');
+    expect(a).toHaveAttribute('href', '/habitats/ANNEX1_A1');
+    expect(a).toHaveAttribute('target', '_blank');
+    expect(a).toHaveAttribute('rel', 'noopener');
+    expect(a).toHaveTextContent('A1');
+  });
+});
+
+describe('EUNISEuropeanRedListView', () => {
+  it('renders the item.link href when present', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', relation: '=', value: 'V', link: 'http://x/2' },
+    ]);
+
+    const { container } = renderView(EUNISEuropeanRedListView, { value });
+
+    expect(container.querySelector('.eunis-widget-item a')).toHaveAttribute(
+      'href',
+      'http://x/2',
+    );
+  });
+
+  it('builds the Red List URL from the code part of the value', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', relation: '=', value: 'Kelp communities - BAL1' },
+    ]);
+
+    const { container } = renderView(EUNISEuropeanRedListView, { value });
+
+    const a = container.querySelector('.eunis-widget-item a');
+    expect(a).toHaveAttribute('href', '/habitats_rl/REDLIST_BAL1');
+    expect(a).toHaveAttribute('target', '_blank');
+    expect(a).toHaveTextContent('Kelp communities - BAL1');
+  });
+});
+
+describe('EUNISLinksToFinerEUNISHabitatsView', () => {
+  it('renders the item.link href when present', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', value: 'E1', link: 'http://x/3' },
+    ]);
+
+    const { container } = renderView(EUNISLinksToFinerEUNISHabitatsView, {
+      value,
+    });
+
+    expect(container.querySelector('.eunis-widget-item a')).toHaveAttribute(
+      'href',
+      'http://x/3',
+    );
+  });
+
+  it('builds the EUNIS revised URL when no link is present', () => {
+    const value = JSON.stringify([{ '@id': '/1', value: 'E1' }]);
+
+    const { container } = renderView(EUNISLinksToFinerEUNISHabitatsView, {
+      value,
+    });
+
+    const a = container.querySelector('.eunis-widget-item a');
+    expect(a).toHaveAttribute('href', '/habitats_eunis_revised/EUNISrev_E1');
+    expect(a).toHaveAttribute('target', '_blank');
+    expect(a).toHaveTextContent('E1');
+  });
+});
+
+describe('EUNISCountryCodeView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = renderView(EUNISCountryCodeView, { value: '' });
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders countries and their national items', () => {
+    const value = JSON.stringify([
+      {
+        '@id': '/cc1',
+        countryCode: ['BE', 'NL'],
+        national: [{ '@id': '/n1', relation: '=', value: 'V1' }],
+      },
+    ]);
+
+    const { container } = renderView(EUNISCountryCodeView, { value });
+
+    expect(container.querySelector('.country-item')).toHaveTextContent(
+      'BE, NL',
+    );
+
+    const items = container.querySelectorAll('.eunis-widget-item');
+    expect(items).toHaveLength(1);
+    expect(items[0].textContent).toContain('=');
+    expect(items[0].textContent).toContain('V1');
+  });
+});
+
+describe('EUNISRegionalSeaConventionValueView', () => {
+  it('behaves like the MSFD view', () => {
+    const value = JSON.stringify([{ '@id': '/1', relation: '=', value: 'V' }]);
+
+    const { container } = renderView(EUNISRegionalSeaConventionValueView, {
+      value,
+    });
+
+    expect(container.querySelector('.eunis-widget-view')).toBeInTheDocument();
+  });
+});
+
+describe('EUNISCodeView', () => {
+  beforeEach(() => {
+    mockContentData = {};
+  });
+
+  it('builds the default EUNIS revised href', () => {
+    const { container } = renderView(EUNISCodeView, { value: 'E123' });
+
+    const a = container.querySelector('a');
+    expect(a).toHaveAttribute('href', '/habitats_eunis_revised/EUNISrev_E123');
+    expect(a).toHaveAttribute('target', '_blank');
+    expect(a).toHaveAttribute('rel', 'noopener');
+    expect(a).toHaveTextContent('E123');
+  });
+
+  it('uses the trimmed eunis_code_alt_url from the store when present', () => {
+    mockContentData = { eunis_code_alt_url: '  http://alt/1  ' };
+    const { container } = renderView(EUNISCodeView, { value: 'E123' });
+
+    expect(container.querySelector('a')).toHaveAttribute(
+      'href',
+      'http://alt/1',
+    );
+  });
+
+  it('prefers the content prop over the store', () => {
+    mockContentData = { eunis_code_alt_url: 'http://store/1' };
+    const { container } = renderView(EUNISCodeView, {
+      value: 'E123',
+      content: { eunis_code_alt_url: 'http://content/2' },
+    });
+
+    expect(container.querySelector('a')).toHaveAttribute(
+      'href',
+      'http://content/2',
+    );
+  });
+
+  it('returns the value unchanged when no value is provided', () => {
+    const { container } = renderView(EUNISCodeView, { value: null });
+    expect(container.firstChild).toBeNull();
+  });
+});
+
+const renderWidget = (Widget, props) =>
+  render(
+    <IntlProvider locale="en" messages={{}}>
+      <Widget
+        id="w"
+        value={{ value: [] }}
+        fieldSet="default"
+        block={{}}
+        {...props}
+      />
+    </IntlProvider>,
+  );
+
+describe('BaseObjectListWidget (via the named widget wrappers)', () => {
+  it.each([
+    ['MSFD', EUNISMSFDWidget, 'Add MSFD'],
+    ['HD (Annex I)', EUNISHDWidget, 'Add HD (Annex I)'],
+    ['European Red List', EUNISEuropeanRedListWidget, 'Add European Red List'],
+    [
+      'Links to finer EUNIS habitats',
+      EUNISLinksToFinerEUNISHabitatsWidget,
+      'Add Links to finer EUNIS habitats',
+    ],
+    [
+      'Regional Sea Convention Value',
+      EUNISRegionalSeaConventionValueWidget,
+      'Add Regional Sea Convention Value',
+    ],
+    ['Country Code', EUNISCountryCodeWidget, 'Add Country Code'],
+  ])('renders the add button for %s', (title, Widget, label) => {
+    const { getByRole } = renderWidget(Widget, { onChange: jest.fn() });
+    expect(getByRole('button', { name: label })).toBeInTheDocument();
+  });
+
+  it('renders the empty-state input when there are no items', () => {
+    const { container } = renderWidget(EUNISMSFDWidget, {
+      onChange: jest.fn(),
+    });
+
+    const hidden = container.querySelector('input[type="hidden"]');
+    expect(hidden).toHaveValue('Empty object list');
+  });
+
+  it('adds a new item when the add button is clicked', () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderWidget(EUNISMSFDWidget, { onChange });
+
+    fireEvent.click(getByRole('button', { name: 'Add MSFD' }));
+
+    expect(onChange).toHaveBeenCalledWith('w', {
+      value: expect.arrayContaining([
+        expect.objectContaining({ '@id': expect.any(String) }),
+      ]),
+    });
+  });
+
+  it('removes an item when the remove button is clicked', () => {
+    const onChange = jest.fn();
+    const value = {
+      value: [{ '@id': '/1', relation: '=', value: 'V' }],
+    };
+
+    const { getByRole } = render(
+      <IntlProvider locale="en" messages={{}}>
+        <EUNISMSFDWidget
+          id="w"
+          value={value}
+          fieldSet="default"
+          block={{}}
+          onChange={onChange}
+        />
+      </IntlProvider>,
+    );
+
+    fireEvent.click(getByRole('button', { name: 'Remove item #1' }));
+
+    expect(onChange).toHaveBeenCalledWith('w', { value: [] });
+  });
+});

package/src/components/Widgets/NRRWidgets.jsx

@@ -1,165 +1,185 @@
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { Popup } from 'semantic-ui-react';
-export const NRRTypologyOfMeasuresView = ({ value }) => {
+
+/**
+ * Normalize a relation/array field value into a plain array.
+ * Handles a JSON-encoded string, a raw array, or an object with a `value` array.
+ * Returns [] when the value can't be parsed or is empty.
+ */
+const parseItems = (value) => {
   let parsedValue = value;
 
   if (typeof value === 'string') {
     try {
       parsedValue = JSON.parse(value);
     } catch (e) {
-      return null;
+      return [];
     }
   }
 
-  const items = Array.isArray(parsedValue)
-    ? parsedValue
-    : parsedValue?.value || [];
+  return Array.isArray(parsedValue) ? parsedValue : parsedValue?.value || [];
+};
 
-  if (!items || items.length === 0) return null;
+const Label = ({ label, secondary = false }) =>
+  label ? (
+    <span className={secondary ? 'secondary' : undefined}>
+      <b>{label}: </b>
+    </span>
+  ) : null;
+
+/** Renders a labeled list of items separated by commas. */
+const InlineList = ({ label, secondary, items, render }) => (
+  <p>
+    <Label label={label} secondary={secondary} />
+    {items.map((item, index) => (
+      <span key={item['@id'] ?? index}>
+        {render(item)}
+        {index < items.length - 1 ? ', ' : ''}
+      </span>
+    ))}
+  </p>
+);
+
+/** Renders a labeled <ul> of items. */
+const LinkedList = ({ label, secondary, items, render }) => (
+  <div className="nrr-linked-list">
+    <Label label={label} secondary={secondary} />
+    <ul>
+      {items.map((item, index) => (
+        <li key={item['@id'] ?? index}>{render(item)}</li>
+      ))}
+    </ul>
+  </div>
+);
+
+export const NRRTypologyOfMeasuresView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
   return (
-    <div className="eunis-widget-view">
-      <span>
-        <b>Related typology of measures: </b>
-      </span>
-      <ul>
-        {items.map((item) => {
-          const description = item.title.split(' - ')?.pop();
-          const code = item.title.split(' - ').slice(0, 2).join(' - ');
-          return (
-            <li key={item['@id']}>
-              <Popup content={description} trigger={<b>{code}</b>} />
-            </li>
-          );
-        })}
-      </ul>
-    </div>
+    <LinkedList
+      label="Related typology of measures"
+      secondary
+      items={items}
+      render={(item) => {
+        const parts = item.title.split(' - ');
+        const code = parts.slice(0, 2).join(' - ');
+        const description = parts[parts.length - 1];
+        return <Popup content={description} trigger={<b>{code}</b>} />;
+      }}
+    />
   );
 };
 
 export const NRRArticleView = ({ value }) => {
-  let parsedValue = value;
-
-  if (typeof value === 'string') {
-    try {
-      parsedValue = JSON.parse(value);
-    } catch (e) {
-      return null;
-    }
-  }
-
-  const items = Array.isArray(parsedValue)
-    ? parsedValue
-    : parsedValue?.value || [];
-
-  if (!items || items.length === 0) return null;
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
   return (
-    <div className="eunis-widget-viewZ">
-      <span>
-        <b>NRR Article: </b>
-      </span>
-      {items.map((item) => (
-        <span key={item['@id']}>
-          {item.title.split(' - ')[0].split(' ')[1]}
-          {items.indexOf(item) < items.length - 1 ? ', ' : ''}
-        </span>
-      ))}
-    </div>
+    <InlineList
+      label="NRR Article"
+      secondary
+      items={items}
+      render={(item) => item.title.split(' - ')[0].split(' ')[1]}
+    />
   );
 };
 
 export const NRRrelatedCaseStudiesView = ({ value }) => {
-  let parsedValue = value;
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
-  if (typeof value === 'string') {
-    try {
-      parsedValue = JSON.parse(value);
-    } catch (e) {
-      return null;
-    }
-  }
-
-  const items = Array.isArray(parsedValue)
-    ? parsedValue
-    : parsedValue?.value || [];
+  return (
+    <LinkedList
+      label="Related Case Studies"
+      items={items}
+      render={(item) => (
+        <UniversalLink href={item['@id']}>{item.title}</UniversalLink>
+      )}
+    />
+  );
+};
 
-  if (!items || items.length === 0) return null;
+export const NRRMeasuresImplementedView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
   return (
-    <div className="eunis-widget-viewZ">
-      <span>
-        <b>Related Case Studies: </b>
-      </span>
-      <ul>
-        {items.map((item, index) => (
-          <li key={item['@id'] ?? index}>
-            <UniversalLink href={item['@id']}>{item.title}</UniversalLink>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <LinkedList
+      items={items}
+      render={(item) => (
+        <UniversalLink href={item['@id']}>{item.title}</UniversalLink>
+      )}
+    />
   );
 };
 
-export const NRRMeasuresImplementedView = ({ value }) => {
-  let parsedValue = value;
+export const NRREcosystemTypologyView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
-  if (typeof value === 'string') {
-    try {
-      parsedValue = JSON.parse(value);
-    } catch (e) {
-      return null;
-    }
-  }
+  return (
+    <InlineList
+      label="Ecosystem type"
+      items={items}
+      render={(item) => item.title}
+    />
+  );
+};
 
-  const items = Array.isArray(parsedValue)
-    ? parsedValue
-    : parsedValue?.value || [];
+export const NRRHabitatEcosystemTypeView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
-  if (!items || items.length === 0) return null;
+  return (
+    <InlineList
+      label="Habitat/Ecosystem type"
+      secondary
+      items={items}
+      render={(item) => item.title}
+    />
+  );
+};
+
+export const NRRScaleOfPlanningView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
   return (
-    <div className="eunis-widget-viewZ">
-      <ul>
-        {items.map((item, index) => (
-          <li key={item['@id'] ?? index}>
-            <UniversalLink href={item['@id']}>{item.title}</UniversalLink>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <InlineList
+      label="Scale of planning"
+      secondary
+      items={items}
+      render={(item) => item.title}
+    />
   );
 };
 
-export const NRREcosystemTypologyView = ({ value }) => {
+export const NRRCurrentStatusView = ({ value }) => {
   let parsedValue = value;
 
   if (typeof value === 'string') {
     try {
       parsedValue = JSON.parse(value);
     } catch (e) {
-      return null;
+      // Not JSON — keep the raw string value.
     }
   }
 
-  const items = Array.isArray(parsedValue)
-    ? parsedValue
-    : parsedValue?.value || [];
+  // Choice field: value is a single token, not an array.
+  if (!parsedValue) return null;
 
-  if (!items || items.length === 0) return null;
+  const text =
+    typeof parsedValue === 'string'
+      ? parsedValue
+      : parsedValue?.title || parsedValue?.token || parsedValue?.value;
+
+  if (!text) return null;
 
   return (
-    <div className="eunis-widget-view">
-      <span>
-        <b>Ecosystem type: </b>
-      </span>
-      {items.map((item) => (
-        <span key={item['@id']}>
-          {item.title}
-          {items.indexOf(item) < items.length - 1 ? ', ' : ''}
-        </span>
-      ))}
-    </div>
+    <p>
+      <Label label="Current status" secondary />
+      {text}
+    </p>
   );
 };

package/src/components/Widgets/NRRWidgets.test.jsx

@@ -0,0 +1,255 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import {
+  NRRTypologyOfMeasuresView,
+  NRRArticleView,
+  NRRrelatedCaseStudiesView,
+  NRRMeasuresImplementedView,
+  NRREcosystemTypologyView,
+  NRRHabitatEcosystemTypeView,
+  NRRScaleOfPlanningView,
+  NRRCurrentStatusView,
+} from './NRRWidgets';
+
+// Mock the heavy @plone/volto UniversalLink for the linked-list views so that
+// we only assert on the rendered markup without having to mount a Router.
+jest.mock('@plone/volto/components/manage/UniversalLink/UniversalLink', () => ({
+  __esModule: true,
+  default: ({ href, children }) => <a href={href}>{children}</a>,
+}));
+
+// Render the semantic-ui-react Popup inline (instead of via a portal) so the
+// trigger and content are directly assertable. The mock factory uses
+// jest.requireActual to avoid the TDZ hoisting issue of referencing a const.
+jest.mock('semantic-ui-react', () => {
+  const actual = jest.requireActual('semantic-ui-react');
+  return {
+    ...actual,
+    Popup: ({ content, trigger }) => (
+      <div className="popup">
+        <div className="trigger">{trigger}</div>
+        <div className="content">{content}</div>
+      </div>
+    ),
+  };
+});
+
+describe('NRRTypologyOfMeasuresView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = render(<NRRTypologyOfMeasuresView value="" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders nothing when value is invalid JSON', () => {
+    const { container } = render(
+      <NRRTypologyOfMeasuresView value="not json" />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders a labeled linked list and splits title into code/description', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', title: '001 - Sector A - Description one' },
+      { '@id': '/2', title: '002 - Sector B - Description two' },
+    ]);
+
+    const { container } = render(<NRRTypologyOfMeasuresView value={value} />);
+
+    const list = container.querySelector('.nrr-linked-list');
+    expect(list).toBeInTheDocument();
+    expect(list.textContent).toContain('Related typology of measures: ');
+
+    const popups = list.querySelectorAll('.popup');
+    expect(popups).toHaveLength(2);
+
+    // code = first two parts joined, description = last part
+    expect(popups[0].querySelector('.trigger')).toHaveTextContent(
+      '001 - Sector A',
+    );
+    expect(popups[0].querySelector('.content')).toHaveTextContent(
+      'Description one',
+    );
+    expect(popups[1].querySelector('.trigger')).toHaveTextContent(
+      '002 - Sector B',
+    );
+    expect(popups[1].querySelector('.content')).toHaveTextContent(
+      'Description two',
+    );
+  });
+});
+
+describe('NRRArticleView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = render(<NRRArticleView value={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('extracts the article number from the title and renders an inline list', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', title: 'Article 5 - xxx' },
+      { '@id': '/2', title: 'Article 7 - yyy' },
+    ]);
+
+    const { container } = render(<NRRArticleView value={value} />);
+
+    const p = container.querySelector('p');
+    expect(p).toBeInTheDocument();
+    expect(p.textContent).toContain('NRR Article: ');
+    // render = title.split(' - ')[0].split(' ')[1]
+    expect(p.textContent).toContain('5');
+    expect(p.textContent).toContain('7');
+    // one label span plus one span per item
+    expect(p.querySelectorAll('span').length).toBe(3);
+  });
+});
+
+describe('NRRrelatedCaseStudiesView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = render(<NRRrelatedCaseStudiesView value={null} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders links to each related case study', () => {
+    const value = JSON.stringify([
+      { '@id': '/c1', title: 'Case One' },
+      { '@id': '/c2', title: 'Case Two' },
+    ]);
+
+    const { container } = render(<NRRrelatedCaseStudiesView value={value} />);
+
+    const list = container.querySelector('.nrr-linked-list');
+    expect(list.textContent).toContain('Related Case Studies: ');
+
+    const links = list.querySelectorAll('a');
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveAttribute('href', '/c1');
+    expect(links[0]).toHaveTextContent('Case One');
+    expect(links[1]).toHaveAttribute('href', '/c2');
+    expect(links[1]).toHaveTextContent('Case Two');
+  });
+});
+
+describe('NRRMeasuresImplementedView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = render(<NRRMeasuresImplementedView value="" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders measures as links without a leading label', () => {
+    const value = [
+      { '@id': '/m1', title: 'Measure One' },
+      { '@id': '/m2', title: 'Measure Two' },
+    ];
+
+    const { container } = render(<NRRMeasuresImplementedView value={value} />);
+
+    const list = container.querySelector('.nrr-linked-list');
+    expect(list).toBeInTheDocument();
+
+    // no label rendered for this view
+    expect(list.querySelector('b')).toBeNull();
+
+    const links = list.querySelectorAll('a');
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveAttribute('href', '/m1');
+    expect(links[0]).toHaveTextContent('Measure One');
+    expect(links[1]).toHaveAttribute('href', '/m2');
+    expect(links[1]).toHaveTextContent('Measure Two');
+  });
+});
+
+describe('NRREcosystemTypologyView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = render(<NRREcosystemTypologyView value={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders the ecosystem types as an inline list of titles', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', title: 'Grassland' },
+      { '@id': '/2', title: 'Wetland' },
+    ]);
+
+    const { container } = render(<NRREcosystemTypologyView value={value} />);
+
+    const p = container.querySelector('p');
+    expect(p.textContent).toContain('Ecosystem type: ');
+    expect(p.textContent).toContain('Grassland');
+    expect(p.textContent).toContain('Wetland');
+  });
+});
+
+describe('NRRHabitatEcosystemTypeView', () => {
+  it('renders a labeled inline list of habitat/ecosystem types', () => {
+    const value = [
+      { '@id': '/1', title: 'Forest' },
+      { '@id': '/2', title: 'Heathland' },
+    ];
+
+    const { container } = render(<NRRHabitatEcosystemTypeView value={value} />);
+
+    const p = container.querySelector('p');
+    expect(p.textContent).toContain('Habitat/Ecosystem type: ');
+    expect(p.textContent).toContain('Forest');
+    expect(p.textContent).toContain('Heathland');
+    // the label span of a "secondary" view carries the secondary class
+    expect(container.querySelector('p span.secondary')).toBeInTheDocument();
+  });
+});
+
+describe('NRRScaleOfPlanningView', () => {
+  it('renders a labeled inline list of planning scales', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', title: 'National' },
+      { '@id': '/2', title: 'Regional' },
+    ]);
+
+    const { container } = render(<NRRScaleOfPlanningView value={value} />);
+
+    const p = container.querySelector('p');
+    expect(p.textContent).toContain('Scale of planning: ');
+    expect(p.textContent).toContain('National');
+    expect(p.textContent).toContain('Regional');
+    expect(container.querySelector('p span.secondary')).toBeInTheDocument();
+  });
+});
+
+describe('NRRCurrentStatusView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = render(<NRRCurrentStatusView value="" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders nothing for undefined or null', () => {
+    const { container } = render(<NRRCurrentStatusView value={undefined} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders the raw string value when it is not JSON', () => {
+    const { container } = render(<NRRCurrentStatusView value="Ongoing" />);
+    expect(container.textContent).toContain('Current status: ');
+    expect(container.textContent).toContain('Ongoing');
+  });
+
+  it('renders the title of an object value', () => {
+    const value = JSON.stringify({ title: 'Active' });
+    const { container } = render(<NRRCurrentStatusView value={value} />);
+    expect(container.textContent).toContain('Active');
+  });
+
+  it('falls back to token then value for object values', () => {
+    const { container } = render(
+      <NRRCurrentStatusView value={{ token: 't1', value: 'raw' }} />,
+    );
+    expect(container.textContent).toContain('t1');
+  });
+
+  it('renders nothing for an array value', () => {
+    const { container } = render(
+      <NRRCurrentStatusView value={JSON.stringify(['a', 'b'])} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});

package/src/components/Widgets/styles.less

@@ -17,3 +17,7 @@
     margin-bottom: 0;
   }
 }
+
+.nrr-linked-list {
+  margin-bottom: 1em;
+}

package/src/components/manage/Blocks/Title/CountryProfileView.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import config from '@plone/volto/registry';
+
+const CountryProfileView = (props) => {
+  const defaultVariation = (
+    config.blocks.blocksConfig.title.variations || []
+  ).find((v) => v.isDefault);
+  const DefaultTemplate = defaultVariation?.view;
+  const CountryFlagView = config.blocks.blocksConfig?.countryFlag?.view;
+
+  if (!DefaultTemplate) return null;
+
+  const banner = CountryFlagView
+    ? {
+        ...(props.banner || {}),
+        title: {
+          view: (
+            <CountryFlagView {...props} path={props.path || props.pathname} />
+          ),
+        },
+      }
+    : props.banner;
+
+  return <DefaultTemplate {...props} banner={banner} />;
+};
+
+export default CountryProfileView;

package/src/components/manage/Blocks/Title/index.js

@@ -0,0 +1,19 @@
+import CountryProfileView from './CountryProfileView';
+import { countryProfileSchemaEnhancer } from './schema';
+
+export default function installTitleVariations(config) {
+  const titleBlock = config.blocks.blocksConfig.title;
+  if (!titleBlock) return config;
+
+  titleBlock.variations = [
+    ...(titleBlock.variations || []),
+    {
+      id: 'countryProfile',
+      title: 'Country Profile',
+      view: CountryProfileView,
+      schemaEnhancer: countryProfileSchemaEnhancer,
+    },
+  ];
+
+  return config;
+}

package/src/components/manage/Blocks/Title/schema.js

@@ -0,0 +1,42 @@
+import CountryFlagSchema from '@eeacms/volto-datablocks/components/manage/Blocks/CountryFlag/schema';
+import countryNames from '@eeacms/volto-datablocks/components/manage/Blocks/CountryFlag/data/countries';
+
+export const countryProfileSchemaEnhancer = ({ schema, intl }) => {
+  const cfSchema = CountryFlagSchema(intl);
+
+  cfSchema.properties.country_name.choices = Object.keys(countryNames).map(
+    (k) => [k, countryNames[k]],
+  );
+
+  schema.fieldsets.push(
+    {
+      id: 'countryFlag',
+      title: 'Country flag',
+      fields: [
+        'country_name',
+        'show_name',
+        'show_flag',
+        'show_dropdown',
+        'render_as',
+      ],
+    },
+    {
+      id: 'dropdownItems',
+      title: 'Dropdown items',
+      fields: ['querystring', 'exclude'],
+    },
+  );
+
+  schema.properties = {
+    ...schema.properties,
+    country_name: cfSchema.properties.country_name,
+    show_name: cfSchema.properties.show_name,
+    show_flag: cfSchema.properties.show_flag,
+    show_dropdown: cfSchema.properties.show_dropdown,
+    render_as: cfSchema.properties.render_as,
+    querystring: cfSchema.properties.querystring,
+    exclude: cfSchema.properties.exclude,
+  };
+
+  return schema;
+};

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

@@ -7,6 +7,7 @@ import installKeyFacts from './KeyFacts';
 import installMaesViewer from './MaesViewer';
 import installNavigation from './Navigation';
 import installCaseStudyExplorer from './CaseStudyExplorer';
+import installTitleVariations from './Title';
 
 const config = (config) => {
   return [
@@ -19,6 +20,7 @@ const config = (config) => {
     installMaesViewer,
     installNavigation,
     installCaseStudyExplorer,
+    installTitleVariations,
   ].reduce((acc, apply) => apply(acc), config);
 };
 

package/src/customizations/volto/reducers/navigation/navigation.js

@@ -28,9 +28,8 @@ const initialState = {
  */
 function getRecursiveItems(items) {
   return map(items, (item) => ({
-    title: item.title,
-    description: item.description,
     url: flattenToAppURL(item['@id']),
+    ...item,
     ...(item.items && { items: getRecursiveItems(item.items) }),
   }));
 }
@@ -71,11 +70,11 @@ export default function navigation(state = initialState, action = {}) {
       }
       return state;
     case `${GET_NAVIGATION}_SUCCESS`:
-      hasExpander = hasApiExpander(
-        'navigation',
-        getBaseUrl(flattenToAppURL(action.result['@id'])),
-      );
-      if (!hasExpander) {
+      // Even if the expander is set or not, if the GET_NAVIGATION is
+      // called, we want it to store the data if the actions data is
+      // not set in the expander data (['@components']) but in the "normal"
+      // action result (we look for the object property returned by the endpoint)
+      if (!action.result?.['@components'] && action.result?.items) {
         return {
           ...state,
           error: null,

package/src/index.js

@@ -32,6 +32,9 @@ import {
   NRRArticleView,
   NRRrelatedCaseStudiesView,
   NRRMeasuresImplementedView,
+  NRRHabitatEcosystemTypeView,
+  NRRScaleOfPlanningView,
+  NRRCurrentStatusView,
 } from './components/Widgets/NRRWidgets';
 import RichTextWidget from './components/Widgets/RichTextWidget';
 
@@ -110,6 +113,17 @@ const applyConfig = (config) => {
     'nominatim.openstreetmap.org',
   ];
 
+  // Needed by the CountryFlag block to fall back to sibling items when it
+  // has no listing/query results (e.g. Title block's Country Profile
+  // variation).
+  config.settings.apiExpanders = [
+    ...(config.settings.apiExpanders || []),
+    {
+      match: '',
+      GET_CONTENT: ['siblings'],
+    },
+  ];
+
   // EEA customizations
   config.settings.eea = {
     ...(config.settings.eea || {}),
@@ -272,7 +286,11 @@ const applyConfig = (config) => {
   config.widgets.id.geolocation = GeolocationWidget;
   config.widgets.views.id.nrr_typology_of_measures = NRRTypologyOfMeasuresView;
   config.widgets.views.id.nrr_ecosystem_typology = NRREcosystemTypologyView;
+  config.widgets.views.id.nrr_habitat_ecosystem_type =
+    NRRHabitatEcosystemTypeView;
+  config.widgets.views.id.nrr_scale_of_planning = NRRScaleOfPlanningView;
   config.widgets.views.id.nrr_article = NRRArticleView;
+  config.widgets.views.id.nrr_current_status = NRRCurrentStatusView;
   // EUNIS Widgets
   config.widgets.id.eunis_national_json = EUNISCountryCodeWidget;
   config.widgets.views.id.eunis_national_json = EUNISCountryCodeView;