@eeacms/volto-cca-policy 1.0.31 → 1.0.32

package/CHANGELOG.md

@@ -4,6 +4,27 @@ 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.0.32](https://github.com/eea/volto-cca-policy/compare/1.0.31...1.0.32) - 1 October 2026
+
+#### :rocket: New Features
+
+- feat(navigator): improve cycle elements with titles on hover; show full titles in the popup [kreafox - [`c03313c`](https://github.com/eea/volto-cca-policy/commit/c03313c69dbb5a601016d495286d5d15b5a8da97)]
+- feat(navigator): add default sort configuration for Navigator Catalogue [kreafox - [`934caa6`](https://github.com/eea/volto-cca-policy/commit/934caa658d173430af93b44f6f46fb2e28234b75)]
+
+#### :bug: Bug Fixes
+
+- fix(search): restore clusters [kreafox - [`7aa88bc`](https://github.com/eea/volto-cca-policy/commit/7aa88bc9d973676cba2a624cd83b1221cee2d6b7)]
+- fix(test): remove unnecessary react import [kreafox - [`3324412`](https://github.com/eea/volto-cca-policy/commit/3324412a884bdfadfb3edba18768c4f123f01ebe)]
+- fix(navigator): change heading from h4 to h3 for "Used in" section [kreafox - [`d366c4a`](https://github.com/eea/volto-cca-policy/commit/d366c4a328ea11322163dba747ffd99e2f2f6ad7)]
+
+#### :nail_care: Enhancements
+
+- refactor(navigator): update labels for geographic coverage facets [kreafox - [`825ddb8`](https://github.com/eea/volto-cca-policy/commit/825ddb8586fd143fd2e9b9809181ecafd4df9924)]
+
+#### :hammer_and_wrench: Others
+
+- test(utils): add test for getFilteredBlocks [kreafox - [`932df7e`](https://github.com/eea/volto-cca-policy/commit/932df7e686653ba8be5ec16b3ea34c6fd7e42134)]
+- test(navigator): add unit tests for catalogue sorting functionality [kreafox - [`b78f2bd`](https://github.com/eea/volto-cca-policy/commit/b78f2bdf1714b383bbff034c58f0f896aeaeb62f)]
 ### [1.0.31](https://github.com/eea/volto-cca-policy/compare/1.0.30...1.0.31) - 29 September 2026
 
 ### [1.0.30](https://github.com/eea/volto-cca-policy/compare/1.0.29...1.0.30) - 25 September 2026

package/package.json

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

package/src/components/Search/NavigatorCatalogue/NavigatorCatalogueCardItem.jsx

@@ -100,19 +100,23 @@ const CycleElements = ({ intl, values }) => {
       <span className="cycle-elements-label">
         {intl.formatMessage(messages.cycle)}
       </span>
-      {visible.map((value, index) => (
+      {visible.map(({ label, title }, index) => (
         <span
           key={`cycle-element-${index}`}
           className="navigator-tag cycle-element"
+          title={title}
         >
-          {value}
+          {label}
         </span>
       ))}
       {hidden.length > 0 && (
         <TagOverflowPopup
-          items={hidden}
+          items={hidden.map(({ title }) => title)}
           className="navigator-tag cycle-element more"
-          ariaLabel={`${intl.formatMessage(messages.cycle)}: ${hidden.join(', ')}`}
+          ariaLabel={`${intl.formatMessage(messages.cycle)}: ${hidden
+            .map(({ title }) => title)
+            .join(', ')}`}
+          title={hidden.map(({ title }) => title).join(', ')}
         />
       )}
     </div>
@@ -137,7 +141,9 @@ const NavigatorCatalogueCardItem = (props) => {
   )
     .map((value) => {
       const title = value?.title || value;
-      return typeof title === 'string' ? title.split(':')[0] : title;
+      return typeof title === 'string'
+        ? { title, label: title.split(':')[0] }
+        : null;
     })
     .filter(Boolean);
   const publicationDate =

package/src/components/Search/NavigatorCatalogue/NavigatorCatalogueCardItem.test.jsx

@@ -130,11 +130,21 @@ describe('NavigatorCatalogueCardItem', () => {
     expect(screen.getByText('Risk assessment')).toBeInTheDocument();
     expect(screen.getByText('Resilience')).toBeInTheDocument();
     expect(screen.getByText('Adaptation')).toBeInTheDocument();
-    expect(screen.getByText('Step 1')).toBeInTheDocument();
+    expect(screen.getByText('Step 1')).toHaveAttribute(
+      'title',
+      'Step 1: Preparing the ground',
+    );
     expect(
-      screen.getByRole('button', { name: 'Cycle: Step 4' }),
+      screen.getByRole('button', {
+        name: 'Cycle: Step 4: Assessing options',
+      }),
     ).toHaveTextContent('+ 1');
-    expect(screen.getByText('Step 4')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {
+        name: 'Cycle: Step 4: Assessing options',
+      }),
+    ).toHaveAttribute('title', 'Step 4: Assessing options');
+    expect(screen.getByText('Step 4: Assessing options')).toBeInTheDocument();
     expect(
       screen.getByTitle(
         'Maps and graphs, Reports and decision support, Datasets and indicators',

package/src/components/Search/NavigatorCatalogue/NavigatorCatalogueContentView.jsx

@@ -15,7 +15,11 @@ import {
   SortingDropdownWithLabel,
 } from '@eeacms/search/components';
 import { NoResults } from '@eeacms/search/components/Result/NoResults';
-import { useSearchContext, useViews } from '@eeacms/search/lib/hocs';
+import {
+  useSearchContext,
+  useSearchDriver,
+  useViews,
+} from '@eeacms/search/lib/hocs';
 import { loadingFamily } from '@eeacms/search/state';
 import registry from '@eeacms/search/registry';
 import { CompareToolsPanel } from '@eeacms/volto-cca-policy/components';
@@ -72,7 +76,12 @@ const NavigatorCatalogueContentView = (props) => {
   const { sortOptions, resultViews } = appConfig;
   const views = useViews();
   const searchContext = useSearchContext();
+  const driver = useSearchDriver();
+  const { searchTerm, sortField, sortDirection, totalResults, wasSearched } =
+    searchContext;
   const intl = useIntl();
+  const defaultSortApplied = React.useRef(false);
+  const previousSearchTerm = React.useRef(searchTerm);
 
   const { showFilters, showFacets, showClusters, showSorting } = appConfig;
 
@@ -90,6 +99,36 @@ const NavigatorCatalogueContentView = (props) => {
     }
   }, [activeNavigatorViewId, views]);
 
+  React.useEffect(() => {
+    if (!driver || defaultSortApplied.current) return;
+    defaultSortApplied.current = true;
+
+    if (
+      searchTerm?.trim() ||
+      sortField ||
+      sortDirection ||
+      !appConfig.defaultSort
+    ) {
+      return;
+    }
+
+    const [field, direction] = appConfig.defaultSort.split('|');
+    if (field && direction) driver.setSort(field, direction);
+  }, [appConfig.defaultSort, driver, searchTerm, sortDirection, sortField]);
+
+  React.useEffect(() => {
+    const hadSearchTerm = Boolean(previousSearchTerm.current?.trim());
+    const hasSearchTerm = Boolean(searchTerm?.trim());
+    previousSearchTerm.current = searchTerm;
+
+    if (!driver || !hadSearchTerm || hasSearchTerm || !appConfig.defaultSort) {
+      return;
+    }
+
+    const [field, direction] = appConfig.defaultSort.split('|');
+    if (field && direction) driver.setSort(field, direction);
+  }, [appConfig.defaultSort, driver, searchTerm]);
+
   const listingViewDef = resultViews.find(
     (view) => view.id === activeNavigatorViewId,
   );
@@ -100,8 +139,6 @@ const NavigatorCatalogueContentView = (props) => {
   const layoutMode =
     activeNavigatorViewId === 'listing' ? 'fixed' : 'fullwidth';
 
-  const { searchTerm, totalResults, wasSearched } = searchContext;
-
   const loadingAtom = loadingFamily(appConfig.appName);
   const isLoading = useAtomValue(loadingAtom);
 
@@ -114,6 +151,15 @@ const NavigatorCatalogueContentView = (props) => {
       : item.name,
   }));
 
+  const handleSortChange = (value) => {
+    const selectedOption = sortOptions2.find(
+      (option) => `${option.value}|||${option.direction}` === value,
+    );
+    if (selectedOption && driver) {
+      driver.setSort(selectedOption.value, selectedOption.direction);
+    }
+  };
+
   if (!ResultViewComponent) return null;
 
   return (
@@ -173,6 +219,7 @@ const NavigatorCatalogueContentView = (props) => {
                     label=""
                     sortOptions={sortOptions2}
                     view={SortingDropdownWithLabel}
+                    onChange={handleSortChange}
                   />
                 </>
               )}

package/src/components/Search/NavigatorCatalogue/NavigatorCatalogueContentView.test.jsx

@@ -0,0 +1,194 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import NavigatorCatalogueContentView from './NavigatorCatalogueContentView';
+import {
+  useSearchContext,
+  useSearchDriver,
+  useViews,
+} from '@eeacms/search/lib/hocs';
+
+jest.mock('@elastic/react-search-ui', () => ({
+  Sorting: ({ sortOptions, onChange }) => (
+    <select
+      aria-label="Sort results"
+      onChange={(event) => onChange(event.target.value)}
+    >
+      {sortOptions.map((option) => (
+        <option
+          key={`${option.value}|${option.direction}`}
+          value={`${option.value}|||${option.direction}`}
+        >
+          {option.name}
+        </option>
+      ))}
+    </select>
+  ),
+}));
+
+jest.mock('semantic-ui-react', () => {
+  const Menu = ({ children }) => <nav>{children}</nav>;
+  Menu.Item = ({ children }) => <button type="button">{children}</button>;
+  return {
+    Grid: Object.assign(({ children }) => <div>{children}</div>, {
+      Column: ({ children }) => <div>{children}</div>,
+    }),
+    Icon: () => null,
+    Menu,
+  };
+});
+
+jest.mock('jotai', () => ({
+  ...jest.requireActual('jotai'),
+  useAtomValue: () => false,
+}));
+
+jest.mock(
+  '@eeacms/search/components/ResultsPerPageSelector/ResultsPerPageSelector',
+  () => () => null,
+);
+jest.mock('@eeacms/search/components/Paging/Paging', () => () => null);
+jest.mock('@eeacms/search/components', () => ({
+  ActiveFilterList: () => null,
+  Component: () => null,
+  DownloadButton: () => null,
+  DropdownFacetsList: () => null,
+  SectionTabs: () => null,
+  SortingDropdownWithLabel: () => null,
+}));
+jest.mock('@eeacms/search/components/Result/NoResults', () => ({
+  NoResults: () => null,
+}));
+jest.mock('@eeacms/search/lib/hocs', () => ({
+  useSearchContext: jest.fn(),
+  useSearchDriver: jest.fn(),
+  useViews: jest.fn(),
+}));
+jest.mock('@eeacms/search/state', () => ({
+  loadingFamily: jest.fn(() => 'loading'),
+}));
+jest.mock('@eeacms/search/registry', () => ({
+  __esModule: true,
+  default: {
+    resolve: {
+      ListingView: { component: ({ children }) => <div>{children}</div> },
+      MapView: { component: ({ children }) => <div>{children}</div> },
+    },
+  },
+}));
+jest.mock('@eeacms/volto-cca-policy/components', () => ({
+  CompareToolsPanel: () => null,
+}));
+
+const appConfig = {
+  appName: 'navigatorCatalogueSearch',
+  defaultSort: 'title.index|asc',
+  resultViews: [
+    { id: 'listing', factories: { view: 'ListingView' } },
+    { id: 'map', factories: { view: 'MapView' } },
+  ],
+  sortOptions: [
+    { name: { id: 'Relevance' }, value: '', direction: '' },
+    { name: { id: 'Title a-z' }, value: 'title.index', direction: 'asc' },
+    { name: { id: 'Title z-a' }, value: 'title.index', direction: 'desc' },
+  ],
+  showFilters: false,
+  showFacets: false,
+  showClusters: false,
+  showSorting: true,
+  showLandingPage: false,
+};
+
+const renderCatalogue = () =>
+  render(
+    <IntlProvider locale="en">
+      <NavigatorCatalogueContentView
+        appConfig={appConfig}
+        children={[]}
+        wasInteracted={true}
+      />
+    </IntlProvider>,
+  );
+
+describe('NavigatorCatalogueContentView sorting', () => {
+  let driver;
+  let searchContext;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    driver = { setSort: jest.fn() };
+    searchContext = {
+      searchTerm: '',
+      sortField: '',
+      sortDirection: '',
+      totalResults: 0,
+      wasSearched: false,
+    };
+    useSearchContext.mockImplementation(() => searchContext);
+    useSearchDriver.mockReturnValue(driver);
+    useViews.mockReturnValue({
+      activeViewId: 'listing',
+      setActiveViewId: jest.fn(),
+    });
+  });
+
+  it('starts with title A-Z when there is no active sort', () => {
+    renderCatalogue();
+
+    expect(driver.setSort).toHaveBeenCalledWith('title.index', 'asc');
+  });
+
+  it('preserves an active relevance sort', () => {
+    searchContext = {
+      ...searchContext,
+      searchTerm: 'climate adaptation',
+      sortField: '',
+      sortDirection: '',
+    };
+
+    renderCatalogue();
+
+    expect(driver.setSort).not.toHaveBeenCalled();
+  });
+
+  it('restores title A-Z when the keyword is cleared', () => {
+    searchContext = {
+      ...searchContext,
+      searchTerm: 'climate adaptation',
+      sortField: '',
+      sortDirection: '',
+    };
+    const { rerender } = renderCatalogue();
+    driver.setSort.mockClear();
+
+    searchContext = {
+      ...searchContext,
+      searchTerm: '',
+      sortField: '',
+      sortDirection: '',
+    };
+    rerender(
+      <IntlProvider locale="en">
+        <NavigatorCatalogueContentView
+          appConfig={appConfig}
+          children={[]}
+          wasInteracted={true}
+        />
+      </IntlProvider>,
+    );
+
+    expect(driver.setSort).toHaveBeenCalledWith('title.index', 'asc');
+  });
+
+  it('applies the selected sorting option', () => {
+    renderCatalogue();
+    driver.setSort.mockClear();
+
+    fireEvent.change(screen.getByRole('combobox', { name: 'Sort results' }), {
+      target: { value: 'title.index|||desc' },
+    });
+
+    expect(driver.setSort).toHaveBeenCalledWith('title.index', 'desc');
+  });
+});

package/src/components/Search/NavigatorCatalogue/NavigatorGeographicCoverageFacet.jsx

@@ -11,11 +11,6 @@ export const TRANSNATIONAL_REGION_FIELD =
 export const COUNTRIES_FIELD = 'cca_geographic_countries.keyword';
 
 const messages = defineMessages({
-  transnationalRegions: {
-    id: 'Macro-Transnational region',
-    defaultMessage: 'Macro-Transnational region',
-  },
-  countries: { id: 'Countries', defaultMessage: 'Countries' },
   noOptionsAvailable: {
     id: 'No options available',
     defaultMessage: 'No options available',
@@ -187,9 +182,11 @@ const NavigatorActiveFilters = ({ filters, onRemove }) => {
 
 const NavigatorGeographicCoverageFacet = ({
   className = '',
+  countriesLabel,
   onRemove,
   onSelect,
   options = [],
+  transnationalRegionsLabel,
 }) => {
   const intl = useIntl();
   const { addFilter, facets, filters = [], removeFilter } = useSearchContext();
@@ -226,7 +223,7 @@ const NavigatorGeographicCoverageFacet = ({
       <ExpandableFacetGroup
         field={COUNTRIES_FIELD}
         id="navigator-geographic-countries"
-        label={intl.formatMessage(messages.countries)}
+        label={intl.formatMessage(countriesLabel)}
         emptyMessage={intl.formatMessage(messages.noOptionsAvailable)}
         options={countryOptions}
         onChange={(option) => updateChildFilter(COUNTRIES_FIELD, option)}
@@ -234,7 +231,7 @@ const NavigatorGeographicCoverageFacet = ({
       <ExpandableFacetGroup
         field={TRANSNATIONAL_REGION_FIELD}
         id="navigator-geographic-transnational-regions"
-        label={intl.formatMessage(messages.transnationalRegions)}
+        label={intl.formatMessage(transnationalRegionsLabel)}
         emptyMessage={intl.formatMessage(messages.noOptionsAvailable)}
         options={transnationalOptions}
         onChange={(option) =>

package/src/components/Search/NavigatorCatalogue/NavigatorGeographicCoverageFacet.test.jsx

@@ -50,8 +50,13 @@ const renderFacet = ({
   render(
     <IntlProvider locale="en">
       <NavigatorGeographicCoverageFacet
+        countriesLabel={{ id: 'Countries', defaultMessage: 'Countries' }}
         onRemove={onRemove}
         onSelect={onSelect}
+        transnationalRegionsLabel={{
+          id: 'Transnational regions',
+          defaultMessage: 'Transnational regions',
+        }}
         options={[
           { value: 'Global', count: 5, selected: false },
           { value: 'Europe', count: 8, selected: false },
@@ -89,7 +94,7 @@ describe('NavigatorGeographicCoverageFacet', () => {
     const { addFilter } = renderFacet();
 
     fireEvent.click(
-      screen.getByRole('button', { name: 'Macro-Transnational region' }),
+      screen.getByRole('button', { name: 'Transnational regions' }),
     );
     fireEvent.click(screen.getByLabelText('Outermost regions'));
 

package/src/components/theme/TagOverflowPopup.jsx

@@ -1,6 +1,6 @@
 import { Popup } from 'semantic-ui-react';
 
-const TagOverflowPopup = ({ items, className, ariaLabel }) => {
+const TagOverflowPopup = ({ items, className, ariaLabel, title }) => {
   if (!items.length) return null;
 
   return (
@@ -17,7 +17,12 @@ const TagOverflowPopup = ({ items, className, ariaLabel }) => {
       }
       position="bottom left"
       trigger={
-        <button type="button" className={className} aria-label={ariaLabel}>
+        <button
+          type="button"
+          className={className}
+          aria-label={ariaLabel}
+          title={title}
+        >
           + {items.length}
         </button>
       }

package/src/components/theme/Views/ExtendedToolView.jsx

@@ -219,9 +219,9 @@ const ExtendedToolView = (props) => {
 
               {used_in && (
                 <>
-                  <h4>
+                  <h3>
                     <FormattedMessage id="Used in" defaultMessage="Used in" />
-                  </h4>
+                  </h3>
 
                   <HTMLField value={used_in} />
                 </>

package/src/search/cca/config.js

@@ -16,7 +16,18 @@ const ccaConfig = {
  */
 export const clusters = {
   name: 'op_cluster',
-  clusters: [].map((cluster) => ({
+  clusters: [
+    {
+      name: 'Climate-ADAPT',
+      icon: { name: 'file text' },
+      values: ['climate'],
+    },
+    {
+      name: 'Health Observatory',
+      icon: { name: 'compass' },
+      values: ['observatory'],
+    },
+  ].map((cluster) => ({
     ...cluster,
     defaultResultView: 'ClusterHorizontalCardItem',
   })),

package/src/search/navigator_catalogue/config.js

@@ -8,6 +8,7 @@ import views from './views';
 
 const navigatorCatalogueConfig = {
   title: 'Navigator Catalogue',
+  defaultSort: 'title.index|asc',
   ...views,
 };
 

package/src/search/navigator_catalogue/facets.js

@@ -12,8 +12,8 @@ const messages = defineMessages({
     defaultMessage: 'Geographic coverage',
   },
   macroTransnationalRegion: {
-    id: 'Macro-Transnational region',
-    defaultMessage: 'Macro-Transnational region',
+    id: 'Transnational regions',
+    defaultMessage: 'Transnational regions',
   },
   climateHazards: {
     id: 'Climate hazards',
@@ -73,6 +73,8 @@ const facets = [
     isFilterable: false,
     isMulti: true,
     label: messages.geographicCoverage,
+    transnationalRegionsLabel: messages.macroTransnationalRegion,
+    countriesLabel: geographic_countries.label,
     hideActiveFilters: true,
     alwaysVisible: true,
   }),

package/src/utils.test.js

@@ -106,6 +106,36 @@ describe('general utilities', () => {
     expect(result.hasMatches).toBe(true);
   });
 
+  it('returns no parent blocks when all are excluded or content is empty', () => {
+    expect(
+      getFilteredBlocks(
+        {
+          blocks: {
+            excluded: {
+              '@type': 'group',
+              blocks: { child: { '@type': 'map' } },
+            },
+          },
+          blocks_layout: { items: ['excluded', 'stale'] },
+        },
+        'group',
+        'map',
+      ),
+    ).toEqual({
+      blocks: {},
+      blocks_layout: { items: [] },
+      keptKeys: [],
+      hasMatches: false,
+    });
+
+    expect(getFilteredBlocks({}, 'group', 'map')).toEqual({
+      blocks: {},
+      blocks_layout: { items: [] },
+      keptKeys: [],
+      hasMatches: false,
+    });
+  });
+
   it('extracts plan links and normalizes common values', () => {
     expect(extractPlanNameAndURL()).toEqual({ name: '', url: '' });
     expect(

package/theme/globals/navigator.less

@@ -129,7 +129,7 @@
     width: 100%;
     align-items: center;
     justify-content: space-between;
-    padding: 0.65em 0.5em;
+    padding: 0.65em 0.7em;
     border: 0;
     background: transparent;
     color: inherit;
@@ -879,6 +879,7 @@ body.searchlib-page .searchapp-navigatorCatalogueSearch {
   padding: 0 0.45rem;
   font-weight: 500;
   font-size: 12px;
+  cursor: default;
 
   &.sector,
   &.more {