@eeacms/volto-cca-policy 1.0.17 → 1.0.19

package/CHANGELOG.md

@@ -4,6 +4,30 @@ 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.19](https://github.com/eea/volto-cca-policy/compare/1.0.18...1.0.19) - 10 September 2026
+
+#### :rocket: New Features
+
+- feat: enhance comparison table with new output type and adaptation support cycle step features [kreafox - [`40e56ad`](https://github.com/eea/volto-cca-policy/commit/40e56adb144e283ce18bf36e87db5c36f286ab9c)]
+- feat: enhance CompareToolsView with new comparison options and styling [kreafox - [`a912b50`](https://github.com/eea/volto-cca-policy/commit/a912b5006af55aefbd024b494cd9c810bfb22684)]
+
+#### :nail_care: Enhancements
+
+- change: comparison table export by removing unused fields and improve export functionality [kreafox - [`f9ee0f7`](https://github.com/eea/volto-cca-policy/commit/f9ee0f74d02153b9a233ef13264c026503534038)]
+- change: update comparison options handling and enhance tests for adaptation support cycle steps [kreafox - [`fc2736b`](https://github.com/eea/volto-cca-policy/commit/fc2736b293e938b3e13367d96d3c8158c5435f49)]
+
+#### :hammer_and_wrench: Others
+
+- test: improve test readability and structure in Compare Tools utilities [kreafox - [`b6fc550`](https://github.com/eea/volto-cca-policy/commit/b6fc550db8f3ddbadf093c56596968caf94900ad)]
+### [1.0.18](https://github.com/eea/volto-cca-policy/compare/1.0.17...1.0.18) - 10 September 2026
+
+#### :rocket: New Features
+
+- feat: implement ToolThumbnail component and integrate it across various views [kreafox - [`edd3087`](https://github.com/eea/volto-cca-policy/commit/edd3087830076efa968ef42d1ec99efa42010cd5)]
+
+#### :hammer_and_wrench: Others
+
+- test: update image display style assertions in tests for NavigatorCatalogueCardItem and ToolThumbnail components [kreafox - [`24e1437`](https://github.com/eea/volto-cca-policy/commit/24e14375674dca5e73d8919eb4578d1c184db21a)]
 ### [1.0.17](https://github.com/eea/volto-cca-policy/compare/1.0.16...1.0.17) - 8 September 2026
 
 #### :rocket: New Features

package/package.json

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

@@ -3,6 +3,8 @@ import { Checkbox, Icon, Popup } 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 { getToolThumbnailUrl } from '../../theme/ToolThumbnail/utils';
 import {
   getCompareToolTitle,
   getCompareToolUid,
@@ -136,6 +138,7 @@ const NavigatorCatalogueCardItem = (props) => {
     uid: getCompareToolUid(result),
     title: getCompareToolTitle(result),
     href: result.href,
+    image: getToolThumbnailUrl(result),
   };
   const { isSelected, isLimitReached, setSelected } =
     useCompareTools(compareTool);
@@ -146,9 +149,7 @@ const NavigatorCatalogueCardItem = (props) => {
 
   return (
     <div className={`navigator-catalogue-item${isSelected ? ' selected' : ''}`}>
-      <div className="navigator-tool-icon large" aria-hidden="true">
-        <Icon className="ri-file-line" />
-      </div>
+      <ToolThumbnail result={result} size="large" />
 
       <div className="catalogue-item-main">
         <div className="catalogue-item-top">

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

@@ -76,6 +76,7 @@ describe('NavigatorCatalogueCardItem', () => {
       cca_uid: { raw: 'tool-uid' },
       title: 'Climate planning tool',
       href: 'https://example.com/tool',
+      image: '/uploaded-tool-thumb.jpg',
       publication_date: { raw: '2026-07-24' },
       cca_adaptation_sectors: {
         raw: ['Agriculture', 'Water', 'Health', 'Energy'],
@@ -138,6 +139,7 @@ describe('NavigatorCatalogueCardItem', () => {
       uid: 'tool-uid',
       title: 'Climate planning tool',
       href: 'https://example.com/tool',
+      image: '/uploaded-tool-thumb.jpg',
     });
   });
 
@@ -170,4 +172,65 @@ describe('NavigatorCatalogueCardItem', () => {
     expect(screen.getByText('Water')).toBeInTheDocument();
     expect(screen.queryByText('License:')).not.toBeInTheDocument();
   });
+
+  describe('thumbnail rendering and fallback', () => {
+    it('renders thumbnail image and smoothly transitions from placeholder on load', () => {
+      const { container } = renderCard({
+        title: 'Tool with image',
+        href: '/tools/my-tool',
+        image: { scales: { thumb: { download: '/uploaded-thumb.jpg' } } },
+      });
+
+      const img = container.querySelector('.navigator-tool-icon img');
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('src', '/uploaded-thumb.jpg');
+      expect(img.parentElement).toHaveClass('navigator-tool-icon', 'large');
+      expect(img).toHaveStyle({ display: 'none' });
+      expect(
+        container.querySelector('.navigator-tool-icon .ri-file-line'),
+      ).toBeInTheDocument();
+
+      // Fire load event on image
+      fireEvent.load(img);
+
+      expect(img.style.display).toBe('');
+      expect(
+        container.querySelector('.navigator-tool-icon .ri-file-line'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('falls back to placeholder icon when image fails to load', () => {
+      const { container } = renderCard({
+        title: 'Tool with broken image',
+        href: '/tools/broken-tool',
+      });
+
+      const img = container.querySelector('.navigator-tool-icon img');
+      expect(img).toBeInTheDocument();
+
+      // Fire error event on image (e.g. 404 from backend)
+      fireEvent.error(img);
+
+      expect(
+        container.querySelector('.navigator-tool-icon img'),
+      ).not.toBeInTheDocument();
+      expect(
+        container.querySelector('.navigator-tool-icon .ri-file-line'),
+      ).toBeInTheDocument();
+    });
+
+    it('renders placeholder icon directly when item has no image or href', () => {
+      const { container } = renderCard({
+        title: 'Tool without image',
+        image: null,
+      });
+
+      expect(
+        container.querySelector('.navigator-tool-icon img'),
+      ).not.toBeInTheDocument();
+      expect(
+        container.querySelector('.navigator-tool-icon .ri-file-line'),
+      ).toBeInTheDocument();
+    });
+  });
 });

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

@@ -124,12 +124,6 @@ export const exportComparisonTable = (tools, getToolField) => {
         formatFunctionalityScore(getToolField(tool, 'functionality')),
       ),
     ],
-    [
-      'Spatial scale',
-      ...tools.map((tool) =>
-        arrayFieldToString(getToolField(tool, 'cca_geographical_scale')),
-      ),
-    ],
     [
       'Output type',
       ...tools.map((tool) =>
@@ -144,12 +138,6 @@ export const exportComparisonTable = (tools, getToolField) => {
         ),
       ),
     ],
-    [
-      'Sector',
-      ...tools.map((tool) =>
-        arrayFieldToString(getToolField(tool, 'cca_adaptation_sectors')),
-      ),
-    ],
   ];
 
   downloadCsv('navigator-catalogue-comparison.csv', rows);

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

@@ -104,10 +104,8 @@ describe('Navigator Catalogue utilities', () => {
         values: {
           accessibility_and_usability: 'High',
           functionality: 5,
-          cca_geographical_scale: ['Local'],
           cca_type_of_outputs: ['Maps'],
           cca_adaptation_support_cycle_step: ['Step 1'],
-          cca_adaptation_sectors: ['Water'],
         },
       },
     ];
@@ -118,9 +116,7 @@ describe('Navigator Catalogue utilities', () => {
     expect(csv).toContain('"Criteria","Tool A"');
     expect(csv).toContain('"Usability","High"');
     expect(csv).toContain('"Functionality","5/6"');
-    expect(csv).toContain('"Spatial scale","Local"');
     expect(csv).toContain('"Output type","Maps"');
     expect(csv).toContain('"Adaptation support cycle step","Step 1"');
-    expect(csv).toContain('"Sector","Water"');
   });
 });

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

@@ -6,6 +6,7 @@ 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 guideSteps from '../../../search/navigator_guide/guideSteps';
 import { navigatorGuideStepAtom } from '../../../state';
 import { mergeGuideOptions } from './utils';
@@ -350,12 +351,10 @@ const NavigatorGuideContentView = ({ appConfig }) => {
                       className="navigator-guide-preview-result"
                       key={result._original?._id || result.href}
                     >
-                      <div
-                        className="navigator-tool-icon medium"
-                        aria-hidden="true"
-                      >
-                        <Icon className="ri-stack-line" />
-                      </div>
+                      <ToolThumbnail
+                        result={result}
+                        fallbackIcon="ri-stack-line"
+                      />
                       <div className="navigator-guide-preview-result-content">
                         <small
                           className="navigator-tool-provider"

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { useAtom } from 'jotai';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { useSearchContext } from '@eeacms/search/lib/hocs';
+import NavigatorGuideContentView from './NavigatorGuideContentView';
+import useGuideFacetOptions from './useGuideFacetOptions';
+
+jest.mock('jotai', () => ({
+  ...jest.requireActual('jotai'),
+  useAtom: jest.fn(),
+}));
+jest.mock('react-redux', () => ({ useSelector: jest.fn() }));
+jest.mock('react-router-dom', () => ({ useHistory: jest.fn() }));
+jest.mock('@eeacms/search/lib/hocs', () => ({ useSearchContext: jest.fn() }));
+jest.mock('./useGuideFacetOptions', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const renderGuide = (result) => {
+  useSearchContext.mockReturnValue({
+    filters: [{ field: 'cca_adaptation_sectors.keyword', values: ['Water'] }],
+    facets: {},
+    results: [result],
+    totalResults: 1,
+    isLoading: false,
+  });
+  return render(
+    <IntlProvider locale="en">
+      <NavigatorGuideContentView appConfig={{ previewResultsLimit: 3 }} />
+    </IntlProvider>,
+  );
+};
+
+describe('NavigatorGuideContentView thumbnails', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useAtom.mockReturnValue([0, jest.fn()]);
+    useSelector.mockReturnValue('en');
+    useHistory.mockReturnValue({ push: jest.fn() });
+    useGuideFacetOptions.mockReturnValue({});
+  });
+
+  it('shows the uploaded result image after loading, with a stack icon while loading', () => {
+    const { container } = renderGuide({
+      title: 'Guide tool',
+      href: '/tools/guide-tool',
+      image: { scales: { thumb: { download: '/uploaded-guide-thumb.jpg' } } },
+    });
+    const thumbnail = container.querySelector('.navigator-tool-icon');
+    const img = thumbnail.querySelector('img');
+
+    expect(thumbnail).toHaveClass('medium');
+    expect(thumbnail).toHaveAttribute('aria-hidden', 'true');
+    expect(img).toHaveAttribute('src', '/uploaded-guide-thumb.jpg');
+    expect(img).toHaveStyle({ display: 'none' });
+    expect(thumbnail.querySelector('.ri-stack-line')).toBeInTheDocument();
+
+    fireEvent.load(img);
+
+    expect(img).not.toHaveStyle({ display: 'none' });
+    expect(thumbnail.querySelector('.ri-stack-line')).not.toBeInTheDocument();
+  });
+
+  it('falls back to the stack icon when the image fails', () => {
+    const { container } = renderGuide({
+      title: 'Guide tool',
+      href: '/tools/guide-tool',
+      image: '/broken.jpg',
+    });
+    const thumbnail = container.querySelector('.navigator-tool-icon');
+
+    fireEvent.error(thumbnail.querySelector('img'));
+
+    expect(thumbnail.querySelector('img')).not.toBeInTheDocument();
+    expect(thumbnail.querySelector('.ri-stack-line')).toBeInTheDocument();
+  });
+
+  it.each([null, false])('shows the stack icon for image: %s', (image) => {
+    const { container } = renderGuide({
+      title: 'Guide tool',
+      href: '/tools/guide-tool',
+      image,
+    });
+    const thumbnail = container.querySelector('.navigator-tool-icon');
+
+    expect(thumbnail.querySelector('img')).not.toBeInTheDocument();
+    expect(thumbnail.querySelector('.ri-stack-line')).toBeInTheDocument();
+  });
+});

package/src/components/theme/CompareTools/CompareToolsPanel.jsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { Icon, Button } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
+import ToolThumbnail from '../ToolThumbnail/ToolThumbnail';
 import {
   MAX_COMPARE_TOOLS,
   compareToolsAtom,
@@ -89,9 +90,7 @@ export const CompareToolsPanel = () => {
         <div className="compare-panel-tools">
           {effectiveSelectedTools.map((tool) => (
             <div key={tool.uid} className="compare-panel-tool">
-              <span className="navigator-tool-icon small" aria-hidden="true">
-                <Icon className="ri-file-line" />
-              </span>
+              <ToolThumbnail result={tool} size="small" />
               <span className="compare-panel-tool-title">{tool.title}</span>
               <Button
                 className="compare-panel-tool-clear"

package/src/components/theme/CompareTools/CompareToolsPanel.test.jsx

@@ -101,4 +101,58 @@ describe('CompareToolsPanel', () => {
     fireEvent.click(screen.getByText('Clear all'));
     expect(screen.queryByText('Compare tools')).not.toBeInTheDocument();
   });
+
+  it('shows the selected tool thumbnail after loading and preserves empty slot icons', () => {
+    const { container } = renderPanel([
+      {
+        uid: 'one',
+        title: 'Tool one',
+        href: '/tools/one',
+        image: '/uploaded-tool-thumb.jpg',
+      },
+    ]);
+    const thumbnail = container.querySelector(
+      '.compare-panel-tool:not(.placeholder) .navigator-tool-icon',
+    );
+    const img = thumbnail.querySelector('img');
+
+    expect(thumbnail).toHaveClass('small');
+    expect(img).toHaveAttribute('src', '/uploaded-tool-thumb.jpg');
+    expect(img).toHaveStyle({ display: 'none' });
+    expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+    expect(
+      container.querySelectorAll('.placeholder .ri-add-line'),
+    ).toHaveLength(3);
+    expect(container.querySelector('.placeholder img')).not.toBeInTheDocument();
+
+    fireEvent.load(img);
+
+    expect(img).not.toHaveStyle({ display: 'none' });
+    expect(thumbnail.querySelector('.ri-file-line')).not.toBeInTheDocument();
+  });
+
+  it('uses the URL of an older saved selection and falls back on image error', () => {
+    const { container } = renderPanel([
+      { uid: 'one', title: 'Tool one', href: '/tools/one' },
+    ]);
+    const thumbnail = container.querySelector('.navigator-tool-icon');
+    const img = thumbnail.querySelector('img');
+
+    expect(img).toHaveAttribute('src', '/tools/one/@@images/image/thumb');
+
+    fireEvent.error(img);
+
+    expect(thumbnail.querySelector('img')).not.toBeInTheDocument();
+    expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+  });
+
+  it.each([null, false])('shows the file icon for image: %s', (image) => {
+    const { container } = renderPanel([
+      { uid: 'one', title: 'Tool one', href: '/tools/one', image },
+    ]);
+    const thumbnail = container.querySelector('.navigator-tool-icon');
+
+    expect(thumbnail.querySelector('img')).not.toBeInTheDocument();
+    expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+  });
 });