@eeacms/volto-cca-policy 1.0.16 → 1.0.18

package/CHANGELOG.md

@@ -4,6 +4,29 @@ 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.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
+
+- feat(navigator):  add back to search link on tool view; code refactoring & cleanup - refs #304608 [kreafox - [`b80edc4`](https://github.com/eea/volto-cca-policy/commit/b80edc476f073a4023a06759765cb1ed1da874eb)]
+- feat: add MetadataTags component to display tool output types - refs #304612 [kreafox - [`da36a73`](https://github.com/eea/volto-cca-policy/commit/da36a7340da0d36a807b619e1da57d246b11b07d)]
+
+#### :nail_care: Enhancements
+
+- change: remove sectors from CompareToolsView - refs #304612 [kreafox - [`9b9352f`](https://github.com/eea/volto-cca-policy/commit/9b9352fa116a951ceef64511bc7c75779a7f0ec4)]
+
+#### :hammer_and_wrench: Others
+
+- test: remove sectors from CompareToolsView accessibility tests [kreafox - [`b3df4e2`](https://github.com/eea/volto-cca-policy/commit/b3df4e21aa79c6d9c726ad498fee2ce9af7f17a0)]
 ### [1.0.16](https://github.com/eea/volto-cca-policy/compare/1.0.15...1.0.16) - 4 September 2026
 
 ### [1.0.15](https://github.com/eea/volto-cca-policy/compare/1.0.14...1.0.15) - 4 September 2026

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "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/NavigatorCatalogueContentView.jsx

@@ -158,7 +158,7 @@ const NavigatorCatalogueContentView = (props) => {
         {children.length === 0 && !isLoading && wasSearched && <NoResults />}
 
         <ResultViewComponent>{children}</ResultViewComponent>
-        <CompareToolsPanel appConfig={appConfig} />
+        <CompareToolsPanel />
 
         {children.length > 0 && activeNavigatorViewId !== 'map' && (
           <div className="search-body-footer">

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

@@ -97,19 +97,16 @@ export const downloadCsv = (filename, rows) => {
   URL.revokeObjectURL(url);
 };
 
-export const getLocalizedLandingPageURL = (appConfig, currentLang = 'en') => {
+export const getNavigatorCataloguePageURL = (currentLang = 'en') => {
   const lang = currentLang || 'en';
-  const landingPageURL =
-    appConfig?.landingPageURL || '/en/navigator/tool-catalogue';
 
-  return landingPageURL.replace(/^\/en(?=\/|$)/, `/${lang}`);
+  return `/${lang}/navigator/tool-catalogue`;
 };
 
-export const getComparePageURL = (appConfig, currentLang = 'en') => {
+export const getComparePageURL = (currentLang = 'en') => {
   const lang = currentLang || 'en';
-  const comparePageURL = appConfig?.comparePageURL || '/en/navigator/compare';
 
-  return comparePageURL.replace(/^\/en(?=\/|$)/, `/${lang}`);
+  return `/${lang}/navigator/compare`;
 };
 
 export const exportComparisonTable = (tools, getToolField) => {

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

@@ -6,7 +6,7 @@ import {
   exportComparisonTable,
   formatFunctionalityScore,
   getComparePageURL,
-  getLocalizedLandingPageURL,
+  getNavigatorCataloguePageURL,
   rawValueAsArray,
 } from './utils';
 
@@ -86,27 +86,16 @@ describe('Navigator Catalogue utilities', () => {
     expect(revokeObjectURL).toHaveBeenCalledWith('blob:test');
   });
 
-  it('localizes catalogue and comparison URLs', () => {
-    expect(getLocalizedLandingPageURL(undefined)).toBe(
-      '/en/navigator/tool-catalogue',
-    );
-    expect(
-      getLocalizedLandingPageURL({ landingPageURL: '/en/tools' }, 'fr'),
-    ).toBe('/fr/tools');
-    expect(getLocalizedLandingPageURL({ landingPageURL: '/tools' }, '')).toBe(
-      '/tools',
-    );
-    expect(
-      getComparePageURL({ comparePageURL: '/en/tools/compare' }, 'de'),
-    ).toBe('/de/tools/compare');
-    expect(
-      getComparePageURL(
-        { landingPageURL: '/en/navigator/tool-catalogue' },
-        'de',
-      ),
-    ).toBe('/de/navigator/compare');
-    expect(getComparePageURL()).toBe('/en/navigator/compare');
-  });
+  it.each([undefined, '', 'en', 'fr', 'de'])(
+    'builds catalogue and comparison URLs for locale %s',
+    (locale) => {
+      const lang = locale || 'en';
+      expect(getNavigatorCataloguePageURL(locale)).toBe(
+        `/${lang}/navigator/tool-catalogue`,
+      );
+      expect(getComparePageURL(locale)).toBe(`/${lang}/navigator/compare`);
+    },
+  );
 
   it('exports every comparison criterion', () => {
     const tools = [

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

@@ -6,10 +6,12 @@ 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';
 import useGuideFacetOptions from './useGuideFacetOptions';
+import { getNavigatorCataloguePageURL } from '../../Search/NavigatorCatalogue/utils';
 
 const messages = defineMessages({
   noSteps: {
@@ -177,9 +179,7 @@ const NavigatorGuideContentView = ({ appConfig }) => {
       allowedFields.has(field),
     );
     const query = new URLManager().stateToUrl({ filters: resultFilters });
-    const pathname = (
-      appConfig.resultsPageURL || '/en/navigator/tool-catalogue'
-    ).replace(/^\/en(?=\/|$)/, `/${currentLang}`);
+    const pathname = getNavigatorCataloguePageURL(currentLang);
 
     history.push({ pathname, search: query ? `?${query}` : '' });
   };
@@ -351,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,10 +4,12 @@ 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,
   getCompareLocation,
+  useHasMounted,
 } from './utils';
 
 const messages = defineMessages({
@@ -41,19 +43,21 @@ const messages = defineMessages({
   },
 });
 
-export const CompareToolsPanel = ({ appConfig: suppliedAppConfig }) => {
+export const CompareToolsPanel = () => {
   const intl = useIntl();
   const history = useHistory();
   const currentLang = useSelector((state) => state.intl.locale);
-  const appConfig = suppliedAppConfig || {
-    landingPageURL: '/en/navigator/tool-catalogue',
-  };
   const [selectedTools, setSelectedTools] = useAtom(compareToolsAtom);
-  const resolvableSelectedTools = selectedTools.filter((tool) => tool.uid);
+  const hasMounted = useHasMounted();
+
+  const effectiveSelectedTools = hasMounted ? selectedTools : [];
+  const resolvableSelectedTools = effectiveSelectedTools.filter(
+    (tool) => tool.uid,
+  );
   const isReadyToCompare = resolvableSelectedTools.length >= 2;
-  const emptySlots = MAX_COMPARE_TOOLS - selectedTools.length;
+  const emptySlots = MAX_COMPARE_TOOLS - effectiveSelectedTools.length;
 
-  if (selectedTools.length === 0) return null;
+  if (!hasMounted || effectiveSelectedTools.length === 0) return null;
 
   const removeTool = (toolUid) => {
     setSelectedTools((tools) => tools.filter((tool) => tool.uid !== toolUid));
@@ -67,7 +71,7 @@ export const CompareToolsPanel = ({ appConfig: suppliedAppConfig }) => {
     ].join('');
 
     history.push(
-      getCompareLocation(selectedTools, appConfig, returnURL, currentLang),
+      getCompareLocation(effectiveSelectedTools, returnURL, currentLang),
     );
   };
 
@@ -77,18 +81,16 @@ export const CompareToolsPanel = ({ appConfig: suppliedAppConfig }) => {
         <h2>
           {intl.formatMessage(messages.compareTools)}
           <span className="compare-panel-count">
-            {selectedTools.length}/{MAX_COMPARE_TOOLS}
+            {effectiveSelectedTools.length}/{MAX_COMPARE_TOOLS}
           </span>
         </h2>
       </div>
 
       <div className="compare-panel-content">
         <div className="compare-panel-tools">
-          {selectedTools.map((tool) => (
+          {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

@@ -3,12 +3,13 @@ import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { Provider as JotaiProvider } from 'jotai';
+import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { CompareToolsPanel } from './CompareToolsPanel';
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
-  useSelector: (selector) => selector({ intl: { locale: 'en' } }),
+  useSelector: jest.fn(),
 }));
 
 jest.mock('react-router-dom', () => ({
@@ -16,7 +17,7 @@ jest.mock('react-router-dom', () => ({
   useHistory: jest.fn(),
 }));
 
-const renderPanel = (selectedTools, appConfig) => {
+const renderPanel = (selectedTools) => {
   window.localStorage.setItem(
     'cca-compare-tools',
     JSON.stringify(selectedTools),
@@ -25,7 +26,7 @@ const renderPanel = (selectedTools, appConfig) => {
   return render(
     <IntlProvider locale="en">
       <JotaiProvider>
-        <CompareToolsPanel appConfig={appConfig} />
+        <CompareToolsPanel />
       </JotaiProvider>
     </IntlProvider>,
   );
@@ -38,6 +39,8 @@ describe('CompareToolsPanel', () => {
     jest.clearAllMocks();
     window.localStorage.clear();
     useHistory.mockReturnValue({ push });
+    useSelector.mockReturnValue('en');
+    window.history.replaceState({}, '', '/');
   });
 
   it('does not render without selected tools', () => {
@@ -61,14 +64,17 @@ describe('CompareToolsPanel', () => {
     expect(screen.queryByText('Compare tools')).not.toBeInTheDocument();
   });
 
-  it('shows the ready state and opens the comparison page', () => {
-    renderPanel(
-      [
-        { uid: 'one', title: 'Tool one' },
-        { uid: 'two', title: 'Tool two' },
-      ],
-      { landingPageURL: '/en/navigator/tool-catalogue' },
+  it.each(['en', 'fr'])('opens the comparison page in %s', (locale) => {
+    useSelector.mockReturnValue(locale);
+    window.history.replaceState(
+      {},
+      '',
+      `/${locale}/navigator/tool-catalogue?q=water#results`,
     );
+    renderPanel([
+      { uid: 'one', title: 'Tool one' },
+      { uid: 'two', title: 'Tool two' },
+    ]);
 
     expect(screen.getByText('Ready to compare')).toHaveClass(
       'compare-panel-status',
@@ -78,9 +84,11 @@ describe('CompareToolsPanel', () => {
     fireEvent.click(screen.getByText('Compare selected tools'));
 
     expect(push).toHaveBeenCalledWith({
-      pathname: '/en/navigator/compare',
+      pathname: `/${locale}/navigator/compare`,
       search: '?uid=one&uid=two',
-      state: { returnURL: '/' },
+      state: {
+        returnURL: `/${locale}/navigator/tool-catalogue?q=water#results`,
+      },
     });
   });
 
@@ -93,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();
+  });
 });