@eeacms/volto-cca-policy 1.0.16 → 1.0.18

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

@@ -17,6 +17,7 @@ import { GET_BREADCRUMBS } from '@plone/volto/constants/ActionTypes';
 import config from '@plone/volto/registry';
 import { defineMessages, useIntl } from 'react-intl';
 import BannerTitle from '../BannerTitle/BannerTitle';
+import ToolThumbnail from '../ToolThumbnail/ToolThumbnail';
 import {
   MAX_COMPARE_TOOLS,
   compareToolsAtom,
@@ -28,7 +29,7 @@ import {
   asArray,
   exportComparisonTable,
   formatFunctionalityScore,
-  getLocalizedLandingPageURL,
+  getNavigatorCataloguePageURL,
 } from '../../Search/NavigatorCatalogue/utils';
 
 const messages = defineMessages({
@@ -99,10 +100,6 @@ const messages = defineMessages({
     id: 'Adaptation support cycle step',
     defaultMessage: 'Adaptation support cycle step',
   },
-  sector: {
-    id: 'Sector',
-    defaultMessage: 'Sector',
-  },
 });
 
 const getToolField = (tool, field) =>
@@ -111,6 +108,25 @@ const getToolField = (tool, field) =>
 const getToolFieldDisplay = (tool, field) =>
   asArray(getToolField(tool, field)).join(', ') || '—';
 
+const MetadataTags = ({ value }) => {
+  const intl = useIntl();
+  const items = asArray(value)
+    .map((item) => item?.title || item?.token || item)
+    .filter(Boolean);
+
+  return items.length ? (
+    <div className="metadata-tags">
+      {items.map((item, index) => (
+        <span className="metadata-tag" key={`${item}-${index}`}>
+          {intl.formatMessage({ id: item, defaultMessage: item })}
+        </span>
+      ))}
+    </div>
+  ) : (
+    '—'
+  );
+};
+
 const FieldValueList = ({ value, label }) => {
   const values = asArray(value);
 
@@ -205,8 +221,7 @@ const CompareToolsView = () => {
     [location.search],
   );
   const registry = config.settings.searchlib;
-  const appConfig = registry.searchui.navigatorCatalogueSearch;
-  const landingPageURL = getLocalizedLandingPageURL(appConfig, currentLang);
+  const landingPageURL = getNavigatorCataloguePageURL(currentLang);
   const compareToolsTitle = intl.formatMessage(messages.compareTools);
   const returnURL =
     location.state?.returnURL ||
@@ -368,12 +383,7 @@ const CompareToolsView = () => {
                   <Table.HeaderCell key={tool.id}>
                     <div className="compare-tool-header">
                       <div className="compare-tool-title-row">
-                        <div
-                          className="navigator-tool-icon medium"
-                          aria-hidden="true"
-                        >
-                          <Icon className="ri-file-line" />
-                        </div>
+                        <ToolThumbnail result={tool.result} />
                         <div className="compare-tool-title" title={tool.title}>
                           {tool.title}
                         </div>
@@ -462,7 +472,9 @@ const CompareToolsView = () => {
                 </Table.Cell>
                 {visibleTools.map((tool) => (
                   <Table.Cell key={`output-type-${tool.id}`}>
-                    {getToolFieldDisplay(tool, 'cca_type_of_outputs')}
+                    <MetadataTags
+                      value={getToolField(tool, 'cca_type_of_outputs')}
+                    />
                   </Table.Cell>
                 ))}
               </Table.Row>
@@ -488,23 +500,6 @@ const CompareToolsView = () => {
                   </Table.Cell>
                 ))}
               </Table.Row>
-              <Table.Row>
-                <Table.Cell as="th" scope="row">
-                  <div className="compare-criteria">
-                    <div className="compare-criteria-title">
-                      {intl.formatMessage(messages.sector)}
-                    </div>
-                  </div>
-                </Table.Cell>
-                {visibleTools.map((tool) => (
-                  <Table.Cell key={`sector-${tool.id}`}>
-                    <FieldValueList
-                      label={intl.formatMessage(messages.sector)}
-                      value={getToolField(tool, 'cca_adaptation_sectors')}
-                    />
-                  </Table.Cell>
-                ))}
-              </Table.Row>
             </Table.Body>
           </Table>
         )}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { useAtom } from 'jotai';
 import { useDispatch, useSelector } from 'react-redux';
@@ -41,9 +41,7 @@ jest.mock('@plone/volto/registry', () => ({
     settings: {
       searchlib: {
         searchui: {
-          navigatorCatalogueSearch: {
-            landingPageURL: '/en/navigator/tool-catalogue',
-          },
+          navigatorCatalogueSearch: {},
         },
       },
     },
@@ -58,7 +56,7 @@ jest.mock('./utils', () => ({
   getPathname: (url) => url?.split('?')[0] || '',
 }));
 
-describe('CompareToolsView accessibility', () => {
+describe('CompareToolsView', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     useAtom.mockReturnValue([[], jest.fn()]);
@@ -76,18 +74,19 @@ describe('CompareToolsView accessibility', () => {
         cca_uid: { raw: 'one' },
         title: 'Tool one',
         href: '/tool-one',
+        image: {
+          scales: { thumb: { download: '/uploaded-compare-thumb.jpg' } },
+        },
         functionality: { raw: 4 },
         cca_adaptation_support_cycle_step: {
           raw: [{ title: 'Assessing risks' }, { title: 'Monitoring' }],
         },
-        cca_adaptation_sectors: {
-          raw: [{ title: 'Agriculture' }, { title: 'Water management' }],
-        },
       },
       {
         cca_uid: { raw: 'two' },
         title: 'Tool two',
         href: '/tool-two',
+        image: null,
       },
     ]);
   });
@@ -125,9 +124,45 @@ describe('CompareToolsView accessibility', () => {
     expect(adaptationSteps).toHaveTextContent('Assessing risks');
     expect(adaptationSteps).toHaveTextContent('Monitoring');
     expect(adaptationSteps.children).toHaveLength(2);
-    const sectors = screen.getByRole('list', { name: 'Sector' });
-    expect(sectors).toHaveTextContent('Agriculture');
-    expect(sectors).toHaveTextContent('Water management');
-    expect(sectors.children).toHaveLength(2);
+  });
+
+  it('shows the uploaded tool result image and keeps the file icon for a missing image', async () => {
+    render(
+      <IntlProvider locale="en">
+        <CompareToolsView />
+      </IntlProvider>,
+    );
+    const table = await screen.findByRole('table', { name: 'Compare tools' });
+    const [thumbnail, missingThumbnail] = table.querySelectorAll(
+      '.navigator-tool-icon',
+    );
+    const img = thumbnail.querySelector('img');
+
+    expect(thumbnail).toHaveClass('medium');
+    expect(img).toHaveAttribute('src', '/uploaded-compare-thumb.jpg');
+    expect(img).toHaveStyle({ display: 'none' });
+    expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+    expect(missingThumbnail.querySelector('img')).not.toBeInTheDocument();
+    expect(missingThumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+
+    fireEvent.load(img);
+
+    expect(img.style.display).toBe('');
+    expect(thumbnail.querySelector('.ri-file-line')).not.toBeInTheDocument();
+  });
+
+  it('falls back to the file icon when the image fails', async () => {
+    render(
+      <IntlProvider locale="en">
+        <CompareToolsView />
+      </IntlProvider>,
+    );
+    const table = await screen.findByRole('table', { name: 'Compare tools' });
+    const thumbnail = table.querySelector('.navigator-tool-icon');
+
+    fireEvent.error(thumbnail.querySelector('img'));
+
+    expect(thumbnail.querySelector('img')).not.toBeInTheDocument();
+    expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
   });
 });

package/src/components/theme/CompareTools/utils.js

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useAtom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 import { applyConfigurationSchema, rebind } from '@eeacms/search';
@@ -9,6 +10,16 @@ export const MAX_COMPARE_TOOLS = 4;
 export const compareToolsAtom = atomWithStorage('cca-compare-tools', []);
 const searchAppName = 'navigatorCatalogueSearch';
 
+export const useHasMounted = () => {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  return hasMounted;
+};
+
 const getRawValue = (value) =>
   value?.raw !== undefined ? value.raw : value || '';
 
@@ -27,11 +38,14 @@ export const getPathname = (url) => {
 
 export const useCompareTools = (compareTool) => {
   const [selectedTools, setSelectedTools] = useAtom(compareToolsAtom);
-  const isSelected = selectedTools.some(
+  const hasMounted = useHasMounted();
+
+  const effectiveSelectedTools = hasMounted ? selectedTools : [];
+  const isSelected = effectiveSelectedTools.some(
     (tool) => tool.uid === compareTool?.uid,
   );
   const isLimitReached =
-    selectedTools.length >= MAX_COMPARE_TOOLS && !isSelected;
+    effectiveSelectedTools.length >= MAX_COMPARE_TOOLS && !isSelected;
 
   const setSelected = (selected) => {
     if (!compareTool?.uid) return;
@@ -57,15 +71,11 @@ export const useCompareTools = (compareTool) => {
     isLimitReached,
     setSelected,
     toggle: () => setSelected(!isSelected),
+    hasMounted,
   };
 };
 
-export const getCompareLocation = (
-  tools,
-  appConfig,
-  returnURL,
-  currentLang = 'en',
-) => {
+export const getCompareLocation = (tools, returnURL, currentLang = 'en') => {
   const params = new URLSearchParams();
 
   tools.slice(0, MAX_COMPARE_TOOLS).forEach((tool) => {
@@ -75,7 +85,7 @@ export const getCompareLocation = (
   });
 
   const query = params.toString();
-  const path = getComparePageURL(appConfig, currentLang);
+  const path = getComparePageURL(currentLang);
 
   return {
     pathname: path,

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

@@ -12,6 +12,7 @@ import {
   getCompareToolUid,
   getPathname,
   useCompareTools,
+  useHasMounted,
 } from './utils';
 
 jest.mock('@eeacms/search', () => ({
@@ -26,11 +27,12 @@ jest.mock('@plone/volto/helpers/Url/Url', () => ({
 }));
 
 const CompareHarness = ({ tool }) => {
-  const { isLimitReached, isSelected, setSelected, toggle } =
+  const { hasMounted, isLimitReached, isSelected, setSelected, toggle } =
     useCompareTools(tool);
 
   return (
     <>
+      <span data-testid="mounted">{String(hasMounted)}</span>
       <span data-testid="selected">{String(isSelected)}</span>
       <span data-testid="limit">{String(isLimitReached)}</span>
       <button type="button" onClick={toggle}>
@@ -95,19 +97,14 @@ describe('Compare Tools utilities', () => {
     ];
 
     expect(
-      getCompareLocation(
-        tools,
-        { landingPageURL: '/en/navigator/tool-catalogue' },
-        '/en/navigator/tool-catalogue?q=test',
-        'ro',
-      ),
+      getCompareLocation(tools, '/en/navigator/tool-catalogue?q=test', 'ro'),
     ).toEqual({
       pathname: '/ro/navigator/compare',
       search: '?uid=one&uid=two&uid=three',
       state: { returnURL: '/en/navigator/tool-catalogue?q=test' },
     });
     expect(MAX_COMPARE_TOOLS).toBe(4);
-    expect(getCompareLocation([], {}, undefined)).toEqual({
+    expect(getCompareLocation([])).toEqual({
       pathname: '/en/navigator/compare',
       search: '',
       state: { returnURL: undefined },
@@ -214,4 +211,20 @@ describe('Compare Tools utilities', () => {
     fireEvent.click(screen.getByText('Select'));
     expect(screen.getByTestId('selected')).toHaveTextContent('false');
   });
+
+  it('exposes hasMounted state to safely coordinate client hydration', () => {
+    renderCompareHarness({ uid: 'one', title: 'Tool one' });
+
+    expect(screen.getByTestId('mounted')).toHaveTextContent('true');
+  });
+
+  it('tracks mounting status with useHasMounted', () => {
+    const MountedComponent = () => {
+      const mounted = useHasMounted();
+      return <div data-testid="mounted-flag">{String(mounted)}</div>;
+    };
+
+    render(<MountedComponent />);
+    expect(screen.getByTestId('mounted-flag')).toHaveTextContent('true');
+  });
 });

package/src/components/theme/ToolThumbnail/ToolThumbnail.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import { Icon } from 'semantic-ui-react';
+import Image from '@plone/volto/components/theme/Image/Image';
+import { getToolThumbnailUrl } from './utils';
+
+const ToolThumbnail = ({
+  result,
+  size = 'medium',
+  fallbackIcon = 'ri-file-line',
+}) => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [hasImageError, setHasImageError] = useState(false);
+  const thumbUrl = getToolThumbnailUrl(result);
+
+  useEffect(() => {
+    setImageLoaded(false);
+    setHasImageError(false);
+  }, [thumbUrl]);
+
+  return (
+    <div className={`navigator-tool-icon ${size}`} aria-hidden="true">
+      {thumbUrl && !hasImageError ? (
+        <>
+          <Image
+            src={thumbUrl}
+            alt=""
+            style={imageLoaded ? undefined : { display: 'none' }}
+            onLoad={() => setImageLoaded(true)}
+            onError={() => setHasImageError(true)}
+          />
+          {!imageLoaded && <Icon className={fallbackIcon} />}
+        </>
+      ) : (
+        <Icon className={fallbackIcon} />
+      )}
+    </div>
+  );
+};
+
+export default ToolThumbnail;

package/src/components/theme/ToolThumbnail/ToolThumbnail.test.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import ToolThumbnail from './ToolThumbnail';
+
+describe('ToolThumbnail', () => {
+  it.each(['load', 'error'])(
+    'resets the %s state when the thumbnail URL changes',
+    (event) => {
+      const { container, rerender } = render(
+        <ToolThumbnail result={{ image: '/first.jpg' }} />,
+      );
+      fireEvent[event](container.querySelector('img'));
+
+      rerender(<ToolThumbnail result={{ image: '/second.jpg' }} />);
+
+      const img = container.querySelector('img');
+      expect(img).toHaveAttribute('src', '/second.jpg');
+      expect(img).toHaveAttribute('alt', '');
+      expect(img).toHaveStyle({ display: 'none' });
+      expect(container.querySelector('.ri-file-line')).toBeInTheDocument();
+
+      fireEvent.load(img);
+
+      expect(img.style.display).toBe('');
+      expect(container.querySelector('.ri-file-line')).not.toBeInTheDocument();
+    },
+  );
+});

package/src/components/theme/ToolThumbnail/utils.js

@@ -0,0 +1,49 @@
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+
+export function getToolThumbnailUrl(result) {
+  if (!result) return null;
+
+  if (result.image === null || result.image === false) {
+    return null;
+  }
+
+  if (typeof result.image === 'string' && result.image) {
+    return flattenToAppURL(result.image);
+  }
+  if (result.image && typeof result.image === 'object') {
+    const scaleUrl =
+      result.image.scales?.thumb?.download ||
+      result.image.scales?.tile?.download ||
+      result.image.scales?.preview?.download ||
+      result.image.scales?.mini?.download ||
+      result.image.download;
+    if (scaleUrl) {
+      return flattenToAppURL(scaleUrl);
+    }
+  }
+
+  if (
+    typeof result.thumbUrl === 'string' &&
+    result.thumbUrl &&
+    !result.thumbUrl.includes('portal_depiction')
+  ) {
+    return flattenToAppURL(result.thumbUrl);
+  }
+
+  if (
+    result.image_preview &&
+    typeof result.image_preview.raw === 'string' &&
+    result.image_preview.raw
+  ) {
+    return flattenToAppURL(result.image_preview.raw);
+  }
+
+  const href =
+    result.href || result['@id'] || result.about?.raw || result.about;
+  if (href && typeof href === 'string') {
+    const cleanHref = flattenToAppURL(href).replace(/\/+$/, '');
+    return `${cleanHref}/@@images/image/thumb`;
+  }
+
+  return null;
+}

package/src/components/theme/ToolThumbnail/utils.test.js

@@ -0,0 +1,124 @@
+import { getToolThumbnailUrl } from './utils';
+
+describe('getToolThumbnailUrl', () => {
+  it.each([null, false])(
+    'does not resolve other URLs when image is %s',
+    (image) => {
+      expect(
+        getToolThumbnailUrl({
+          image,
+          thumbUrl: '/thumb.jpg',
+          image_preview: { raw: '/preview.jpg' },
+          href: '/tools/tool',
+        }),
+      ).toBeNull();
+    },
+  );
+
+  it.each(['thumb', 'tile', 'preview', 'mini'])(
+    'prefers the %s scale to the original download',
+    (scale) => {
+      expect(
+        getToolThumbnailUrl({
+          image: {
+            scales: { [scale]: { download: '/scaled.jpg' } },
+            download: '/original.jpg',
+          },
+          thumbUrl: '/thumb.jpg',
+        }),
+      ).toBe('/scaled.jpg');
+    },
+  );
+
+  it('uses the raw image preview before constructing a traversal URL', () => {
+    expect(
+      getToolThumbnailUrl({
+        thumbUrl: '/portal_depiction/tool/image_preview',
+        image_preview: { raw: '/preview.jpg' },
+        href: '/tools/tool',
+      }),
+    ).toBe('/preview.jpg');
+  });
+
+  it('returns null for empty or invalid results', () => {
+    expect(getToolThumbnailUrl(null)).toBeNull();
+    expect(getToolThumbnailUrl(undefined)).toBeNull();
+    expect(getToolThumbnailUrl({})).toBeNull();
+    expect(getToolThumbnailUrl({ image: null })).toBeNull();
+    expect(getToolThumbnailUrl({ image: false })).toBeNull();
+  });
+
+  it('resolves direct image string URL', () => {
+    expect(
+      getToolThumbnailUrl({ image: '/metadata/tools/tool/image.png' }),
+    ).toBe('/metadata/tools/tool/image.png');
+  });
+
+  it('resolves image scales from Dexterity image field', () => {
+    expect(
+      getToolThumbnailUrl({
+        image: {
+          scales: {
+            thumb: { download: '/image-128.jpeg' },
+            tile: { download: '/image-64.jpeg' },
+          },
+        },
+      }),
+    ).toBe('/image-128.jpeg');
+
+    expect(
+      getToolThumbnailUrl({
+        image: {
+          scales: {
+            tile: { download: '/image-64.jpeg' },
+          },
+        },
+      }),
+    ).toBe('/image-64.jpeg');
+
+    expect(
+      getToolThumbnailUrl({
+        image: {
+          download: '/image-original.jpeg',
+        },
+      }),
+    ).toBe('/image-original.jpeg');
+  });
+
+  it('resolves thumbUrl when not portal_depiction fallback', () => {
+    expect(
+      getToolThumbnailUrl({
+        thumbUrl: '/custom-thumb.jpg',
+      }),
+    ).toBe('/custom-thumb.jpg');
+
+    // portal_depiction is ignored, falls back to href scale
+    expect(
+      getToolThumbnailUrl({
+        thumbUrl:
+          'https://www.eea.europa.eu/portal_depiction/tool/image_preview',
+        href: '/tools/sample-tool',
+      }),
+    ).toBe('/tools/sample-tool/@@images/image/thumb');
+  });
+
+  it('constructs scale traversal URL from href, @id, or about', () => {
+    expect(
+      getToolThumbnailUrl({
+        href: '/tools/sample-tool/',
+      }),
+    ).toBe('/tools/sample-tool/@@images/image/thumb');
+
+    expect(
+      getToolThumbnailUrl({
+        '@id': '/tools/sample-tool',
+      }),
+    ).toBe('/tools/sample-tool/@@images/image/thumb');
+
+    expect(
+      getToolThumbnailUrl({
+        about: { raw: '/tools/sample-tool' },
+      }),
+    ).toBe('/tools/sample-tool/@@images/image/thumb');
+  });
+});

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

@@ -1,5 +1,7 @@
 import { useEffect } from 'react';
 import { Button, Container, Grid, Icon, Segment } from 'semantic-ui-react';
+import { useHistory } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import {
   CompareToolsPanel,
   ExtendedToolGeographicMetadata,
@@ -12,6 +14,8 @@ import { FormattedMessage } from 'react-intl';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import useClipboard from '@plone/volto/hooks/clipboard/useClipboard';
 import { useCompareTools } from '../CompareTools/utils';
+import { getToolThumbnailUrl } from '../ToolThumbnail/utils';
+import { getNavigatorCataloguePageURL } from '../../Search/NavigatorCatalogue/utils';
 import RelatedTools from './RelatedTools';
 
 const ExtendedToolView = (props) => {
@@ -55,11 +59,14 @@ const ExtendedToolView = (props) => {
   const hasGeoChars = Boolean(geochars || spatial_layer?.length);
   const hasHyperlink = Boolean(hyperlink && hyperlink.length > 0);
   const hasCompareTool = Boolean(content.UID);
+  const history = useHistory();
+  const currentLang = useSelector((state) => state.intl.locale);
 
   const compareTool = {
     uid: content.UID,
     title,
     href: content['@id'],
+    image: getToolThumbnailUrl(content),
   };
 
   const { isSelected, isLimitReached, toggle } = useCompareTools(compareTool);
@@ -75,6 +82,10 @@ const ExtendedToolView = (props) => {
     return () => clearTimeout(timeout);
   }, [isLinkCopied, setIsLinkCopied]);
 
+  const checkNavigatorCatalogue = () => {
+    history.push(getNavigatorCataloguePageURL(currentLang));
+  };
+
   return (
     <div className="extended-tool-view">
       <BodyClass className="extended-tool" />
@@ -226,6 +237,17 @@ const ExtendedToolView = (props) => {
               className="col-right"
             >
               <Segment className="metadata">
+                <Button
+                  className="primary inverted"
+                  onClick={checkNavigatorCatalogue}
+                >
+                  <Icon className="ri-arrow-left-line" />
+                  <FormattedMessage
+                    id="Check Navigator Catalogue"
+                    defaultMessage="Check Navigator Catalogue"
+                  />
+                </Button>
+
                 <h4 className="metadata-header">Metadata</h4>
 
                 {intended_user_groups?.length > 0 && (