@eeacms/volto-cca-policy 1.0.25 → 1.0.27

package/CHANGELOG.md

@@ -4,6 +4,32 @@ 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.27](https://github.com/eea/volto-cca-policy/compare/1.0.26...1.0.27) - 21 September 2026
+
+#### :bug: Bug Fixes
+
+- fix(navigator): country filtering on map view - refs #304610 [kreafox - [`2b8c52d`](https://github.com/eea/volto-cca-policy/commit/2b8c52dee15ed7a43a90eb2214db6557d7d3c964)]
+
+### [1.0.26](https://github.com/eea/volto-cca-policy/compare/1.0.25...1.0.26) - 21 September 2026
+
+#### :rocket: New Features
+
+- feat(navigator): implement TagOverflowPopup component and replace Popup in navigator [kreafox - [`42a66c8`](https://github.com/eea/volto-cca-policy/commit/42a66c826f2e19ebd0102fc05a2df5ccd1648f14)]
+
+#### :bug: Bug Fixes
+
+- fix(navigator): rename adaptation support cycle step and improve guide me layout [kreafox - [`2806e1b`](https://github.com/eea/volto-cca-policy/commit/2806e1b258dc3b1172c21a567f5d76328d855bb9)]
+- fix(navigator): update climate impacts to climate hazards - refs #304609 [kreafox - [`cf2af49`](https://github.com/eea/volto-cca-policy/commit/cf2af49836f3b5a1b33621ae29650b14fb38c078)]
+
+#### :nail_care: Enhancements
+
+- refactor: update import paths for ToolThumbnail and TagOverflowPopup components [kreafox - [`c174abe`](https://github.com/eea/volto-cca-policy/commit/c174abeafcfb8040e43cb496a3f0b10747c057a8)]
+- refactor(navigator): consolidate ToolThumbnail import paths and update related components [kreafox - [`5996b0b`](https://github.com/eea/volto-cca-policy/commit/5996b0b28814cb24c4167d9eb72cf6c632eb2a36)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`851dcd2`](https://github.com/eea/volto-cca-policy/commit/851dcd27a6fd162e723b2e6e8fe542d8ab3bc8d1)]
+
 ### [1.0.25](https://github.com/eea/volto-cca-policy/compare/1.0.24...1.0.25) - 17 September 2026
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Checkbox, Icon, Popup } from 'semantic-ui-react';
+import { Checkbox, Icon } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import ExternalLink from '@eeacms/search/components/Result/ExternalLink';
 import ResultContext from '@eeacms/search/components/Result/ResultContext';
-import ToolThumbnail from '../../theme/ToolThumbnail/ToolThumbnail';
+import TagOverflowPopup from '@eeacms/volto-cca-policy/components/theme/TagOverflowPopup';
+import ToolThumbnail from '@eeacms/volto-cca-policy/components/theme/ToolThumbnail/ToolThumbnail';
 import { getToolThumbnailUrl } from '../../theme/ToolThumbnail/utils';
 import {
   getCompareToolTitle,
@@ -78,27 +79,10 @@ const TagGroup = ({ typeLabel, values, type, maxItems }) => {
         </span>
       ))}
       {remaining > 0 && (
-        <Popup
-          className="catalogue-tag-popup"
-          content={
-            <div className="catalogue-tag-tooltip">
-              <ul>
-                {hidden.map((value) => (
-                  <li key={`${type}-hidden-${value}`}>{value}</li>
-                ))}
-              </ul>
-            </div>
-          }
-          position="bottom left"
-          trigger={
-            <button
-              type="button"
-              className={`navigator-tag ${type} more`}
-              aria-label={`${typeLabel}: ${hidden.join(', ')}`}
-            >
-              + {remaining}
-            </button>
-          }
+        <TagOverflowPopup
+          items={hidden}
+          className={`navigator-tag ${type} more`}
+          ariaLabel={`${typeLabel}: ${hidden.join(', ')}`}
         />
       )}
     </div>
@@ -107,6 +91,7 @@ const TagGroup = ({ typeLabel, values, type, maxItems }) => {
 
 const CycleElements = ({ intl, values }) => {
   const visible = values.slice(0, 3);
+  const hidden = values.slice(3);
 
   if (!visible.length) return null;
 
@@ -123,6 +108,13 @@ const CycleElements = ({ intl, values }) => {
           {value}
         </span>
       ))}
+      {hidden.length > 0 && (
+        <TagOverflowPopup
+          items={hidden}
+          className="navigator-tag cycle-element more"
+          ariaLabel={`${intl.formatMessage(messages.cycle)}: ${hidden.join(', ')}`}
+        />
+      )}
     </div>
   );
 };
@@ -141,7 +133,7 @@ const NavigatorCatalogueCardItem = (props) => {
     .join(', ');
   const toolProvider = result?._result?.tool_provider?.raw;
   const adaptationSupportCycleSteps = rawValueAsArray(
-    result.adaptation_support_cycle_step,
+    result.cca_adaptation_support_cycle_step,
   )
     .map((value) => {
       const title = value?.title || value;

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

@@ -94,7 +94,7 @@ describe('NavigatorCatalogueCardItem', () => {
           'Datasets and indicators',
         ],
       },
-      adaptation_support_cycle_step: {
+      cca_adaptation_support_cycle_step: {
         raw: [
           { title: 'Step 1: Preparing the ground' },
           { title: 'Step 2: Assessing risks' },
@@ -131,7 +131,10 @@ describe('NavigatorCatalogueCardItem', () => {
     expect(screen.getByText('Resilience')).toBeInTheDocument();
     expect(screen.getByText('Adaptation')).toBeInTheDocument();
     expect(screen.getByText('Step 1')).toBeInTheDocument();
-    expect(screen.queryByText('Step 4')).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Cycle: Step 4' }),
+    ).toHaveTextContent('+ 1');
+    expect(screen.getByText('Step 4')).toBeInTheDocument();
     expect(
       screen.getByTitle(
         'Maps and graphs, Reports and decision support, Datasets and indicators',
@@ -152,6 +155,22 @@ describe('NavigatorCatalogueCardItem', () => {
     });
   });
 
+  it('shows the cycle steps from the field used by the catalogue filter', () => {
+    renderCard({
+      title: 'Climate planning tool',
+      href: 'https://example.com/tool',
+      cca_adaptation_support_cycle_step: {
+        raw: ['Step 2: Assessing risks'],
+      },
+      adaptation_support_cycle_step: {
+        raw: [{ title: 'Step 1: Preparing the ground' }],
+      },
+    });
+
+    expect(screen.getByText('Step 2')).toBeInTheDocument();
+    expect(screen.queryByText('Step 1')).not.toBeInTheDocument();
+  });
+
   it('renders sparse results and disables comparison without a UID', () => {
     useCompareTools.mockReturnValue({
       isSelected: true,

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

@@ -22,7 +22,9 @@ import {
   getColorForCount,
   normalizeCountryName,
   buildCountryCounts,
+  filterCountryCounts,
   mapLegendItems,
+  setCountryFilter,
 } from './utils';
 
 const messages = defineMessages({
@@ -147,10 +149,7 @@ const NavigatorCatalogueMapViewInner = (props) => {
   // Handler: replace country filter + switch to list view
   const handleExploreTools = React.useCallback(
     (countryName) => {
-      const field = 'cca_geographic_countries.keyword';
-      // Clear existing country filter, then set the new one
-      searchContext?.removeFilter(field);
-      searchContext?.addFilter(field, countryName, 'any');
+      setCountryFilter(searchContext, countryName);
       // Switch to listing view
       views.setActiveViewId('listing');
     },
@@ -159,8 +158,12 @@ const NavigatorCatalogueMapViewInner = (props) => {
 
   // Build lookup: countryName -> count
   const countryCounts = React.useMemo(
-    () => buildCountryCounts(searchContext?.facets),
-    [searchContext?.facets],
+    () =>
+      filterCountryCounts(
+        buildCountryCounts(searchContext?.facets),
+        searchContext?.filters,
+      ),
+    [searchContext?.facets, searchContext?.filters],
   );
 
   const [tileWMSSources, setTileWMSSources] = React.useState(null);

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

@@ -3,7 +3,9 @@ import {
   getColorForCount,
   normalizeCountryName,
   buildCountryCounts,
+  filterCountryCounts,
   mapLegendItems,
+  setCountryFilter,
 } from './utils';
 
 describe('getColorForCount', () => {
@@ -135,6 +137,54 @@ describe('buildCountryCounts', () => {
   });
 });
 
+describe('setCountryFilter', () => {
+  it('replaces the current country selection', () => {
+    const searchContext = {
+      setFilter: jest.fn(),
+      addFilter: jest.fn(),
+      removeFilter: jest.fn(),
+    };
+
+    setCountryFilter(searchContext, 'Germany');
+
+    expect(searchContext.setFilter).toHaveBeenCalledWith(
+      'cca_geographic_countries.keyword',
+      'Germany',
+      'any',
+    );
+    expect(searchContext.addFilter).not.toHaveBeenCalled();
+    expect(searchContext.removeFilter).not.toHaveBeenCalled();
+  });
+});
+
+describe('filterCountryCounts', () => {
+  const countryCounts = { Spain: 3, France: 7, Germany: 5 };
+
+  it('shows all country counts without a country filter', () => {
+    expect(filterCountryCounts(countryCounts, [])).toEqual(countryCounts);
+  });
+
+  it('shows only countries selected in the country filter', () => {
+    expect(
+      filterCountryCounts(countryCounts, [
+        {
+          field: 'cca_geographic_countries.keyword',
+          values: ['Spain'],
+          type: 'any',
+        },
+      ]),
+    ).toEqual({ Spain: 3 });
+  });
+
+  it('ignores filters for other fields', () => {
+    expect(
+      filterCountryCounts(countryCounts, [
+        { field: 'cca_climate_impacts.keyword', values: ['Flooding'] },
+      ]),
+    ).toEqual(countryCounts);
+  });
+});
+
 describe('mapLegendItems', () => {
   it('has 5 legend items', () => {
     expect(mapLegendItems).toHaveLength(5);

package/src/components/Search/NavigatorCatalogue/utils.js

@@ -47,6 +47,28 @@ export const buildCountryCounts = (facets) => {
   return counts;
 };
 
+export const filterCountryCounts = (countryCounts, filters) => {
+  const selectedCountries =
+    filters?.find(({ field }) => field === 'cca_geographic_countries.keyword')
+      ?.values || [];
+
+  if (!selectedCountries.length) return countryCounts;
+
+  return Object.fromEntries(
+    selectedCountries
+      .filter((country) => countryCounts[country] !== undefined)
+      .map((country) => [country, countryCounts[country]]),
+  );
+};
+
+export const setCountryFilter = (searchContext, countryName) => {
+  searchContext?.setFilter(
+    'cca_geographic_countries.keyword',
+    countryName,
+    'any',
+  );
+};
+
 /**
  * Legend items for the map view
  */

package/src/components/Search/NavigatorGuide/NavigatorGuideContentView.jsx

@@ -6,10 +6,11 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Button, Checkbox, Icon, Loader, Message } from 'semantic-ui-react';
 import URLManager from '@elastic/search-ui/lib/cjs/URLManager';
 import { useSearchContext } from '@eeacms/search/lib/hocs';
-import ToolThumbnail from '../../theme/ToolThumbnail/ToolThumbnail';
+import ToolThumbnail from '@eeacms/volto-cca-policy/components/theme/ToolThumbnail/ToolThumbnail';
 import guideSteps from '../../../search/navigator_guide/guideSteps';
 import { navigatorGuideStepAtom } from '../../../state';
-import { mergeGuideOptions } from './utils';
+import { mergeGuideOptions, sortAdaptationSteps } from './utils';
+import { rawValueAsArray } from '../NavigatorCatalogue/utils';
 import useGuideFacetOptions from './useGuideFacetOptions';
 import { getNavigatorCataloguePageURL } from '../../Search/NavigatorCatalogue/utils';
 
@@ -95,7 +96,7 @@ const isStepSelected = (filters, field) =>
 
 const previewTagTypes = {
   adaptationSectors: 'sector',
-  climateImpacts: 'hazard',
+  climateHazards: 'hazard',
   adaptationStage: 'adaptation-stage',
   coverage: 'coverage',
 };
@@ -130,31 +131,39 @@ const NavigatorGuideContentView = ({ appConfig }) => {
   const hasSelections = steps.some(({ field }) =>
     isStepSelected(filters, field),
   );
-  const options = mergeGuideOptions(
+  const mergedOptions = mergeGuideOptions(
     allFacetOptions?.[step?.field],
     getFacetOptions(facets, step?.field),
     selectedValues,
     hasSelections,
   );
+  const options =
+    step?.id === 'adaptationStage'
+      ? sortAdaptationSteps(mergedOptions)
+      : mergedOptions;
   const isLastStep = activeStep === steps.length - 1;
   const selectedStepLabels = steps
     .filter(({ field }) => isStepSelected(filters, field))
     .map(({ label }) =>
       intl.formatMessage(label).toLocaleLowerCase(currentLang),
     );
-  const selectedPreviewTags = steps.flatMap((item) => {
-    const values =
-      (filters || []).find((filter) => filter.field === item.field)?.values ||
-      [];
+  const selectedPreviewTags = (result) =>
+    steps.flatMap((item) => {
+      const values =
+        (filters || []).find((filter) => filter.field === item.field)?.values ||
+        [];
 
-    return values.map((value) => ({
-      label: item.id === 'adaptationStage' ? value.split(':')[0] : value,
-      type: previewTagTypes[item.id],
-    }));
-  });
-  const visiblePreviewTags = selectedPreviewTags.slice(0, 3);
-  const remainingPreviewTags =
-    selectedPreviewTags.length - visiblePreviewTags.length;
+      const resultValues = rawValueAsArray(
+        result[item.field.replace('.keyword', '')],
+      ).map((value) => value?.title || value);
+
+      return values
+        .filter((value) => resultValues.includes(value))
+        .map((value) => ({
+          label: item.id === 'adaptationStage' ? value.split(':')[0] : value,
+          type: previewTagTypes[item.id],
+        }));
+    });
 
   React.useEffect(() => {
     if (storedActiveStep !== activeStep) {
@@ -204,88 +213,94 @@ const NavigatorGuideContentView = ({ appConfig }) => {
 
       <div className="navigator-guide-layout">
         <section className="navigator-guide-wizard">
-          <div className="navigator-guide-progress">
-            {steps.map((item, index) => (
-              <React.Fragment key={item.id}>
-                <Button
-                  className={`navigator-guide-progress-step${
-                    index === activeStep ? ' active' : ''
-                  }${index < activeStep ? ' completed' : ''}`}
-                  aria-current={index === activeStep ? 'step' : undefined}
-                  onClick={() => setActiveStep(index)}
-                >
-                  <span>
-                    {isStepSelected(filters, item.field) ? (
-                      <Icon className="ri-check-line" />
-                    ) : (
-                      index + 1
+          <div className="navigator-guide-wizard-content">
+            <div className="navigator-guide-progress-wrapper">
+              <div className="navigator-guide-progress">
+                {steps.map((item, index) => (
+                  <React.Fragment key={item.id}>
+                    <Button
+                      className={`navigator-guide-progress-step${
+                        index === activeStep ? ' active' : ''
+                      }${index < activeStep ? ' completed' : ''}`}
+                      aria-current={index === activeStep ? 'step' : undefined}
+                      onClick={() => setActiveStep(index)}
+                    >
+                      <span>
+                        {isStepSelected(filters, item.field) ? (
+                          <Icon className="ri-check-line" />
+                        ) : (
+                          index + 1
+                        )}
+                      </span>
+                      {intl.formatMessage(item.label)}
+                    </Button>
+                    {index < steps.length - 1 && (
+                      <span
+                        className={`navigator-guide-progress-connector${
+                          index < activeStep ? ' completed' : ''
+                        }`}
+                        aria-hidden="true"
+                      />
                     )}
-                  </span>
-                  {intl.formatMessage(item.label)}
-                </Button>
-                {index < steps.length - 1 && (
-                  <span
-                    className={`navigator-guide-progress-connector${
-                      index < activeStep ? ' completed' : ''
-                    }`}
-                    aria-hidden="true"
-                  />
-                )}
-              </React.Fragment>
-            ))}
-          </div>
-          <div
-            className="navigator-guide-progress-bar"
-            role="progressbar"
-            aria-valuemin="1"
-            aria-valuemax={steps.length}
-            aria-valuenow={activeStep + 1}
-          >
-            <div
-              className="navigator-guide-progress-bar-fill"
-              style={{ width: `${((activeStep + 1) / steps.length) * 100}%` }}
-            />
-          </div>
+                  </React.Fragment>
+                ))}
+              </div>
+              <div
+                className="navigator-guide-progress-bar"
+                role="progressbar"
+                aria-valuemin="1"
+                aria-valuemax={steps.length}
+                aria-valuenow={activeStep + 1}
+              >
+                <div
+                  className="navigator-guide-progress-bar-fill"
+                  style={{
+                    width: `${((activeStep + 1) / steps.length) * 100}%`,
+                  }}
+                />
+              </div>
+              <div className="navigator-guide-step-meta">
+                <span className="navigator-guide-step-number">
+                  {intl.formatMessage(messages.stepProgress, {
+                    current: activeStep + 1,
+                    total: steps.length,
+                  })}
+                </span>
+                <span>{intl.formatMessage(messages.selectAllThatApply)}</span>
+              </div>
+            </div>
 
-          <div className="navigator-guide-step-meta">
-            <span className="navigator-guide-step-number">
-              {intl.formatMessage(messages.stepProgress, {
-                current: activeStep + 1,
-                total: steps.length,
-              })}
-            </span>
-            <span>{intl.formatMessage(messages.selectAllThatApply)}</span>
-          </div>
-          <h3>{intl.formatMessage(step.title)}</h3>
-          {step.description && <p>{intl.formatMessage(step.description)}</p>}
+            <h3>{intl.formatMessage(step.title)}</h3>
+            {step.description && <p>{intl.formatMessage(step.description)}</p>}
 
-          {isLoading ? (
-            <div className="navigator-guide-options-loading">
-              <Loader active inline />
-            </div>
-          ) : options.length > 0 ? (
-            <div className="navigator-guide-options">
-              {options.map((option) => (
-                <label
-                  key={option.value}
-                  className={`navigator-guide-option${
-                    selectedValues.includes(option.value) ? ' selected' : ''
-                  }${option.disabled ? ' disabled' : ''}`}
-                  aria-disabled={option.disabled || undefined}
-                >
-                  <Checkbox
-                    checked={selectedValues.includes(option.value)}
-                    disabled={option.disabled}
-                    onChange={() => toggleValue(option.value)}
-                  />
-                  <span>{option.value}</span>
-                  <small>{option.count}</small>
-                </label>
-              ))}
-            </div>
-          ) : (
-            <Message>{intl.formatMessage(messages.noOptions)}</Message>
-          )}
+            {isLoading ? (
+              <div className="navigator-guide-options-loading">
+                <Loader active inline />
+              </div>
+            ) : options.length > 0 ? (
+              <div className="navigator-guide-options">
+                {options.map((option) => (
+                  <label
+                    key={option.value}
+                    className={`navigator-guide-option${
+                      selectedValues.includes(option.value) ? ' selected' : ''
+                    }${option.disabled ? ' disabled' : ''}`}
+                    aria-disabled={option.disabled || undefined}
+                  >
+                    <Checkbox
+                      checked={selectedValues.includes(option.value)}
+                      disabled={option.disabled}
+                      onChange={() => toggleValue(option.value)}
+                    />
+                    <span>{option.value}</span>
+                    <small>{option.count}</small>
+                  </label>
+                ))}
+              </div>
+            ) : (
+              <Message>{intl.formatMessage(messages.noOptions)}</Message>
+            )}
+          </div>
 
           <div className="navigator-guide-actions">
             <Button
@@ -346,53 +361,56 @@ const NavigatorGuideContentView = ({ appConfig }) => {
               <div className="navigator-guide-preview-results">
                 {(results || [])
                   .slice(0, appConfig.previewResultsLimit)
-                  .map((result) => (
-                    <div
-                      className="navigator-guide-preview-result"
-                      key={result._original?._id || result.href}
-                    >
-                      <ToolThumbnail
-                        result={result}
-                        fallbackIcon="ri-stack-line"
-                      />
-                      <div className="navigator-guide-preview-result-content">
-                        <small
-                          className="navigator-tool-provider"
-                          title={result?._result?.tool_provider?.raw}
-                        >
-                          {result?._result?.tool_provider?.raw}
-                        </small>
-                        <a
-                          href={result.href}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="navigator-guide-preview-result-title"
-                          title={result.title}
-                        >
-                          <h5>{result.title}</h5>
-                        </a>
-                        {selectedPreviewTags.length > 0 && (
-                          <div className="navigator-guide-preview-tags">
-                            {visiblePreviewTags.map(
-                              ({ label, type }, index) => (
+                  .map((result) => {
+                    const tags = selectedPreviewTags(result);
+                    const visibleTags = tags.slice(0, 3);
+                    const remainingTags = tags.length - visibleTags.length;
+                    return (
+                      <div
+                        className="navigator-guide-preview-result"
+                        key={result._original?._id || result.href}
+                      >
+                        <ToolThumbnail
+                          result={result}
+                          fallbackIcon="ri-stack-line"
+                        />
+                        <div className="navigator-guide-preview-result-content">
+                          <small
+                            className="navigator-tool-provider"
+                            title={result?._result?.tool_provider?.raw}
+                          >
+                            {result?._result?.tool_provider?.raw}
+                          </small>
+                          <a
+                            href={result.href}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="navigator-guide-preview-result-title"
+                            title={result.title}
+                          >
+                            <h5>{result.title}</h5>
+                          </a>
+                          {tags.length > 0 && (
+                            <div className="navigator-guide-preview-tags">
+                              {visibleTags.map(({ label, type }, index) => (
                                 <span
                                   className={`navigator-tag ${type}`}
                                   key={`${type}-${label}-${index}`}
                                 >
                                   {label}
                                 </span>
-                              ),
-                            )}
-                            {remainingPreviewTags > 0 && (
-                              <span className="navigator-guide-preview-tag-more">
-                                + {remainingPreviewTags}
-                              </span>
-                            )}
-                          </div>
-                        )}
+                              ))}
+                              {remainingTags > 0 && (
+                                <span className="navigator-guide-preview-tag-more">
+                                  + {remainingTags}
+                                </span>
+                              )}
+                            </div>
+                          )}
+                        </div>
                       </div>
-                    </div>
-                  ))}
+                    );
+                  })}
               </div>
               <Button
                 labelPosition="right"